/* ====================================
   AL HOMES FOOTER
   v4.0.11 - 2026-05-29 (P.Yuki)
     - FOOTER RE-ARRANGEMENT per latest Figma. Pure additive, layered
       overrides at the BOTTOM of this file — wala tayong binura, walang
       binagong existing rule. Companion to footer.php v4.3.0.
     - ZERO change to the newsletter form/engine CSS. .footer-newsletter
       and all .alhomes-* rules stay exactly as-is; only the PARENT
       column (.footer-left) flips to a row and uses flex `order` to put
       offices LEFT, newsletter RIGHT (no DOM move).
     - Changes (see the v4.0.11 ADDITIONS banner near the end):
         [1] .footer-topbrand — logo at the TOP of the footer.
         [2] .footer-left → full-width row; offices order:1 (left),
             newsletter order:2 (right). .footer-right (FAQ) hidden.
         [3] .footer-nav-row .footer-nav-group ul → max 3 items per
             column, the rest auto-wrap to a new sub-column.

   v4.0.10 - 2026-05-26 (P.Yuki)
     - LOADING ICON VISIBILITY SWAP. Pre-v4.0.10 the v3.2 .alhomes-arrow-icon
       was reused for both idle AND loading by spinning it during the request
       (animation: alhomes-newsletter-spin). Per Paul's footer review the
       Figma loading state actually shows a DEDICATED partial-arc progress
       icon (the 14×14 SVG), not a spinning forward-arrow. Companion to
       footer.php v4.2.1 which adds a second <svg class="alhomes-loading-icon">
       inside the submit button next to the existing arrow.
       Layered rules added at the bottom of this file:
         · .alhomes-loading-icon idle state → display: none, sized 12×12 to
           match the arrow footprint (the SVG itself is 14×14 viewBox; we
           let the SVG's intrinsic aspect ratio handle scaling at 12px box).
         · [data-state="loading"] .alhomes-arrow-icon  → display: none
         · [data-state="loading"] .alhomes-loading-icon → display: block +
           spin animation (reuses the existing @keyframes alhomes-newsletter-spin
           from v4.0 — wala tayong bagong keyframes na ginawa).
       The v4.0 rule that spins .alhomes-arrow-icon during loading stays in
       the file untouched — when loading, the arrow is display:none so the
       spin is invisible (harmless, kept for backwards reference). Pure
       additive change.

   v4.0.9 - 2026-05-22 (P.Yuki)
     - BOTTOM ROW BADGE ALIGNMENT. v3.2's .footer-social-row used
       `align-items: flex-start` which pinned the house badge icon
       on the right to the TOP of the row — same vertical level as
       the AL | HOMES wordmark. Per Figma export (`items-end`) and
       Paul's spec, the badge should drop to the BOTTOM of the row
       so it lines up with the Facebook/Instagram/LinkedIn social
       icons row at the bottom of .footer-brand-stack.
       Layered override → `align-items: flex-end`. v3.2's rule
       stays in the file untouched.

   v4.0.8 - 2026-05-22 (P.Yuki)
     - BACK to Figma side-by-side office layout per Paul's
       confirmation from the Figma export:
           NorCal Office          SoCal Office
           Cupertino, CA          Orange, CA
           (855) 254-6631         (855) 254-6636
       Two offices side-by-side (horizontal), each office stacks
       vertically with name on top, city in the middle, phone
       at the bottom.
     - Comment wrappers flipped from v4.0.7:
         · RE-ENABLED v4.0.6's `.footer-offices { flex-direction: row }`
         · RE-DISABLED v4.0.5's `.office-item { flex-direction: row }`
         · RE-DISABLED v4.1.2's `.office-details { white-space: normal }`
     - Companion to footer.php v4.1.5 which restores the <br>
       between city and phone.

   v4.0.7 - 2026-05-22 (P.Yuki)
     - [SUPERSEDED in v4.0.8] OFFICE ONE-LINER per Paul's Image 2 spec
     - OFFICE ONE-LINER per Paul's Image 2 spec. Each office now
       renders as a single horizontal line:
           NorCal Office  Cupertino, CA (855) 254-6631
           SoCal Office   Orange, CA (855) 254-6636
       Two offices still stack vertically (one office per row).
     - Achieved by:
         · DISABLING v4.0.6's `.footer-offices { flex-direction: row }`
           override (wrapped in a CSS comment) → v3.2's column
           default kicks back in
         · RE-ENABLING v4.0.5's `.office-item { flex-direction: row }`
           override → name + details sit inline per office
         · RE-ENABLING v4.1.2's `.office-details { white-space: normal }`
           helper → city + phone breathe with normal whitespace
     - All previous version blocks remain in the file as readable
       comments. Reverting to v4.0.6 = flip three comment wrappers.

   v4.0.6 - 2026-05-22 (P.Yuki)
     - [SUPERSEDED in v4.0.7] REVERTED to Figma side-by-side layout
     - OFFICE LAYOUT: REVERTED to Figma spec. The two offices now
       sit SIDE-BY-SIDE (NorCal left, SoCal right) via a new
       .footer-offices row override (was column in v3.2). Each
       office is again a vertical stack of:
           Name
           City, State
           Phone
       The v4.0.5 .office-item row override and v4.1.2
       .office-details white-space rule are DISABLED via CSS
       comments — preserved inline so they can be re-enabled if
       the design pivots back to the one-liner interpretation.
       footer.php v4.1.3 companion restores the <br> between
       city and phone.

   v4.0.5 - 2026-05-22 (P.Yuki)
     - OFFICE NAME + DETAILS ON ONE LINE. v3.2's .office-item was
       flex-direction: column which stacked the office label on
       top of the address/phone — visually that reads as a <br>
       between them. Layered override flips .office-item to
       flex-direction: row with align-items: baseline and
       flex-wrap: wrap so each office now renders as a single
       horizontal line:
           NorCal Office  Cupertino, CA (855) 254-6631
           SoCal Office   Orange, CA (855) 254-6636
       Two offices still stack vertically (.footer-offices stays
       column). v3.2 rules above remain in the file untouched —
       this is a cascade override, walang binawasan.

   v4.0.4 - 2026-05-22 (P.Yuki)
     - DIVIDER HARDENING. v3.2's .footer-divider used
       height: 0px + outline: 1px solid + outline-offset: -0.5px,
       which renders inconsistently in some browsers (the negative
       outline offset on a zero-height element is finicky on high-DPR
       displays and certain stacking contexts). Layered over with a
       deterministic 1px-tall element with solid background. v3.2's
       outline rule still sits in the file — just superseded by the
       cascade.
     - OFFICE ONE-LINER support. Companion to footer.php v4.1.2's
       removal of <br> between city and phone. Added small CSS
       safety net so .office-phone keeps a tiny inline gap from
       the city/state text.

   v4.0.3 - 2026-05-22 (P.Yuki)
     - SUCCESS STATE FIDELITY FIX. Pill border was incorrectly
       turning emerald in v4.0.2 (border-color: #10B981). Figma
       markup shows outline-400 (same gray as idle) on the pill
       itself — emerald is only on the inner check circle. Removed
       the green pill border + the max-width:440px override. The
       pill now stays at v3.2's width constraint and grows TALLER
       when the success message wraps (border-radius:50px caps at
       half-height so the pill shape is preserved). Bumped success
       text from 14px → 16px so it reads cleaner.

   v4.0.2 - 2026-05-22 (P.Yuki)
     - Resources 2-column sub-layout under one header (.footer-nav-resources-cols)
       matching the latest Figma screenshot. Sub-cols stack vertically
       at <=575px so phones don't end up with cramped 2-up text.
     - Footer FAQ answer padding-left 44px -> 52px so wrapped text
       aligns with the question text past "( 01 )" exactly.

   v4.0.1 - 2026-05-22 (P.Yuki)
     FOOTER FAQ ISOLATION FIX. The main /faqs/ page stylesheet
     (faq-section v2.3) targets .faq-item / .faq-question / .faq-answer
     / .faq-section-wrapper / .faq-items-container WITHOUT any wrapper
     scope. Those global rules were leaking into the footer accordion
     and breaking the layout — loudest offenders:
       • .faq-section-wrapper { margin: 80px auto; ... }
                                  ^^^^^^^^ 80px of phantom space inside
                                  the footer right column
       • .faq-items-container { align-items: center; gap: 28px; }
       • .faq-item { max-width: 867px; gap: 20px; animation: fadeIn; }
       • .faq-number { min-width: 58px; }
       • @media (max-width: 768px) {
           .faq-question-header { flex-direction: column; }
         }    ← stacks number above question on phones; bad in the
                compact footer accordion
     The v4.0 FAQ override block in this file SET new values for the
     footer but didn't UNSET the leaking ones (e.g. didn't reset the
     wrapper margin to 0). v4.0.1 explicitly resets every leaking
     property at the start of the footer FAQ section and adds a
     scoped mobile override so the question-header doesn't flip to
     column. Higher specificity (.site-footer .footer-faq-wrap .faq-*
     = 3 classes vs .faq-* = 1 class) guarantees this wins regardless
     of CSS load order. WALA TAYONG TINANGGAL sa faq-section.css mo.

   v4.0 - 2026-05-22 (P.Yuki)
     POSITION-ONLY update per Figma. Wala tayong binawasan from v3.2 —
     every existing rule is preserved verbatim below. The v4.0 section
     at the bottom of this file adds the new layout pieces:
       - Newsletter + Offices stacked in .footer-left (top row LEFT)
       - FAQ accordion in .footer-right (top row RIGHT)
       - New .footer-nav-row container for the 4-column nav across the
         full width (used to live INSIDE .footer-right in v3.2)
       - New .footer-brand-stack inside .footer-social-row to align
         the logo on top of the social icons (Figma layout)
       - Newsletter SUCCESS state + ERROR + lazy reCAPTCHA mount
       - FAQ item typography scoped under .footer-faq-wrap
       - Top-row column widths (Left ~500px, Right ~600px)
       - Updated responsive breakpoints for the new layout pieces

   v3.2 - Updated to match Figma exactly
   - Single row nav (Find Your Home, Services, Resources, Company)
   - Social + badge same row
   - Legal links: no separators, 16px, gap 30px
   - Circular social SVGs (#2A2A2A)
   Container: 1200px max-width
   ==================================== */

