/* skin.css — design tokens from devops/brand-guidelines.md.
 * {{...}} tokens are filled by the builder at instantiation time. */
:root {
  --brand-primary: #223773;
  --brand-on-primary: #ffffff;
  --font-body: 'Lato', system-ui, sans-serif;
  --font-heading: 'Racing Sans One', 'Lato', sans-serif;
  --dark-bg: #223773; /* EPD navy — header/footer use the brand */
  --light-bg: #f4f4f4;
  --dark-surface: #22252b;
}

body { font-family: var(--font-body); padding-top: 76px; }
h1, h2, h3, h4, h5, .navbar-nav { font-family: var(--font-heading); }
h1 span, h2 span, h3 span { color: var(--brand-primary); }
a { color: var(--brand-primary); }

.site-header { background: var(--dark-bg); }
.site-header .nav-link { color: #fff; }
.site-header .nav-link:hover { color: var(--brand-primary); }

.btn-brand, .btn-brand:hover, .btn-brand:focus {
  background: var(--brand-primary); border-color: var(--brand-primary);
  color: var(--brand-on-primary); font-weight: 600;
}
.btn-brand:hover { filter: brightness(0.92); }

.section-title { text-align: center; margin: 0 0 2rem; }
.section-title h2 { display: inline-block; border-bottom: 2px solid var(--brand-primary); padding-bottom: .5rem; }
section[data-section], section.site-section { padding: 3.5rem 0; }
section.alt { background: var(--light-bg); }

/* Hero carousel */
.hero-carousel .carousel-item { height: min(72vh, 640px); background-size: cover; background-position: center; }
.hero-carousel .carousel-caption { background: rgba(0,0,0,.45); border-radius: .5rem; display: inline-block; padding: .5rem 1.5rem; }

/* Gallery */
.gallery-grid img { width: 100%; height: 220px; object-fit: cover; border-radius: .375rem; }

/* Services accordion */
.accordion-button:not(.collapsed) { background: var(--brand-primary); color: var(--brand-on-primary); }
.accordion-button:focus { box-shadow: none; }

/* Reviews + rating */
.rating-stars { color: #f4b400; letter-spacing: 2px; }
.review-card { background: var(--dark-surface); color: #eee; border-radius: .5rem; padding: 1.5rem; max-width: 640px; margin: 0 auto; }
.review-card a { color: var(--brand-primary); }
.review-slide { padding: 0 3rem 2.5rem; }
.powered-by-google { font-size: .8rem; color: #888; margin-top: .5rem; }

/* Footer */
.site-footer { background: var(--dark-bg); color: #ccc; }
.site-footer .footer-link { color: var(--brand-primary); text-decoration: none; }

/* Hours */
.hours-table th { font-weight: 600; }

/* ---- EPD recruiting additions ---- */
h1, h2, h3, h4 { letter-spacing: .02em; }
.site-header .navbar-brand img { height: 52px; width: auto; }
.hero-carousel .carousel-caption { bottom: 18%; z-index: 2; } /* above .carousel-fade active slide (z-index:1) */
.hero-carousel h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin: 0; }
.hero-carousel .tagline { font-size: 1.15rem; margin: .25rem 0 0; }
.band { background: var(--brand-primary); color: var(--brand-on-primary); }
.band h2 { color: var(--brand-on-primary); }

.career-card { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: .5rem;
  background: var(--brand-primary); color: #fff; text-decoration: none; }
.career-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.career-card:hover img { transform: scale(1.05); }
.career-card .label { position: absolute; inset: auto 0 0 0; padding: 1rem; text-align: center;
  background: rgba(34,55,115,.85); font-family: var(--font-heading); font-size: 1.6rem; }
.career-card .cta { display: block; font-family: var(--font-body); font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; }

.fact-list li, .benefit-list li { padding: .25rem 0; }
.position-card { background: #fff; border-top: 6px solid var(--brand-primary); border-radius: .5rem; height: 100%;
  box-shadow: 0 2px 12px rgba(0,0,0,.08); padding: 1.5rem; }
.position-card .pay { font-weight: 700; color: var(--brand-primary); font-size: 1.1rem; }
.position-card h4 { font-size: 1rem; margin-top: 1rem; }

.gallery-grid figure { margin: 0; }
.gallery-grid figcaption { font-family: var(--font-heading); text-align: center; padding-top: .5rem; font-size: 1.2rem; }

.chief img { border-radius: 50%; max-width: 260px; width: 100%; }
.page-hero { background-size: cover; background-position: center; min-height: 260px; display: flex; align-items: center; position: relative; }
.page-hero::before { content: ""; position: absolute; inset: 0; background: rgba(34,55,115,.7); }
.page-hero .container { position: relative; color: #fff; }
.page-hero h1 { color: #fff; }

.footer-cta { background: var(--light-bg); }
.site-footer .eeo { font-size: .8rem; color: #c9d0e3; max-width: 900px; margin: 0 auto; }
.site-footer .footer-nav a { color: #fff; text-decoration: none; margin: 0 .35rem; }
.site-footer .footer-link { color: #fff; }

/* ---- Position (recruiting) pages ---- */
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 90px; }
.recruit-hero { min-height: min(70vh, 560px); }
.recruit-hero .eyebrow { text-transform: uppercase; letter-spacing: .15em; font-weight: 700; font-size: .85rem; color: #c9d0e3; }
.recruit-hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); max-width: 760px; }
.recruit-hero .pitch { font-size: 1.15rem; max-width: 680px; }
.btn-outline-light { font-weight: 600; }
.stat-band { background: var(--brand-primary); color: #fff; padding: 2.5rem 0; }
.stat-tile { text-align: center; padding: .5rem; }
.stat-tile .value { font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.1; }
.stat-tile .label { font-size: .9rem; color: #c9d0e3; }
.cta-band { background: linear-gradient(rgba(34,55,115,.88), rgba(34,55,115,.88)), url(/assets/images/swat-in-a-van.jpg) center/cover; color: #fff; }
.cta-band h2 { color: #fff; }
.step-card { text-align: center; padding: 1rem; }
.step-num { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: .75rem; }
.apply-card { background: #fff; border-radius: .75rem; box-shadow: 0 6px 30px rgba(0,0,0,.1); padding: 2rem; border-top: 6px solid var(--brand-primary); }
.chief-quote blockquote { font-size: 1.1rem; font-style: italic; }
.mobile-apply { display: none; }
@media (max-width: 767.98px) {
  .mobile-apply { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: .6rem 1rem;
    background: rgba(255,255,255,.96); box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
  body.has-mobile-apply { padding-bottom: 72px; }
}
[data-repeat="content.recruit.steps"] { counter-reset: step; }
.step-num::before { counter-increment: step; content: counter(step); }
/* Recruit heroes: darker behind the text (left), lighter over the subject (right) */
@media (min-width: 768px) {
  .recruit-hero::before { background: linear-gradient(90deg, rgba(34,55,115,.88) 0%, rgba(34,55,115,.7) 45%, rgba(34,55,115,.2) 100%); }
}
.chief-name .fw-bold { font-family: var(--font-heading); font-size: 1.15rem; color: var(--brand-primary); font-weight: 400 !important; }