/** Hunt Safety Zone blocks, layered on the HFF base (style.css). Loaded after style.css. **/

:root{
    --sz-navy:#003871;
    --sz-red:#aa0000;
    --sz-light-blue:#C4E7FF;
    --sz-light-grey:#EEF3F8;
    --sz-gold:#dfa63d;
}

/* ---- logo: temp PNG (351x80) until the client's SVG arrives. HFF forces .logo to 400px, which would upscale
   and blur it; 300px = 68px tall, same visual height as HFF's logo ---- */
.logo{width:300px !important;}
.offcanvas-logo{width:260px !important;}
@media(max-width:991.98px){
    :root{--nav-height:81px;}        /* 55px logo + py-2 + brand padding; HFF's 69px let the fixed header cover 12px of content */
    .logo{width:240px !important;}   /* 300px + the toggler didn't fit a 375px phone, so the hamburger wrapped under the logo */
}

/* ---- main nav: Hunt Companies type sizes (16px / 22px, bold) ---- */
header .navbar .navbar-nav .dropdown-menu li a{font-size:16px; font-weight:700; line-height:22px;}
@media(min-width:992px){
    :root{--nav-height:98px;}   /* 2.35rem x 2 padding + 22px line; was 105px at the old 20px size */
    header .navbar .navbar-nav > .nav-item > .nav-link{font-size:16px; line-height:22px; white-space:nowrap;}   /* items without a dropdown lacked text-nowrap, so "Window Safety" wrapped to 2 lines */
    /* every top link is exactly the nav height. With padding alone, the inline-block dropdown toggles picked up
       ~1.8px of line-box space (98.98px) while plain block links stayed 97.2px, leaving a ~0.9px white strip above
       and below Window Safety / Resources */
    header .navbar .navbar-nav > .nav-item > .nav-link{display:flex !important; align-items:center; height:var(--nav-height) !important; padding-top:0; padding-bottom:0;}   /* !important beats the template's h-100 on plain links */
    header .navbar .navbar-nav .dropdown-menu li a{padding:1rem 1.5rem;}
}
/* HFF's ".dropdown-menu li:hover a" painted every link under the hovered item, so an open submenu turned
   navy with its parent (desktop flyouts and the mobile menu alike). Reset descendants, then highlight only
   the item itself. */