/* CSS Variables */
:root {
    --footer-bg: #EFEDEB;
    --footer-dark-text: #2A2A2A;
    --footer-light-text: #666666;
    --footer-primary: #5A4F42;
    --footer-border: #CCC8C0;
    --footer-icon: #2A2A2A;
    --footer-white: #FFFFFF;
    --footer-placeholder: #969696;
}

/* ====================================
   PHONE NUMBER AUTO-LINK FIX
   ==================================== */
.site-footer a[href^="tel"],
.site-footer a[x-apple-data-detectors],
.site-footer .office-phone,
.site-footer .office-details a {
    color: var(--footer-light-text) !important;
    text-decoration: none !important;
    pointer-events: none !important;
}

.office-phone {
    color: var(--footer-light-text) !important;
    text-decoration: none !important;
    font-style: normal !important;
}

/* ====================================
   FOOTER BASE
   ==================================== */

.site-footer {
    width: 100%;
    background: var(--footer-bg);
    padding: 80px 96px;
    box-sizing: border-box;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* ====================================
   FOOTER MAIN - Offices left, Nav right
   ==================================== */

.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* ====================================
   FOOTER LEFT COLUMN
   ==================================== */

.footer-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex-shrink: 0;
}

/* Logo */
.footer-logo {
    width: 193px;
    height: 40px;
    position: relative;
    overflow: hidden;
}

