/* ============================================================
   Divine Energy theme for Website Stylekit Framework v2.1
   ============================================================

   Loads AFTER framework-v2.1.css and AFTER styles.css, and does three jobs:

     1. Re-points the framework's demo palette at Divine Energy's brand, so
        the framework's utilities (title-1, card, btn-solid, pad-*, gap-*)
        come out in our colours rather than the stylekit's.

     2. Adds the patterns the atlas has and the framework does not ship:
        the eyebrow label, the two-tone headline, the hairline stat strip,
        the card-with-a-footer-row, the top bar with a live status.

     3. Bridges the EXISTING classes in base.html and styles.css onto the
        new look. This is the part that changes every page at once. We do
        not rewrite base.html's markup, because .mobile-menu-toggle,
        .mobile-menu-overlay and .nav-links are wired to it in JavaScript,
        and re-cutting that markup to gain a nav that already works would
        be risk with nothing on the other side of it.

   What is deliberately NOT taken from the atlas: its slate-blue and
   ski-orange palette, and its Fraunces/Work Sans faces. Divine Energy keeps
   its own warm neutrals and HB Set. We are borrowing the structure, not the
   brand of a ski resort.
   ============================================================ */


/* ---------- 1. Framework tokens, re-pointed ---------- */

:root {
  /* Brand. styles.css sets --color-accent #c2876b, which measures 2.9:1 on
     white — it fails WCAG AA as a button fill or as small text. These are
     the same hue taken darker: #9c5a33 is 5.6:1, #7a4527 is 8.0:1. */
  --primary-brand-1: #9c5a33;
  --primary-brand-2: #7a4527;
  --primary-transparent-1: #9c5a3314;

  /* Neutrals — Divine Energy's existing near-blacks, not the atlas's slates */
  --primary-dark-1: #1a1a1a;
  --primary-dark-2: #3d3d3d;
  --primary-dark-3: #6b6b6b;

  /* Warm off-whites — the existing --color-bg / bg-card / border */
  --primary-light-1: #ffffff;
  --primary-light-2: #faf9f7;
  --primary-light-3: #e2e0dc;

  /* Secondary — the existing success green, for open and available states */
  --secondary-brand-1: #4a9c6d;
  --secondary-brand-2: #3d8259;
  --secondary-light-1: #eef6f0;
  --secondary-dark-1: #1f3a2a;

  --heading-font: 'HB Set', Georgia, 'Times New Roman', serif;
  --body-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Corners. The atlas reads editorial because its corners are nearly square.
     styles.css runs 8-18px; these are the single biggest change in feel. */
  --button-radius: 0.25rem;
  --radius-s: 0.25rem;
  --radius-m: 0.5rem;
  --radius-l: 0.75rem;

  /* The same sharpening pushed back through the site's OWN radius tokens, so
     all 438 existing rules in styles.css follow without being edited. */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* And the accent, so existing components inherit the accessible terracotta */
  --color-accent: #9c5a33;
  --color-accent-light: #c2876b;
}


/* ---------- 2. Patterns the framework does not ship ---------- */

.eyebrow {
  font-family: var(--body-font);
  font-size: var(--body-size-s);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-brand-1);
}

.eyebrow-rule {
  display: inline-block;
  width: 2rem;
  height: 2px;
  background: var(--primary-brand-1);
  vertical-align: middle;
  margin-right: 0.75rem;
}

.title-accent { color: var(--primary-brand-1); }

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.25rem, 1fr));
  border: 1px solid var(--primary-light-3);
  border-radius: var(--radius-m);
  background: var(--primary-light-1);
  overflow: hidden;
}

.stat-cell {
  padding: var(--size-20) var(--size-24);
  border-right: 1px solid var(--primary-light-3);
}

.stat-cell:last-child { border-right: none; }

.stat-figure {
  font-family: var(--heading-font);
  font-size: var(--title-size-5);
  font-weight: 450;
  line-height: 1.1;
  color: var(--primary-dark-1);
}

