/**
 * DKD Horizon — global frontend styles.
 *
 * Design tokens (color, type, spacing) live in theme.json; this file only
 * covers layout, component, and interaction details theme.json can't
 * express: header/nav behaviour, the location cards, the modal trigger
 * affordance, focus-visible states, and responsive fine-tuning across
 * desktop, tablet, and mobile.
 */

/* -----------------------------------------------------------------------
 * Accessibility utilities
 * ----------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var( --wp--preset--color--base, #000 );
	color: var( --wp--preset--color--contrast, #fff );
	border-radius: 4px;
	box-shadow: 0 0 0 1px var( --wp--preset--color--accent, #d02028 );
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 1rem;
	line-height: normal;
	padding: 0.85rem 1.5rem;
	text-decoration: none;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

:where( a, button, input, select, textarea, [tabindex] ):focus-visible {
	outline: 2px solid var( --wp--preset--color--accent, #d02028 );
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Base
 * ----------------------------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img {
	height: auto;
	max-width: 100%;
}

/* -----------------------------------------------------------------------
 * Site header / navigation
 * ----------------------------------------------------------------------- */

.dkd-site-header {
	position: sticky;
	top: 0;
	z-index: 500;
}

.dkd-site-header__logo img {
	display: block;
	width: auto;
	height: 40px;
	transition: opacity 0.15s ease;
}

.dkd-site-header__logo a:hover img,
.dkd-site-header__logo a:focus-visible img {
	opacity: 0.8;
}

.dkd-primary-nav .wp-block-navigation-item__content {
	transition: color 0.15s ease;
}

.dkd-primary-nav .wp-block-navigation-item__content:hover,
.dkd-primary-nav .wp-block-navigation-item__content:focus-visible {
	color: var( --wp--preset--color--accent-light );
}

.dkd-primary-nav .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--base );
}

/* -----------------------------------------------------------------------
 * Homepage hero / locations (matches the Figma "Choose Your Location" design)
 * ----------------------------------------------------------------------- */

.dkd-hero {
	text-align: center;
}

/* Figma Desktop frame: logo renders at 309×483.
 * `height: auto !important` also overrides any fixed inline height the
 * editor writes when the image is swapped/resized, so replacement logos
 * with a different aspect ratio never look stretched. */
.dkd-hero__logo img {
	width: 100%;
	max-width: 309px;
	height: auto !important;
	object-fit: contain;
}

.dkd-hero__eyebrow {
	opacity: 0.92;
}

/* Figma Desktop: the two cards together span 981px of the 1280px frame. */
.dkd-locations {
	max-width: 981px;
	margin-inline: auto;
	align-items: stretch;
}

.dkd-location-card {
	display: flex;
}

/* Figma card: 158px tall, 25px radius, content vertically centered. */
.dkd-location-card__inner {
	width: 100%;
	min-height: 158px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: border-color 0.15s ease;
}

.dkd-location-address {
	white-space: normal;
}

/* -----------------------------------------------------------------------
 * Block link (whole-block link overlay; URL set per block in the editor
 * under the "Block link" panel — used by the location cards)
 * ----------------------------------------------------------------------- */

.dkd-has-block-link {
	position: relative;
}

.dkd-block-link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	text-decoration: none;
}