.footer-logo a {
    display: block;
    height: 100%;
}

.footer-logo img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

/* Office Locations */
.footer-offices {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.office-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.office-name {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--footer-dark-text);
    text-transform: capitalize;
}

.office-details {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--footer-light-text);
    text-transform: capitalize;
    line-height: 1.5;
}

/* ====================================
   FOOTER RIGHT - Nav columns in ONE row
   Figma: gap 75px between columns
   ==================================== */

.footer-right {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 75px;
}

/* ====================================
   Navigation Groups
   ==================================== */

.footer-nav-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.nav-label {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--footer-light-text);
    text-transform: capitalize;
}

.footer-nav-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-nav-group a {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--footer-dark-text);
    text-decoration: none;
    text-transform: capitalize;
    transition: color 0.2s ease;
}

.footer-nav-group a:hover {
    color: var(--footer-primary);
}

/* ====================================
   FOOTER BOTTOM
   ==================================== */

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ====================================
   SOCIAL + BADGE ROW
   Figma: space-between, social left, badge right
   ==================================== */

.footer-social-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Social Icons */
.footer-social {
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-social a {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-social a:hover {
    opacity: 0.7;
    transform: translateY(-2px);
}

.footer-social svg {
    width: 24px;
    height: 24px;
    display: block;
}

/* Badge Icon */
.footer-badge-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-badge-icon img {
    width: 28px;
    height: 30px;
    object-fit: contain;
    display: block;
}

/* ====================================
   LEGAL SECTION
   ==================================== */

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.footer-divider {
    width: 100%;
    height: 0px;
    border: none;
    outline: 1px solid var(--footer-border);
    outline-offset: -0.5px;
}

/* ====================================
   LEGAL CONTENT ROW
   Figma: copyright left (694px), legal links right, gap 30px
   ==================================== */

.footer-legal-content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.footer-copyright {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--footer-light-text);
    white-space: nowrap;
    width: 694px;
    flex-shrink: 0;
}

/* ====================================
   Legal Links - No separators, 16px, gap 30px
   ==================================== */

.footer-legal-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-legal-links a {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--footer-light-text);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.footer-legal-links a:hover {
    color: var(--footer-dark-text);
    text-decoration: underline;
}

/* ====================================
   NEWSLETTER (kept for future use)
   ==================================== */

.footer-newsletter {
    width: 384px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 28px;
}

.newsletter-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-newsletter h4 {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--footer-dark-text);
    margin: 0;
}

.footer-newsletter p {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--footer-light-text);
    line-height: 1.5;
    margin: 0;
}

