/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Heidelberg — global.css
 *
 * Every design token used by every block lives here. Block-level style.css
 * files must never hard-code a value that exists as a token below.
 *
 * Unit rule: always rem, never px. Figma px ÷ 16, with the source px
 * commented inline. Letter spacing: Figma % → em at the same numeral.
 * =====================================================================================================================
 */

/* Fonts are loaded by Astra's typography settings on this project. If that
   ever changes, enqueue them in functions.php rather than @import-ing here
   (an @import at the top of a stylesheet blocks rendering):
   Lora 400 / Inter 400,500,600 */

:root {

	/* Colours */
	--clr-rich-gold      : #A68A68;   /* legacy brand gold — nav/links, pre-redesign buttons */
	--clr-brown          : #614F43;
	--clr-warm-beige     : #EAE1D7;   /* page background; also the base of the hero fade */
	--clr-cream          : #FAF5EF;   /* lighter than warm-beige — logo strip background.
	                                     Also the end stop of feature-split's legacy
	                                     gradient-beige, where it is still hardcoded. */
	--clr-charcoal-black : #1C1C1C;
	--clr-light-grey     : #696969;
	--clr-white          : #FFFFFF;
	--clr-black          : #000000;

	/* Colours — 2026 redesign, copper CTA family */
	--clr-copper         : #C6845D;   /* CTA gradient, start */
	--clr-copper-light   : #E1916C;   /* CTA gradient, end */
	--clr-copper-deep    : #A16745;   /* CTA border + shadow tint; also inline link colour */

	/* Colours — 2026 redesign, type */
	--clr-espresso       : #3D2D28;   /* headings + body copy on light backgrounds.
	                                     Warmer and lighter than --clr-charcoal-black,
	                                     which stays on the legacy blocks. */

	/* Colours — 2026 redesign, card scrims */
	--clr-copper-tan     : #B17755;   /* card scrim, resting */
	--clr-peach          : #F0A786;   /* card scrim, hover */
	--clr-cocoa          : #3F200D;   /* the solid panel in the CTA artwork; used as
	                                     the card's base colour so white text stays
	                                     legible before the image loads */

	/* Colours — 2026 redesign, raised box surfaces */
	--clr-box-tint       : #FFFBF6;   /* top of a box's fill gradient */
	--clr-box-edge       : #F9F5F0;   /* bottom of a box's 1px border gradient */
	--clr-shadow-warm    : #D0C1B0;   /* box drop shadow — a warm grey, not black */

	/* Gradients */
	--gradient-cta       : linear-gradient(92deg, var(--clr-copper) -0.09%, var(--clr-copper-light) 100%);

	/* Hover fill. NOTE: this starts at white, so a white label becomes
	   invisible against it — any button using this MUST switch its label to
	   --clr-charcoal-black on hover. That pairing reads 6.87:1. */
	--gradient-cta-hover : linear-gradient(92deg, var(--clr-white) -0.09%, var(--clr-copper-light) 100%);

	/* Raised box surface. The border is a gradient too, so it is painted with
	   the two-background technique: fill on padding-box, border gradient on
	   border-box, with a transparent border letting the second one show. */
	--gradient-box        : linear-gradient(180deg, var(--clr-box-tint) 0%, var(--clr-warm-beige) 100%);
	--gradient-box-border : linear-gradient(180deg, var(--clr-white) 0%, var(--clr-box-edge) 100%);

	/* Hover: the surface lifts toward white rather than picking up a colour,
	   which keeps the accent copper reserved for things that are actually
	   buttons. */
	--gradient-box-hover  : linear-gradient(180deg, var(--clr-white) 0%, var(--clr-cream) 100%);

	/* Card image scrims — transparent at the top, solid at the bottom, with
	   the label sitting in the solid part.
	   The transparent stop is written as the same hue at zero alpha, NOT as
	   `transparent`. `transparent` is rgba(0,0,0,0), so browsers interpolate
	   through grey and the ramp picks up a dirty cast. */
	--gradient-card-scrim       : linear-gradient(180deg, rgba(177, 119, 85, 0.00) 41.53%, var(--clr-copper-tan) 82.21%);
	--gradient-card-scrim-hover : linear-gradient(180deg, rgba(240, 167, 134, 0.00) 41.35%, var(--clr-peach) 82.21%);

	/* Beige at the top fading to nothing — for a section sitting directly
	   below a white one. Distinct from --gradient-beige, which runs the
	   other way (white down into beige). */
	--gradient-beige-top : linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, var(--clr-warm-beige) 100%);

	/* Flat section background that fades white into the page beige. Used by
	   the "Gradient Beige" background option on content blocks. */
	--gradient-beige     : linear-gradient(180deg, var(--clr-white) 0%, var(--clr-warm-beige) 100%);

	/* Gradient scrim that fades a hero photo down into the page background.
	   Sampled from the designer's Frame_14.png export — the alpha ramps
	   roughly linearly while the hue warms from white to beige. */
	--gradient-hero-fade : linear-gradient(
		180deg,
		rgba(255, 255, 255, 0.00)   0%,
		rgba(255, 255, 255, 0.06)   5%,
		rgba(255, 253, 250, 0.12)  10%,
		rgba(251, 247, 247, 0.25)  20%,
		rgba(247, 244, 242, 0.37)  30%,
		rgba(245, 241, 235, 0.50)  40%,
		rgba(242, 236, 229, 0.63)  50%,
		rgba(239, 232, 224, 0.75)  60%,
		rgba(238, 230, 222, 0.85)  70%,
		rgba(236, 228, 220, 0.90)  80%,
		rgba(236, 228, 218, 0.95)  90%,
		var(--clr-warm-beige)     100%
	);

	/* Font families */
	--ff-heading : "Lora", Georgia, serif;
	--ff-body    : "Inter", system-ui, sans-serif;

	/* Font sizes */
	--fs-hero-heading : 4.25rem;   /* 68px ÷ 16 */
	--fs-heading-md   : 2.75rem;   /* 44px ÷ 16 — in-page section headings */
	--fs-eyebrow-xl   : 1.5625rem; /* 25px ÷ 16 — card-grid eyebrow */
	--fs-heading-sm   : 1.5rem;    /* 24px ÷ 16 — sub-headings and card labels */
	--fs-eyebrow-lg   : 1.375rem;  /* 22px ÷ 16 — split-block eyebrow */
	--fs-body-lg      : 1.25rem;   /* 20px ÷ 16 — split-block body copy */
	--fs-body-md      : 1.125rem;  /* 18px ÷ 16 — secondary-column body copy */
	--fs-hero-eyebrow : 1rem;      /* 16px ÷ 16 — carry-over field, no new Figma spec */
	--fs-body         : 1rem;      /* 16px ÷ 16 */
	--fs-btn          : 1rem;      /* 16px ÷ 16 */

	/* Alias — card-grid's label is the same 24px as a sub-heading. Kept so
	   that block's CSS still reads meaningfully at its call site. */
	--fs-card-label   : var(--fs-heading-sm);

	/* Font weights */
	--fw-regular : 400;
	--fw-medium  : 500;
	--fw-bold    : 700;

	/* Line heights — unitless so they scale with the element's font-size */
	--lh-tight        : 1;        /* 100% — display headings */
	--lh-heading-tight: 1.136;    /* 113.6% — 3.125rem at 2.75rem */
	--lh-snug         : 1.25;     /* 125% — 1.875rem at 1.5rem */
	--lh-eyebrow      : 1.3;      /* 130% — 1.625rem at 1.25rem */
	--lh-heading      : 1.364;    /* 136.4% — 3.75rem at 2.75rem */
	--lh-body         : 1.375;    /* 137.5% — body copy and links */
	--lh-loose        : 1.5;      /* 150% — 1.875rem at 1.25rem */
	--lh-heading-loose: 1.591;    /* 159.1% — 4.375rem at 2.75rem */
	--lh-double       : 2;        /* 200% — 2.5rem at 1.25rem */

	/* Shadows */
	--shadow-box       : 0 0.25rem 0.375rem var(--clr-shadow-warm);          /* 0 4px 6px */
	--shadow-box-hover : 0 0.75rem 1.25rem -0.25rem var(--clr-shadow-warm);  /* lifted */

	/* Letter spacing — Figma % converted to em */
	--ls-heading      : 0.01em;   /* 1%. Most headings: 0.0275rem at 44px,
	                                 0.0425rem at 68px. */
	--ls-heading-wide : 0.02em;   /* 2% — 0.055rem at 44px. Only the footer CTA
	                                 banner specifies this; worth confirming with
	                                 the designer whether it is deliberate. */
	--ls-btn     : 0.06em;   /* matched to the mockup's tracked-out CTA label */
	--ls-normal  : 0em;

	/* Layout */
	--container-width  : 77.5rem;  /* 1240px ÷ 16 */
	--container-gutter : 1.5rem;   /* 24px ÷ 16 */
	--section-padding  : 5rem;     /* 80px ÷ 16 */

	/* DEPRECATED — alias only.
	   The pre-rebuild blocks (.faq-accordion__inner, .card-grid__inner, and
	   ~12 others in the theme's style.css) reference --container-max-width.
	   Keep this until every one of those blocks has been rebuilt onto
	   --container-width, then delete this line and the selectors with it. */
	--container-max-width : var(--container-width);

	/* Border radius */
	--radius-sm   : 0.25rem;
	--radius-md   : 0.5rem;
	--radius-lg   : 0.75rem;
	--radius-pill : 3.125rem;   /* 50px ÷ 16 — renders as a full pill at CTA height */

	/* Motion
	   Durations and easings are tokens so every block's motion feels like it
	   came from the same hand. Anything faster than --motion-fast reads as a
	   glitch; anything slower than --motion-slow reads as a lag. */
	--motion-fast    : 180ms;
	--motion-med     : 320ms;
	--motion-slow    : 900ms;
	--motion-stagger : 70ms;    /* per-item offset in a staggered reveal */

	--ease-out-soft   : cubic-bezier(0.22, 1, 0.36, 1);    /* decelerating: entrances, settles */
	--ease-in-out-soft: cubic-bezier(0.40, 0, 0.20, 1);    /* symmetrical: colour + opacity swaps */

}


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Container utility
 *
 * Available, but prefer giving container-width behaviour directly to a
 * block-scoped .{block-name}__inner — .container is a very commonly
 * clashing class name.
 * =====================================================================================================================
 */

