/* ==========================================================================
   BRAND TOKENS — Cor Deo Christian Academy
   ==========================================================================
   Black, white and Cor Deo blue (John 10-30; the Squarespace site's warm
   near-black and grey links were too hard to see). The blue is the logo's,
   sampled from cor-deo-christian-academy-logo.jpg. Native custom properties,
   so any stylesheet can read them regardless of load order.
   ========================================================================== */

/* Fonts, self-hosted (no third-party requests): Jost for headings, nav and
   buttons (the Futura PT the old site used, as an open font), Nunito Sans for
   body copy (closest to the old Europa — planning/font-compare/). One variable
   file per style covers every weight. */
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../../fonts/jost-variable.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../../fonts/jost-variable-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../../fonts/nunito-sans-variable.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: italic; font-weight: 200 1000; font-display: swap; src: url("../../fonts/nunito-sans-variable-italic.woff2") format("woff2"); }

:root {
  --black: #000;
  --white: #fff;

  /* Brand colours */
  --text: var(--black);            /* body copy and headings */
  --brand-blue: #1f4389;           /* the logo's blue: links, main buttons, accents */
  --brand-blue-tint: #eef2f8;      /* the blue at ~7% on white: soft panels */
  --prime: var(--brand-blue);      /* focus rings, accordion and table accents */
  --second: var(--black);          /* the header, footer and mobile menu */
  --background: var(--white);
  --stroke: rgb(0 0 0 / 0.15);     /* hairline rules */

  --grey-dark: #404040;
  --grey-light: var(--brand-blue-tint);   /* the strip above the footer, callouts */
  --prime-light: #333;

  --heading-gradient-from: var(--black);
  --heading-gradient-to: var(--black);
  --grad-hero: linear-gradient(0deg, var(--second), var(--second));

  /* Role tokens — what components read */
  --accent: var(--brand-blue);
  --heading: var(--black);
  --text-body: var(--text);
  --text-muted: rgb(0 0 0 / 0.62);     /* captions and small print (links are blue) */
  --text-on-dark: var(--white);
  --text-on-dark-dim: rgb(255 255 255 / 0.78);  /* footer copy */
  --nav-on-dark: #ccc;
  --prime-deep: var(--second);
  --surface-soft: var(--grey-light);
  --grad-cta: var(--grad-hero);
  --accent-deep: #17336a;          /* the blue, darker: button hover */
  --text-strong: var(--text);
  --placeholder: #9AA5B3;
  --hairline: var(--stroke);
  --hairline-on-dark: rgb(255 255 255 / 0.18);
  --blob-a: var(--grey-light);
  --blob-b: var(--grey-light);

  /* Type */
  --type-display: "Jost", "Futura", sans-serif;
  --type-body: "Nunito Sans", sans-serif;
}

/* TYPE SCALE
   Squarespace styled by tag and misused tags for size (h1 for 42px body copy,
   h2 for list items). Here the TAGS are semantic — one h1 per page, real
   paragraphs — and the old sizes are classes:
     h1, h2, .t-xl   42px light     (the old "Heading 1": section titles)
     .t-lg           32px light     (the old "Heading 2": statements, link lists, dates)
     h3, .label      18px uppercase tracked (the old "Heading 3": names, labels)
     p               16px europa light
   Desktop sizes are the measured ones; below 640px Squarespace scaled them
   down (mobile capture), which the clamp() follows. */
body {
    font-family: var(--type-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.5px;
    color: var(--text-body);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    width: 100%;
}

h1, h2, h3, h4, h5, h6,
.t-xl, .t-lg, .label {
    font-family: var(--type-display);
    color: var(--heading);
    letter-spacing: normal;
}

h1, h2, .t-xl {
    font-size: clamp(30px, 1.143vw + 25.5px, 42px);   /* 30px at 390 → 42px at 1440, as measured */
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 0.5em;
}

.t-lg {
    font-size: clamp(26px, 0.571vw + 23.8px, 32px);   /* 26px at 390 → 32px at 1440 */
    font-weight: 300;
    line-height: 1.2;
    color: var(--text);
    margin: 0 0 0.5em;
}

h3, .label {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 0.5em;
}

h4 {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 0.5em;
}

h5, h6 {
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 0.5em;
}

strong, b { font-weight: 700; }

.text-center { text-align: center; }
.text-right { text-align: right; }

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 0;
    transition: color 0.2s ease;
}

a:hover { color: var(--accent-deep); }