.alhomes-newsletter-form {
    width: 100%;
    max-width: 384px;
    height: 48px;
    display: flex;
    align-items: center;
    background: var(--footer-white);
    border: 1px solid var(--footer-border);
    border-radius: 50px;
    padding: 12px 20px;
    gap: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

.alhomes-newsletter-form input[type="email"] {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 300;
    color: var(--footer-dark-text);
    min-width: 0;
    width: 100%;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: 0;
}

.alhomes-newsletter-form input[type="email"]::placeholder {
    color: var(--footer-placeholder);
}

.alhomes-newsletter-form input[type="email"]:focus,
.alhomes-newsletter-form input[type="email"]:hover,
.alhomes-newsletter-form input[type="email"]:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.alhomes-newsletter-form input[type="email"]:-webkit-autofill,
.alhomes-newsletter-form input[type="email"]:-webkit-autofill:hover,
.alhomes-newsletter-form input[type="email"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px var(--footer-white) inset !important;
    -webkit-text-fill-color: var(--footer-dark-text) !important;
    transition: background-color 5000s ease-in-out 0s;
}

.alhomes-newsletter-form:focus-within {
    border-color: var(--footer-primary);
}

.alhomes-newsletter-form button.alhomes-newsletter-btn {
    display: flex !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    background: var(--footer-primary) !important;
    border: none !important;
    border-radius: 32px !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: background 0.3s ease, transform 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
    color: #FFF !important;
}

.alhomes-newsletter-form button.alhomes-newsletter-btn:hover {
    background: #483F35 !important;
    transform: scale(1.05);
}

.alhomes-newsletter-form .alhomes-arrow-icon {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
}

/* ====================================
   RESPONSIVE - Large Tablets / Small Desktops
   ==================================== */
@media (max-width: 1300px) {
    .site-footer {
        padding: 80px 60px;
    }

    .footer-right {
        gap: 50px;
    }

    .footer-copyright {
        width: auto;
        flex-shrink: 0;
    }

    .footer-legal-content {
        justify-content: space-between;
    }
}

/* ====================================
   RESPONSIVE - Tablets
   ==================================== */
@media (max-width: 1024px) {
    .site-footer {
        padding: 60px 40px;
    }

    .footer-container {
        gap: 50px;
    }

    .footer-main {
        flex-direction: column;
        gap: 50px;
    }

    .footer-left {
        width: 100%;
    }

    .footer-right {
        width: 100%;
        gap: 40px;
        flex-wrap: wrap;
    }

    .footer-copyright {
        width: auto;
        flex-shrink: 0;
    }

    .footer-legal-content {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 15px;
    }

    .footer-legal-links {
        gap: 20px;
    }
}

/* ====================================
   RESPONSIVE - Mobile Landscape
   ==================================== */
@media (max-width: 768px) {
    .site-footer {
        padding: 50px 20px;
    }

    .footer-container {
        gap: 40px;
    }

    .footer-left {
        gap: 24px;
    }

    .footer-offices {
        gap: 20px;
    }

    .office-name {
        font-size: 16px;
    }

    .office-details {
        font-size: 16px;
    }

    .footer-right {
        gap: 40px;
        flex-wrap: wrap;
    }

    .footer-bottom {
        gap: 20px;
    }

    .footer-legal-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-copyright {
        width: auto;
        font-size: 16px;
    }

    .footer-legal-links {
        flex-wrap: wrap;
        gap: 15px;
    }

    .footer-legal-links a {
        font-size: 14px;
    }

    .footer-badge-icon img {
        width: 28px;
        height: 30px;
    }
}

/* ====================================
   RESPONSIVE - Mobile Portrait
   ==================================== */
@media (max-width: 575px) {
    .site-footer {
        padding: 40px 20px;
    }

    .footer-logo {
        width: 150px;
        height: 32px;
    }

    .footer-logo img {
        height: 32px;
    }

    .footer-right {
        gap: 30px;
    }

    .footer-legal-content {
        gap: 10px;
    }

    .footer-legal-links {
        gap: 12px;
    }

    .footer-legal-links a {
        font-size: 13px;
    }

    .footer-copyright {
        font-size: 14px;
    }
}

/* ====================================
   RESPONSIVE - Small Mobile (375px)
   ==================================== */
@media (max-width: 375px) {
    .site-footer {
        padding: 30px 16px;
    }

    .footer-container {
        gap: 30px;
    }

    .footer-right {
        gap: 24px;
    }

    .nav-label {
        font-size: 14px;
    }

    .footer-nav-group a {
        font-size: 14px;
    }

    .footer-legal-links a {
        font-size: 12px;
    }

    .footer-copyright {
        font-size: 14px;
    }

    .footer-badge-icon img {
        width: 24px;
        height: 26px;
    }
}

/* ============================================================
   ============================================================
   v4.0 ADDITIONS — new layout pieces per Figma
   Everything above this banner is v3.2 verbatim. Everything
   below is added (or layered to override v3.2 where the role
   of an element changed). Wala tayong binawasan.
   ============================================================
   ============================================================ */

/* ------------------------------------------------------------
   v4.1.2 — Divider hardening.
   v3.2 styled .footer-divider as:
       height: 0px; outline: 1px solid …; outline-offset: -0.5px;
   That works in most browsers but a negative outline-offset on a
   zero-height element is finicky (some renderers swallow it on
   high-DPR screens, others clip it under certain stacking contexts).
   Override with a deterministic 1px-tall element with a solid
   background — universally reliable, identical visual result. We
   also explicitly null the outline so we don't render a doubled
   line. v3.2's rule still sits in the file above; this just wins
   via the cascade.
   ------------------------------------------------------------ */
.footer-divider {
    height: 1px;
    background: var(--footer-border);
    outline: none;
}

/* ------------------------------------------------------------
   v4.0.9 — Bottom row badge alignment.
   v3.2's .footer-social-row uses `align-items: flex-start` which
   pins the .footer-badge-icon (house icon on the right) to the
   TOP of the row — visually aligned with the AL | HOMES logo.
   The Figma export uses `items-end` (= align-items: flex-end),
   which drops the badge to the BOTTOM of the row so it sits at
   the same vertical level as the social icons row at the bottom
   of .footer-brand-stack.

   Per Paul's spec: badge should line up with the FB/IG/LinkedIn
   social icons, not the logo. Override the v3.2 alignment here.

   Layered override — v3.2's rule above stays in the file. */
.footer-social-row {
    align-items: flex-end;
}

/* ------------------------------------------------------------
   v4.0.8 — BACK to Figma side-by-side layout per Paul's confirm
   from the Figma export. Final spec:
       NorCal Office          SoCal Office
       Cupertino, CA          Orange, CA
       (855) 254-6631         (855) 254-6636
   Comment wrappers flipped from v4.0.7:
     - RE-ENABLED v4.0.6's `.footer-offices { flex-direction: row }`
       (CSS-comment wrapper removed) → offices side by side
     - RE-DISABLED v4.0.5's `.office-item { flex-direction: row }`
       (wrapped in CSS comment again) → v3.2 column default kicks in,
       each office stacks vertically internally
     - RE-DISABLED v4.1.2's `.office-details { white-space: normal }`
       (wrapped in CSS comment again) → not needed because the <br>
       in footer.php v4.1.5 markup handles the line break directly
   Wala tayong binura — every block remains readable in the file.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   v4.0.6 — Figma side-by-side layout. [RE-ENABLED in v4.0.8]
   Each office stacks vertically (v3.2 default), two offices in
   a row. gap-14 (56px) between offices per Figma spec.
   flex-wrap: wrap so mobile narrow viewports stack the two
   offices instead of overflowing. */
.footer-offices {
    flex-direction: row;
    gap: 56px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   v4.1.2 — Office details one-liner. [DISABLED in v4.0.8]
   Companion to a footer.php variant that removed the <br>
   between city and phone. v4.1.5 markup restored the <br>,
   so this whitespace helper is no longer needed. Preserved as
   a CSS comment so it's one wrapper-flip away from re-enabling.

.office-details {
    white-space: normal;
}
.office-details .office-phone {
    margin-left: 2px;
}
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   v4.0.5 — Office NAME + DETAILS on a single line. [DISABLED in v4.0.8]
   Override `.office-item` to row so name + details sit inline.
   Disabled because Figma calls for each office as a vertical
   3-line block. v3.2's column default takes over again.

.office-item {
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.office-item .office-name {
    flex: 0 0 auto;
}
.office-item .office-details {
    flex: 1 1 auto;
    min-width: 0;
}
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   Top row: now Newsletter+Offices (left) | FAQ (right).
   v3.2 had .footer-main with align-items: flex-start and
   justify-content: space-between. We need:
     - explicit column widths (~500px / ~600px from Figma)
     - stretch alignment so .footer-left can distribute newsletter
       to top and offices to bottom (justify-content: space-between)
   ------------------------------------------------------------ */
.footer-main {
    align-items: stretch;          /* layered: v3.2 had flex-start */
    gap: 80px;                     /* layered: v3.2 had no explicit gap */
}

.footer-left {
    flex: 0 1 500px;               /* layered: was flex-shrink: 0 only */
    max-width: 500px;
    justify-content: space-between; /* newsletter top, offices bottom */
}

/* In v3.2 the logo was the first child of .footer-left; in v4.0 it
   moves out into .footer-brand-stack. The newsletter takes over the
   top slot. Reset margin-top from v3.2's "future use" newsletter
   styling so it doesn't push the newsletter down inside the column. */
.footer-newsletter {
    margin-top: 0;                 /* layered: v3.2 set 28px */
}

/* Right column now wraps the FAQ accordion. v3.2's .footer-right was
   a 4-column flex with gap:75px — that layout has moved to the new
   .footer-nav-row class below. Override the role here. */
.footer-right {
    flex: 0 1 600px;
    max-width: 600px;
    gap: 0;                        /* layered: was 75px (irrelevant w/ 1 child) */
}

/* ------------------------------------------------------------
   FAQ section (right column of top row)
   ------------------------------------------------------------ */
.footer-faq-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.footer-faq-title {
    font-family: 'Sofia Pro', 'Afacad Flux', sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--footer-dark-text);
    margin: 0;
}

.footer-faq-wrap {
    width: 100%;
}

/* ------------------------------------------------------------
   FAQ — RESET inherited rules from the global faq-section.css
   ------------------------------------------------------------
   The main FAQ stylesheet (faq-section v2.3) targets .faq-item /
   .faq-question / .faq-answer etc. WITHOUT any wrapper scope, so its
       .faq-section-wrapper { margin: 80px auto; max-width: 1200px; padding: 0 20px; }
       .faq-items-container { align-items: center; gap: 28px; }
       .faq-item { max-width: 867px; gap: 20px; animation: fadeIn 0.4s ease; }
       .faq-number { min-width: 58px; font-size: 18px; }
       .faq-question { font-size: 24px; }
       @media (max-width: 768px) { .faq-question-header { flex-direction: column; ... } }
   all leak into the footer FAQ accordion and break the layout
   (the 80px margin + 28px container gap + column-flip on mobile are
   the loudest offenders). The block below neutralizes the leak by
   overriding each property explicitly. We're more specific than the
   global rules (.site-footer .footer-faq-wrap .faq-* = 3 classes vs
   .faq-* = 1 class), so we win regardless of CSS load order.
   Wala tayong tinanggal sa faq-section.css mo — overrides lang dito.
   ------------------------------------------------------------ */

/* Wrapper: kill the 80px margin + 1200px cap + 20px horiz padding */
.site-footer .footer-faq-wrap .faq-section-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* Items container: kill center-align + 28px between items */
.site-footer .footer-faq-wrap .faq-items-container {
    align-items: stretch;
    gap: 0;
}

/* Individual item: kill 867px cap, 20px internal gap, fadeIn animation */
.site-footer .footer-faq-wrap .faq-item {
    max-width: none;
    width: 100%;
    gap: 0;
    animation: none;
    padding: 14px 0;
    border-bottom: 1px solid var(--footer-border);
}
.site-footer .footer-faq-wrap .faq-item:first-child { padding-top: 0; }
.site-footer .footer-faq-wrap .faq-item:last-child { border-bottom: 0; }

/* Question header: shrink gap from 20px → 12px so number/question/chevron fit */
.site-footer .footer-faq-wrap .faq-question-header {
    color: var(--footer-dark-text);
    gap: 12px;
}

/* Number: kill the 58px min-width (compresses to natural width in footer) */
.site-footer .footer-faq-wrap .faq-number {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--footer-dark-text);
    flex-shrink: 0;
    min-width: auto;
}

/* Question: tone 24px → 18px for the compact footer column */
.site-footer .footer-faq-wrap .faq-question {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--footer-dark-text);
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

/* Answer: indent under question (different from /faqs/ which is flush-left
   per your v2.3 spec — footer Figma shows the answer aligned WITH the
   question text, past the "( 01 )" number). 52px ≈ number width + 12px gap. */
.site-footer .footer-faq-wrap .faq-answer {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--footer-light-text);
    line-height: 1.5;
    padding-left: 52px;
}

