/* Washington Township Fire Department clinical portal — production visual theme.
   Shared across calendar, electronic paperwork and administration. */
:root{--wt-navy:#091d30;--wt-deep:#061525;--wt-red:#c0182a;--wt-red-dark:#981322;--wt-gold:#bd9d32;--wt-text:#13283c;--wt-muted:#586d82;--wt-bg:#f0f4f8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#f7f9fc 0%,#edf3f8 100%)!important;color:var(--wt-text)}
.wtfd-header{color:#fff;background:var(--wt-navy);box-shadow:0 4px 22px #091e3540}
.wtfd-topbar{position:relative;z-index:2;background:#061725;border-bottom:1px solid #ffffff1c}
.wtfd-topbar-inner{width:min(1250px,calc(100% - 48px));margin:auto;min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.wtfd-identity{display:flex;align-items:center;gap:18px;color:white;text-decoration:none;min-width:0}
.wtfd-identity>img{width:75px;height:84px;object-fit:contain;flex:none}
.wtfd-brandtext{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.wtfd-brandtext>span{font-size:clamp(.78rem,1.35vw,1.03rem);font-weight:800;letter-spacing:.16em;color:#eef5fb}
.wtfd-brandtext>strong{font-size:clamp(1.24rem,2.45vw,1.95rem);letter-spacing:.035em;color:#f03548;font-weight:900;margin-top:4px}
.wtfd-navigation{display:flex;gap:5px;flex-wrap:wrap}
.wtfd-navigation a{display:inline-flex;align-items:center;min-height:42px;padding:11px 16px;color:#d8e3ed;text-decoration:none;border-radius:7px;font-weight:650;font-size:.91rem;transition:background .15s,color .15s}
.wtfd-navigation a:hover{background:#ffffff18;color:#fff}
.wtfd-navigation a:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e7bd40!important;outline-offset:3px}
.wtfd-hero{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(116deg,#0a223a 0%,#11283c 58%,#273d4e 100%);border-bottom:5px solid var(--wt-red)}
.wtfd-hero:before{position:absolute;content:"";inset:0;background:radial-gradient(ellipse at 72% 45%,#ab1c3030,transparent 54%),repeating-linear-gradient(135deg,transparent 0 80px,#ffffff04 80px 82px);z-index:-1}
.wtfd-hero-inner{width:min(1250px,calc(100% - 48px));min-height:285px;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,35%);align-items:center;gap:38px;margin:auto}
.wtfd-hero-copy{padding:34px 0 38px}
.wtfd-eyebrow{display:flex;align-items:center;gap:12px;font-size:.75rem;letter-spacing:.2em;font-weight:800;color:#d7e3ee}
.wtfd-gold-line{display:inline-block;width:30px;height:3px;background:#d6b54b;border-radius:5px}
.wtfd-hero h1{color:#fff;font-weight:850;font-size:clamp(2rem,3.8vw,3.55rem);line-height:1.08;max-width:730px;margin:19px 0 14px;text-wrap:balance;letter-spacing:-.035em}
.wtfd-hero-copy>p{font-size:clamp(.95rem,1.3vw,1.13rem);line-height:1.55;color:#e0e8f1;max-width:640px;margin:0}
.wtfd-hero-badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}
.wtfd-hero-badges span{border:1px solid #cba73580;background:#ffffff0d;color:#f0e9cc;border-radius:4px;padding:6px 10px;font-size:.68rem;letter-spacing:.12em;font-weight:750}
.wtfd-hero-visual{height:250px;align-self:stretch;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;margin:auto 0}
.wtfd-hero-visual:before{content:"";position:absolute;inset:16px 0;background:linear-gradient(135deg,#030e17aa,#132b4299);border:1px solid #ffffff21;border-radius:14px;transform:skewX(-5deg);box-shadow:0 12px 26px #0003}
.wtfd-hero-visual img{position:relative;width:min(100%,310px);height:213px;object-fit:contain;border-radius:8px;filter:contrast(1.06) saturate(.95)}
/* Content cards and controls */
main{width:min(1120px,calc(100% - 40px));max-width:1120px!important;margin:32px auto!important;padding:0!important}
main>.panel,main>.card{border:1px solid #dbe3ec!important;border-radius:15px!important;box-shadow:0 8px 30px #17314c12!important;background:#fff!important}
main>.panel:first-of-type,main>.card:first-of-type{border-top:4px solid var(--wt-red)!important}
main>.panel h2,main>.card h2{color:var(--wt-text);letter-spacing:-.02em}
main .muted{color:var(--wt-muted)}
main .notice{background:#fff8e9!important;border-left:4px solid var(--wt-gold)!important;color:var(--wt-text)}
main button:not(:disabled){background:var(--wt-red)!important;color:#fff!important;font-weight:700;transition:filter .15s ease,transform .15s ease}
main button:not(:disabled):hover{filter:brightness(.94)}
main button:disabled{background:#9baabd!important}
main .stat{border-radius:10px;background:#f0f4f8;border:1px solid #e6ecf3}
main .pill{background:#fcecef;color:#a91224;font-weight:750}
main input,main select,main textarea{border-color:#aebdd0;min-height:44px}
main a{color:#a91529;text-underline-offset:3px}
main .step{color:var(--wt-red)!important}
.brand-footer{background:#071929!important;border-top:4px solid var(--wt-red);color:#e1eaf2!important;padding:22px 28px!important;text-align:center;letter-spacing:.06em}
.brand-footer small{color:#bcc9d6}
@media(min-width:900px){
 body:has(#book) main>.panel:first-of-type{padding:30px 32px}
 body:has(#book) main{display:grid;grid-template-columns:1fr 1fr;gap:20px}
 body:has(#book) main>.panel:first-of-type{grid-column:1/-1;margin-bottom:0}
 body:has(#book) main>.panel:not(:first-of-type){margin-bottom:0}
}
.wtfd-header--compact .wtfd-hero-inner{min-height:210px}
.wtfd-header--compact .wtfd-hero-copy{padding:23px 0}
.wtfd-header--compact .wtfd-hero h1{font-size:clamp(1.8rem,3vw,2.7rem)}
.wtfd-header--compact .wtfd-hero-visual{height:195px}
.wtfd-header--compact .wtfd-hero-visual img{height:170px;width:220px}
@media(max-width:850px){
 .wtfd-topbar-inner{min-height:90px;gap:15px}
 .wtfd-navigation a{font-size:.84rem;padding:8px 10px}
 .wtfd-hero-inner{grid-template-columns:minmax(0,1fr) 220px;gap:16px;min-height:235px}
 .wtfd-hero-visual{height:210px}
 .wtfd-hero-visual img{height:165px;width:210px}
}
@media(max-width:620px){
 .wtfd-topbar-inner{width:calc(100% - 30px);min-height:unset;display:block;padding:15px 0}
 .wtfd-identity{gap:11px}
 .wtfd-identity>img{width:52px;height:61px}
 .wtfd-brandtext>span{font-size:.7rem;letter-spacing:.09em}
 .wtfd-brandtext>strong{font-size:1.26rem}
 .wtfd-navigation{margin-top:11px;gap:4px}
 .wtfd-navigation a{font-size:.79rem;min-height:36px;padding:7px 12px}
 .wtfd-hero-inner{width:calc(100% - 36px);grid-template-columns:1fr;gap:0}
 .wtfd-hero-copy{padding:29px 0 12px}
 .wtfd-hero h1{font-size:clamp(1.9rem,8vw,2.6rem)}
 .wtfd-hero-badges{margin-top:16px}
 .wtfd-hero-visual{height:154px;margin-bottom:13px}
 .wtfd-hero-visual:before{inset:5px 12px}
 .wtfd-hero-visual img{width:180px;height:145px}
 .wtfd-header--compact .wtfd-hero-visual{display:none}
 main{width:calc(100% - 28px);margin:20px auto!important}
 main>.panel,main>.card{padding:18px!important}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}

/* Reference-matched masthead: uninterrupted navy navigation and edge-to-edge Engine 42 hero. */
.wtfd-header{width:100%;overflow:hidden;background:#071827}
.wtfd-topbar{width:100%;background:#061827;border-bottom:3px solid #bf1830;position:relative;z-index:3}
.wtfd-topbar-inner{width:min(1380px,calc(100% - 78px));max-width:none;min-height:105px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:35px}
.wtfd-identity{display:flex;gap:23px;align-items:center;min-width:0}
.wtfd-identity>img{width:95px;height:100px;object-fit:contain;margin-bottom:-26px;position:relative;z-index:4;filter:drop-shadow(0 4px 5px #0005)}
.wtfd-brandtext>span{font-size:clamp(.95rem,1.65vw,1.5rem);letter-spacing:.15em;font-weight:850}
.wtfd-brandtext>strong{font-size:clamp(1.55rem,2.7vw,2.85rem);line-height:1.05;color:#db2839;margin-top:3px;font-weight:900}
.wtfd-navigation{gap:clamp(4px,1.4vw,23px);align-self:stretch;align-items:center}
.wtfd-navigation a{position:relative;padding:13px 11px;border-radius:0;white-space:nowrap;font-size:clamp(.78rem,1vw,.98rem)}
.wtfd-navigation a:hover{background:transparent}
.wtfd-navigation a:hover:after,.wtfd-navigation a:focus-visible:after{content:"";position:absolute;bottom:12px;left:11px;right:11px;height:3px;background:#d8b04a}
.wtfd-hero{width:100%;background:#091c2e;min-height:350px;position:relative;isolation:isolate;overflow:hidden;border-bottom:0}
.wtfd-hero:before{display:none}
.wtfd-hero-image{position:absolute;inset:0 0 0 43%;overflow:hidden;z-index:-2;background:#2e3438}
.wtfd-hero-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%;image-rendering:auto;filter:saturate(1.1) contrast(1.04)}
.wtfd-hero:after{position:absolute;content:"";inset:0;z-index:-1;pointer-events:none;background:linear-gradient(102deg,#091a2a 0%,#091a2a 29%,rgba(9,26,42,.98) 38%,rgba(9,26,42,.85) 45%,rgba(9,26,42,.17) 61%,rgba(9,26,42,0) 78%),linear-gradient(180deg,rgba(5,15,26,.13),rgba(5,15,26,.2));}
.wtfd-hero-inner{width:min(1380px,calc(100% - 78px));min-height:350px;max-width:none;display:flex;align-items:center;justify-content:flex-start;margin:auto;padding:0;position:relative}
.wtfd-hero-copy{width:min(610px,52%);padding:49px 0 47px;margin:0;z-index:1}
.wtfd-hero h1{font-size:clamp(2.8rem,5.1vw,5.4rem);font-weight:950;text-transform:uppercase;line-height:1.01;letter-spacing:-.045em;color:#fff;max-width:600px;margin:0 0 18px;text-shadow:0 3px 12px #0008}
.wtfd-hero-subtitle{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:clamp(.58rem,.78vw,.76rem);font-weight:700;letter-spacing:.13em;white-space:normal;color:#e2eaf2;line-height:1.55;margin-bottom:21px}
.wtfd-hero-subtitle .wtfd-gold-line{width:45px;height:3px;background:#d9b334;margin-right:6px;flex-shrink:0}
.wtfd-hero-subtitle b{color:#d9b334;font-weight:800}
.wtfd-hero-copy>p{font-size:clamp(.95rem,1.1vw,1.07rem);line-height:1.55;color:#f1f4f8;margin:0;max-width:535px;text-shadow:0 1px 7px #000a}
.wtfd-header--compact .wtfd-hero-inner{min-height:245px}
.wtfd-header--compact .wtfd-hero{min-height:245px}
.wtfd-header--compact .wtfd-hero h1{font-size:clamp(2.2rem,4vw,4rem)}
.wtfd-header--compact .wtfd-hero-copy{padding:30px 0}
@media(max-width:1050px){
.wtfd-topbar-inner{width:calc(100% - 40px);gap:16px}
.wtfd-identity{gap:12px}
.wtfd-identity>img{width:78px;height:88px}
.wtfd-navigation{gap:2px}
.wtfd-navigation a{padding:12px 8px}
.wtfd-hero-inner{width:calc(100% - 48px)}
.wtfd-hero-copy{width:56%}
.wtfd-hero h1{font-size:clamp(2.35rem,5.6vw,4rem)}
.wtfd-hero-image{left:42%}
}
@media(max-width:680px){
.wtfd-topbar-inner{width:calc(100% - 28px);padding:11px 0;display:block;min-height:unset}
.wtfd-identity>img{width:59px;height:66px;margin-bottom:0}
.wtfd-brandtext>span{font-size:.76rem;letter-spacing:.07em}
.wtfd-brandtext>strong{font-size:1.32rem}
.wtfd-navigation{display:flex;gap:0;margin-top:6px;flex-wrap:wrap;justify-content:flex-start}
.wtfd-navigation a{min-height:34px;padding:8px 10px;font-size:.78rem}
.wtfd-hero{min-height:320px}
.wtfd-hero-image{inset:0 0 0 20%}
.wtfd-hero-image img{object-position:61% center}
.wtfd-hero:after{background:linear-gradient(90deg,rgba(8,23,38,.98) 0%,rgba(8,23,38,.91) 40%,rgba(8,23,38,.66) 76%,rgba(8,23,38,.43) 100%)}
.wtfd-hero-inner{width:calc(100% - 34px);min-height:320px}
.wtfd-hero-copy{width:100%;max-width:530px;padding:34px 0 36px}
.wtfd-hero h1{font-size:clamp(2.55rem,11vw,4.2rem)}
.wtfd-hero-subtitle{font-size:.63rem;gap:7px}
.wtfd-hero-copy>p{font-size:.94rem}
.wtfd-header--compact .wtfd-hero{min-height:245px}
}

/* Full-bleed corrective rules: original individual pages style the generic
   header element with large horizontal padding. That padding must not apply
   to this full-width masthead, regardless of cascade or deployment order. */
html,body{width:100%;max-width:100%;overflow-x:clip}
body>header.wtfd-header,header.wtfd-header{padding:0!important;margin:0!important;max-width:none!important;width:100%!important;box-sizing:border-box!important;display:block!important;background:#071a2b!important}
header.wtfd-header>.wtfd-topbar,header.wtfd-header>.wtfd-hero{width:100%!important;max-width:none!important;margin:0!important}
header.wtfd-header .wtfd-topbar-inner,header.wtfd-header .wtfd-hero-inner{box-sizing:border-box}
header.wtfd-header .wtfd-hero{min-height:365px}
header.wtfd-header .wtfd-hero-inner{min-height:365px}
header.wtfd-header .wtfd-hero-image{right:0!important}
header.wtfd-header .wtfd-hero-image img{object-fit:cover}
header.wtfd-header .wtfd-hero-copy{max-width:600px}
header.wtfd-header .wtfd-hero h1{max-width:690px}
@media(max-width:680px){
 header.wtfd-header .wtfd-hero{min-height:310px}
 header.wtfd-header .wtfd-hero-inner{min-height:310px}
}

/* New student first: explain paperwork before showing the booking calendar. */
main>.enrollment-first,main>.scheduling-panel{grid-column:1 / -1;margin-bottom:20px}
main>.enrollment-first{padding:29px 33px 31px!important;border-top:4px solid var(--wt-gold)!important;background:linear-gradient(115deg,#fff 65%,#f9fbfd)!important}
.enrollment-first h2{font-size:clamp(1.35rem,2.25vw,1.85rem);margin:13px 0 9px!important}
.enrollment-first>.muted{margin:0 0 19px!important}
.enrollment-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:17px 0 20px}
.enrollment-steps>div{background:#f1f5fa;border:1px solid #dce6ef;border-radius:10px;padding:16px 15px;min-width:0}
.enrollment-steps strong{display:block;font-size:.95rem;color:#10243c;margin-bottom:7px}
.enrollment-steps span{display:block;font-size:.86rem;color:#566b80;line-height:1.47}
main a.enrollment-primary{display:inline-flex;align-items:center;justify-content:center;gap:26px;min-height:52px;padding:13px 23px;border-radius:8px;background:#b91225;color:white;font-size:1rem;font-weight:800;text-decoration:none;box-shadow:0 5px 12px #b9122526}
main a.enrollment-primary:hover{background:#921121;color:#fff}
.enrollment-returning{color:#53677a;line-height:1.55;font-size:.92rem;margin:17px 0 0}
.enrollment-returning a{font-weight:750}
.scheduling-panel{scroll-margin-top:20px}
@media(max-width:730px){.enrollment-steps{grid-template-columns:1fr}.enrollment-first{padding:22px 19px!important}.enrollment-steps>div{padding:13px 15px}main a.enrollment-primary{width:100%}}
