/* ==========================================================================
   Listen Up Stay Safe - Cathy Eagan-Spicer
   Source of truth: CAESP_25422_Dv_Wbst_2_26.psd (1920 canvas / 1280 grid)

   ALMOST NOTHING LIVES HERE ANY MORE - and that is deliberate.

   Everything Divi has a field for is set on the module in the Divi editor:
   section and row padding per breakpoint, module margins and widths,
   backgrounds, borders, radii, shadows, image sizing and alignment, button
   alignment, and all typography (family, size, weight, colour, line height,
   letter spacing, capitalisation - clamp() values survive verbatim).

   Everything else that belongs to one module lives in that module's own
   Custom CSS box (Advanced > Custom CSS: Before / Main Element / After, plus
   the free-form box where the word `selector` stands for the module). That is
   where the Gravity Forms styling, the FAQ chevron, the hero's three-card
   cross-fade, the gold icon disc, the pale band's edge fades, the portrait's
   mask, heading margins and paragraph gaps now are - all editable in the
   builder, none of it in this file.

   Only four things are left, because they have no module to attach to:

     1. the palette and font stacks, bridged from Divi's Global Colors by
        functions.php so one swatch drives the whole site
     2. site-wide defaults on `body` and a shared `h2` - one rule beats
        repeating the same six declarations on nine modules
     3. the Theme Builder header WRAPPER (`.et-l--header`), which is markup
        Divi wraps around the layout, not a module you can style
     4. the two card grids, which need `flex: 1 1 0` scoped to `min-width:
        981px` - Divi's Custom CSS only offers desktop / max-980 / max-767, so
        there is no min-width query to hang them on

   Do not add a font-size, family, colour or line-height for a `p` or an
   `.et_pb_text*` here: Divi prints type onto `.et_pb_text_inner`, so a rule on
   the paragraph itself wins and the Design-tab field silently goes dead.

   There is no theme JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------- palette -- */
/* Hex values are PSD fallbacks; functions.php re-declares each token from the
   matching Divi Global Color, so editing a swatch in Divi moves the site. */
:root {
	--lus-teal:   #055672;  /* deep teal - primary                */
	--lus-blue:   #0076A8;  /* mid blue - light headline weight   */
	--lus-green:  #557719;  /* CTA green                          */
	--lus-gold:   #946E3B;  /* card titles                        */
	--lus-badge:  #D6B98C;  /* icon badge + FAQ pill              */
	--lus-ink:    #1F2933;  /* body copy                          */
	--lus-pale:   #E6F7F9;  /* pale blue band                     */
	--lus-page:   #F7FDFF;  /* page white                         */
	--lus-field:  #C2EAEA;  /* form field fill                    */
	--lus-cyan:   #A1DEDF;  /* hero chip / footer gradient top    */
	--lus-disc:   #B0885A;  /* FAQ chevron disc                   */
	--lus-teal-d: #04455B;  /* teal, hover                        */
	--lus-green-d:#46630F;  /* green, hover                       */

	--lus-head:   'Outfit', 'Helvetica Neue', Arial, sans-serif;
	--lus-body:   'Sofia Sans', 'Helvetica Neue', Arial, sans-serif;
	--lus-scriptf:'Caveat', 'Brush Script MT', cursive;
}

/* ------------------------------------------------------- site defaults -- */

body {
	font-family: var(--lus-body);
	font-weight: 300;
	color: var(--lus-ink);
	background-color: var(--lus-page);
}

/* The two-tone H2 the whole page shares: light blue lead-in, bold deep-teal
   emphasis. Divi has no global heading style to write this into, and nine
   copies of it on nine modules would be worse to maintain than one rule.
   Divi also has no field for a heading's margin, hence the two here. */
.et_pb_section h2 {
	font-family: var(--lus-head);
	font-weight: 300;
	font-size: clamp(32px, 4.1vw, 65px);
	line-height: 1.15;
	color: var(--lus-blue);
	margin-bottom: .5em;
}