.stat-label {
  font-size: var(--body-size-s);
  color: var(--primary-dark-3);
  margin-top: 0.25rem;
}

.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--secondary-brand-1);
  margin-right: 0.4rem;
  vertical-align: baseline;
}

.card-link {
  display: block;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease;
}

.card-link:hover {
  border-color: var(--primary-brand-1);
  transform: translateY(-2px);
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--primary-light-3);
  padding-top: var(--size-12);
  margin-top: var(--size-16);
}

/* Section header: title left, standfirst right, sharing a baseline. */
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--size-32);
}

@media (max-width: 860px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}

/* The framework's buttons inherit the browser's link underline. */
.btn-solid,
.btn-outline,
.btn-solid-on-dark,
.btn-outline-on-dark { text-decoration: none; }


/* ---------- 3. Bridge: base.html's existing classes ---------- */

/* The wordmark carried a purple gradient (#6d28d9 -> #a855f7) left over from
   an older palette. It is the one element on every page that was not in the
   brand's colours at all. */
/* HB Set ships two weights only, 300 and 450 (see the @font-face rules in
   styles.css). Asking for 600 made the browser synthesise a bold, which looks
   noticeably different from the Georgia fallback — so when the web font
   finished loading the wordmark visibly jumped. 450 is a real weight. */
.nav-brand {
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  background-clip: border-box;
  font-family: var(--heading-font);
  font-size: var(--title-size-6);
  font-weight: 450;
  color: var(--primary-dark-1);
  letter-spacing: 0;
}

.header-nav {
  border-bottom: 1px solid var(--primary-light-3);
  background: var(--primary-light-1);
}

.nav-links a {
  border-bottom: 2px solid transparent;
  padding-bottom: 0.3rem;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--primary-dark-1);
  border-bottom-color: var(--primary-brand-1);
}

/* Page headers move from centred to left-aligned, which is what makes the
   atlas read as a reference work rather than a brochure. The eyebrow above
   the title is supplied per-page via {% block page_eyebrow %}. */
.page-title-section {
  text-align: left;
  padding: 100px 24px 32px;
  max-width: 880px;
  margin: 0 auto;
  width: 100%;
}

.page-title {
  font-family: var(--heading-font);
  font-size: var(--title-size-2);
  line-height: 1.1;
  color: var(--primary-dark-1);
}

.page-subtitle {
  font-size: var(--body-size-l);
  color: var(--primary-dark-2);
  max-width: 60ch;
  /* styles.css centres this with `margin: 0 auto`, which combined with the
     measure above pushed it 125px in from the title it sits under. Left-align
     it to the title instead — measured, not guessed. */
  margin-left: 0;
  margin-right: 0;
}

/* A hairline under the page header, the way every atlas section is divided. */
.page-title-section::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--primary-light-3);
  margin-top: var(--size-24);
}

.footer {
  background: var(--primary-light-1);
  border-top: 1px solid var(--primary-light-3);
}

@media (max-width: 720px) {
  .page-title-section { padding-top: 84px; }
}

/* The eyebrow slot in base.html's page header. */
.page-eyebrow {
  margin: 0 0 var(--size-12);
}

/* ---------- 4. Standalone-page furniture ---------- */
/* base.html supplies its own .header-nav, styled in section 3. The standalone
   templates have no shared header at all, so these give them one: the atlas's
   top bar of wordmark / nav / live status, plus the split hero beneath it. */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size-24);
  border-bottom: 1px solid var(--primary-light-3);
  padding: var(--size-16) var(--size-24);
  background: var(--primary-light-1);
  flex-wrap: wrap;
}

.site-head > * { min-width: 0; }

.wordmark {
  font-family: var(--heading-font);
  font-size: var(--title-size-6);
  font-weight: 450;
  color: var(--primary-dark-1);
  text-decoration: none;
  line-height: 1;
}