.dkd-has-block-link:hover,
.dkd-has-block-link:focus-within {
	border-color: var( --wp--preset--color--accent, #d02028 ) !important;
}

.dkd-block-link:focus-visible {
	outline-offset: -2px;
	border-radius: inherit;
}

/* Editors sometimes link the heading/address text inside a card directly
 * instead of using the "Block link" panel. The card's overlay anchor is the
 * real link, so inline links must look exactly like the surrounding plain
 * text — no underline, no color shift, no typography changes. */
.dkd-location-card__inner a:not(.dkd-block-link),
.dkd-location-card__inner a:not(.dkd-block-link):hover,
.dkd-location-card__inner a:not(.dkd-block-link):focus {
	color: inherit;
	text-decoration: none;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
}

/* Wide desktop: street + city on one line, separated by a bullet (matches
   the Figma Desktop frame). The forced line break is suppressed here. */
.dkd-address-break {
	display: none;
}

/* Below full desktop width the cards are narrower than the Figma frame, so
   the one-line "street • city" no longer fits at 20px. Figma's Mobile frame
   drops the bullet and stacks the lines — apply that treatment as soon as
   space gets tight instead of letting the line wrap mid-address. */
@media ( max-width: 1240px ) {
	.dkd-address-sep {
		display: none;
	}

	.dkd-address-break {
		display: block;
	}
}

/* Figma: sister-restaurant logo renders at 159px wide.
 * The asset is the approved 1024×1024 original, so that is 159×159.
 * Same swap-proofing as the hero logo: keep the image's own ratio even if
 * the editor writes a fixed inline height. */
.dkd-hero__sister-logo img {
	width: 100%;
	max-width: 159px;
	height: auto !important;
	object-fit: contain;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.dkd-hero__sister-logo a:hover img,
.dkd-hero__sister-logo a:focus-visible img {
	transform: scale( 1.05 );
	opacity: 0.9;
}

/* -----------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */

.dkd-site-footer a {
	color: var( --wp--preset--color--contrast );
}

.dkd-site-footer a:hover,
.dkd-site-footer a:focus-visible {
	color: var( --wp--preset--color--accent-light );
}

.dkd-social-links .wp-social-link {
	background: none;
}

.dkd-social-links .wp-social-link svg {
	transition: transform 0.15s ease;
}

.dkd-social-links .wp-social-link:hover svg,
.dkd-social-links .wp-social-link:focus-visible svg {
	transform: scale( 1.12 );
}

/* -----------------------------------------------------------------------
 * Responsive — tablet (Figma provides Desktop + Mobile frames only; this
 * mid-range tier interpolates between them).
 * ----------------------------------------------------------------------- */

@media ( max-width: 782px ) {
	.dkd-hero {
		padding-top: var( --wp--preset--spacing--60 );
		padding-bottom: var( --wp--preset--spacing--60 );
	}

	.dkd-hero__logo img {
		max-width: 270px;
	}

	.dkd-hero__logo {
		margin-bottom: var( --wp--preset--spacing--60 ) !important;
	}
}

/* -----------------------------------------------------------------------
 * Responsive — mobile (matches the Figma Mobile frame: stacked, full-width
 * cards, smaller logo).
 * ----------------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.dkd-site-header__logo img {
		height: 32px;
	}

	/* Figma Mobile frame: logo 252×394, hero starts ~78px from the top. */
	.dkd-hero {
		padding-top: var( --wp--preset--spacing--60 );
	}

	.dkd-hero__logo img {
		max-width: 252px;
	}

	.dkd-hero__eyebrow {
		letter-spacing: 0.2em !important;
	}
}

/* -----------------------------------------------------------------------
 * 404
 *
 * Reuses .dkd-locations / .dkd-location-card wholesale — those classes are
 * deliberately unscoped, so the cards look identical to the home page.
 * ----------------------------------------------------------------------- */

.dkd-404__logo img {
	width: 100%;
	max-width: 220px;
	height: auto !important;
}

.dkd-404__intro {
	max-width: 44ch;
	margin-inline: auto;
	color: #b9bec7;
}

/* On the HOME page the whole location card is a link to Toast, so inline links
 * inside a card are forced to look like plain text (see .dkd-location-card__inner
 * a:not(.dkd-block-link) above) — otherwise they compete with the card link.
 *
 * The 404 has no card link. Here the phone number is the ONLY link, and the
 * point of the page is to let a lost visitor call the restaurant. Undo the
 * plain-text treatment so it reads as tappable.
 *
 * Scoped to .dkd-404 so the home page is untouched. */
.dkd-404 .dkd-location-card__inner a:not(.dkd-block-link) {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	text-decoration-color: var( --wp--preset--color--accent, #d02028 );
}

.dkd-404 .dkd-location-card__inner a:not(.dkd-block-link):hover,
.dkd-404 .dkd-location-card__inner a:not(.dkd-block-link):focus-visible {
	color: var( --wp--preset--color--accent-light, #ff4d57 );
	text-decoration-color: var( --wp--preset--color--accent-light, #ff4d57 );
}

/* The cards are informational here, not clickable, so drop the hover border
   shift that signals "this whole card is a link" on the home page. */
.dkd-404 .dkd-location-card__inner:hover {
	border-color: var( --wp--preset--color--border-light, #f5f5f5 );
}