.et_pb_section h2 strong {
	font-weight: 700;
	color: var(--lus-teal);
}

/* Guard: no word may punch out of its column at any width. */
.et_pb_text,
.et_pb_blurb_container { overflow-wrap: break-word; }

#teaser, #contact { scroll-margin-top: 100px; }

body.error404 #page-container header .et_builder_inner_content .et_pb_section_0_tb_header{
    background-color: rgba(5, 86, 114, 0.96) !important;
}

body.error404 #page-container header .et_builder_inner_content .et_pb_section_0_tb_header .et_pb_column_1_tb_header a {
    background-color: var(--gcid-lus-green) !important;
}

body.error404 #page-container header .et_builder_inner_content .et_pb_section_0_tb_header .et_pb_column_1_tb_header a:hover {
    background-color: var(--gcid-lus-green-d) !important;
}

@media (max-width: 767px) {
	.et_block_row,
	.et_pb_column .et_block_row.et_pb_row_inner { padding: 15px 0; }

	/* headings sit closer to their copy at small sizes */
	.et_pb_section h2 { margin-bottom: .45em; }
}

/* -------------------------------------------- Theme Builder header shell -- */
/* Divi wraps the header layout in `.et-l--header`, which is not a module, so
   this is the one piece of chrome that cannot be styled from the builder.
   Lifting it out of the flow is what lets the hero start at the very top with
   the bar floating over it; the section inside stays in normal flow, which is
   what Divi's native Sticky Position needs in order to measure. */
.et-l--header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99999;
}

body.admin-bar .et-l--header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .et-l--header { top: 46px; }
}

/* ------------------------------------------------------------ card grids -- */
/* Both card rows want a tight fixed gap with equal columns - which means flex
   with `flex: 1 1 0`, and it must apply only from 981px up, because below that
   Divi's own percentage column layout takes over. Divi's Custom CSS boxes are
   desktop / max-width:980 / max-width:767, so there is no min-width query to
   scope this to, and an unscoped rule would leave the cards in one nowrap row
   on a phone. That is why these three blocks are still here. */

@media (min-width: 981px) {
	.lus-takeaway-row,
	.lus-icon-row {
		display: flex;
		flex-wrap: nowrap;
	}
	.lus-takeaway-row { gap: 32px; }
	.lus-icon-row { gap: 26px; }

	.lus-takeaway-row .et_pb_column,
	.lus-icon-row .et_pb_column {
		width: auto !important;
		flex: 1 1 0;
		min-width: 0;   /* let the image shrink with the card */
		margin: 0 !important;
	}
	.lus-takeaway-row .et_pb_column { display: flex; }
}

@media (max-width: 980px) {
	.lus-takeaway-row { display: flex; flex-wrap: wrap; gap: 20px; }
	.lus-takeaway-row .et_pb_column {
		width: calc(50% - 10px) !important;
		flex: 0 0 calc(50% - 10px);
		min-width: 0;
		margin: 0 !important;
	}
	.lus-icon-row .et_pb_column { margin-bottom: 24px; }
	.lus-icon-row .et_pb_column:last-child { margin-bottom: 0; }
}

@media (max-width: 767px) {
	.lus-takeaway-row { display: block; }
	.lus-takeaway-row .et_pb_column {
		width: 100% !important;
		margin: 0 0 20px !important;
	}
	.lus-takeaway-row .et_pb_column:last-child { margin-bottom: 0 !important; }
	.lus-icon-row .et_pb_column { margin-bottom: 18px; }
}

/* --------------------------------------------------------- accessibility -- */
/* A page about physical trauma should hold still for anyone who asks it to.
   An at-rule cannot nest inside Divi's own breakpoint query, so this guard
   stays here; the animation itself is on the hero's art column in Divi. */
@media (prefers-reduced-motion: reduce) {
	.lus-hero-art .lus-pcard { animation: none; opacity: 1; transform: none; }
}