/* Separator: borders on .faq-item already handle dividers in the footer */
.site-footer .footer-faq-wrap .faq-separator {
    display: none;
}

.site-footer .footer-faq-wrap .faq-toggle-icon {
    color: var(--footer-dark-text);
}

/* ------------------------------------------------------------
   NAV ROW — 4 columns across full width (used to be inside .footer-right)
   ------------------------------------------------------------ */
.footer-nav-row {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 75px;
    width: 100%;
}

/* ------------------------------------------------------------
   v4.0.2 — Resources column has a 2-column sub-layout under
   ONE "Resources" header (matches the latest Figma screenshot).
   The two <ul>s sit side by side; each inherits the standard
   .footer-nav-group ul styling (column flex, gap 10px) from v3.2.
   ------------------------------------------------------------ */
.footer-nav-resources-cols {
    display: flex;
    gap: 56px;   /* gap-14 in Figma */
    align-items: flex-start;
}
.footer-nav-resources-cols > ul {
    /* Inherits .footer-nav-group ul styling. Just ensure each list
       doesn't try to fill the wrapper width — keep them snug to text. */
    flex: 0 0 auto;
}
@media (max-width: 1024px) {
    .footer-nav-resources-cols { gap: 32px; }
}
@media (max-width: 575px) {
    .footer-nav-resources-cols {
        flex-direction: column;
        gap: 10px;
    }
}

