/**
 * King of Kentucky — front-end styles.
 *
 * Tokens mirror the design system (tokens/*.css) and are aliased onto the
 * theme.json presets so block markup and ACF render templates share one vocabulary.
 * Only rules theme.json cannot express live here.
 */

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */
:root {
	--kok-beige-050: #F6F3EF;
	--kok-beige-100: #EBE5E0;
	--kok-beige-200: #E1DAD2;
	--kok-beige-300: #D1C6AD;
	--kok-grey-400: #B2ABA3;
	--kok-grey-600: #63605C;
	--kok-ink-800: #363636;
	--kok-ink-900: #221F1D;
	--kok-red-300: #D9928F;
	--kok-red-500: #A95B5C;
	--kok-red-600: #8E4749;
	--kok-red-700: #6E3436;
	--kok-white: #FFFFFF;

	--font-serif: var(--wp--preset--font-family--cinzel);
	--font-sans: var(--wp--preset--font-family--archivo);

	/* Type scale — every size is a theme.json font-size preset; change sizes
	   there, never here. Floor is 17px; `legal` (12px) is for legal copy only. */
	--fs-100: var(--wp--preset--font-size--legal);
	--fs-200: var(--wp--preset--font-size--ui);
	--fs-300: var(--wp--preset--font-size--small);
	--fs-400: var(--wp--preset--font-size--medium);
	--fs-500: var(--wp--preset--font-size--large);
	--fs-600: var(--wp--preset--font-size--x-large);
	--fs-700: var(--wp--preset--font-size--xx-large);
	--fs-800: var(--wp--preset--font-size--xxx-large);
	--fs-900: var(--wp--preset--font-size--display);

	--ls-smallcaps: 0.06em; --ls-eyebrow: 0.22em; --ls-nav: 0.16em; --ls-button: 0.14em;

	--type-h1: 400 var(--fs-800)/1.2 var(--font-serif);
	--type-h2: 400 var(--fs-700)/1.2 var(--font-serif);
	--type-h3: 400 var(--fs-600)/1.2 var(--font-serif);
	--type-h4: 500 var(--fs-500)/1.2 var(--font-serif);
	--type-body: 400 var(--fs-400)/1.72 var(--font-serif);
	--type-body-sm: 400 var(--fs-300)/1.72 var(--font-serif);
	--type-lead: 400 var(--fs-500)/1.8 var(--font-serif);
	--type-eyebrow: 600 var(--fs-200)/1.3 var(--font-sans);
	--type-nav: 500 var(--fs-200)/1 var(--font-sans);
	--type-button: 600 var(--fs-200)/1 var(--font-sans);
	--type-legal: 400 var(--fs-100)/1.6 var(--font-sans);
	--type-caption: 400 var(--fs-200)/1.5 var(--font-sans);

	--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
	--space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; --space-13: 120px;
	--section-y: var(--wp--custom--section-y, 120px);
	--section-y-tight: var(--wp--custom--section-y-tight, 64px);
	--gutter: var(--wp--custom--gutter, 32px);
	--header-h: var(--wp--custom--header-height, 104px);
	--container-max: 1200px;

	--radius-pill: 999px; --radius-sm: 3px;
	--shadow-card: 0 2px 10px rgba(34,31,29,.12);
	--shadow-modal: 0 24px 60px rgba(34,31,29,.34);
	--scrim-hero: radial-gradient(58% 62% at 50% 46%, rgba(34,31,29,.80) 0%, rgba(34,31,29,.62) 46%, rgba(34,31,29,.14) 78%, rgba(34,31,29,0) 100%), linear-gradient(to top, rgba(34,31,29,.70) 0%, rgba(34,31,29,.30) 40%, rgba(34,31,29,.30) 100%);

	--dur-instant: 80ms; --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-reveal: 700ms;
	--ease-standard: cubic-bezier(.32,.72,.28,1);
	--transition-color: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);

	/* Semantic, re-scoped by .kok-invert / .kok-on-band */
	--surface-page: var(--kok-beige-100);
	--surface-raised: var(--kok-beige-050);
	--text-body: var(--kok-ink-800);
	--text-heading: var(--kok-ink-900);
	--text-muted: var(--kok-grey-600);
	--text-accent: var(--kok-red-600);
	--text-on-accent: var(--kok-white);
	--border-hairline: var(--kok-beige-300);
	--border-accent: var(--kok-red-500);
	--link-rest: var(--kok-red-600);
	--link-hover: var(--kok-ink-900);
	--focus-ring: var(--kok-red-500);
}
@media (prefers-reduced-motion: reduce) {
	:root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-reveal: 0ms; }
}