/* Links in page copy: a touch heavier than the light body text, underlined on hover */
#main .content-text a:not(.btn) { font-weight: 500; }
#main .content-text a:not(.btn):hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* A text link inside a big statement keeps the statement's size */
.t-xl a, .t-lg a, h1 a, h2 a { color: var(--accent); font-weight: inherit; }
.t-xl a { text-decoration: underline; text-underline-offset: 0.12em; text-decoration-thickness: 2px; }
.t-xl a:hover, .t-lg a:hover, h1 a:hover, h2 a:hover { color: var(--accent-deep); }

/* Squarespace's line block: the rule sits 66px from the content on either
   side. A rule leads its text element, whose own 34px rhythm makes up the
   space above. */
hr {
    margin: 32px 0 66px;
    border: 0;
    border-top: 1px solid var(--stroke);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
    h3, .label { letter-spacing: 2px; }
}

/* LISTS
   Here rather than in a component file because the list content element and
   a list typed into the rich text editor emit the SAME markup — plain
   <ul>/<li> and <dl>/<dt>/<dd>, with only the wrapper div differing. Two
   files styling one <li> would race at similar specificity, and the two
   would drift apart visually; one owner means they cannot.

   Not website_standard.css either: that file exists for Contao's quirks,
   and indent, spacing and markers are brand decisions.

   Left on UA defaults these run at a 40px indent, which is far wider than
   the type scale wants. padding-inline-start rather than padding-left so a
   right-to-left site mirrors correctly. */
ul,
ol {
    margin: 0 0 1em;
    padding-inline-start: 1.25em;
}

li { margin-bottom: 0.5em; }

/* The list's own bottom margin already provides the gap after the last item;
   without this the two stack up. */
li:last-child { margin-bottom: 0; }

/* A nested list belongs to its parent item, so it gets the item's spacing
   above it and none below. */
li > ul,
li > ol {
    margin-block: 0.5em 0;
}

dl { margin: 0 0 1em; }

dt {
    font-weight: 600;
}

/* Browsers indent <dd> by 40px and give it nothing else, which reads as a
   stray indent rather than a definition. Reset and spaced instead. */
dd {
    margin: 0 0 0.75em;
}

dd:last-child { margin-bottom: 0; }

/* TUNING
   Markers are deliberately left at the text colour. Colouring them
   (`ul > li::marker { color: var(--prime); }`) suits some brands, but it
   costs legibility on ordered lists where the number carries meaning. */

/* BUTTONS — intents, not the button element (see the framework README).
   Squarespace's look: square, uppercase futura, tracked. Solid = the dark
   brand fill; .outline = transparent with a 2px edge (the header's
   Enrollment button, white on the dark bar via .light). */
.btn a,
a.btn,
button[type="submit"],
input[type="submit"],
.submit,
.content-download .download-element a,
.layout_latest p.more a
{
    display: inline-block;
    margin: 0 1em 1em 0;
    padding: 15px 28px;
    text-align: center;
    background-color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 0;
    color: var(--white);
    font-family: var(--type-display);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 3px;
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
}

.btn a:hover,
a.btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.submit:hover,
.content-download .download-element a:hover,
.layout_latest p.more a:hover {
    background-color: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--white);
    text-decoration: none;
}

/* .outline — transparent with a 2px edge in the text colour */
.btn.outline a,
a.btn.outline,
button[type="submit"].outline,
input[type="submit"].outline,
.submit.outline {
    background-color: transparent;
    border-color: var(--accent);
    color: var(--accent);
}
.btn.outline a:hover,
a.btn.outline:hover,
button[type="submit"].outline:hover,
input[type="submit"].outline:hover,
.submit.outline:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
}

/* .light — for the dark bar and bands: white text and edge (with .outline)
   or a white fill with dark text (alone) */
.btn.light a,
a.btn.light,
.submit.light {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--second);
}
.btn.light a:hover,
a.btn.light:hover,
.submit.light:hover {
    background-color: var(--nav-on-dark);
    border-color: var(--nav-on-dark);
    color: var(--second);
}
.btn.light.outline a,
a.btn.light.outline {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
}
.btn.light.outline a:hover,
a.btn.light.outline:hover {
    background-color: var(--white);
    color: var(--second);
}

.small,
.small p {
    font-size: clamp(0.75em, 1.35vw, 1.125em);
}

.small p {
    margin-bottom: 0.875em;
}

.small a, a.small {
    display: inline-block;
}

.small li {
    margin-bottom:0;
}

