/* ==========================================================================
   NATURAL PATHWAYS — SHARED STYLESHEET
   --------------------------------------------------------------------------
   Loaded AFTER each page's inline <style> block so it can override the
   per-page rules that were inherited from the original WordPress build.
   This file is the source of truth for:
     1.  Design tokens
     2.  Global typography scale (rebased smaller, rem-based)
     3.  Header offset (so heroes are no longer covered)
     4.  Header sizing & navigation polish
     5.  Footer typography polish
     6.  Cross-page component tweaks (buttons, cards, sections)
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* Brand palette (matches inline page tokens; centralized here) */
    --np-dark-wood:     #6d5a4d;
    --np-deep-bg:       #241a16;
    --np-cream:         #FAF9F6;
    --np-cream-border:  #EAE0D5;
    --np-brand-magenta: #b01c68;
    --np-brand-green:   #009640;
    --np-text:          #5D4037;

    /* Type stack */
    --np-serif: 'Lora', Georgia, serif;
    --np-sans:  'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    /* Header reserve — kept in sync with .np-site-header overrides below.
       Used as body padding so fixed header never covers hero content. */
    --np-header-h:        92px;
    --np-header-h-mobile: 70px;

    /* Radius */
    --np-radius-pill: 999px;
    --np-radius-card: 12px;
}


/* ==========================================================================
   2. GLOBAL TYPOGRAPHY — rebased ~80% smaller, rem-based.
   The original pages used heavy px values that read as "magnified" next
   to the user's other sites (Humboldt Chamber, Drive75 KS).
   Each rule below is targeted to override an inline rule on that page.
   ========================================================================== */

html {
    font-size: 16px;
}

body {
    font-family: var(--np-sans);
    font-size: 1rem;          /* 16 */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    /* Reserve space for the fixed header so hero sections aren't clipped. */
    padding-top: var(--np-header-h);
}

/* --- Hero ----------------------------------------------------------------- */
.np-hero-title,
.np-about-hero-title,
.np-services-hero-title,
.np-faq-hero-title,
.np-contact-hero-title,
.np-clients-hero-title,
.np-reviews-hero-title,
.np-legal-hero-title {
    font-size: clamp(1.85rem, 4vw, 2.6rem) !important;  /* ~30–42px */
    line-height: 1.15 !important;
    margin-bottom: 1rem !important;
}

.np-hero-subtitle,
.np-about-hero-subtitle,
.np-services-hero-subtitle,
.np-faq-hero-subtitle,
.np-contact-hero-subtitle,
.np-clients-hero-subtitle,
.np-reviews-hero-subtitle,
.np-legal-hero-subtitle {
    font-size: clamp(0.95rem, 1.4vw, 1.0625rem) !important;  /* 15–17 */
    line-height: 1.55 !important;
    margin-bottom: 2rem !important;
}

/* --- Section titles ------------------------------------------------------- */
.np-section-title {
    font-family: var(--np-serif);
    font-size: clamp(1.5rem, 3vw, 2rem) !important;  /* 24–32 */
    line-height: 1.2 !important;
    color: var(--np-brand-magenta);
}

/* --- Body copy throughout pages ------------------------------------------- */
.np-body-text,
.np-card-text,
.np-faq-item p,
.np-footer-text,
.np-footer-text a {
    font-size: 0.9375rem !important;   /* 15 */
    line-height: 1.65 !important;
}

/* --- Cards ---------------------------------------------------------------- */
.np-card-title {
    font-size: 1.0625rem !important;   /* 17 */
    margin-bottom: 0.6rem !important;
}

.np-card-link,
.np-text-link {
    font-size: 0.8125rem !important;   /* 13 */
    letter-spacing: 0.5px;
}

.np-text-link {
    font-size: 0.9375rem !important;   /* 15 — slightly larger than card link */
}

/* --- Buttons -------------------------------------------------------------- */
.np-btn-hero-ghost,
.np-btn-hero-glass,
.np-primary-btn,
.np-secondary-btn,
.np-book-now {
    font-size: 0.8125rem !important;   /* 13 */
    padding: 11px 28px !important;
    letter-spacing: 0.4px;
}

.np-book-now {
    font-size: 0.75rem !important;     /* 12 — header pill */
    padding: 9px 20px !important;
}

/* --- Reviews / testimonials ---------------------------------------------- */
.np-review-quote {
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
}

.np-review-service {
    font-size: 0.625rem !important;    /* 10 */
}

.np-author-line {
    font-size: 0.8125rem !important;   /* 13 */
}

.np-stars {
    font-size: 0.95rem !important;
}

/* --- FAQ items ------------------------------------------------------------ */
.np-faq-item strong {
    font-size: 1rem !important;        /* 16 */
}


/* ==========================================================================
   3. FIXED HEADER — slimmer & tightened
   --------------------------------------------------------------------------
   Original header was ~135px tall on desktop. Reduced to ~92px so it
   matches the visual weight of the user's other sites and so body
   padding-top stays manageable.
   ========================================================================== */

.np-site-header {
    padding: 14px 0 !important;
}

#np-logo {
    max-height: 60px !important;
}

.np-branding-title {
    font-size: 1.0625rem !important;   /* ~17 (was 19pt = ~25px) */
    letter-spacing: 0.2px;
}

.np-header-location {
    font-size: 0.6875rem !important;   /* 11 */
    letter-spacing: 1.6px !important;
    margin-top: 2px !important;
}

.np-nav-link {
    font-size: 0.8125rem !important;   /* 13 */
    margin-left: 18px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mobile header — smaller reservation */
@media (max-width: 1100px) {
    body { padding-top: var(--np-header-h-mobile); }

    .np-site-header { padding: 10px 0 !important; }
    #np-logo        { max-height: 44px !important; }
    .np-branding-title { font-size: 0.875rem !important; margin-bottom: 0 !important; }
    .np-header-location { font-size: 0.625rem !important; }

    /* Mobile nav: larger tap targets, normal-case */
    .np-nav-link {
        font-size: 0.95rem !important;
        text-transform: none;
        letter-spacing: normal;
        margin: 14px 0 !important;
    }
    .np-book-now {
        font-size: 0.875rem !important;
        padding: 12px 22px !important;
    }
}


/* ==========================================================================
   4. HERO SECTION — undo the WordPress "negative top" hack
   The original pages used `top: -20px` on .np-hero-section at <=1100px to
   pull the hero up under the header. Now that body has padding-top, that
   hack causes a visible gap. Reset it.
   ========================================================================== */
@media (max-width: 1100px) {
    .np-hero-section,
    .np-about-hero,
    .np-services-hero,
    .np-faq-hero,
    .np-contact-hero,
    .np-clients-hero,
    .np-reviews-hero,
    .np-legal-hero {
        top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* Match the home hero height to the interior pages' heroes (50vh). */
.np-hero-section {
    min-height: 50vh !important;
}


/* ==========================================================================
   5. SECTION SPACING — tighten the giant 100px padding blocks
   Original sections used 100px top/bottom padding which compounded the
   "magnified" feeling. Reduced to a more modern 72px / 56px scale.
   ========================================================================== */
.np-services-section,
.np-sanctuary-section,
.np-reviews-section,
.np-faq-section {
    padding: 72px 0 !important;
}

.np-section-header {
    margin-bottom: 44px !important;
}


/* ==========================================================================
   6. FOOTER — typography polish
   ========================================================================== */
.np-site-footer { padding: 50px 0 0 0 !important; }

.np-footer-heading {
    font-size: 0.8125rem !important;     /* 13 */
    letter-spacing: 1.4px !important;
    margin-bottom: 14px !important;
}

.np-footer-logo-title {
    font-size: 1.5rem !important;        /* 24 (was 28) */
}

.np-footer-tagline {
    font-size: 0.75rem !important;       /* 12 */
    letter-spacing: 1.8px !important;
}

.np-footer-socials a {
    font-size: 0.8125rem !important;
}

.np-agency-bar p,
.np-agency-bar a {
    font-size: 0.6875rem !important;     /* 11 */
}


/* ==========================================================================
   7. LIGHTBOX / MODAL — z-index above header
   ========================================================================== */
.np-modal { z-index: 100000; }