/* ==========================================================================
   NAVY + RED PALETTE — alternate brand scheme
   --------------------------------------------------------------------------
   Loaded after main.css and overrides only the design tokens, so the whole
   site recolours without touching a single layout rule.

   Colours sampled directly from the navy/red logo artwork:
     navy  #0A1E41  (white text 16.5:1)
     navy  #122F5B  (white text 13.3:1)
     red   #CC2B31  (white text  5.3:1 — passes AA)

   Intent: navy carries the design; red is reserved for the primary call to
   action and small accents only. Red is never used for large background
   fields, which would overwhelm the navy and read as alarm rather than brand.
   ========================================================================== */

:root {
	/* --- Navy replaces the old blue as the structural colour --- */
	--color-primary: #1B4A8A;       /* mid navy — links/buttons on white, 8.8:1 */
	--color-primary-dark: #12315F;  /* deeper navy for hover/press */
	--color-sky: #5B93D6;           /* light navy — accents on dark grounds */
	--color-sky-tint: rgba(91, 147, 214, 0.14);

	/* --- Red is the accent, used sparingly --- */
	--color-accent: #CC2B31;        /* logo red */
	--color-accent-dark: #A81F27;   /* deeper red — buttons w/ white text, 7.0:1 */

	/* --- Dark grounds are navy rather than charcoal --- */
	--color-charcoal: #0A1E41;      /* hero, footer, dark sections */
	--color-charcoal-soft: #122F5B;
	--color-storm-gray: #4A5875;    /* navy-leaning body/secondary text */
	--color-off-white: #F4F6FA;     /* faint cool tint so light sections feel related */
	--color-border: #DDE3ED;

	/* Hail-severity scale stays a warm data ramp — it reads as data, not
	   brand — but the low end shifts to navy so it ties in. */
	--color-risk-low: #2F6FB8;
	--color-risk-moderate: #C08A1E;
	--color-risk-high: #D2691B;
	--color-risk-severe: #B22028;
}

/* Hero: navy gradient with a restrained red bloom rather than green. */
.hero {
	background:
		linear-gradient(180deg, rgba(10,30,65,0.58) 0%, rgba(10,30,65,0.94) 100%),
		radial-gradient(ellipse at top right, rgba(91,147,214,0.42), transparent 60%),
		radial-gradient(ellipse at bottom left, rgba(204,43,49,0.22), transparent 55%),
		var(--color-charcoal);
}

/* Second headline line: light navy rather than red. A full-width red
   headline reads as alarm and spends the accent budget in one place —
   red is reserved for actions (buttons) and small marks. */
.hero h1 span { color: var(--color-sky); }

/* Eyebrow badge on the hero — red hairline instead of green. */
.hero__eyebrow {
	background: rgba(204, 43, 49, 0.16);
	border-color: rgba(204, 43, 49, 0.55);
	color: #FF8A8F;
}

/* Section eyebrows: red on light grounds reads as a deliberate accent. */
.section-eyebrow { color: var(--color-accent-dark); }
.section--charcoal .section-eyebrow { color: #FF7A80; }

/* Top promo bar — navy gradient, not blue/green. */
.cta-banner {
	background: linear-gradient(90deg, #0A1E41 0%, #12315F 55%, #1B4A8A 100%);
}
.cta-banner__msg svg { color: var(--color-sky); }

/* Claims banner. */
.claims-banner {
	background:
		radial-gradient(ellipse at top right, rgba(91,147,214,0.3), transparent 55%),
		linear-gradient(120deg, #143a6e, #0A1E41 72%);
}

/* Footer heading rules: navy → red rather than sky → green. */
.footer-widget__title::after,
.footer-col h4::after {
	background: linear-gradient(90deg, var(--color-sky), var(--color-accent));
}

/* Sticky mobile bar: navy call button, red quote button (the money action). */
.sticky-call-bar { background: var(--color-accent-dark); }
.sticky-call-bar a:first-child { background: linear-gradient(90deg, #0A1E41, #1B4A8A); }

/* Response-time pledge — retint from green to navy. */
.response-pledge { background: #E7EDF7; color: #12315F; }

/* Alert/success states keep semantic colour, just harmonised. */
.form-alert--success { background: #E7EDF7; color: #12315F; border-color: var(--color-primary); }

/* X motif: red mark on light grounds, light navy on dark. */
.x-lockup__mark { color: var(--color-accent); }
.section--charcoal .x-lockup__mark { color: var(--color-sky); }
.x-list li::before { background-color: var(--color-accent); }
.section--charcoal .x-list li::before { background-color: var(--color-sky); }

/* Cross-brace texture picks up the navy tint. */
.x-weave::before {
	background-image:
		linear-gradient(45deg, rgba(91,147,214,0.08) 25%, transparent 25%, transparent 75%, rgba(91,147,214,0.08) 75%),
		linear-gradient(-45deg, rgba(91,147,214,0.08) 25%, transparent 25%, transparent 75%, rgba(91,147,214,0.08) 75%);
}

/* Blog callouts and in-article CTA. */
.ir-callout { background: var(--color-sky-tint); border-left-color: var(--color-primary); }
.ir-cta { background: linear-gradient(120deg, #143a6e, #0A1E41 75%); }
.ir-calc { background: #0A1E41; }
.ir-calc__headline { color: #FF7A80 !important; }

/* Storm event cards keep a red spine — appropriate for a hazard feed. */
.storm-event { border-left-color: var(--color-accent); }
.storm-event__day { color: var(--color-accent); }

/* News CTA tiles. */
.news-cta svg { color: var(--color-sky); }

/* Service card icon chips: soft navy wash. */
.service-card__icon { background: var(--color-sky-tint); color: var(--color-primary-dark); }

/* Map placeholder ground. */
.hail-map { background: #0A1E41; }