/* Dark slab ground */
.kok-invert, .is-style-kok-invert {
	--surface-page: var(--kok-ink-800);
	--surface-raised: var(--kok-ink-900);
	--text-body: var(--kok-beige-100);
	--text-heading: var(--kok-beige-050);
	--text-muted: var(--kok-beige-300);
	--text-accent: var(--kok-red-300);
	--border-hairline: var(--kok-grey-600);
	--link-rest: var(--kok-beige-100);
	--link-hover: var(--kok-red-300);
	background-color: var(--kok-ink-800);
	color: var(--kok-beige-100);
}
/* Red band ground — only white clears 4.5:1 here. */
.kok-on-band, .is-style-kok-band {
	--surface-page: var(--kok-red-500);
	--text-body: var(--kok-white);
	--text-heading: var(--kok-white);
	--text-muted: var(--kok-white);
	--text-accent: var(--kok-white);
	--border-hairline: rgba(255,255,255,.42);
	--link-rest: var(--kok-white);
	--link-hover: var(--kok-white);
	--focus-ring: var(--kok-white);
	background-color: var(--kok-red-500);
	color: var(--kok-white);
}
.kok-invert :is(h1,h2,h3,h4,h5,h6,p,a,li,.wp-block-post-title),
.is-style-kok-invert :is(h1,h2,h3,h4,h5,h6,p,li,.wp-block-post-title) { color: inherit; }
.is-style-kok-invert :is(h1,h2,h3,h4,h5,h6) { color: var(--text-heading); }
.kok-on-band :is(h1,h2,h3,h4,h5,h6,p,a,li),
.is-style-kok-band :is(h1,h2,h3,h4,h5,h6,p,a,li) { color: var(--kok-white); }
.is-style-kok-invert a, .kok-invert a { color: var(--link-rest); }
.is-style-kok-invert a:hover, .kok-invert a:hover { color: var(--link-hover); }

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */
body { -webkit-font-smoothing: antialiased; text-wrap: pretty; }
:is(h1,h2,h3,h4,h5,h6), .wp-block-post-title, .wp-block-query-title { font-variant: small-caps; text-wrap: balance; }
:where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
::selection { background: var(--kok-red-500); color: var(--kok-beige-050); }
img { height: auto; }
.wp-block-image img, .wp-block-post-featured-image img { border-radius: 0; }
.skip-link:focus { background: var(--kok-beige-100); color: var(--kok-ink-900); }