a.download-element:after {
    display: inline-block;
    padding: 0 0 0 .25em;
    border: 0;
    font-family: "Font Awesome 5 Pro";
    text-transform: none;
    content: "\f019";
    font-weight: 900;
}

a.download-element {
    margin-right: .25em;
    margin-left: .25em;
    padding: 0;
    font-weight: bold;
}

.download-element .size {
    display: none;
}


/* EYEBROW
   The small tracked, uppercase label above a section heading. Its own element,
   class="eyebrow". The leading em-dash is drawn by CSS — never put it in the
   content. Accent colour on light; add .on-dark for white-on-dark bands. */
.eyebrow {
    display: block;
    margin: 0 0 0.6em;
    color: var(--second);
    font-family: var(--type-body);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}
.eyebrow::before { content: "— "; }

/* FONT AWESOME (SVG + JS kit) — the kit swaps <i> for <svg class="svg-inline--fa">,
   and its own 1em cap doesn't always inject before paint; framework_v3's
   `.row > * svg { height: auto }` then leaves the icon at its viewBox size
   (hundreds of px). Cap it so an inline icon tracks the font size. */
.svg-inline--fa,
.row > * .svg-inline--fa {
    display: inline-block;
    height: 1em;
    width: auto;
    max-width: none;
    overflow: visible;
    vertical-align: -0.125em;
}
.eyebrow.on-dark { color: var(--white); }


blockquote {
    padding: 0;
    margin: 0;
    
    p { margin-bottom: 0; }
    
    em {
        font-weight: 600;
        color: var(--prime);
    }
    
    em:after { content: " "; }
}

/* ==========================================================================
   BACKGROUND BANDS
   ==========================================================================
   Replaces .full_width, which conflated two separate jobs: breaking out of
   the page container AND painting a grey background. Those are now split,
   because either is useful without the other:

     .bleed-x    break out of the container   (framework — layout)
     .bg-*       paint a background           (here — brand)

   A full-width grey band is both together:  <div class="bleed-x bg-light">

   .full_width also used two 9999em pseudo-elements to fake the breakout,
   which needed `overflow: visible !important` on the element to work. The
   gap engine's .bleed-x does it with margins and needs no override.
   ========================================================================== */

.bg-light  { background-color: var(--grey-light); }
.bg-cream  { background-color: var(--surface-soft); }
.bg-white  { background-color: var(--white); }
.bg-dark   { background-color: var(--grey-dark); color: var(--white); }
.bg-prime  { background-color: var(--prime);      color: var(--white); }
.bg-ink    { background-color: var(--prime-deep); color: var(--white); }
.bg-navy   { background: var(--grad-cta);         color: var(--white); }

/* A band needs breathing room, or the text sits on the colour's edge. */
.bg-light,
.bg-cream,
.bg-white,
.bg-dark,
.bg-prime,
.bg-ink,
.bg-navy {
    padding-block: var(--space-40);
    padding-inline: var(--page-gutter);
}

/* A .band already re-caps and gutters its own children (`.band > *`), so a
   painted band drops its own inline padding or the two add up. */
.band:is(.bg-light, .bg-cream, .bg-white, .bg-dark, .bg-prime, .bg-ink, .bg-navy) { padding-inline: 0; }

/* Section rhythm: an 80px (clamped) band instead of the bg-* default. */
.band.section-80 { padding-block: var(--space-80); }

/* On a dark band the headings must not stay --heading (unreadable on navy),
   and the h1's text gradient would vanish: re-assert white. */
:is(.bg-dark, .bg-prime, .bg-ink, .bg-navy) :is(h1, h2, h3, h4) {
    color: var(--text-on-dark);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.full_img_background {
    position: relative;
    padding-bottom: 180px;
    margin-bottom: -120px;
    margin-inline: calc(-1 * var(--page-gutter));
}

.full_img_background .content-image{
    position: absolute;
}

.all_corners img {
    border-radius: 20px;
}

@media only screen and (max-width: 1050px) {
    .btn a,
    a.btn,
    button[type="submit"],
    input[type="submit"],
    .submit,
    .content-download .download-element a,
    .layout_latest p.more a {
        padding: 10px 18px;
        font-size: 0.8em;
    }
}

/* ==========================================================================
   REDUCED MOTION — honour the visitor's setting site-wide
   ==========================================================================
   Transitions and animations drop to (near) zero and smooth scrolling stops
   for anyone who asks their device for less motion. Sliders still work; they
   just don't glide. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}