.wordmark small {
  display: block;
  font-family: var(--body-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary-dark-3);
  margin-top: 0.3rem;
}

.site-nav {
  display: flex;
  gap: var(--size-24);
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.site-nav a {
  font-size: var(--body-size-m);
  color: var(--primary-dark-2);
  text-decoration: none;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--primary-dark-1); }
.site-nav a[aria-current="page"] {
  color: var(--primary-dark-1);
  border-bottom-color: var(--primary-brand-1);
}

/* Named .hero-split, NOT .hero: styles.css already owns .hero and gives it
   text-align:center, 100px padding, a ::before, a ::after and its own h1
   rule. index.html loads styles.css for the shared header, so the two
   collided and the home hero came out centred. */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--size-32);
  background: var(--primary-light-2);
  border: 1px solid var(--primary-light-3);
  border-radius: var(--radius-m);
  padding: var(--size-48);
}

@media (max-width: 860px) {
  .hero-split { grid-template-columns: 1fr; padding: var(--size-24); }
  .stat-cell { border-right: none; border-bottom: 1px solid var(--primary-light-3); }
  .site-head { flex-direction: column; align-items: flex-start; gap: var(--size-12); }
  .site-head > .body-s { white-space: normal !important; }
}

/* ---------- 5. Margin utilities ---------- */
/* The framework ships pad-* and gap-* but no mar-*, while the atlas markup
   uses mar-t-24 / mar-b-16 freely — those come from its own site.css, which
   we did not take. Without these every mar-* class in our templates is a
   silent no-op, which is exactly how the hero's Founded line ended up
   underneath the button. Same scale as the framework's own spacing. */

.mar-t-0 { margin-top: var(--size-0); }
.mar-t-4 { margin-top: var(--size-4); }
.mar-t-8 { margin-top: var(--size-8); }
.mar-t-12 { margin-top: var(--size-12); }
.mar-t-16 { margin-top: var(--size-16); }
.mar-t-20 { margin-top: var(--size-20); }
.mar-t-24 { margin-top: var(--size-24); }
.mar-t-32 { margin-top: var(--size-32); }
.mar-t-40 { margin-top: var(--size-40); }
.mar-t-48 { margin-top: var(--size-48); }
.mar-t-64 { margin-top: var(--size-64); }
.mar-t-80 { margin-top: var(--size-80); }
.mar-t-96 { margin-top: var(--size-96); }
.mar-t-128 { margin-top: var(--size-128); }
.mar-t-160 { margin-top: var(--size-160); }
.mar-b-0 { margin-bottom: var(--size-0); }
.mar-b-4 { margin-bottom: var(--size-4); }
.mar-b-8 { margin-bottom: var(--size-8); }
.mar-b-12 { margin-bottom: var(--size-12); }
.mar-b-16 { margin-bottom: var(--size-16); }
.mar-b-20 { margin-bottom: var(--size-20); }
.mar-b-24 { margin-bottom: var(--size-24); }
.mar-b-32 { margin-bottom: var(--size-32); }
.mar-b-40 { margin-bottom: var(--size-40); }
.mar-b-48 { margin-bottom: var(--size-48); }
.mar-b-64 { margin-bottom: var(--size-64); }
.mar-b-80 { margin-bottom: var(--size-80); }
.mar-b-96 { margin-bottom: var(--size-96); }
.mar-b-128 { margin-bottom: var(--size-128); }
.mar-b-160 { margin-bottom: var(--size-160); }

/* ---------- 6. Align each header to its page's own measure ---------- */
/* The rule under the header still spans the full window — that is the atlas's
   look — but what sits on top of it has to line up with the content below it,
   or the wordmark floats left of the first heading on every page.
   There are two headers and two measures, so this is two fixes:

     base.html pages : .nav-container was 1200px over 880px content
     index.html      : .site-head was full-bleed with a flat 24px padding,
                       over content boxed at 77.5rem                     */

