/*
Theme Name:  Fairway Swaleh
Theme URI:   https://clickuplocal.com
Author:      ClickUpLocal
Author URI:  https://clickuplocal.com
Description: Per-client child theme for Mike Swaleh / Fairway Home Mortgage, built on the ClickUpLocal parent. Customize HERE only (CSS overrides). Inherits every parent template, so parent + plugin updates flow through without breaking the site. Brand (logo, colors, fonts) is set in the Brand tool (Site Tools > Brand).
Version:     1.0.0
Template:    clickuplocal
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clickuplocal-fairwayswaleh
*/

/* =============================================================================
   PER-CLIENT CUSTOMIZATION
   -----------------------------------------------------------------------------
   This starter overrides NOTHING by default — the parent provides the complete
   look. Add only what's unique to this client below.

   RULE 1: NEVER edit the parent theme (clickuplocal) or the plugin on a client
   site. They are shared product code, updated centrally across every client.
   Customize ONLY in this child theme. Anything that should apply to every client
   belongs in the product repo (clickuplocal-template), not here. See CLAUDE.md.

   RULE 2: never copy a parent template (header.php, single-event.php, etc.) into
   this child. Doing so freezes that file and it stops receiving parent updates.
   Keep this child to CSS (+ at most one truly-bespoke template if unavoidable).

   1) Colors / fonts: prefer the Brand tool. To hard-set them in code instead,
      override the parent's design tokens here:

      :root {
          --color-primary:   #002868;
          --color-accent:    #bf0a30;
          --font-heading:    "Space Grotesk", sans-serif;
          --font-body:       "Inter", sans-serif;
      }

   2) Custom CSS: anything beyond tokens (bespoke section, spacing tweak, etc.)
      goes below.
   ========================================================================== */

/* Mortgage compliance disclosure bar (rendered via wp_footer in functions.php).
   Sits below the parent footer. Uses the brand navy so it reads as part of the
   footer system. Falls back to a literal navy if the token is unavailable. */