header .navbar .navbar-nav .dropdown-menu li:hover a{color:#003871 !important; background:transparent !important;}
header .navbar .navbar-nav .dropdown-menu li:hover > a{color:#ffffff !important; background:#003871 !important;}

/* ---- mobile / offcanvas menu (below 992px) ---- */
@media(max-width:991.98px){
    /* top level: left aligned, smaller than HFF's 24px, right padding clears the expand arrow */
    header .navbar .navbar-nav .nav-item{text-align:left;}
    header .navbar .navbar-nav > .nav-item > .nav-link{font-size:18px !important; padding-right:3rem;}
    /* nested toggles (e.g. Fire Prevention) carry .nav-link, so HFF's 24px / centered top-level rule hit them:
       match their sibling dropdown items instead */
    header .navbar .navbar-nav .dropdown-menu .nav-item > .nav-link{position:relative; font-size:16px !important; font-weight:700 !important; line-height:22px; text-align:left; padding:1rem 3rem 1rem 1rem; color:#003871; background:#ffffff;}   /* relative: the caret centres on the link, not on the li (which grows to include the open submenu) */
    /* their caret: the parent menu's chevron-down, not Bootstrap's .dropend border triangle */
    header .navbar .navbar-nav .dropdown-menu .dropdown-toggle::after{content:"\f078"; border:0 !important; width:auto; height:auto; top:50% !important; right:18px !important; transform:translateY(-50%); color:#003871;}
    header .navbar .navbar-nav .dropdown-menu .dropdown-toggle.show::after{transform:translateY(-50%) rotate(-180deg);}
    header .navbar .navbar-nav .dropdown-menu li:hover > .dropdown-toggle::after{color:#ffffff;}
    header .navbar .navbar-nav .dropdown-menu{padding-top:0; padding-bottom:0;}   /* Bootstrap's .5rem (8px) top/bottom */
    /* third level reads as a child: indented, no separate card */
    header .navbar .navbar-nav .dropdown-menu .dropdown-menu{margin:0 !important; box-shadow:none !important;}
    header .navbar .navbar-nav .dropdown-menu .dropdown-menu li a{padding-left:2rem;}
}
/* small laptops / landscape tablets: the 6-item menu + logo overflowed below 1300px, so step both down
   (measured: 703px of label text at 16px; Bootstrap link padding is 8px/side below 1200, 16px/side from 1200) */
@media(min-width:1200px) and (max-width:1299.98px){
    .logo{width:260px !important;}
    header .navbar .navbar-nav > .nav-item > .nav-link{font-size:15px;}
}
@media(min-width:992px) and (max-width:1199.98px){
    .logo{width:240px !important;}
    header .navbar .navbar-nav > .nav-item > .nav-link{font-size:13px;}
}

/* ---- desktop flyouts for menus more than 2 deep (e.g. At Home > Fire Prevention > Grilling) ----
   Nested items reuse the top-level markup (li.nav-item.dropend > a.nav-link.dropdown-toggle), so undo the
   top-level link styling inside dropdowns and open the third level to the side. */
@media(min-width:992px){
    header .navbar .navbar-nav .dropdown-menu .dropend{position:relative;}
    header .navbar .navbar-nav .dropdown-menu .nav-item > .nav-link{display:flex !important; align-items:center; justify-content:space-between; width:100%; padding:1rem 1.5rem !important; color:#003871; background:transparent;}
    header .navbar .navbar-nav .dropdown-menu .nav-item:hover > .nav-link,
    header .navbar .navbar-nav .dropdown-menu .nav-item > .nav-link.show{color:#ffffff !important; background:#003871 !important;}
    header .navbar .navbar-nav .dropdown-menu .nav-item > .nav-link.active::before{display:none;}
    header .navbar .navbar-nav .dropdown-menu .dropdown-toggle::after,
    header .navbar .navbar-nav .dropdown-menu .dropdown-toggle.show::after{content:"\f054"; transform:none; margin-left:1.25rem; border:0 !important; width:auto; height:auto; vertical-align:middle;}   /* chevron-right; border:0 kills Bootstrap's .dropend border-triangle caret drawn behind it */
    /* no margin: any gap between item and flyout fires mouseleave mid-move and the hover script closes it */
    header .navbar .navbar-nav .dropdown-menu .dropend > .dropdown-menu{position:absolute; top:0; left:100%; margin:0; min-width:100%;}
    /* items near the right edge open their flyout to the left so it stays on screen */
    header .navbar .navbar-nav > .nav-item:nth-last-child(-n+2) .dropend > .dropdown-menu{left:auto; right:100%;}
}

/* ---- homepage hero: Hunt Companies height + rounded corners ----
   HC's hero is 14rem/10rem caption padding (same as ours) around a 318px text block = 702px at desktop.
   Our slides carry less text, so hold the text block at HC's 318px; longer slides can still grow.
   The two rounded corners come from .hunt-border-radius on .carousel-item (home.php), as on HC. */
@media(min-width:992px){
    #primaryCarousel .carousel-caption > .row{min-height:318px;}
}
#primaryCarousel .carousel-item .object-background{object-position:center;}   /* HFF crops from the top */

/* ---- footer: huntcompanies.com's (values from its style.css), scoped to .primary-footer so it beats
   HFF's black .footer-author credit bar without editing style.css ---- */
.text-charcoal{color:#515C67;}
.text-grey-3{color:#B0B0B0;}
.text-nd-2{color:#003871;}
.hover-red:hover{color:#aa0000 !important;}
.primary-footer{background:#ffffff; font-size:16px; line-height:22px;}   /* HC body type; ours is 20px */
:where(.primary-footer) a{color:#003871;}   /* :where keeps this below .text-charcoal etc., like HC's "footer a" */
.primary-footer .footer-logo{display:block; width:224px;}   /* block: no inline baseline gap from the home-link wrapper */
.primary-footer .footer-links{gap:1rem;}                       /* stacked on phones */
@media(min-width:992px){
    .primary-footer .footer-links{gap:3rem;}                   /* logo + links grouped left with room between; credit pushed right (ms-lg-auto) */
}
.primary-footer .footer-author{background:transparent;}
.primary-footer .footer-author .credit{padding:0; margin:0; color:#B0B0B0; font-size:.88em; text-align:center; line-height:2;}
.primary-footer .footer-author .credit img{width:165px; filter:grayscale(1); transition:.15s ease-in-out;}
.primary-footer .footer-author .credit img:hover,
.primary-footer .footer-author .credit img:active{filter:grayscale(0);}
.primary-footer .footer-author .credit a{text-decoration:none; color:#515C67; transition:.15s ease-in-out;}
.primary-footer .footer-author .credit a:hover{text-decoration:underline; color:#478CFF;}

/* section labels: small uppercase eyebrow + short rule (HMC pattern) */
.sz-eyebrow{display:inline-block; font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sz-red); margin-bottom:.75rem;}
.sz-eyebrow::after{content:""; display:block; width:48px; height:3px; margin-top:.6rem; background:currentColor;}
.text-center .sz-eyebrow::after{margin-left:auto; margin-right:auto;}
.sz-eyebrow-gold{color:var(--sz-gold);}
.sz-heading{color:var(--sz-navy); font-weight:600; line-height:1.15;}

/* topic tiles: photo-top cards (HCP expertise grid), full colour */
.sz-tile{position:relative; display:flex; flex-direction:column; height:100%; background:#fff; overflow:hidden; box-shadow:0 .5rem 1.5rem rgba(0,56,113,.08); transition:box-shadow .2s ease-in-out;}
.sz-tile:hover{box-shadow:0 1rem 2rem rgba(0,56,113,.16);}   /* hover = deeper shadow + title & link turn red (no lift / zoom / line change, per Mason) */
.sz-tile-img{aspect-ratio:3/2; overflow:hidden; border-bottom:6px solid var(--sz-light-blue);}
.sz-tile-img img{width:100%; height:100%; object-fit:cover;}
.sz-tile-body{flex-grow:1; display:flex; flex-direction:column; padding:1.5rem 1.5rem 1.25rem;}
.sz-tile-title{color:var(--sz-navy); font-weight:600; margin-bottom:.5rem; transition:color .15s ease-in-out;}
.sz-tile:hover .sz-tile-title{color:var(--sz-red);}
.sz-tile-text{font-size:1rem; color:#444; flex-grow:1;}
.sz-tile-link{font-size:.9rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--sz-navy); text-decoration:none;}
.sz-tile-link::after{content:""; position:absolute; inset:0;}  /* whole card clickable */
.sz-tile:hover .sz-tile-link{color:var(--sz-red);}

/* welcome letter: text + quote-style signature callout (HMC) */
.sz-letter{background:var(--sz-light-grey);}
.sz-signature{border-left:5px solid var(--sz-red); background:#fff; padding:1.25rem 1.5rem; margin-top:1.5rem;}
.sz-signature .sz-sig-name{color:var(--sz-navy); font-weight:700; font-size:1.15rem; margin:0;}
.sz-signature .sz-sig-role{font-size:.85rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#666; margin:0;}

/* video card with play button (HCP video block) */
.sz-video{position:relative; display:block; width:100%; padding:0; border:0; background:none; overflow:hidden; cursor:pointer;}
.sz-video img{width:100%; aspect-ratio:4/3; object-fit:cover;}   /* no zoom on hover (per Mason) */
.sz-video::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,56,113,0) 40%, rgba(0,56,113,.85) 100%); z-index:1;}
.sz-video-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:88px; height:88px; border-radius:50%; background:var(--sz-red); color:#fff; display:flex; align-items:center; justify-content:center; font-size:2rem; padding-left:6px; box-shadow:0 0 0 10px rgba(255,255,255,.35); transition:box-shadow .2s ease-in-out, background .2s ease-in-out;}
.sz-video:hover .sz-video-play{background:var(--sz-navy); box-shadow:0 0 0 16px rgba(255,255,255,.35);}
.sz-video-caption{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:1.25rem 1.5rem; color:#fff; text-align:left;}
.sz-video-caption strong{display:block; font-size:1.4rem; line-height:1.2;}
.sz-video-caption span{font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sz-light-blue);}
#szVideoModal .modal-content{background:#000; border:0; border-radius:0;}
#szVideoModal .btn-close{position:absolute; top:-2.5rem; right:0; filter:invert(1); opacity:1;}

/* tip of the month / featured resource band (HMC call-to-action band) */
.sz-feature-band{background:var(--sz-navy); color:#fff; border-top:5px solid var(--sz-red);}
.sz-feature{height:100%; display:flex; flex-direction:column;}
.sz-feature + .sz-feature, .sz-feature-divider{border-left:1px solid rgba(255,255,255,.2);}
.sz-feature-title{color:#fff; font-weight:600; margin-bottom:.75rem;}
.sz-feature p{color:rgba(255,255,255,.85); flex-grow:1;}
.sz-btn{display:inline-block; align-self:flex-start; font-size:.9rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.75rem 1.5rem; text-decoration:none; border-radius:0;}
.sz-btn-light{background:var(--sz-light-blue); color:var(--sz-navy);}
.sz-btn-light:hover{background:#fff; color:var(--sz-navy);}
.sz-btn-red{background:var(--sz-red); color:#fff;}
.sz-btn-red:hover{background:#fff; color:var(--sz-red);}

@media(max-width:992px){
    .sz-feature-divider{border-left:0; border-top:1px solid rgba(255,255,255,.2); padding-top:2.5rem; margin-top:2.5rem;}
}

/* ---- subpage banner: title vertically centered. HFF's caption had 7rem top / 5rem bottom padding plus
   Bootstrap's bottom:1.25rem offset on a relative caption, so the title sat ~32px off center ---- */
#subpageCarousel .carousel-caption{bottom:0; padding-top:6rem; padding-bottom:6rem;}
@media(max-width:991.98px){
    #subpageCarousel .carousel-caption{padding-top:5.5rem; padding-bottom:5.5rem;}
}

/* ---- [[section_pages]]: the section's child pages as a sidebar card, styled like the Benefits card on
   barksdalefamilyhousing.com/careers (HMC): gold-light header, red icons, bold items ---- */
.sz-section-card{border-radius:8px; overflow:hidden; box-shadow:0 4px 16px rgba(0,56,113,.25); background:#fff;}
.sz-section-card-head{background:#F6E9D1; padding:1rem 1.5rem;}
.sz-section-card-head h5{margin:0; color:var(--sz-navy); font-weight:500;}
.sz-section-card-body{padding:1.5rem;}
.sz-section-card-body li + li{margin-top:1.5rem;}
.sz-section-card-body a{display:flex; align-items:center; font-weight:600; color:inherit; text-decoration:none; transition:color .2s;}
.sz-section-card-body a i{flex-shrink:0; width:1.25em; margin-right:1rem; font-size:1.25rem; color:var(--sz-red); text-align:center;}
.sz-section-card-body a:hover{color:var(--sz-navy);}

/* ---- .subpage-content: generic styles for CMS page content (wrapper in render-page-from-database.php).
   Headings use huntcompanies.com's scale (Outfit 500), all Hunt navy. Wrapped in :where() so
   any class (components, Bootstrap utilities like .text-white) still wins ---- */
:where(.subpage-content) :is(h1,h2,h3,h4,h5,h6){font-weight:500; color:var(--sz-navy); margin-bottom:.5rem;}
:where(.subpage-content) h1{font-size:clamp(2rem, 1.6rem + 1.2vw, 2.5rem); line-height:1.2;}
:where(.subpage-content) h2{font-size:clamp(1.625rem, 1.35rem + .9vw, 2rem); line-height:1.25;}
:where(.subpage-content) h3{font-size:clamp(1.3rem, 1.2rem + .4vw, 1.5rem); line-height:1.333;}
:where(.subpage-content) h4{font-size:1.3rem; line-height:1.385;}
:where(.subpage-content) h5{font-size:1.2rem; line-height:1.417; font-weight:600;}
:where(.subpage-content) h6{font-size:1rem; line-height:1.5; font-weight:600;}
:where(.subpage-content) :is(p,ul,ol,table,.ratio,img,.sz-resources) + :is(h2,h3,h4,h5,h6){margin-top:2rem;}
:where(.subpage-content) ul li::marker{color:var(--sz-red);}
:where(.subpage-content) ol li::marker{color:var(--sz-red); font-weight:600;}

/* "Additional Resources:" box = the homepage signature callout (red left rule), on light grey to stand off the white page */
.sz-resources{border-left:5px solid var(--sz-red); background:var(--sz-light-grey); padding:1.25rem 1.5rem; margin:2rem 0 1.5rem;}
.sz-resources h4{color:var(--sz-navy); font-weight:600; font-size:1.5rem; margin:0 0 .75rem !important;}
.sz-resources ul{margin-bottom:0; font-size:1.1em;}  /* body is 18px, so em, not rem */
.sz-resources a{font-weight:500;}
/* content links: bold Hunt navy, no underline, Hunt red on hover (classed links/buttons/the section card still win) */
:where(.subpage-content) a{font-weight:700; color:var(--sz-navy); text-decoration:none; transition:color .2s;}
:where(.subpage-content) a:hover{color:var(--sz-red);}

/* content images floated beside their text on desktop (float-lg-start me-lg-3 mb-3 sz-img-side); centered above it on phones */
.sz-img-side{display:block; margin-left:auto; margin-right:auto;}
@media(min-width:992px){
    .sz-img-side{max-width:300px; clear:both; margin-top:.35rem;}
}
:where(.subpage-content) .sz-img-side + :is(h2,h3,h4,h5,h6){margin-top:0;}
:where(.subpage-content) [class*="col-"]::after{content:""; display:table; clear:both;}  /* contain floats */
.sz-img-tip{margin-bottom:1.5rem;}  /* photo + tip block (Frozen Pipe Prevention) */

/* breadcrumbs: styles live in views/components/template/breadcrumbs.php (self-contained, portable to other sites) */
/* SZ only: a light-grey strip right under the banner (component default is a 2rem top margin) */
.container-fluid.breadcrumbs-container{margin-top:0; background:var(--sz-light-grey);}  /* doubled class: the component CSS loads later */

/* AOS fade-left/right start 100px off to the side; on phones the columns are full width, so clip the sections that
   use them or the page gets a horizontal scroll (clip, not hidden: no scroll container, nothing else changes) */
.sz-letter, .sz-feature-band{overflow-x:clip;}

/* ---- homepage hero prev/next (desktop). Bootstrap's controls are full-height strips 15% wide (z-index 1), which
   sat on top of the Learn More button from 992-1800px. Clickable area = just the arrow (48px). Until the gutter
   outside the container fits an arrow with room to spare (>=1500px) they sit at the bottom, lined up with the text edges (content
   spans 204-522px of the 702px slide); from 1500px they're vertically centered in the gutter ---- */
@media(min-width:992px){
    #primaryCarousel .carousel-control-prev, #primaryCarousel .carousel-control-next{width:48px; height:48px; top:auto; bottom:2.5rem; opacity:.8;}
    #primaryCarousel .carousel-control-prev:hover, #primaryCarousel .carousel-control-next:hover{opacity:1;}
    #primaryCarousel .carousel-control-prev{left:calc((100% - 960px) / 2 + .75rem);}
    #primaryCarousel .carousel-control-next{right:calc((100% - 960px) / 2 + .75rem);}
}
@media(min-width:1200px){
    #primaryCarousel .carousel-control-prev{left:calc((100% - 1140px) / 2 + .75rem);}
    #primaryCarousel .carousel-control-next{right:calc((100% - 1140px) / 2 + .75rem);}
}
@media(min-width:1400px){
    #primaryCarousel .carousel-control-prev{left:calc((100% - 1320px) / 2 + .75rem);}
    #primaryCarousel .carousel-control-next{right:calc((100% - 1320px) / 2 + .75rem);}
}
@media(min-width:1500px){
    #primaryCarousel .carousel-control-prev, #primaryCarousel .carousel-control-next{top:50%; bottom:auto; transform:translateY(-50%);}
    #primaryCarousel .carousel-control-prev{left:calc((100% - 1320px) / 4 - 24px);}
    #primaryCarousel .carousel-control-next{right:calc((100% - 1320px) / 4 - 24px);}
}