/* ============================================================================
   ARCHFLAIRE — BRAND GUIDELINE  (single source of truth, site-wide)
   ----------------------------------------------------------------------------
   Loaded after the Prague theme stylesheets so brand rules win.
   Aesthetic: premium, monochrome, editorial / architectural.

   1. Design tokens (CSS variables)
   2. Type families
   3. Type scale (headings, body, labels)
   4. Footer
   5. Buttons / links accents
   Icons (FontAwesome / et-line) are intentionally never overridden.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1 · DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand palette — strict monochrome */
    --af-ink:        #0A0A0A;   /* primary text / black surfaces      */
    --af-paper:      #FFFFFF;   /* primary background                 */
    --af-grey-700:   #4A4A4A;   /* body copy on light                 */
    --af-grey-500:   #6A6A6A;   /* secondary copy                     */
    --af-grey-400:   #8A8A8A;   /* labels / captions                  */
    --af-grey-300:   #B5B5B5;   /* muted on dark                      */
    --af-line:       #E5E5E5;   /* hairline divider (light)           */
    --af-line-dark:  #2A2A2A;   /* hairline divider (dark)            */

    /* Type families */
    --af-font-display: 'Cormorant Garamond', Georgia, serif;
    --af-font-body:    'Archivo', system-ui, sans-serif;
    --af-font-mono:    'Space Mono', ui-monospace, monospace;

    /* Fluid type scale (min → max) */
    --af-fs-display:  clamp(54px, 7.2vw, 116px);  /* hero                */
    --af-fs-h1:       clamp(40px, 4.6vw, 76px);   /* page / section lead */
    --af-fs-h2:       clamp(32px, 3.4vw, 56px);
    --af-fs-h3:       clamp(26px, 2.6vw, 42px);
    --af-fs-h4:       clamp(20px, 1.6vw, 26px);
    --af-fs-body:     17px;
    --af-fs-small:    15px;
    --af-fs-eyebrow:  12px;

    /* Letter-spacing */
    --af-track-tight: -0.01em;   /* display serif      */
    --af-track-label: 0.26em;    /* mono eyebrows      */
}

/* ----------------------------------------------------------------------------
   2 · TYPE FAMILIES  (icons excluded — no broad span/i selectors)
   -------------------------------------------------------------------------- */