.nav-container {
  max-width: 880px;              /* == .container and .page-title-section */
  /* .page-title-section carries 24px of inner padding and .nav-container had
     none, so the two 880px boxes lined up while their CONTENTS sat 24px
     apart — the wordmark hanging left of every page title. Measured, not
     guessed: nav-brand was at x=193, .page-title at x=217. */
  padding-left: 24px;
  padding-right: 24px;
}

.site-head {
  /* the identical expression .boxed-l uses, so the two share an edge exactly */
  padding-left: max(5%, calc((100% - 77.5rem) / 2));
  padding-right: max(5%, calc((100% - 77.5rem) / 2));
}

/* Constraining .nav-container to the 880px content measure left the eight
   links too little room, so the wordmark broke to "Divine / Energy" and most
   labels wrapped to two lines. Hold them on one line and tighten the type and
   the gaps to suit the narrower measure. */
.nav-brand { white-space: nowrap; }

.nav-links {
  gap: 0.95rem;
}

.nav-links a {
  white-space: nowrap;
  font-size: 0.8125rem;
}

@media (max-width: 1100px) {
  /* below this the eight links genuinely do not fit; the existing mobile
     menu toggle takes over at base.html's own breakpoint */
  .nav-links { gap: 0.75rem; }
  .nav-links a { font-size: 0.78rem; }
}

/* Three boxes share the 880px measure on base.html pages — the nav, the page
   header and the content — but only the header carried inner padding, so the
   cards sat 24px wider than the title above them. Give .container the same
   padding and all three share one edge, at every width. */
.container {
  padding-left: 24px;
  padding-right: 24px;
}

/* ---------- 7. The one footer ---------- */
/* Same measure as the header and the content, so all four edges agree.
   The old footer ran on a 1200px box against 880px content and let its
   tagline pass underneath the Live Chat button in the bottom right. */

.footer {
  background: var(--primary-light-1);
  border-top: 1px solid var(--primary-light-3);
  padding: var(--size-48) 24px var(--size-24);
  margin-top: auto;
}

.footer-content {
  max-width: 880px;
  margin: 0 auto;
  /* 24px inner padding, to match .nav-container / .page-title-section /
     .container — without it the footer wordmark sat 24px left of the header
     wordmark directly above it (measured: 193 vs 217). */
  padding-left: 24px;
  padding-right: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr);
  gap: var(--size-40);
  align-items: start;
}

.footer-wordmark {
  font-family: var(--heading-font);
  font-size: var(--title-size-6);
  font-weight: 450;
  color: var(--primary-dark-1);
  text-decoration: none;
}

.footer-tagline {
  font-size: var(--body-size-s);
  color: var(--primary-dark-3);
  margin-top: 0.5rem;
  max-width: 34ch;
}

.footer-note {
  font-size: var(--body-size-s);
  color: var(--primary-dark-3);
  margin-top: 0.75rem;
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--size-24);
}

.footer-col { display: flex; flex-direction: column; gap: 0.45rem; }

.footer-head {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-brand-1);
  margin-bottom: 0.2rem;
}

.footer-col a {
  font-size: var(--body-size-s);
  color: var(--primary-dark-2);
  text-decoration: none;
}

.footer-col a:hover { color: var(--primary-dark-1); text-decoration: underline; }

.footer-base {
  max-width: 880px;
  margin: var(--size-32) auto 0;
  padding-top: var(--size-16);
  padding-left: 24px;
  border-top: 1px solid var(--primary-light-3);
  display: flex;
  justify-content: space-between;
  gap: var(--size-16);
  flex-wrap: wrap;
  /* the Live Chat button floats bottom-right; keep the last line clear of it */
  padding-right: 13rem;
}

.footer-base p { font-size: var(--body-size-s); color: var(--primary-dark-3); }

@media (max-width: 860px) {
  .footer-content { grid-template-columns: 1fr; gap: var(--size-32); }
  .footer-base { padding-right: 0; }
}