/* Sections */
.is-style-kok-section { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.is-style-kok-section-tight { padding-top: var(--section-y-tight); padding-bottom: var(--section-y-tight); }
@media (max-width: 782px) {
	.is-style-kok-section { padding-top: var(--space-11); padding-bottom: var(--space-11); }
	.is-style-kok-section-tight { padding-top: var(--space-9); padding-bottom: var(--space-9); }
}

/* ------------------------------------------------------------------ */
/* Type roles (paragraph / heading block styles)                       */
/* ------------------------------------------------------------------ */
.is-style-kok-eyebrow { font: var(--type-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-heading); }
.is-style-kok-eyebrow.has-red-deep-color, .is-style-kok-eyebrow.has-red-color { color: var(--text-accent); }
.is-style-kok-smallcaps { font-variant: small-caps; letter-spacing: var(--ls-smallcaps); }
.is-style-kok-lead { font: var(--type-lead); font-variant: small-caps; letter-spacing: var(--ls-smallcaps); }
.is-style-kok-legal { font: var(--type-legal); }
.is-style-kok-caption { font: var(--type-caption); letter-spacing: var(--ls-smallcaps); text-transform: uppercase; color: var(--text-muted); }
.is-style-kok-tracked { font-weight: 700; letter-spacing: var(--ls-eyebrow); font-variant: normal; text-transform: uppercase; }

/* Prose measures — used by patterns via className */
.kok-measure-centered { max-width: 44ch; margin-left: auto; margin-right: auto; text-align: center; }
.kok-measure-prose { max-width: 52ch; }
.kok-measure-narrow { max-width: 38ch; margin-left: auto; margin-right: auto; text-align: center; }
.kok-measure-wide { max-width: 86ch; }

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */
.wp-block-button .wp-block-button__link { transition: var(--transition-color), transform var(--dur-instant) var(--ease-standard); white-space: nowrap; }
.wp-block-button .wp-block-button__link:active { transform: scale(.97); }
.wp-block-button.is-style-kok-secondary .wp-block-button__link { background: transparent; color: var(--kok-ink-900); border-color: var(--kok-ink-800); }
.wp-block-button.is-style-kok-secondary .wp-block-button__link:hover { background: var(--kok-ink-900); color: var(--kok-white); border-color: var(--kok-ink-900); }
.wp-block-button.is-style-kok-ghost .wp-block-button__link { background: transparent; color: var(--kok-red-600); border-color: transparent; }
.wp-block-button.is-style-kok-ghost .wp-block-button__link:hover { color: var(--kok-ink-900); background: transparent; }
.wp-block-button.is-style-kok-on-dark .wp-block-button__link { background: transparent; color: var(--kok-beige-100); border-color: var(--kok-beige-300); }
.wp-block-button.is-style-kok-on-dark .wp-block-button__link:hover { background: var(--kok-beige-100); color: var(--kok-ink-900); border-color: var(--kok-beige-100); }
.wp-block-button.is-style-kok-on-band .wp-block-button__link { background: transparent; color: var(--kok-white); border-color: rgba(255,255,255,.7); }
.wp-block-button.is-style-kok-on-band .wp-block-button__link:hover { background: var(--kok-white); color: var(--kok-red-700); border-color: var(--kok-white); }
/* The PDP's squared serif slab */
.wp-block-button.is-style-kok-block .wp-block-button__link { border-radius: var(--radius-sm); padding: 18px 44px; font: 700 var(--fs-300)/1 var(--font-serif); letter-spacing: 0.06em; text-transform: uppercase; }
/* Wax-seal circle link — two short lines of small caps */
.wp-block-button.is-style-kok-circle .wp-block-button__link,
.wp-block-button.is-style-kok-circle-red .wp-block-button__link {
	width: 108px; height: 108px; border-radius: 50%; border: 0; padding: var(--space-4);
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	font: var(--type-body-sm); font-variant: small-caps; letter-spacing: var(--ls-smallcaps); line-height: 1.2; text-transform: none; white-space: normal;
	background: var(--kok-beige-050); color: var(--kok-ink-900);
}
.wp-block-button.is-style-kok-circle .wp-block-button__link:hover { background: var(--kok-beige-200); color: var(--kok-ink-900); }
.wp-block-button.is-style-kok-circle-red .wp-block-button__link { background: var(--kok-red-500); color: var(--kok-white); }
.wp-block-button.is-style-kok-circle-red .wp-block-button__link:hover { background: var(--kok-red-600); }
/* Disabled — the one place opacity carries meaning */
.wp-block-button__link[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* Image frames (ImageFrame plain / print / red)                       */
/* ------------------------------------------------------------------ */
.wp-block-image.is-style-kok-print img { background: var(--kok-white); padding: var(--space-3); box-shadow: var(--shadow-card); }
.wp-block-image.is-style-kok-red-frame img { border: 2px solid var(--kok-red-500); padding: 3px; background: var(--surface-raised); }
.wp-block-image figcaption { font: var(--type-caption); letter-spacing: var(--ls-smallcaps); text-transform: uppercase; color: var(--text-muted); margin-top: var(--space-3); text-align: inherit; }

/* ------------------------------------------------------------------ */
/* Rules                                                               */
/* ------------------------------------------------------------------ */
.wp-block-separator { border: 0; border-bottom: 1px solid var(--kok-beige-300); opacity: 1; height: 0; }
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100%; max-width: 100%; }
.wp-block-separator.is-style-kok-accent { border-bottom-color: var(--kok-red-500); }
.wp-block-separator.is-style-kok-inverse { border-bottom-color: var(--kok-grey-600); }
.wp-block-separator.kok-rule-short { width: 92px; margin-left: auto; margin-right: auto; }
.wp-block-separator.kok-rule-mid { width: 42%; margin-left: auto; margin-right: auto; }

/* Section label divider — red pill on a hairline rule */
.wp-block-group.is-style-kok-label-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5); }
.wp-block-group.is-style-kok-label-divider::before, .wp-block-group.is-style-kok-label-divider::after { content: ""; height: 1px; background: var(--kok-red-500); }
.wp-block-group.is-style-kok-label-divider > * { margin: 0; font: var(--type-button); letter-spacing: var(--ls-button); text-transform: uppercase; color: var(--kok-white); background: var(--kok-red-500); border-radius: var(--radius-pill); padding: 8px 22px; white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Hero cover                                                          */
/* ------------------------------------------------------------------ */
.wp-block-cover.is-style-kok-hero { min-height: 520px; background-color: var(--kok-ink-900); }
.wp-block-cover.is-style-kok-hero .wp-block-cover__background { background: var(--scrim-hero) !important; opacity: 1 !important; }
.wp-block-cover.is-style-kok-hero img, .wp-block-cover.is-style-kok-hero video { filter: saturate(.9); }
.wp-block-cover.is-style-kok-hero .wp-block-cover__inner-container { display: grid; gap: var(--space-6); justify-items: center; text-align: center; }
.wp-block-cover.is-style-kok-hero .wp-block-cover__inner-container > * { margin: 0; }
.wp-block-cover.is-style-kok-hero p { color: var(--kok-beige-050); text-shadow: 0 1px 14px rgba(34,31,29,.7); }
.kok-tagline { font: var(--type-h4); letter-spacing: 0.14em; }

/* ------------------------------------------------------------------ */
/* Header — fixed red band, crest dead centre, MENU right              */
/* ------------------------------------------------------------------ */
.kok-header { height: var(--header-h); z-index: 40; }
.kok-header > .wp-block-group { height: var(--header-h); display: grid !important; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: none; }
.kok-header .kok-crest-link { grid-column: 2; display: block; line-height: 0; }
.kok-header .kok-crest-link img { height: 80px; width: 80px; }
.kok-header .wp-block-navigation { grid-column: 3; justify-self: end; padding-right: var(--space-6); }
.kok-header .wp-block-navigation__responsive-container-open { color: var(--kok-white); font: var(--type-nav); letter-spacing: var(--ls-nav); text-transform: uppercase; padding: var(--space-2); }
.kok-header .wp-block-navigation__responsive-container-open:hover { color: var(--kok-white); text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------------ */
/* Menu overlay — the core nav overlay restyled as the red panel        */
/* ------------------------------------------------------------------ */
.kok-menu .wp-block-navigation__responsive-container.is-menu-open {
	left: auto; width: min(100vw, 560px); background: var(--kok-red-500) !important; color: var(--kok-white);
	box-shadow: var(--shadow-modal); padding: var(--space-6) var(--gutter) var(--space-12);
	animation: kok-slide-in var(--dur-slow) var(--ease-standard);
}
@keyframes kok-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { max-width: none; }
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { display: grid; grid-template-rows: auto 1fr; justify-items: center; height: 100%; }
.kok-menu .wp-block-navigation__responsive-container-close { position: static; justify-self: end; display: inline-flex; align-items: baseline; gap: var(--space-4); padding: 0; color: var(--kok-white); font: var(--type-h4); font-variant: small-caps; letter-spacing: var(--ls-smallcaps); text-transform: none; }
.kok-menu .wp-block-navigation__responsive-container-close::after { content: "X"; font: var(--type-h2); line-height: 1; }
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: grid; gap: var(--space-11); justify-items: center; align-content: start; text-align: center; padding-top: var(--space-6);
}
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: ""; width: 148px; height: 148px; background: url("../img/logo/crest.png") center / contain no-repeat;
}
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display: grid; gap: var(--space-9); justify-items: center; }
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font: var(--type-h2); font-variant: small-caps; letter-spacing: var(--ls-smallcaps); text-transform: none; color: var(--kok-white);
	padding-bottom: 3px; border-bottom: 1px solid transparent; white-space: nowrap; transition: var(--transition-color);
}
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--kok-white); }
.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { outline-color: var(--kok-white); }
@media (max-width: 600px) {
	.kok-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font: var(--type-h3); }
}

