/* =========================================================================
   Brand tokens, fonts and base typography.
   Source: Zonta International Brand Identity Guidelines (Aug 2022), pp. 9, 11.
   Loaded on the front end and in the block editor (add_editor_style).
   White text only on Mahogany and Cyan; Gold, Orange and Gray take black text.
   ========================================================================= */

@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/lato-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/lato-latin-700-italic.woff2") format("woff2"); }

:root {
	/* Corporate palette + tints */
	--zd4t-mahogany: #802528;
	--zd4t-mahogany-80: #9d514d;
	--zd4t-mahogany-40: #d1a5a1;
	--zd4t-mahogany-20: #e9d1ce;
	--zd4t-gold: #f5bd47;
	--zd4t-gold-80: #faca6e;
	--zd4t-gold-60: #fed692;
	--zd4t-gold-40: #f9e5b6;
	--zd4t-orange: #e18431;
	--zd4t-orange-80: #ec9c5b;
	--zd4t-orange-40: #fbcdab;
	--zd4t-orange-20: #ffe5d4;
	--zd4t-cyan: #005f71;
	--zd4t-cyan-80: #007e8c;
	--zd4t-cyan-60: #5095a7;
	--zd4t-cyan-40: #8ebdc3;
	--zd4t-gray: #a9a8a9;
	--zd4t-gray-60: #cbc9ca;
	--zd4t-gray-40: #dcdbdb;
	--zd4t-gray-20: #f7f5f5;

	/* Hover shades (not in the guide; darker so white text keeps its contrast) */
	--zd4t-mahogany-dark: #651d20;
	--zd4t-cyan-dark: #004a58;

	/* Roles */
	--zd4t-primary: var(--zd4t-mahogany);
	--zd4t-secondary: var(--zd4t-cyan);
	--zd4t-fg: #1f1a1a;
	--zd4t-muted: #5c5657;
	--zd4t-bg: #ffffff;
	--zd4t-bg-soft: var(--zd4t-gray-20);
	--zd4t-bg-warm: var(--zd4t-gold-40);
	--zd4t-bg-dark: var(--zd4t-mahogany);
	--zd4t-border: var(--zd4t-gray-40);
	--zd4t-border-strong: var(--zd4t-gray);
	--zd4t-link: var(--zd4t-mahogany);
	--zd4t-link-hover: var(--zd4t-cyan);
	--zd4t-focus: var(--zd4t-cyan);

	/* Typography (Hypatia Sans Pro is licensed and not used on the web) */
	--zd4t-font: "Lato", Arial, Helvetica, sans-serif;
	--zd4t-text-sm: 0.875rem;
	--zd4t-text-base: 1.0625rem;
	--zd4t-text-lg: 1.25rem;
	--zd4t-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--zd4t-text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--zd4t-text-3xl: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);
	--zd4t-text-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);

	/* Spacing */
	--zd4t-space-1: 0.25rem;
	--zd4t-space-2: 0.5rem;
	--zd4t-space-3: 0.75rem;
	--zd4t-space-4: 1rem;
	--zd4t-space-5: 1.5rem;
	--zd4t-space-6: 2rem;
	--zd4t-space-7: 3rem;
	--zd4t-space-8: 4rem;
	--zd4t-space-9: 6rem;

	/* Layout */
	--zd4t-maxw: 1200px;
	--zd4t-maxw-narrow: 760px;
	--zd4t-gutter: 20px;
	--zd4t-header-h: 72px;
	--zd4t-radius: 4px;
	--zd4t-radius-lg: 8px;
}

/* Anchors land below the sticky header. */
html { scroll-padding-top: calc(var(--zd4t-header-h) + var(--zd4t-space-5)); }

body {
	font-family: var(--zd4t-font);
	font-size: var(--zd4t-text-base);
	line-height: 1.6;
	color: var(--zd4t-fg);
	background: var(--zd4t-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--zd4t-font); font-weight: 700; line-height: 1.2; color: inherit; margin: 0 0 0.5em; }
h1 { font-size: var(--zd4t-text-4xl); }
h2 { font-size: var(--zd4t-text-3xl); }
h3 { font-size: var(--zd4t-text-2xl); }
h4 { font-size: var(--zd4t-text-xl); }
h5 { font-size: var(--zd4t-text-lg); }
h6 { font-size: var(--zd4t-text-base); }
p, ul, ol, blockquote { margin: 0 0 1em; }
small { font-size: var(--zd4t-text-sm); }