body,
p, li, blockquote, input, textarea, select, button,
.description, .description p,
.project-list-excerpt, .project-list-excerpt p,
.testimonials-description, .testimonials-description p,
.services-item-description, .services-item-description p,
.footer-main-content p, .footer-info-block-content,
.menu ul li a, nav a, .a-btn, .a-btn-2, .prague-services-link {
    font-family: var(--af-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.title, .heading .title,
.parent-title, .project-list-title, .project-list-title a,
.services-item-title, .testimonials-author,
.footer-info-block-title {
    font-family: var(--af-font-display) !important;
    letter-spacing: var(--af-track-tight);
}

.subtitle, .parent-subtitle {
    font-family: var(--af-font-mono) !important;
}
.subtitle, .parent-subtitle {
    letter-spacing: var(--af-track-label);
}

/* ----------------------------------------------------------------------------
   3 · TYPE SCALE  (sizing for theme pages — home uses its own scoped styles)
   -------------------------------------------------------------------------- */
.heading .title, .parent-title {
    font-weight: 400;
    line-height: 1.08;
}
.heading.left .subtitle, .parent-subtitle {
    font-size: var(--af-fs-eyebrow);
    color: var(--af-grey-400);
}
.description p, .content p {
    font-size: var(--af-fs-body);
    line-height: 1.8;
    color: var(--af-grey-700);
}
.project-list-title, .services-item-title {
    font-weight: 500;
}
.project-list-excerpt p, .services-item-description p {
    font-size: var(--af-fs-small);
    line-height: 1.7;
    color: var(--af-grey-500);
}

/* ----------------------------------------------------------------------------
   4 · FOOTER  (larger, legible, on-brand)
   -------------------------------------------------------------------------- */
.prague-footer .footer-main-content p {
    font-size: 19px;
    line-height: 1.85;
    color: #EDEDED !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.prague-footer .footer-info-block-title {
    font-size: 17px;
    letter-spacing: 0.24em;
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.prague-footer .footer-info-block-content p,
.prague-footer .footer-info-block-content a,
.prague-footer .footer-info-block-content strong {
    font-size: 18px;
    line-height: 1.95;
    color: #F4F4F4 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}
.prague-footer .footer-info-block-content strong,
.prague-footer .footer-info-block-content a { color: #ffffff !important; }
.prague-footer .footer-copyright p {
    font-size: 16px;
    letter-spacing: 0.04em;
    color: #E0E0E0 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

@media (max-width: 991px) {
    .prague-footer .footer-main-content p,
    .prague-footer .footer-info-block-content p,
    .prague-footer .footer-info-block-content a { font-size: 17px; }
    .prague-footer .footer-copyright p { font-size: 15px; }
}

/* ----------------------------------------------------------------------------
   5 · NAV + BRAND WORDMARK
   ----------------------------------------------------------------------------
   The logo is now a pure-CSS text wordmark (no image): ARCH in semibold +
   FLAIRE in light, wide-tracked uppercase. White over the hero and on the
   theme's dark scrolled bar; ink-black on the white footer-less light pages.
   -------------------------------------------------------------------------- */
.af-wordmark {
    display: inline-flex;
    align-items: baseline;
    line-height: 1;
    color: #fff;
    text-decoration: none !important;
    font-family: var(--af-font-body) !important;
    white-space: nowrap;
    transition: opacity .3s ease;
}
.af-wordmark:hover { opacity: .82; }
.af-wordmark-arch,
.af-wordmark-flaire {
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 0.30em;
}
.af-wordmark-arch   { font-weight: 600; }
.af-wordmark-flaire { font-weight: 300; padding-right: 0.30em; }  /* balance trailing track */

/* Footer sits on a dark image banner → keep the wordmark white & a touch larger */
.prague-footer .af-wordmark--footer {
    margin-bottom: 22px;
}
.prague-footer .af-wordmark--footer .af-wordmark-arch,
.prague-footer .af-wordmark--footer .af-wordmark-flaire {
    font-size: 30px;
    color: #fff;
}

/* ---- Elegant primary navigation -------------------------------------------
   Refined tracking, an animated hairline underline on hover/active, and a
   calmer dropdown. Scoped to the desktop header menu so the theme's mobile
   off-canvas menu keeps its own behaviour. */
.prague-header nav .main-menu > li > a {
    position: relative;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.10em;
    color: rgba(255, 255, 255, .72);
    transition: color .3s ease;
}
.prague-header nav .main-menu > li:hover > a,
.prague-header nav .main-menu > li.is-active > a {
    color: #fff;
}
.prague-header nav .main-menu > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width .35s cubic-bezier(.22, .61, .36, 1);
}
.prague-header nav .main-menu > li:hover > a::after,
.prague-header nav .main-menu > li.is-active > a::after {
    width: 100%;
}
/* Active item reads slightly stronger than the rest */
.prague-header nav .main-menu > li.is-active > a {
    font-weight: 500;
}

/* Dropdown (About) — hairline framed, soft shadow, brand spacing.
   The theme's base rule paints sub-menu links white (its dark-text override is
   media-query scoped and doesn't fire on desktop), so force ink-on-white here. */
.prague-header .main-menu .sub-menu {
    border: 1px solid var(--af-line);
    box-shadow: 0 20px 44px rgba(10, 10, 10, .12);
    padding: 8px 0;
    background-color: #fff !important;
    opacity: 1;
}
.prague-header .main-menu .sub-menu li a {
    font-size: 13px;
    letter-spacing: 0.06em;
    padding: 9px 22px;
    color: var(--af-ink) !important;
    opacity: 1 !important;
    transition: background .25s ease, color .25s ease;
}
.prague-header .main-menu .sub-menu li:hover > a,
.prague-header .main-menu .sub-menu li a:hover {
    background: var(--af-ink);
    color: #fff !important;
}

/* Cart icon — align it visually with the refined menu type */
.prague-header .cart-icon { font-size: 17px; }
.prague-header .cart-count {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background-color: var(--af-ink);
    border: 1px solid rgba(255, 255, 255, .85);
    font-family: var(--af-font-mono);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    top: -7px;
    right: -9px;
}
/* Breathing room between the cart and the social rail toggle */
.prague-header .prague-social-nav { margin-left: 22px; }

/* ----------------------------------------------------------------------------
   6 · SERVICE CARD GRID  (equal-height cards, site-wide)
   ----------------------------------------------------------------------------
   Overrides the theme's isotope absolute grid with a flex row so all cards in
   a row share the tallest card's height and the CTA buttons align at the foot.
   Applies anywhere `.prague_services` is used (About, Consultation, etc.).
   -------------------------------------------------------------------------- */
.prague_services {
    display: flex !important;
    flex-wrap: wrap;
    height: auto !important;
    transform: none !important;
}
.prague_services .portfolio-item-wrapp {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 33.333%;
    box-sizing: border-box;
    display: flex;
}
.prague_services .portfolio-item {
    width: 100%;
    display: flex;
}
.prague_services .prague-services-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}
.prague_services .services-item-description {
    flex: 1 1 auto;       /* push the CTA to the bottom edge */
}
@media (max-width: 991px) {
    .prague_services .portfolio-item-wrapp { width: 50%; }
}
@media (max-width: 767px) {
    .prague_services .portfolio-item-wrapp { width: 100%; }
}

/* ----------------------------------------------------------------------------
   7 · MOBILE RESPONSIVENESS  (site-wide refinements)
   ----------------------------------------------------------------------------
   Tightens type, spacing, logos, banners and the footer on small screens.
   Theme/Bootstrap already handles the grid & hamburger menu; this layers brand
   polish on top so every page reads well on phones and tablets.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    img, .s-img-switch { max-width: 100%; height: auto; }

    /* Wordmark sized down for the compact header/footer */
    .af-wordmark-arch,
    .af-wordmark-flaire { font-size: 21px; letter-spacing: 0.26em; }
    .prague-footer .af-wordmark--footer .af-wordmark-arch,
    .prague-footer .af-wordmark--footer .af-wordmark-flaire { font-size: 24px; }

    /* Banner / section headings scale to viewport so they never overflow */
    .top-banner .title,
    .heading .title,
    .parent-title {
        font-size: clamp(30px, 7vw, 54px) !important;
        line-height: 1.1;
    }
    .top-banner .description p { font-size: 16px; }

    /* Trim oversized theme spacing utilities */
    .margin-lg-140t { margin-top: 70px !important; }
    .margin-lg-70b  { margin-bottom: 40px !important; }
}

@media (max-width: 767px) {
    /* Full-bleed banners: comfortable side padding for centred copy */
    .top-banner .content { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }

    /* Footer: stack and left-align (theme right-aligns the contact column) */
    .prague-footer .footer-top-content,
    .prague-footer .footer-bottom-content { display: block; }
    .prague-footer .prague-footer-info-block,
    .prague-footer .footer-info-block-content,
    .prague-footer .footer-info-block-content p,
    .prague-footer .footer-info-block-content a,
    .prague-footer .footer-info-block-title { text-align: left !important; }
    .prague-footer .prague-footer-info-block { margin-top: 36px; }
    .prague-footer .footer-copyright { margin-bottom: 20px; }
    .prague-footer .footer-bottom-content .prague-social-nav { justify-content: flex-start; }
    .prague-footer .footer-bottom-content .social-content { padding-left: 0; }

    /* Headline lead text never runs edge-to-edge */
    .heading .title, .parent-title { max-width: 100%; }

    /* Services list (home + projects): centre each stacked card instead of the
       theme's alternating left/right copy, which reads lopsided on phones.
       Zero the asymmetric outer padding + negative margins so image and text
       share one centred column. */
    .prague_list .project-list-item:nth-child(odd) .project-list-outer,
    .prague_list .project-list-item:nth-child(even) .project-list-outer {
        padding-left: 0;
        padding-right: 0;
    }
    .prague_list .project-list-item .project-list-outer .project-list-wrapper .project-list-content,
    .prague_list .project-list-item:nth-child(odd) .project-list-outer .project-list-wrapper .project-list-content,
    .prague_list .project-list-item:nth-child(even) .project-list-outer .project-list-wrapper .project-list-content {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .af-wordmark-arch,
    .af-wordmark-flaire { font-size: 18px; letter-spacing: 0.22em; }
    .top-banner .title,
    .heading .title,
    .parent-title { font-size: clamp(26px, 8vw, 40px) !important; }
}

/* ----------------------------------------------------------------------------
   8 · ELEGANT FOOTER  (3-column grid + social — layered on the theme markup)
   -------------------------------------------------------------------------- */
.prague-footer .footer-content-outer {
    position: relative;
    z-index: 100;
}
/* Dark scrim over the banner image (img z-index:90, content z-index:100) so the
   text stays legible over the lighter, foggy parts of the photo. */
.prague-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(8, 8, 8, .72) 0%, rgba(8, 8, 8, .88) 100%);
}

/* Three aligned columns: brand blurb | contact | follow.
   Overrides the theme's 2-block flex layout. */
.prague-footer .af-footer-grid {
    display: grid !important;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.prague-footer .af-footer-grid > .af-footer-col {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
.prague-footer .af-footer-col .footer-main-content { max-width: 420px; }

/* Eyebrow heading: tracked mono caps with a short brand rule beneath */
.prague-footer .footer-info-block-title {
    position: relative;
    font-family: var(--af-font-mono) !important;
    text-transform: uppercase;
    padding-bottom: 16px;
    margin-bottom: 22px;
    text-align: left !important;
}
.prague-footer .footer-info-block-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 1px;
    background: var(--af-grey-400);
}

/* Footer contact links: subtle underline reveal */
.prague-footer .footer-info-block-content a {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .35s ease, color .25s ease;
    padding-bottom: 1px;
}
.prague-footer .footer-info-block-content a:hover {
    background-size: 100% 1px;
}

/* FOLLOW column — circular hairline social buttons */
.prague-footer .af-footer-follow .prague-social-nav { position: static; }
.prague-footer .af-footer-follow .social-content {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 1;
    visibility: visible;
    position: static;
}
.prague-footer .af-footer-follow .social-content li { margin: 0; }
.prague-footer .af-footer-follow .social-content li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%;
    color: #EDEDED !important;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.prague-footer .af-footer-follow .social-content li a:hover {
    background: #fff;
    border-color: #fff;
    color: var(--af-ink);
    transform: translateY(-2px);
}

/* Bottom bar: hairline divider, copyright + back-to-top */
.prague-footer .af-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--af-line-dark);
    margin-top: 56px;
    padding-top: 28px;
}
.prague-footer .footer-copyright p {
    font-family: var(--af-font-mono) !important;
    text-transform: uppercase;
    color: #E0E0E0 !important;
    margin: 0;
}
.prague-footer .af-back-to-top {
    font-family: var(--af-font-mono) !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.18em;
    color: #D6D6D6 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .3s ease;
}
.prague-footer .af-back-to-top:hover { color: #fff; }

@media (max-width: 991px) {
    .prague-footer .af-footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .prague-footer .af-footer-grid > .prague-footer-main-block { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .prague-footer .af-footer-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .prague-footer .af-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-top: 36px;
        padding-top: 22px;
    }
}