/* ------------------------------------------------------------------ */
/* Footer — red legal band                                             */
/* ------------------------------------------------------------------ */
.kok-footer { padding-top: var(--space-10); padding-bottom: var(--space-10); text-align: center; }
.kok-footer > .wp-block-group { display: grid; gap: var(--space-5); justify-items: center; }
.kok-footer .wp-block-navigation { font: var(--type-nav); letter-spacing: var(--ls-nav); text-transform: uppercase; gap: var(--space-6); justify-content: center; }
.kok-footer .wp-block-navigation a { color: var(--kok-white); border-bottom: 1px solid transparent; }
.kok-footer .wp-block-navigation a:hover { border-bottom-color: var(--kok-white); text-decoration: none; }
.kok-footer-legal,
.bfwpf-agegate__cover .bfwpf-legal-footer { font: var(--type-legal); max-width: 86ch; display: grid; gap: var(--space-2); }
.kok-footer-legal p,
.bfwpf-agegate__cover .bfwpf-legal-footer p { margin: 0; font: inherit; }
.kok-footer-legal a,
.bfwpf-agegate__cover .bfwpf-legal-footer a { color: var(--kok-white); text-decoration: underline; text-underline-offset: 2px; }
/* Footer legal copy is sourced from the bf-wp-forms `[bfwpf_legal_footer]`
   ACF options (BF Legal Footer Settings) — the single source of truth shared
   with the age gate. The shortcode emits the "Please Drink Responsibly"
   moderation line, the legal links, and the fine print; we style each to keep
   the prior footer look, and the age gate's instance (`.bfwpf-agegate__cover`)
   takes the same treatment. Nutrition + Contact Us are utility links (not
   legal copy) and stay in a separate nav. */