blockquote {
	border-left: 4px solid var(--zd4t-gold);
	padding-left: var(--zd4t-space-5);
	font-size: var(--zd4t-text-lg);
	font-style: italic;
}

/* Underlined by default so links don't rely on colour alone (WCAG 1.4.1). */
a { color: var(--zd4t-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--zd4t-link-hover); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--zd4t-focus); outline-offset: 2px; }
main:focus { outline: none; }

.zd4t-skip-link { position: absolute; left: var(--zd4t-space-4); top: -100px; z-index: 1000; padding: var(--zd4t-space-3) var(--zd4t-space-4); background: var(--zd4t-mahogany); color: #ffffff; font-weight: 700; }
.zd4t-skip-link:focus { top: var(--zd4t-space-4); color: #ffffff; outline-color: var(--zd4t-gold); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; word-wrap: normal !important; }

/* Dark surfaces: white text, gold focus ring. Gold text is AA on Mahogany only (5.5:1; 4.3:1 on Cyan). */
.zd4t-on-dark, .zd4t-section--dark, .has-mahogany-background-color, .has-cyan-background-color {
	--zd4t-fg: #ffffff;
	--zd4t-link: #ffffff;
	--zd4t-link-hover: var(--zd4t-gold);
	--zd4t-accent-text: var(--zd4t-gold);
	--zd4t-focus: var(--zd4t-gold);
	color: #ffffff;
}
.zd4t-on-cyan, .has-cyan-background-color {
	--zd4t-link-hover: #ffffff;
	--zd4t-accent-text: #ffffff;
}
.has-gold-background-color, .has-orange-background-color, .has-gray-background-color { color: #000000; }

/* ---------- Buttons ---------- */
.zd4t-btn, .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--zd4t-space-2);
	min-height: 44px;
	padding: 0.7em 1.6em;
	font-family: var(--zd4t-font);
	font-size: var(--zd4t-text-base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	color: #ffffff;
	background: var(--zd4t-primary);
	border: 2px solid var(--zd4t-primary);
	border-radius: var(--zd4t-radius);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.zd4t-btn:hover, .wp-block-button__link:hover { color: #ffffff; background: var(--zd4t-mahogany-dark); border-color: var(--zd4t-mahogany-dark); }

.zd4t-btn--secondary { background: var(--zd4t-secondary); border-color: var(--zd4t-secondary); }
.zd4t-btn--secondary:hover { background: var(--zd4t-cyan-dark); border-color: var(--zd4t-cyan-dark); }

.zd4t-btn--outline, .is-style-outline > .wp-block-button__link { color: var(--zd4t-primary); background: transparent; border-color: currentColor; }
.zd4t-btn--outline:hover, .is-style-outline > .wp-block-button__link:hover { color: #ffffff; background: var(--zd4t-primary); border-color: var(--zd4t-primary); }

.zd4t-on-dark .zd4t-btn--outline { color: #ffffff; }
.zd4t-on-dark .zd4t-btn--outline:hover { color: #000000; background: #ffffff; border-color: #ffffff; }

/* Gold with black text, for calls to action on dark surfaces. */
.zd4t-btn--on-dark { color: #000000; background: var(--zd4t-gold); border-color: var(--zd4t-gold); }
.zd4t-btn--on-dark:hover { color: #000000; background: #ffffff; border-color: #ffffff; }

/* Button blocks on dark backgrounds: Gold fill, white outline. */
:is(.zd4t-on-dark, .has-mahogany-background-color, .has-cyan-background-color) .wp-block-button__link { color: #000000; background: var(--zd4t-gold); border-color: var(--zd4t-gold); }
:is(.zd4t-on-dark, .has-mahogany-background-color, .has-cyan-background-color) .wp-block-button__link:hover { color: #000000; background: #ffffff; border-color: #ffffff; }
:is(.zd4t-on-dark, .has-mahogany-background-color, .has-cyan-background-color) .is-style-outline > .wp-block-button__link { color: #ffffff; background: transparent; border-color: #ffffff; }
:is(.zd4t-on-dark, .has-mahogany-background-color, .has-cyan-background-color) .is-style-outline > .wp-block-button__link:hover { color: #000000; background: #ffffff; }