/*
 * ---------------------------------------------------------------------------------------------------------------------
 * Global tokens — css/global.css
 *
 * Every colour, font, size, spacing and radius used by the blocks lives here.
 * Block style.css files reference these variables and never hard-code values.
 *
 * Figma frame is 1920px wide. Font sizes are fluid: the clamp() maximum is the
 * exact Figma value (reached at ~1920px), the minimum is a readable phone size.
 * =====================================================================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {

	/* Colours */
	--clr-brand          : #620153;                  /* deep plum — headings, purple title line, button text */
	--clr-brand-alt      : #822874;                  /* lighter plum — right end of the icon strip gradient */
	--clr-mauve-border   : #916E8C;                  /* tinted button border */
	--clr-pink-tint      : rgba(231, 205, 227, 0.20); /* tinted button fill — #E7CDE3 @ 20% */
	--clr-pink-tint-hover: rgba(231, 205, 227, 0.45); /* tinted button fill on hover */
	--clr-white          : #FFFFFF;
	--clr-white-soft     : rgba(255, 255, 255, 0.50); /* ghost button border (eyeballed, confirm in Figma) */
	--clr-white-wash     : rgba(255, 255, 255, 0.10); /* ghost button fill (eyeballed, confirm in Figma) */
	--clr-text-body      : #424242;                  /* section and card body copy */
	--clr-mauve-line     : #BF97B9;                  /* card borders, divider lines, big italic numbers */
	--clr-icon-tile      : #FAE4F7;                  /* pale pink square behind card icons (sampled from screenshot) */
	--clr-bg-light       : #F2F2F2;                  /* contact section background (sampled from screenshot) */
	--clr-btn-soft       : rgba(186, 142, 180, 0.20); /* translucent button on the purple card */
	--clr-btn-soft-border: #B864AC;                  /* its 1px edge (sampled from screenshot — not in the Figma CSS) */
	--clr-white-hover    : rgba(255, 255, 255, 0.65); /* soft wash behind linked contact items */

	/* Gradients */
	--gradient-hero  : linear-gradient(105deg, #B479AA 0%, #CC9CC4 38%, #E9CBE4 72%, #F9E8F6 100%); /* eyeballed from screenshot */
	--gradient-brand : linear-gradient(90deg, var(--clr-brand) 0%, var(--clr-brand-alt) 100%);
	--gradient-pink-fade : linear-gradient(180deg, #FFF0FE 0.1%, #FFFFFF 99.9%);
	--gradient-card      : linear-gradient(128deg, var(--clr-brand) 0%, var(--clr-brand-alt) 98.27%);

	/* Font families */
	--ff-heading : 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--ff-body    : 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	--ff-ui      : 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	/* Font sizes — rem, px-source comment, fluid between phone and the 1920px Figma frame */
	--fs-hero-title   : clamp(1.875rem, 1rem + 3.35vw, 5rem);      /* 80px ÷ 16 at 1920 — 30px min */
	--fs-hero-tagline : clamp(1.125rem, 0.5rem + 1.72vw, 2.5625rem); /* 41px ÷ 16 at 1920 — 18px min */
	--fs-button       : clamp(1rem, 0.5rem + 0.9vw, 1.5625rem);     /* 25px ÷ 16 at 1920 — 16px min — all buttons, plus the contact card's lead text */
	--fs-strip-text   : clamp(1rem, 0.5rem + 0.95vw, 1.625rem);     /* 26px ÷ 16 at 1920 — 16px min */
	--fs-eyebrow      : clamp(0.875rem, 0.5rem + 0.68vw, 1.3125rem); /* 21px ÷ 16 at 1920 — 14px min */
	--fs-section-title: clamp(1.75rem, 1rem + 1.62vw, 2.9375rem);    /* 47px ÷ 16 at 1920 — 28px min */
	--fs-section-body : clamp(1rem, 0.75rem + 0.58vw, 1.4375rem);    /* 23px ÷ 16 at 1920 — 16px min */
	--fs-divider-title: clamp(1.375rem, 0.75rem + 1.3vw, 2.3125rem); /* 37px ÷ 16 at 1920 — 22px min */
	--fs-card-title   : clamp(1.25rem, 0.75rem + 0.99vw, 1.9375rem); /* 31px ÷ 16 at 1920 — 20px min */
	--fs-card-body    : clamp(1rem, 0.75rem + 0.47vw, 1.3125rem);    /* 21px ÷ 16 at 1920 — 16px min */
	--fs-number       : clamp(2.25rem, 1rem + 2.35vw, 3.8125rem);    /* 61px ÷ 16 at 1920 — 36px min */
	--fs-contact-item : clamp(1.125rem, 0.6rem + 1.06vw, 1.875rem);  /* 30px ÷ 16 at 1920 — 18px min */
	--fs-card-heading : clamp(1.5rem, 0.75rem + 1.46vw, 2.5rem);     /* 40px ÷ 16 at 1920 — 24px min */

	/* Font weights */
	--fw-regular  : 400;
	--fw-medium   : 500;
	--fw-semibold : 600;

	/* Line heights — Figma per-element % values */
	--lh-hero-title   : 1.25;   /* 100px / 80px = 125% */
	--lh-hero-tagline : 1.4634; /* 60px / 41px = 146.341% */
	--lh-button       : 1.8;    /* 45px / 25px = 180% */
	--lh-strip-text   : 1.7308; /* 45px / 26px = 173.077% */
	--lh-eyebrow      : 1.2;    /* Figma 95% — loosened so a wrapped line can't overlap */
	--lh-section-title: 1.3;    /* Figma 191% is a spacing box, not a line height — gap moved to margins */
	--lh-section-body : 1.5217; /* 35px / 23px */
	--lh-divider-title: 1.3514; /* 50px / 37px */
	--lh-card-title   : 1.129;  /* 35px / 31px — numbered title value, used for card titles too (Figma's 290% is a spacing box) */
	--lh-card-body    : 1.5238; /* 32px / 21px */
	--lh-card-link    : 1.6667; /* 35px / 21px */
	--lh-number       : 1;
	--lh-contact-title: 1.4;    /* Figma 300% is a spacing box — gap rebuilt with margins */
	--lh-contact-body : 1.6667; /* 50px line pitch measured in the screenshot ÷ 30px */
	--lh-card-heading : 1.125;  /* 45px / 40px */
	--lh-card-lead    : 1.4;    /* 35px / 25px */

	/* Letter spacing */
	--ls-normal  : 0em;
	--ls-eyebrow : 0.05em;   /* 1.05px ÷ 21px */

	/* Layout — content edge sits ~9% in from each side in the Figma frame */
	--container-width  : 98.75rem;                  /* 1580px ÷ 16 — content width at 1920 */
	--container-gutter : clamp(1.5rem, 9vw, 10.75rem); /* 172px ÷ 16 at 1920 */
	--section-padding  : clamp(3.5rem, 6vw, 7.5rem);

	/* Spacing */
	--space-hero-block  : clamp(4rem, 8.75vw, 10.5rem); /* ~160–176px ÷ 16 top/bottom at 1920 */
	--space-hero-tagline: clamp(1rem, 1.25vw, 1.5rem);  /* 24px ÷ 16 title → tagline */
	--space-hero-actions: clamp(1.75rem, 2.9vw, 3.5rem); /* 56px ÷ 16 tagline → buttons */
	--space-button-gap  : 1.25rem;                     /* 20px ÷ 16 */
	--space-strip-block : clamp(1.5rem, 2.8vw, 3.35rem); /* (152px strip − 45px line) ÷ 2 ≈ 53.5px ÷ 16 at 1920 */
	--space-strip-gap   : clamp(2rem, 5.5vw, 6.5rem);    /* ~104px ÷ 16 between items at 1920 */
	--space-strip-gap-4 : clamp(1.5rem, 3.5vw, 4.5rem);  /* tighter gap when there are four items */
	--space-eyebrow     : 0.75rem;                       /* eyebrow → title */
	--space-title-body  : 0.875rem;                      /* section title → body */
	--space-intro-divider: clamp(2rem, 2.6vw, 3.125rem); /* 50px ÷ 16 — body → divider title */
	--space-divider-line: 1.25rem;                       /* divider title → its rule */
	--space-divider-items: clamp(1.75rem, 2.45vw, 2.9375rem); /* 47px ÷ 16 — rule → cards */
	--space-intro-items : clamp(2.5rem, 3.95vw, 4.75rem); /* 76px ÷ 16 — body → items when there's no divider */
	--space-card-gap    : clamp(1.25rem, 2.3vw, 2.75rem); /* ~44px ÷ 16 between cards */
	--space-column-gap  : clamp(1.5rem, 2.8vw, 3.25rem);  /* ~52px ÷ 16 between numbered columns */
	--space-card-pad-y  : clamp(1.5rem, 2.1vw, 2.5rem);   /* 40px ÷ 16 */
	--space-card-pad-x  : clamp(1.5rem, 2.3vw, 2.75rem);  /* 44px ÷ 16 */
	--space-number-col  : 3rem;                           /* 48px ÷ 16 — number column, also the body indent */
	--space-intro-columns: clamp(2rem, 2.6vw, 3rem);      /* 48px ÷ 16 — contact intro → columns */
	--space-contact-cols: clamp(2rem, 3.4vw, 4rem);       /* 64px ÷ 16 — contact list ↔ card */
	--space-contact-item: clamp(1.25rem, 1.65vw, 2rem);   /* 32px ÷ 16 between contact items */
	--space-card-inset  : clamp(1.75rem, 3.4vw, 4.0625rem); /* 65px ÷ 16 — contact card top/sides */
	--space-card-inset-b: clamp(1.75rem, 3.7vw, 4.4375rem); /* 71px ÷ 16 — contact card bottom */
	--space-card-lead   : clamp(1rem, 2.1vw, 2.5rem);     /* 40px ÷ 16 — card title → text */
	--space-card-buttons: clamp(1rem, 2.1vw, 2.5625rem);  /* 41px ÷ 16 — between stacked card buttons */
	--size-contact-card : clamp(28rem, 36vw, 43.125rem);  /* 690px ÷ 16 — card min-height at 1920 */

	/* Border radius */
	--radius-sm   : 0.25rem;
	--radius-md   : 0.5rem;
	--radius-card : 1rem;
	--radius-btn  : 1.125rem;   /* 18px ÷ 16 */
	--radius-box  : 1.25rem;    /* 20px ÷ 16 — outlined cards */
	--radius-tile : 0.75rem;    /* 12px ÷ 16 — icon tile (eyeballed) */

	/* Border widths */
	--bw-button : 1.5px;        /* kept in px — a 1.5px hairline doesn't scale meaningfully */
	--bw-hairline : 1px;        /* card border, divider-title rule */
	--bw-rule     : 1.5px;      /* 0.09375rem — numbered column rule */

	/* Motion — deliberately slow and soft; audience includes migraine patients */
	--ease-soft       : cubic-bezier(0.25, 0.1, 0.25, 1);
	--dur-hover       : 250ms;
	--dur-settle      : 4.5s;   /* total must stay under 5s (WCAG 2.2.2) */
	--dur-breathe     : 14s;

}

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


/*
 * Buttons never underline
 * ---------------------------------------------------------------------------------------------------------------------
 * Covers every block button that follows the {block}__btn naming, core
 * button blocks and Astra's buttons, in every link state. !important is
 * deliberate: Astra's link-underline settings use selectors that can outrank
 * block styles on hover/focus.
 */
a[class*="__btn"],
a[class*="__btn"]:hover,
a[class*="__btn"]:focus,
a[class*="__btn"]:active,
a[class*="__btn"]:visited,
.wp-block-button__link,
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.ast-button,
.ast-button:hover,
.ast-button:focus {
	text-decoration: none !important;
}