.container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}


/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Edge fades — shared
 *
 * Softens the join with the rows above and below: a band that starts in the
 * NEIGHBOUR's colour and fades into this row's background. Each edge is an
 * independent toggle with its own colour, since the row above and the row
 * below are rarely the same.
 *
 * Used by every content block that loads the "Edge Fades" field group
 * (acf-json/group_edge_fades.json) and prints heidelberg_edge_fades() from
 * functions.php. Feature Split, Split Content and FAQ Accordion predate this
 * and keep their own block-scoped copy.
 *
 * Painted on two spans rather than ::before/::after, because several blocks
 * already use their root pseudo-elements. The spans sit at z-index -1 inside
 * an isolated root, so they paint over the row's own background but under
 * all of its content without any child needing a z-index. A block with its
 * own layered background (e.g. CTA Banner's overlay) raises them with
 * --edge-fade-z.
 *
 * --edge-fade-depth arrives inline from heidelberg_edge_fades().
 *
 * NOTE ON COLOUR: set each fade to the colour of the row it meets, not to
 * this row's own background. Top fade = the row above; bottom = below.
 * =====================================================================================================================
 */

.has-edge-fade {
	--edge-fade-depth  : 120px;
	--edge-fade-top    : transparent;
	--edge-fade-bottom : transparent;

	position: relative;
	isolation: isolate;
}

.edge-fade {
	position: absolute;
	inset-inline: 0;
	z-index: var(--edge-fade-z, -1);
	height: min( var(--edge-fade-depth), 100% );
	pointer-events: none;
}

.edge-fade--top {
	top: 0;
	background: linear-gradient( to bottom, var(--edge-fade-top) 0%, transparent 100% );
}

.edge-fade--bottom {
	bottom: 0;
	background: linear-gradient( to top, var(--edge-fade-bottom) 0%, transparent 100% );
}

.has-edge-fade--top-warm-beige { --edge-fade-top: var(--clr-warm-beige); }
.has-edge-fade--top-cream      { --edge-fade-top: var(--clr-cream); }
.has-edge-fade--top-white      { --edge-fade-top: var(--clr-white); }
.has-edge-fade--top-rich-gold  { --edge-fade-top: var(--clr-rich-gold); }
.has-edge-fade--top-brown      { --edge-fade-top: var(--clr-brown); }
.has-edge-fade--top-black      { --edge-fade-top: var(--clr-black); }

.has-edge-fade--bottom-warm-beige { --edge-fade-bottom: var(--clr-warm-beige); }
.has-edge-fade--bottom-cream      { --edge-fade-bottom: var(--clr-cream); }
.has-edge-fade--bottom-white      { --edge-fade-bottom: var(--clr-white); }
.has-edge-fade--bottom-rich-gold  { --edge-fade-bottom: var(--clr-rich-gold); }
.has-edge-fade--bottom-brown      { --edge-fade-bottom: var(--clr-brown); }
.has-edge-fade--bottom-black      { --edge-fade-bottom: var(--clr-black); }

/*
 * A fade eats into the row's padding, so the content needs more clearance
 * when one is on — otherwise a heading can end up sitting in the middle of
 * the blend. Two classes so this outranks each block's own single-class
 * padding rule, which loads after this file.
 */
.has-edge-fade.has-edge-fade--top {
	padding-top: max( var(--section-padding), calc( var(--edge-fade-depth) + 2rem ) );
}

.has-edge-fade.has-edge-fade--bottom {
	padding-bottom: max( var(--section-padding), calc( var(--edge-fade-depth) + 2rem ) );
}