/*
Theme Name: Orthogenrx
Author: Forcefield Web Development
Author URI: https://forcefieldnc.com
Version: 1.0
Description: Custom theme for GenVisc 850 / TriVisc — Channel-Markers Medical
*/

/* ── Tokens ── */
:root {
    --brand-green: #78ba31;
    --brand-cyan:  #1cbcd4;
    --brand-blue:  #2c9ed8;
    --brand-grad:  linear-gradient(127deg, #78ba31 0%, #1cbcd4 100%);

    --rule:        #c0bfbf;   /* every hairline in the header/footer */
    --nav-ink:     #a7a9ac;
    --nav-ink-sm:  #999494;
    --drawer-bg:   #1d4354;

    --header-h:          120px;  /* two-row, at top of page */
    --header-h-scrolled:  56px;  /* one-row, after scroll */
    --header-h-mobile:    45px;

    /* Content width and gutters. The header uses these too, so its rules line
       up with the edges of the content below it. */
    --content-max: 1300px;
    --gutter:       30px;
    --section-y:    70px;   /* default vertical rhythm between sections */
}

@media (max-width: 768px) {
    :root { --gutter: 24px; --section-y: 50px; }
}
@media (max-width: 480px) {
    :root { --gutter: 18px; --section-y: 40px; }
}

/* ── Font ──
   Raleway ships as one variable woff2 (100–900), so a single 44KB request
   covers 400/600/700 instead of three statics. `optional` + the preload in
   functions.php: used when it arrives in time, otherwise the fallback is kept
   for that load with no mid-load swap. */
@font-face {
    font-family: 'Raleway';
    src: url('fonts/raleway-var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; }

/* ── Base ── */
html {
    /* No elastic overscroll bounce — it exposes empty space above a fixed
       header. Tradeoff: also disables Chrome-Android pull-to-refresh, which
       is fine for brand/marketing sites; DROP this line for a content/app
       site where users pull to refresh. The background is a fallback for
       browsers that ignore overscroll-behavior — set it to the site's
       header/hero color so any exposed gap blends instead of flashing white. */
    overscroll-behavior-y: none;
    background: #fff;
}

body {
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p + p { margin-top: 1em; }

/* ── Container ── */
.ff-container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Default vertical rhythm for plain (non-flex) page content. */
.entry-content,
.error-404 { padding: var(--section-y) 0; }

/* ══ HEADER ══════════════════════════════════════════════════
   One header element in two states. The two-row → one-row collapse is a
   grid-template-areas swap, not a second markup block — the old Divi build
   shipped three separate fixed headers to do this.

   Top of page:   [trivisc][genvisc]      [channel]
                  [nav ...............................]
   Scrolled:      [trivisc][genvisc][nav ][channel]

   Hero pages sit under a transparent header; non-hero pages get body
   padding-top instead and a white bar. Both go gray once scrolled.
   ═══════════════════════════════════════════════════════════ */

/* The gutter lives on .site-header, not .header-inner, so the background still
   bleeds full width while both horizontal rules span the identical 1300px box
   and line up with each other. */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 1000;
    height: var(--header-h);
    padding: 0 var(--gutter);
    background: #fff;
    /* Transparent until scrolled, when the rule moves off .header-inner and
       out to here so it spans the full viewport. */
    border-bottom: 1px solid transparent;
    transition: height .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Transparent over the hero — the background drops out, but both rules stay. */
body.has-hero .site-header { background: transparent; }

/* Opaque, not translucent-with-blur: backdrop-filter forces a compositing
   layer and repaints every scroll frame, and at 95% opacity the blur buys
   nothing visually.
   `body.has-hero` is included so this outranks the transparent rule above —
   without it that selector is more specific and the hero pages' scrolled bar
   stays see-through. */
.site-header.is-scrolled,
body.has-hero .site-header.is-scrolled {
    height: var(--header-h-scrolled);
    background: #f0f0f0;
    border-bottom-color: var(--rule);
}
/* Collapsed state runs its rule edge-to-edge, so the contained one is off. */
.site-header.is-scrolled .header-inner,
body.has-hero .site-header.is-scrolled .header-inner {
    border-bottom-color: transparent;
}

/* align-items: stretch (not center) so the column rules run the full height of
   the row — the divider between the two product logos has to meet the top of
   the viewport and the horizontal rule above the nav, boxing the logos in.
   Each cell centres its own content instead. */
.header-inner {
    height: 100%;
    max-width: 1300px;
    margin: 0 auto;
    border-bottom: 1px solid var(--rule);
    transition: border-color .18s ease;
    display: grid;
    align-items: stretch;
    grid-template-columns: 140px 300px 1fr auto;
    grid-template-rows: 1fr auto;
    grid-template-areas:
        "trivisc genvisc .   channel"
        "nav     nav     nav nav";
}

.site-header.is-scrolled .header-inner {
    grid-template-columns: 110px 145px 1fr auto;
    grid-template-rows: 1fr;
    grid-template-areas: "trivisc genvisc nav channel";
}

/* ── Brand marks ── */
.brand { display: flex; align-items: center; }
.brand img {
    width: auto;
    max-height: 23px;
    transition: max-height .18s ease, opacity .15s ease;
}
.brand:hover img,
.brand:focus-visible img { opacity: .5; }

.brand-trivisc {
    grid-area: trivisc;
    justify-content: flex-end;
    padding-right: 20px;
    border-right: 1px solid var(--rule);
}
.brand-genvisc {
    grid-area: genvisc;
    padding-left: 20px;
}
.brand-channel {
    grid-area: channel;
    justify-content: flex-end;
}
.brand-channel img { max-height: 45px; }

.site-header.is-scrolled .brand img         { max-height: 16px; }
.site-header.is-scrolled .brand-channel img { max-height: 26px; }
.site-header.is-scrolled .brand-genvisc {
    padding-right: 20px;
    border-right: 1px solid var(--rule);
}
.site-header.is-scrolled .brand-channel {
    padding-left: 20px;
    border-left: 1px solid var(--rule);
}

/* ── Nav ── */
.header-nav {
    grid-area: nav;
    display: flex;
    align-items: center;
}

/* This border-top is the horizontal bar the logo divider has to meet — it
   spans all four columns, so the two rules join at the corner. */
/* The lower 12px lives on the items rather than the nav, so each item's box
   reaches the bottom of the header and the dropdown can hang off it directly. */
.site-header:not(.is-scrolled) .header-nav {
    border-top: 1px solid var(--rule);
    padding: 12px 0 0 20px;   /* left indent aligns the nav with the logos */
}
.site-header:not(.is-scrolled) .main-nav > li { padding-bottom: 12px; }
.site-header.is-scrolled .header-nav { padding-left: 30px; }

/* Items stretch to the full nav height so a dropdown opening at top:100% sits
   flush against the header's lower edge with no dead gap for the pointer to
   cross — the usual cause of a submenu closing on the way to it. */
.main-nav {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 0 32px;
}
.main-nav > li { display: flex; align-items: center; }

.main-nav a {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: var(--nav-ink);
    text-decoration: none;
    transition: color .15s ease;
}
.main-nav a:hover,
.main-nav a:focus-visible { color: #000; }
/* Active/ancestor state. WordPress puts current-menu-ancestor on the parent
   <li> from the menu hierarchy, so a "#" custom-link parent lights up while a
   child page is open. */
.main-nav .current-menu-item > a,
.main-nav .current-menu-ancestor > a { color: #000; }

.site-header.is-scrolled .main-nav        { gap: 0 24px; }
.site-header.is-scrolled .main-nav a      { font-size: 13px; color: var(--nav-ink-sm); }
.site-header.is-scrolled .main-nav a:hover { color: #000; }
/* Restated for the collapsed state — the rule above is more specific than the
   active-state rule and would otherwise win. */
.site-header.is-scrolled .main-nav .current-menu-item > a,
.site-header.is-scrolled .main-nav .current-menu-ancestor > a { color: #000; }

/* ── Dropdowns ──
   Rebuilt from the old sub-bar.png (240x500) rather than reusing it: a 3px
   accent bar over a 1px rule over a white panel. As CSS it costs no request
   and stays sharp on any display. Measured off the original — grey to 7px,
   cyan 7–15, green 15–23, grey out to 163 of the 240 width. */
.main-nav li { position: relative; }

.main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 10px;
    z-index: 10;
    width: 240px;
    padding: 20px 0;
    background: #fff;
    border: 1px solid var(--rule);
    box-shadow: 0 2px 5px rgba(0,0,0,.1);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease-in-out, visibility .2s ease-in-out;
}

.main-nav .sub-menu::before {
    content: "";
    position: absolute;
    top: -4px;          /* clears the panel's own 1px top border */
    left: -1px;
    width: 163px;
    height: 3px;
    background: linear-gradient(90deg,
        #6c6e71 0 7px,
        #00bcd5 7px 15px,
        #78ba31 15px 23px,
        #6c6e71 23px 100%);
}

.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
}

.main-nav .sub-menu li { display: block; }
.main-nav .sub-menu a {
    padding: 6px 20px;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    color: #3f3f3f;
}
.main-nav .sub-menu a:hover { color: #000; background: #f4f4f4; }

/* Parent items with children are not links in this menu — show intent. */
.main-nav .menu-item-has-children > a { cursor: default; }

/* ── Hamburger ── */
.hamburger {
    grid-area: channel;
    display: none;
    justify-self: end;
    align-self: center;
    width: 28px;
    height: 22px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.hamburger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.hamburger span + span { margin-top: 6px; }
.hamburger.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Drawer ── */
.mobile-drawer {
    position: fixed;
    top: 0; left: 0;
    z-index: 1200;
    width: 78%;
    max-width: 350px;
    min-width: 300px;
    height: 100%;
    padding: 70px 0 30px;
    background: var(--drawer-bg);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .25s ease;
}
.mobile-drawer.is-open { transform: translateX(0); }

.drawer-close {
    position: absolute;
    top: 18px; right: 18px;
    width: 36px; height: 36px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.drawer-nav a {
    display: block;
    padding: 11px 26px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.drawer-nav .sub-menu a {
    padding-left: 44px;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,.75);
}
.drawer-nav a:hover { background: rgba(255,255,255,.08); }

.drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(0,0,0,.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }

/* ── Content offset ──
   Hero pages slide under the header; everything else starts below it. */
body.no-hero { padding-top: var(--header-h); }

/* ══ HEADER — mobile ══
   Swaps at 980px, not the usual 768: the full nav runs out of room well
   before tablet width. */
@media (max-width: 980px) {
    /* Logos sit on white; the gradient starts where they end and runs to the
       right edge — same split the Divi build used. */
    .site-header,
    .site-header.is-scrolled,
    body.has-hero .site-header {
        height: var(--header-h-mobile);
        background: #fff;
        border-bottom-color: transparent;
        box-shadow: 0 6px 14px -6px rgba(0,0,0,.35);
    }

    /* The bar carries its own shadow — no rule underneath. */
    .header-inner,
    .site-header.is-scrolled .header-inner,
    body.has-hero .header-inner,
    body.has-hero .site-header.is-scrolled .header-inner {
        border-bottom: 0;
        grid-template-columns: auto auto 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "trivisc genvisc channel";
    }

    /* Shares the `channel` cell with the hamburger and bleeds past the
       header's right gutter to the viewport edge. */
    .header-inner::after {
        content: "";
        grid-area: channel;
        margin-right: calc(var(--gutter) * -1);
        background: var(--brand-grad);
    }

    .brand img,
    .site-header.is-scrolled .brand img { max-height: 15px; }

    .brand-trivisc,
    .site-header.is-scrolled .brand-trivisc { padding-right: 14px; border-right: 1px solid var(--rule); }
    .brand-genvisc,
    .site-header.is-scrolled .brand-genvisc { padding-left: 14px; padding-right: 14px; border-right: 0; }

    .header-nav,
    .brand-channel { display: none; }

    .hamburger { display: block; position: relative; z-index: 1; }

    body.no-hero { padding-top: var(--header-h-mobile); }
}

/* ══ HERO — video ══════════════════════════════════════════
   Full viewport, header sits transparent on top of it. The copy is pushed
   down by the header height rather than the section starting below it.
   ═══════════════════════════════════════════════════════════ */

.hero-video {
    position: relative;
    display: flex;
    align-items: flex-start;
    height: 100vh;
    height: 100svh;      /* svh: no jump when mobile browser chrome hides */
    min-height: 520px;
    padding-top: var(--header-h);
    overflow: hidden;
    background: #1d4354; /* covers the gap before the poster paints */
}

.hero-video__poster,
.hero-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Video sits over the poster once it has frames to show. */
.hero-video__media {
    z-index: 1;
    opacity: 0;
    transition: opacity .4s ease;
}
.hero-video__media.is-playing { opacity: 1; }

/* No scrim — the video plays at full brightness. Legibility of the white copy
   rests on the text-shadow below. */

/* Section already carries padding-top: var(--header-h); the 80px here lands
   the copy ~200px from the top of the viewport, matching the original. */
.hero-video__inner {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: calc(1100px + 110px);
    margin: 0 auto;
    padding: 80px var(--gutter) 0 110px;
}

.hero-video__title {
    margin: 0;
    font-weight: 300;
    font-size: clamp(30px, 4.6vw, 60px);
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 1px 12px rgba(0,0,0,.35);
}

@media (max-width: 768px) {
    .hero-video {
        min-height: 420px;
        padding-top: var(--header-h-mobile);
    }
    .hero-video__inner { padding: 40px var(--gutter) 0; }
}

/* No autoplaying background motion for anyone who asked not to see it. The
   poster carries the hero instead; main.js also skips attaching the source. */
@media (prefers-reduced-motion: reduce) {
    .hero-video__media { display: none; }
}

/* ══ WP ADMIN BAR ══════════════════════════════════════════
   WordPress pushes the document down with html { margin-top }, which handles
   normal flow — but anything fixed or sized to the viewport still needs the
   offset applied by hand. Body padding is unaffected: it's measured from the
   top of <body>, which has already moved.
   ═══════════════════════════════════════════════════════════ */

body.admin-bar .site-header    { top: 32px; }
body.admin-bar .mobile-drawer  { top: 32px; height: calc(100% - 32px); }
body.admin-bar .hero-video {
    height: calc(100vh - 32px);
    height: calc(100svh - 32px);
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header   { top: 46px; }
    body.admin-bar .mobile-drawer { top: 46px; height: calc(100% - 46px); }
    body.admin-bar .hero-video {
        height: calc(100vh - 46px);
        height: calc(100svh - 46px);
    }
}

/* Under 600px the admin bar switches to position: absolute and scrolls away
   with the page, so a fixed offset would leave a permanent gap. */
@media screen and (max-width: 600px) {
    body.admin-bar .site-header   { top: 0; }
    body.admin-bar .mobile-drawer { top: 0; height: 100%; }
}

/* ── Buttons ── */
.ff-btn {
    display: inline-block;
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.ff-btn-primary {
    background: #333;
    color: #fff;
}

.ff-btn-primary:hover {
    background: #111;
}

.ff-btn-outline {
    background: transparent;
    border: 2px solid #333;
    color: #333;
}

.ff-btn-outline:hover {
    background: #333;
    color: #fff;
}

/* ── Skip Link ── */
.ff-skip-link {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal;
}
.ff-skip-link:focus {
    clip: auto;
    display: block;
    height: auto;
    width: auto;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100000;
    padding: 15px 23px;
    background: #fff;
    color: #000;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}

/* ── Accessibility ── */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal;
}

/* Self-hosted font template. Use font-display: optional (NOT swap) together
   with a <link rel="preload"> in functions.php: the preloaded font is used
   when it's ready in time, otherwise the fallback is kept for that load with
   no swap — so the web font never reflows big headings (hero CLS). */
/*@font-face {
    font-family: 'YourFont';
    src: url('fonts/yourfont.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}*/

/* ── Responsive ── */
@media (max-width: 1200px) {
}

@media (max-width: 768px) {
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.35rem; }
}