.kok-footer-legal .bfwpf-legal-footer { display: grid; gap: var(--space-2); }
.kok-footer-legal .bfwpf-legal-footer-line,
.bfwpf-agegate__cover .bfwpf-legal-footer-line { margin: 0; font: inherit; }
/* Moderation message → footer eyebrow. */
.kok-footer-legal .bfwpf-legal-footer-moderation-message__copy,
.bfwpf-agegate__cover .bfwpf-legal-footer-moderation-message__copy {
	display: block;
	font: var(--type-eyebrow);
	letter-spacing: var(--ls-eyebrow);
	text-transform: uppercase;
}
.kok-footer-legal .bfwpf-legal-footer-moderation-message__wrapper,
.bfwpf-agegate__cover .bfwpf-legal-footer-moderation-message__wrapper { margin-bottom: var(--space-3); }
.kok-footer-legal .bfwpf-legal-footer-links__wrapper,
.bfwpf-agegate__cover .bfwpf-legal-footer-links__wrapper { margin-bottom: var(--space-3); }
/* Legal links → footer nav row. */
.kok-footer-legal .bfwpf-legal-footer-links__list,
.bfwpf-agegate__cover .bfwpf-legal-footer-links__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: var(--space-2) var(--space-6);
	font: var(--type-legal); letter-spacing: var(--ls-nav); text-transform: uppercase;
}
.kok-footer-legal .bfwpf-legal-footer-links__list-item,
.bfwpf-agegate__cover .bfwpf-legal-footer-links__list-item { margin: 0; }
.kok-footer-legal .bfwpf-legal-footer-links__link,
.bfwpf-agegate__cover .bfwpf-legal-footer .bfwpf-legal-footer-links__link { text-decoration: none; border-bottom: 1px solid transparent; }
.kok-footer-legal .bfwpf-legal-footer-links__link:hover,
.bfwpf-agegate__cover .bfwpf-legal-footer .bfwpf-legal-footer-links__link:hover { border-bottom-color: var(--kok-white); }

/* Dark two-up (home "Legacy" section): photograph fills its column edge to edge */
.kok-two-up { gap: 0; }
.kok-two-up .wp-block-column:first-child { display: grid; }
.kok-two-up .wp-block-image, .kok-two-up .wp-block-image img { height: 100%; width: 100%; object-fit: cover; margin: 0; min-height: 420px; }
.kok-two-up .wp-block-column > * { margin-block-start: 0; }
.kok-two-up .wp-block-column:last-child > * + * { margin-block-start: var(--space-7); }
.kok-two-up .wp-block-buttons { justify-content: center; }
@media (max-width: 781px) { .kok-two-up .wp-block-image img { min-height: 280px; } }

/* ------------------------------------------------------------------ */
/* Archive / blog fallbacks                                            */
/* ------------------------------------------------------------------ */
.kok-post-list .wp-block-post { padding-bottom: var(--space-7); border-bottom: 1px solid var(--kok-beige-300); }
.wp-block-post-date, .wp-block-post-terms { font: var(--type-caption); letter-spacing: var(--ls-smallcaps); text-transform: uppercase; color: var(--text-muted); }
.wp-block-query-pagination { font: var(--type-nav); letter-spacing: var(--ls-nav); text-transform: uppercase; }
.wp-block-search__button { border-radius: var(--radius-pill); }
.wp-block-search__input { border: 1px solid var(--kok-beige-300); background: var(--kok-beige-050); border-radius: 0; font: var(--type-body-sm); padding: 10px 14px; }

/* Editor placeholder for empty ACF blocks */
.kok-block-placeholder { border: 1px dashed var(--kok-red-500); color: var(--kok-red-600); font: var(--type-caption); letter-spacing: var(--ls-smallcaps); text-transform: uppercase; padding: var(--space-6); text-align: center; }

/* Visually hidden but available to assistive tech (WP core convention). */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.screen-reader-text:focus {
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 1rem;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
}