.fw-compliance {
    background: var(--color-primary, #293A51);
    color: rgba(255, 255, 255, 0.72);
    font-family: var(--font-body, "Poppins"), sans-serif;
    font-size: 12px;
    line-height: 1.6;
    padding: 22px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.fw-compliance__inner {
    max-width: 1232px;
    margin: 0 auto;
    text-align: center;
}
.fw-compliance__inner p { margin: 0 0 8px; }
.fw-compliance__inner p:last-child { margin-bottom: 0; }
.fw-compliance__eho { font-size: 13px; color: #fff; }
.fw-compliance__eho-icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    margin-right: 4px;
    vertical-align: -1px;
}
.fw-compliance__legal { max-width: 760px; margin-left: auto; margin-right: auto; }
.fw-compliance__links a {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}
.fw-compliance__links a:hover { border-bottom-color: #fff; }
.fw-compliance__copyright { color: rgba(255, 255, 255, 0.5); margin-top: 4px; }

/* =============================================================================
   BRAND — tokens (no Brand tool on this site; see functions.php)
   Values from Mike's Elementor kit and the ClickUpLocal child that mirrors it:
   navy #293A51, green #80C33D, orange #FF523C (Apply Now), Montserrat headings,
   Poppins body, 1280px container.
   ========================================================================== */
:root {
    --container:       1280px;
    --color-primary:   #293A51;
    --color-dark:      #293A51;
    --color-accent:    #80C33D;
    --color-accent-dk: #4A7324;
    --fw-orange:       #FF523C;
    --fw-orange-dk:    #e23f2a;
    --font-heading:    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body:       "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =============================================================================
   HEADER — laid out like Mike's: logo | two links ........ phone  email  [Apply Now]
   ========================================================================== */
.site-header { border-bottom: 1px solid #1f2a38; }
.site-header .site-logo {
    /* Divider runs the full header height, through the parent's 10px padding. */
    margin: -10px 6px -10px 0;
    padding: 10px 24px 10px 0;
    border-right: 1px solid #1f2a38;
    align-self: stretch;
}
@media (min-width: 861px) {
    .site-header-inner { justify-content: flex-start; }
    .site-header .primary-nav { flex: 1; }
    .site-header .primary-nav ul { gap: 20px 32px; }
    /*
     * The contact group starts at the phone, and is found by what it IS, not
     * by where it sits. This used to be :nth-child(3), which was the phone
     * when the nav had two sections — adding a third silently pushed
     * "Media Appearances" into the right-hand group instead, leaving a hole
     * in the middle of the bar.
     */
    /*
     * The auto margin goes on the phone, so the three sections hold the left
     * and the phone sits beside Apply Now as one contact group on the right.
     * The parent's priority-nav script can still collapse the bar: it decides
     * by comparing the CTA's row to the first item's (header.php), and an auto
     * margin collapses to zero before anything wraps, so the test is unaffected.
     * It can, though, move the phone into "More" — and the auto margin would
     * go with it, leaving the button adrift mid-bar. The third rule hands the
     * job back to the button whenever the phone is no longer on the bar.
     */
    .site-header #primary-menu > li:not(.nav-more):has(a[href^="tel:"]) { margin-left: auto; }
    .site-header #primary-menu > li.cta { margin-left: 0; }
    .site-header #primary-menu:not(:has(> li:not(.nav-more) a[href^="tel:"])) > li.cta { margin-left: auto; }
}
.primary-nav a { color: #111; font-weight: 700; font-size: 1rem; }
.primary-nav a[href^="tel:"],
.primary-nav a[href^="mailto:"] {
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.primary-nav a[href^="tel:"]::before,
.primary-nav a[href^="mailto:"]::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background: var(--color-accent);
    -webkit-mask: var(--fw-icon) center / contain no-repeat;
            mask: var(--fw-icon) center / contain no-repeat;
}
.primary-nav a[href^="tel:"] {
    --fw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
}
.primary-nav a[href^="mailto:"] {
    --fw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v.4l-10 6.25L2 5.4zm0 2.75 9.47 5.92a1 1 0 0 0 1.06 0L22 7.75V19a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
}
/* Apply Now: Mike's orange pill, not the parent's square green button. */
.primary-nav li.cta .button-primary {
    background: var(--fw-orange);
    border-radius: 999px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.primary-nav li.cta .button-primary:hover { background: var(--fw-orange-dk); }
@media (max-width: 860px) {
    .site-header .site-logo { border-right: 0; margin: 0; padding: 0; }
}

/* =============================================================================
   FOOTER
   ========================================================================== */
/* Mike publishes no office hours (site facts 'hours' => []), so the parent's
   second column is an empty "Hours" heading. Contact is the only column shown. */
.footer-grid > .footer-col:not(.footer-contact) { display: none; }
/* The compliance bar below carries the copyright, Privacy and Terms links, so
   the parent's row repeats them; its "Owner login" points at an unused stub page. */
.footer-disclosures { display: none; }
/* Social icons: the parent draws them from the plugin, which this site doesn't
   run, and would put the word "Facebook" inside a 40px circle. */
.footer-social a.footer-social-icon { font-size: 0; }
.footer-social a.footer-social-icon::before {
    content: "";
    width: 18px;
    height: 18px;
    background: #fff;
    -webkit-mask: var(--fw-icon) center / contain no-repeat;
            mask: var(--fw-icon) center / contain no-repeat;
}
.footer-social a[href*="facebook.com"] {
    --fw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 8h3V4h-3a4 4 0 0 0-4 4v2H7v4h3v8h4v-8h3l1-4h-4V8.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
}
.footer-social a[href*="linkedin.com"] {
    --fw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9.5h4V21H3zm7 0h3.8v1.6h.05c.53-1 1.83-2.05 3.77-2.05 4.03 0 4.78 2.65 4.78 6.1V21h-4v-5.1c0-1.22-.02-2.8-1.7-2.8-1.72 0-1.98 1.33-1.98 2.7V21H10z'/%3E%3C/svg%3E");
}
.footer-social a[href*="instagram.com"] {
    --fw-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7.3A4.7 4.7 0 1 0 16.7 12 4.7 4.7 0 0 0 12 7.3zm0 7.75A3.05 3.05 0 1 1 15.05 12 3.05 3.05 0 0 1 12 15.05zM16.9 5.9a1.1 1.1 0 1 0 1.1 1.1 1.1 1.1 0 0 0-1.1-1.1zM21.9 7.9a5.4 5.4 0 0 0-1.48-3.83A5.45 5.45 0 0 0 16.6 2.6C15.1 2.5 8.9 2.5 7.4 2.6a5.44 5.44 0 0 0-3.83 1.47A5.43 5.43 0 0 0 2.1 7.9c-.1 1.5-.1 6.7 0 8.2a5.4 5.4 0 0 0 1.47 3.83A5.46 5.46 0 0 0 7.4 21.4c1.5.1 7.7.1 9.2 0a5.4 5.4 0 0 0 3.82-1.47 5.44 5.44 0 0 0 1.48-3.83c.1-1.5.1-6.7 0-8.2zM19.8 17.6a3.1 3.1 0 0 1-1.75 1.75c-1.2.48-4.07.37-5.4.37s-4.2.1-5.4-.37A3.1 3.1 0 0 1 5.5 17.6c-.48-1.2-.37-4.07-.37-5.4s-.1-4.2.37-5.4A3.1 3.1 0 0 1 7.25 5c1.2-.48 4.07-.37 5.4-.37s4.2-.1 5.4.37a3.1 3.1 0 0 1 1.75 1.75c.48 1.2.37 4.07.37 5.4s.1 4.2-.37 5.4z'/%3E%3C/svg%3E");
}
.fw-compliance__service { max-width: 760px; margin-left: auto; margin-right: auto; }
.fw-compliance__service a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.35); }

/* =============================================================================
   SITE-WIDE PIECES OF MIKE'S OLD ELEMENTOR FOOTER
   ========================================================================== */
/* Circle buttons (Get Started, Let's Do It!): Elementor drew these as padded
   buttons under a circle mask; a fixed round box is the same shape. */
.fw-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: "Roboto", var(--font-body);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .3s, color .3s;
}
.fw-circle:hover { text-decoration: none; }
.fw-circle--green { background: var(--color-accent); color: #fff; }
.fw-circle--green:hover { background: var(--color-primary); color: #fff; }
.fw-circle--navy { background: var(--color-primary); color: #fff; }
.fw-circle--navy:hover { background: var(--color-accent); color: #fff; }

.fw-schedule {
    box-sizing: border-box;
    min-height: 675px;
    padding-top: 115px;
    background: #fff no-repeat bottom center / contain;
}
.fw-schedule__inner { display: flex; flex-direction: column; align-items: center; }
.fw-schedule__title {
    margin: 0 0 30px;
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1;
    text-align: center;
}
.fw-navy { color: var(--color-primary); }
.fw-green { color: var(--color-accent); }
.fw-schedule__btn { width: 175px; height: 175px; font-size: 25px; }
@media (max-width: 767px) {
    /* The button keeps its desktop size on phones, as it did before. */
    .fw-schedule { min-height: 500px; padding-top: 90px; background-size: 850px auto; }
    .fw-schedule__title { font-size: 25px; }
}
/* The parent footer sits flush under the houses strip. */
.fw-schedule + .site-footer, .fw-schedule ~ .site-footer { margin-top: 0; }

/* On the navy, with the compliance text. A white strip under a navy footer
   read as something bolted on after the fact. */
.fw-bbb { background: var(--color-primary, #293A51); text-align: center; padding: 4px 16px 28px; }
.fw-bbb img { display: inline-block; max-width: 100%; height: auto; }
/* Header height matches the old one: 44px logo + 19px above and below + 1px rule = 83px. */
@media (min-width: 721px) {
    .site-header-inner { padding-top: 19px; padding-bottom: 19px; }
    .site-header .site-logo { margin-top: -19px; margin-bottom: -19px; padding-top: 19px; padding-bottom: 19px; }
}

/* Footer: one row of logo | contact | links, on the site's own content width.
   Parent markup, child CSS only.

   It used to be three stacked bands at three different widths -- the contact
   block boxed to 960, the link row to 960, the compliance text to 1100 -- with
   a rule between each and the BBB seal on a white strip under the navy. Four
   centre lines that never agreed. Now everything sits on the 1232 the rest of
   the site uses, there is one rule instead of three, and the seal is on the
   navy with the compliance text it belongs to. */
@media (min-width: 768px) {
    /* The link row is a sibling of .footer-grid, not a child, so the two are
       placed into one grid row here rather than moved in the markup. Anything
       else the parent ever puts in .container falls into column 1 below. */
    .site-footer .container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 56px;
        align-items: center;
    }
    .site-footer .container > * { grid-column: 1; }
    .site-footer .container > .footer-grid { display: block; grid-column: 1; grid-row: 1; padding-bottom: 0; border-bottom: 0; }
    .site-footer .container > .fw-footer-nav { grid-column: 2; grid-row: 1; }

    .site-footer .footer-contact {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 44px;
        align-items: center;
        max-width: none;
        margin: 0;
    }
    /* 316px of logo was the loudest thing in the footer. */
    .site-footer .footer-logo-img { grid-column: 1; grid-row: 1 / span 4; width: 220px; max-width: 100%; height: auto; max-height: none; justify-self: start; }
    .site-footer .footer-contact > :not(.footer-logo-img) { grid-column: 2; }

    .fw-footer-nav {
        flex-direction: column;
        /* Flush right, so the column has a clean edge against the container
           rather than a ragged one. */
        align-items: flex-end;
        justify-content: center;
        gap: 12px;
        max-width: none;
        margin: 0;
        padding: 0;
    }
}
.site-footer .footer-contact h4 { display: none; }
.site-footer .footer-contact-lines,
.site-footer .footer-contact address { font-size: 16px; line-height: 1.8; color: #fff; }
.site-footer .footer-phone { font-size: 16px; font-weight: 400; }
.site-footer .footer-contact-lines a { color: #fff; text-decoration: underline; }
/* Phone header was 76px tall on the old site. */
@media (max-width: 860px) {
    .site-header-inner { padding-top: 15px; padding-bottom: 16px; }
}

/* =============================================================================
   Nothing is stuck to the viewport.

   Derek, 1 Oct 2026: no sticky headers or footers. The parent pins
   .site-header with position:sticky, so the child unpins it — the header
   scrolls away like the rest of the page.

   The phone Apply pill is printed at wp_body_open, outside the header, and was
   position:fixed so it rode along at the top of the screen. Absolute instead:
   it sits in the same place at the top of the page and scrolls off with it.
   ========================================================================== */
.site-header { position: static; }

/* Phone header (see fairwayswaleh_phone_apply()). */

.fw-phone-apply { display: none; }
@media (max-width: 860px) {
    .site-header .site-logo-img { content: var(--fw-phone-logo); width: 44px !important; height: 44px !important; }
    .fw-phone-apply {
        display: inline-flex;
        align-items: center;
        position: absolute;
        top: 16px;
        right: 64px;
        z-index: 101;
        height: 44px;
        padding: 0 24px;
        border-radius: 999px;
        background: var(--color-accent);
        color: #fff;
        font-family: "Roboto", var(--font-body);
        font-size: 18px;
        font-weight: 500;
        text-decoration: none;
    }
    .fw-phone-apply:hover { background: var(--color-accent-dk); color: #fff; text-decoration: none; }
    body.admin-bar .fw-phone-apply { top: 62px; }
}
/* Phone footer is centred, as before. */
@media (max-width: 767px) {
    .site-footer .footer-contact { text-align: center; }
    .site-footer .footer-logo-img { margin-left: auto; margin-right: auto; }
    .site-footer .footer-social { justify-content: center; }
}

/* =============================================================================
   Tap targets on a phone.

   WCAG 2.5.8 (AA) wants a target of at least 24x24 CSS px. Links sitting in a
   sentence are exempt and are left alone; these are the ones that stand on
   their own and were coming out at 17-19px. Phone only -- on a desktop they
   are mouse targets and the spacing is the design's.
   ========================================================================== */
@media (max-width: 767px) {
    .fw-blog__more,
    .fw-post__eyebrow a,
    .fw-card__call a,
    .fw-compliance__links a {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
    }
}

/* =============================================================================
   The footer's own links.

   Printed by fairwayswaleh_footer_nav_html() into the space the parent's
   disclosures row was removed from. The footer had no links at all before:
   somebody who read to the end of an article had a phone number and nowhere
   to go.
   ========================================================================== */
.fw-footer-nav {
    /* No rule of its own: the parent already draws one above this row, and two
       stacked lines read as a mistake. */
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px;
    max-width: 960px; margin: 0 auto; padding: 22px 24px 4px;
}
.fw-footer-nav a {
    color: rgba(255, 255, 255, .86); text-decoration: none;
    font-family: var(--font-body); font-size: 16px; line-height: 1.5;
    border-bottom: 2px solid transparent; padding-bottom: 2px;
}
.fw-footer-nav a:hover { color: #fff; border-bottom-color: var(--color-accent); }
@media (max-width: 720px) { .fw-footer-nav { gap: 12px 20px; margin-top: 26px; } }

/* =============================================================================
   The parent's "More" menu is always open.

   main.css has `.primary-nav ul { display: flex }` (0,1,1) and
   `.nav-more-menu { display: none }` (0,1,0), so the more-specific rule wins
   and the dropdown is permanently visible. It never showed on this site
   because the menu was always empty — the moment a nav item overflowed into
   it, a white panel appeared under the header over the page.

   The parent is product code and stays untouched. `.primary-nav .nav-more-menu`
   is (0,2,0), which beats it, and the open state is more specific again.
   This is worth fixing in the product too: it affects every client whose nav
   is long enough to overflow.
   ========================================================================== */
.primary-nav .nav-more-menu { display: none; }
.primary-nav .nav-more.is-open .nav-more-menu { display: flex; }

/* With three sections in the nav, the bar is tight at 1280 — a little less
   gap and the contact lines a shade smaller keeps everything on the bar
   rather than hiding the email behind "More". */
@media (min-width: 861px) {
    .primary-nav ul { gap: 20px; }
    .primary-nav .nav-contact a, .primary-nav a[href^="tel:"], .primary-nav a[href^="mailto:"] { font-size: 15px; }
}


/* =============================================================================
   The hamburger starts at 860px, not 720px.

   The parent switches to the hamburger at 720 but its priority-nav script
   gives up below 860 ("mobile uses the hamburger"). Between those two numbers
   nothing was collapsing anything: the full bar tried to fit, wrapped to two
   rows and stood 131px tall at 768. Moving the breakpoint up to meet the
   script closes the gap.
   ========================================================================== */
@media (max-width: 860px) {
    .site-header .nav-toggle { display: flex; }
    .site-header .primary-nav ul {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-2);
        background: #fff;
        padding: var(--sp-3);
        border-bottom: 1px solid var(--color-border);
        z-index: 150;
    }
    .site-header .primary-nav.is-open ul { display: flex; }
    /* The auto margin is a desktop-bar idea; in a stacked menu it does nothing
       but it is cleared so the items read as one list. */
    .site-header #primary-menu > li.cta { margin-left: 0; }
}

/* The chat's way in, under the Schedule circle. A link, not a second button:
   booking a call is the primary action here and should stay looking like it. */
.fw-schedule__ask { margin: 22px 0 0; font-family: var(--font-body); font-size: 16px; color: var(--color-primary); }
.fw-schedule__asklink {
    border: 0; background: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--color-primary);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
    text-decoration-color: var(--color-accent);
}
.fw-schedule__asklink:hover { color: var(--color-accent-dk, #4A7324); }
.fw-schedule__asklink:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }