/* =============================================================
   GHS Theme -- assets/css/base.css
   Reset, normalize bits, base typography, global layout helpers,
   link and focus styles.

   Depends on: tokens.css, fonts.css (loaded before this file)

   @package GHS_Theme
   @since   1.0.0
   ============================================================= */


/* ----------------------------------------------------------
   BOX MODEL RESET
   ---------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   TAP HIGHLIGHT SUPPRESSION
   Browsers (Safari/iOS, Android Chrome) apply a pink/blue
   semi-transparent overlay on tap via -webkit-tap-highlight-color.
   We suppress it globally and replace it with our own :active
   and :focus-visible states so no unwanted pink ever appears.
   ---------------------------------------------------------- */

* {
    -webkit-tap-highlight-color: transparent;
}


/* ----------------------------------------------------------
   SELECTION  (from v2 _ds base.css)
   ---------------------------------------------------------- */

::selection {
    background: var(--ghs-teal-200);
    color:      var(--ghs-navy-deep);
}


/* ----------------------------------------------------------
   BODY
   ---------------------------------------------------------- */

html {
    font-size: 100%;          /* 16px base -- never change this               */
    scroll-behavior: smooth;  /* smooth anchor scroll; overridden by prefers  */
    -webkit-text-size-adjust: 100%;
}

body {
    margin:  0;
    padding: 0;
    font-family:              var(--font-body);
    font-size:                var(--fs-base);
    line-height:              var(--lh-relaxed);
    color:                    var(--text-body);
    background-color:         var(--ghs-white);
    -webkit-font-smoothing:   antialiased;
    -moz-osx-font-smoothing:  grayscale;
    text-rendering:           optimizeLegibility;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}


/* ----------------------------------------------------------
   MEDIA
   ---------------------------------------------------------- */

img,
video,
svg {
    display:   block;
    max-width: 100%;
    height:    auto;
}


/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family:  var(--font-display);
    font-weight:  var(--fw-bold);
    line-height:  var(--lh-snug);
    color:        var(--text-strong);
    margin-top:   0;
    margin-bottom: var(--space-4);
    text-wrap:    pretty;      /* modern headline wrapping                  */
}

h1 { font-size: clamp(2rem,     4vw,  var(--fs-h1)); }
h2 { font-size: clamp(1.5rem,   3vw,  var(--fs-h2)); }
h3 { font-size: clamp(1.25rem,  2vw,  var(--fs-h3)); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-base); }
h6 { font-size: var(--fs-sm); }


/* ----------------------------------------------------------
   PARAGRAPHS
   ---------------------------------------------------------- */

p {
    margin-top:    0;
    margin-bottom: var(--space-4);
    max-width:     72ch; /* comfortable reading width                        */
}

p:last-child {
    margin-bottom: 0;
}


/* ----------------------------------------------------------
   LINKS
   ---------------------------------------------------------- */

a {
    color:          var(--ghs-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:
        color             var(--dur-base) var(--ease-standard),
        text-decoration-color var(--dur-base) var(--ease-standard);
}

a:hover {
    color: var(--ghs-navy);
}


/* ----------------------------------------------------------
   FOCUS RING  (teal, accessible across all backgrounds)
   ---------------------------------------------------------- */

:focus-visible {
    outline:        2px solid var(--ghs-teal);
    outline-offset: 3px;
    border-radius:  2px;
}

/* Remove default outline for mouse users only when :focus-visible is not supported */
:focus:not(:focus-visible) {
    outline: none;
}


/* ----------------------------------------------------------
   LISTS (reset for nav usage; keep defaults for prose)
   ---------------------------------------------------------- */

ul, ol {
    margin:  0;
    padding: 0;
}

/* Restore list spacing inside rich-text containers */
.wp-block-post-content ul,
.wp-block-post-content ol,
.entry-content ul,
.entry-content ol {
    padding-left: var(--space-5);
    margin-bottom: var(--space-4);
}


/* ----------------------------------------------------------
   BLOCKQUOTE
   ---------------------------------------------------------- */

blockquote {
    margin:       0;
    padding-left: var(--space-5);
    border-left:  4px solid var(--ghs-teal);
    font-family:  var(--font-display);
    color:        var(--text-strong);
}


/* ----------------------------------------------------------
   FORM ELEMENTS
   Shared theme-wide styling for all text inputs, textareas
   and selects. Component/section CSS may override specifics.
   ---------------------------------------------------------- */

input,
textarea,
select,
button {
    font-family: inherit;
    font-size:   inherit;
}

/* Text-entry inputs and textareas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea {
    display:       block;
    width:         100%;
    padding:       0.625rem 0.875rem;   /* 10px 14px -- comfortable tap target */
    font-family:   var(--font-body);
    font-size:     var(--fs-base);
    line-height:   var(--lh-normal);
    color:         var(--text-body);
    background:    var(--ghs-mist);
    border:        1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);   /* 12px per design tokens */
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    box-sizing:    border-box;
    transition:
        border-color var(--dur-fast) var(--ease-standard),
        box-shadow   var(--dur-fast) var(--ease-standard),
        background   var(--dur-fast) var(--ease-standard);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: var(--ghs-teal);
    box-shadow:   var(--focus-ring);   /* 0 0 0 3px rgba(0,172,168,.40) */
    background:   var(--ghs-white);
    outline:      none;
}

textarea {
    resize:     vertical;
    min-height: 80px;
}

/* Select element */
select {
    display:       block;
    width:         100%;
    padding:       0.625rem 2.5rem 0.625rem 0.875rem;
    font-family:   var(--font-body);
    font-size:     var(--fs-base);
    line-height:   var(--lh-normal);
    color:         var(--text-body);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2333485a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 0.75rem center,
        var(--ghs-mist);
    border:        1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    outline:       none;
    cursor:        pointer;
    -webkit-appearance: none;
    appearance:    none;
    box-sizing:    border-box;
    transition:
        border-color var(--dur-fast) var(--ease-standard),
        box-shadow   var(--dur-fast) var(--ease-standard);
}

select:focus {
    border-color: var(--ghs-teal);
    box-shadow:   var(--focus-ring);
    outline:      none;
}


/* ----------------------------------------------------------
   DETAILS / SUMMARY (FAQ base; styled fully in faq.css)
   ---------------------------------------------------------- */

details summary {
    list-style: none;
    cursor:     pointer;
}

details summary::-webkit-details-marker {
    display: none;
}


/* ----------------------------------------------------------
   CONTAINER
   Container classes used across all templates and sections.
   ---------------------------------------------------------- */

.ghs-container {
    width:     100%;
    max-width: var(--container-max);  /* 1200px */
    margin-right:  auto;
    margin-left:   auto;
    padding-right: 5%;
    padding-left:  5%;
}

/* Narrow container for text-heavy sections (e.g. FAQ) */
.ghs-container--narrow {
    max-width: 720px;
}


/* ----------------------------------------------------------
   SKIP LINK  (accessibility: keyboard users skip to content)
   ---------------------------------------------------------- */

.skip-link {
    position:  absolute;
    top:       -9999px;
    left:      -9999px;
    z-index:   9999;
    padding:   var(--space-2) var(--space-4);
    background: var(--ghs-navy);
    color:      var(--ghs-white);
    font-family: var(--font-body);
    font-size:   var(--fs-sm);
    font-weight: var(--fw-bold);
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.skip-link:focus {
    top:  var(--space-3);
    left: var(--space-3);
}


/* ----------------------------------------------------------
   SCREEN READER ONLY UTILITY
   ---------------------------------------------------------- */

.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:    -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}


/* ----------------------------------------------------------
   EYEBROW LABEL  (shared micro-copy above section headings)
   ---------------------------------------------------------- */

.ghs-eyebrow {
    font-family:    var(--font-display);
    font-size:      var(--fs-xs);
    font-weight:    var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color:          var(--ghs-teal);
    margin:         0 0 var(--space-3);
    display:        block;
}


/* ----------------------------------------------------------
   PAGE WRAPPER  (opened in header.php, closed in footer.php)
   Gives the navbar its fixed positioning context and ensures
   page content starts below the 88px navbar + 20px gap.
   ---------------------------------------------------------- */

.ghs-page-wrap {
    min-height: 100vh;
    display:    flex;
    flex-direction: column;
}

.ghs-page-content {
    flex: 1;
    padding-top: 108px; /* 68px nav height + 20px top offset + 20px breathing room */
}