/* ------------------------------------------------------------
   BRAND STACK — logo above social icons (new column inside .footer-social-row)
   ------------------------------------------------------------ */
.footer-brand-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

/* ------------------------------------------------------------
   NEWSLETTER SUCCESS / ERROR / reCAPTCHA states
   ------------------------------------------------------------ */

/* Success container (hidden until form has data-state="success") */
.alhomes-newsletter-success {
    display: none;
    flex: 1;
    align-items: center;
    gap: 14px;          /* gap-3.5 in Figma */
    min-width: 0;
}

/* Success message. Figma uses text-lg (18px) on one line at ~500px wide.
   We're constrained to the v3.2 .footer-newsletter parent width (384px),
   so the text wraps to 2 lines at 16px instead — keeps the pill within
   the existing column without overriding any v3.2 rules.
   On mobile we shrink further so it doesn't crowd the input area. */
.alhomes-newsletter-success-text {
    flex: 1;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: var(--footer-dark-text);
    line-height: 1.35;
    min-width: 0;
}

/* Inner check button — emerald-tinted circle with 1px emerald border,
   matching Figma: bg-emerald-500/10 + outline outline-emerald-500. */
.alhomes-newsletter-success-icon {
    width: 28px;
    height: 28px;
    border-radius: 32px;
    background: rgba(16, 185, 129, 0.10);
    border: 1px solid #10B981;
    color: #10B981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* When the form switches to success state:
     - Hide input + arrow button
     - Show the success block
     - Pill KEEPS its gray border (Figma: outline-400, same as idle —
       NOT emerald. The emerald is only on the inner check circle.)
     - Pill is allowed to grow taller so the longer success message
       can wrap to 2 lines without breaking the pill shape (the 50px
       border-radius caps at half-height so the pill stays rounded). */
.alhomes-newsletter-form[data-state="success"] {
    height: auto;
    min-height: 48px;
}
.alhomes-newsletter-form[data-state="success"] input[type="email"],
.alhomes-newsletter-form[data-state="success"] button.alhomes-newsletter-btn {
    display: none !important;
}
.alhomes-newsletter-form[data-state="success"] .alhomes-newsletter-success {
    display: flex;
}

/* Loading state — arrow spins while submitting */
.alhomes-newsletter-form[data-state="loading"] button.alhomes-newsletter-btn {
    opacity: 0.7;
    pointer-events: none;
}
.alhomes-newsletter-form[data-state="loading"] .alhomes-arrow-icon {
    animation: alhomes-newsletter-spin 0.8s linear infinite;
}
@keyframes alhomes-newsletter-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

/* Inline error message (sibling of the form, hidden by default) */
.alhomes-newsletter-error {
    display: none;
    margin-top: 12px;
    padding: 8px 14px;
    background: #FDECEA;
    border: 1px solid #F5B7B1;
    border-left: 3px solid #C0392B;
    border-radius: 6px;
    color: #922B21;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}
.alhomes-newsletter-error.is-visible {
    display: block;
}

/* reCAPTCHA mount — rendered lazily on first email focus, scaled to fit */
.alhomes-newsletter-recaptcha {
    margin-top: 12px;
    min-height: 0;
    transform: scale(0.85);
    transform-origin: 0 0;
}
.alhomes-newsletter-recaptcha:empty {
    display: none;
}

/* ============================================================
   v4.0 RESPONSIVE — layer on top of the v3.2 breakpoints
   ============================================================ */

/* >= 1100px is the desktop layout above. Below that we collapse
   the top row to a single column. */
@media (max-width: 1100px) {
    .footer-main {
        flex-direction: column;
        gap: 50px;
    }
    .footer-left,
    .footer-right {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
    .footer-left {
        justify-content: flex-start;  /* no need to space-between when stacked */
    }
    .footer-newsletter,
    .alhomes-newsletter-form {
        max-width: 100%;
    }
}

/* Nav row collapses to 2 columns on tablets, then 1 on phones */
@media (max-width: 1024px) {
    .footer-nav-row {
        flex-wrap: wrap;
        gap: 40px;
    }
    .footer-nav-row .footer-nav-group {
        flex: 0 0 calc(50% - 20px);
    }
}
@media (max-width: 575px) {
    .footer-nav-row {
        flex-direction: column;
        gap: 24px;
    }
    .footer-nav-row .footer-nav-group {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Brand stack on mobile keeps logo above social but slightly tighter */
@media (max-width: 768px) {
    .footer-brand-stack {
        gap: 12px;
    }

    /* Override the global faq-section.css @768px rule which flips
       .faq-question-header to flex-direction: column. In the compact
       footer accordion we want number + question + chevron to stay
       on one row even on mobile. Wala tayong tinanggal sa main FAQ
       page mobile — override scoped to .site-footer only. */
    .site-footer .footer-faq-wrap .faq-question-header {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }
    .site-footer .footer-faq-wrap .faq-question {
        font-size: 16px;
    }
    .site-footer .footer-faq-wrap .faq-answer {
        font-size: 14px;
        padding-left: 0;   /* drop the indent on mobile so wrapped text doesn't get squeezed */
    }
}

/* Success message stays readable on narrow phones */
@media (max-width: 575px) {
    .alhomes-newsletter-success-text {
        font-size: 14px;
        line-height: 1.4;
    }
}

/* ============================================================
   ============================================================
   v4.0.10 ADDITIONS — Loading icon visibility swap
   Layered on top of the v4.0 loading rules above. Wala tayong
   binura sa v4.0 — the `.alhomes-newsletter-form[data-state="loading"]
   .alhomes-arrow-icon { animation: ... }` rule still exists above
   for backwards reference. We just hide the arrow during loading
   here so the spin is invisible (the new spinner icon takes over).
   ============================================================
   ============================================================ */

/* Idle state for the new loading icon: hidden, sized to match the
   arrow's 12px footprint. We don't set a fixed pixel width on the
   SVG itself (the SVG has a 14×14 intrinsic viewBox); CSS-sizing it
   to 12×12 box keeps it visually consistent with the arrow's 12px
   so the swap doesn't shift the button's optical center. */
.alhomes-newsletter-form .alhomes-loading-icon {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0;
    display: none;          /* default hidden — arrow is visible */
}

/* When loading: hide the arrow (its spin from v4.0 above runs but is
   invisible, which is harmless), and show + spin the new loading icon
   reusing the existing @keyframes alhomes-newsletter-spin. */
.alhomes-newsletter-form[data-state="loading"] .alhomes-arrow-icon {
    display: none;
}
.alhomes-newsletter-form[data-state="loading"] .alhomes-loading-icon {
    display: block;
    animation: alhomes-newsletter-spin 0.8s linear infinite;
}

/* Defensive — when not loading, ensure the loading icon stays hidden
   even if some other state tries to leak it. (data-state can be
   "idle" | "loading" | "success"; both idle and success should hide
   the spinner. Idle is handled by the base rule above; this just
   guarantees success hides it too even though .alhomes-newsletter-btn
   is itself display:none during success.) */
.alhomes-newsletter-form[data-state="idle"] .alhomes-loading-icon,
.alhomes-newsletter-form[data-state="success"] .alhomes-loading-icon {
    display: none;
}

/* ============================================================
   ============================================================
   v4.0.11 ADDITIONS — Footer re-arrangement per latest Figma
   2026-05-29 (P.Yuki). Pure additive, layered overrides — wala
   tayong binura. Companion to footer.php v4.3.0. ZERO change sa
   newsletter form/engine CSS; yung PARENT column lang ang
   nag-flip to a row.
   ============================================================
   ============================================================ */

/* [1] LOGO AT TOP (.footer-topbrand). Reuses the existing .footer-logo
   sizing (193×40). The container gap is 60px; Figma shows ~28px between
   the logo and the offices/newsletter row — pull the next element up to
   net ~28px. */
.footer-topbrand {
    width: 100%;
    margin-bottom: -32px;
}

/* [2] MAIN ROW: offices LEFT, newsletter RIGHT.
   v4.0 set .footer-left to a 500px column (newsletter on top, offices
   below). Now .footer-left holds BOTH and renders as a FULL-WIDTH ROW
   with the offices pinned left and the newsletter pinned right. The
   newsletter's DOM position is UNCHANGED — flex `order` does the visual
   swap, so the engine's parentNode lookups stay valid. .footer-right
   (FAQ) is emptied in footer.php → hide it here. */
.footer-left {
    flex: 1 1 100%;
    max-width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 56px;
}
.footer-left .footer-offices    { order: 1; }   /* left  */
.footer-left .footer-newsletter { order: 2; }   /* right */

.footer-right {
    display: none;   /* FAQ removed in footer.php v4.3.0; column hidden */
}

/* [3] NAV COLUMN RULE: max 3 items per column, the rest auto-wrap to a
   new sub-column (Figma gap-14 = 56px between sub-columns). Applies to
   ALL nav groups; only those with >3 items actually wrap:
       Find Your Home (4) → 3 + 1
       Resources       (4) → 3 + 1
       Services (3) and Company (1) stay single-column. */
.footer-nav-row .footer-nav-group ul {
    flex-wrap: wrap;
    max-height: 96px;     /* 3 rows × 24px + 2 gaps × 10px = 92px → 4th wraps */
    gap: 10px 56px;       /* row-gap 10px, column-gap 56px */
    align-content: flex-start;
}
.footer-nav-row .footer-nav-group ul li {
    line-height: 24px;
}

/* ------------------------------------------------------------
   v4.0.11 RESPONSIVE — collapse the row arrangement on small screens.
   Layered AFTER the v4.0 @1100px / @1024px blocks above so these win.
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    /* Stack offices above newsletter again (don't squeeze them side by
       side on tablet/phone). `order` is harmless when stacked. */
    .footer-left {
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 1024px) {
    /* Let nav lists stack fully — no 3-per-column cap on mobile. */
    .footer-nav-row .footer-nav-group ul {
        max-height: none;
        gap: 10px;
    }
}