/*
Theme Name: Ida
Theme URI: https://ida.franzvoid.is
Author: Franz Void
Author URI: https://franzvoid.is
Description: IÐA Zimsen — bókakaffihús við Vesturgötu í Reykjavík. Classic theme implementing the IÐA Zimsen design export.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ida
*/

/*
Section order — keep it. Every colour is transcribed from the design export in
`context/Ida Zimsen.dc.html`, which is authored in oklch; the tokens below are
those same values named. Mobile overrides for every section live together in
one breakpoint at the very bottom of the file.

	1.  tokens
	2.  base
	3.  utilities        (skip link, sr-only, eyebrow, buttons, links, stars)
	4.  header + nav
	5.  hero
	6.  marquee
	7.  bands            (coffee, books, pastries, about)
	8.  placeholders
	9.  reviews
	10. instagram
	11. footer
	12. prose fallback
	13. responsive — @media (max-width: 880px), then a nav-only rule at 560px
*/

/* ---------------------------------------------------------------- tokens - */

:root {
	--ida-paper: oklch(98% 0.004 95);
	--ida-paper-2: oklch(96% 0.005 95);
	--ida-ink: oklch(22% 0.01 60);
	--ida-ink-deep: oklch(20% 0.01 60);
	--ida-ink-footer: oklch(18% 0.01 60);
	--ida-terracotta: oklch(55% 0.09 40);
	--ida-terracotta-light: oklch(72% 0.09 40);
	--ida-body: oklch(35% 0.01 60);
	--ida-muted: oklch(50% 0.01 60);
	--ida-faint: oklch(48% 0.01 60);
	--ida-line: oklch(89% 0.006 95);
	--ida-footer-text: oklch(85% 0.006 95);
	--ida-footer-heading: oklch(60% 0.008 95);
	--ida-footer-line: oklch(32% 0.01 60);

	/* Placeholder stripes: light for the section bands, dark for Instagram. */
	--ida-ph-a: oklch(93% 0.006 95);
	--ida-ph-b: oklch(96% 0.006 95);
	--ida-ph-caption: oklch(55% 0.01 95);
	--ida-ph-dark-a: oklch(28% 0.01 60);
	--ida-ph-dark-b: oklch(32% 0.01 60);
	--ida-ph-dark-caption: oklch(70% 0.01 60);

	--ida-sans: "Work Sans", sans-serif;
	--ida-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ida-gutter: clamp(20px, 6vw, 80px);
	--ida-max: 1360px;
	--ida-band-pad: clamp(64px, 10vw, 140px);
	--ida-radius: 2px;
	--ida-col-min: 320px;

	/* Drives scroll-margin so a jump to #coffee clears the fixed header. */
	--ida-header-h: 76px;
}

/* ------------------------------------------------------------------ base - */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--ida-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--ida-ink);
	background: var(--ida-paper);

	/*
	The hero scrim, the marquee track and the band grids all run to the edge
	of the viewport or past it by design; without this the marquee's
	`width:max-content` track would take the whole page sideways.
	*/
	overflow-x: hidden;
}

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

a {
	color: var(--ida-ink);
	text-decoration: none;
}

a:hover {
	color: var(--ida-terracotta);
}

h1,
h2 {
	font-weight: 700;
	letter-spacing: -0.01em;
}

/*
The export has no focus styling at all. A single ring on everything focusable,
switched to paper wherever the ground underneath is dark.
*/
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--ida-terracotta);
	outline-offset: 3px;
	border-radius: 1px;
}

.ida-hero a:focus-visible,
.ida-insta a:focus-visible,
.ida-footer a:focus-visible {
	outline-color: var(--ida-paper);
}

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

.ida-skip {
	position: absolute;
	top: -100px;
	left: 12px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--ida-paper);
	color: var(--ida-ink);
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--ida-radius);
	box-shadow: 0 2px 12px oklch(20% 0.01 60 / 0.25);
	transition: top 0.2s ease;
}

.ida-skip:focus {
	top: 12px;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
The Icelandic companion to an English label. Never a translation to switch to —
both are always on screen, the second one set back.
*/
.ida-alt {
	opacity: 0.55;
	font-weight: 400;
}

.ida-eyebrow {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ida-terracotta);
	margin-bottom: 16px;
}

.ida-eyebrow--light {
	color: inherit;
	letter-spacing: 0.16em;
	opacity: 0.85;
	margin-bottom: 18px;
}

.ida-eyebrow--accent {
	color: var(--ida-terracotta-light);
}

.ida-btn {
	display: inline-block;
	padding: 14px 28px;
	border: 1px solid transparent;
	border-radius: var(--ida-radius);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ida-btn--solid {
	background: var(--ida-terracotta);
	color: var(--ida-paper);
}

.ida-btn--solid:hover {
	background: var(--ida-ink);
	color: var(--ida-paper);
}

.ida-btn--paper {
	background: var(--ida-paper);
	color: var(--ida-ink);
}

.ida-btn--paper:hover {
	background: var(--ida-terracotta);
	color: var(--ida-paper);
}

.ida-btn--ghost {
	border-color: oklch(98% 0.004 95 / 0.6);
	color: var(--ida-paper);
}

.ida-btn--ghost:hover {
	background: var(--ida-paper);
	color: var(--ida-ink);
}

.ida-underline-link {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1px solid currentColor;
}

.ida-stars {
	color: var(--ida-terracotta);
	letter-spacing: 1px;
}

/*
The hero states its rating visually as "★ 4.7" already; this carries the same
fact to a screen reader as a sentence and shows nothing.
*/
.ida-stars--sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* --------------------------------------------------------- header + nav - */

.ida-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 3vw, 32px);
	padding: clamp(14px, 2vw, 20px) clamp(20px, 4vw, 56px);
	background: transparent;
	transition: background 0.4s ease, box-shadow 0.4s ease;
}

/*
Set by `assets/js/main.js` past 40px of scroll. Without JS the header simply
stays transparent, which is legible: the top of the hero is near-white.
*/
.ida-header.is-scrolled {
	background: oklch(98% 0.004 95 / 0.92);
	backdrop-filter: blur(8px);
	box-shadow: 0 1px 0 var(--ida-line);
}

.ida-wordmark {
	font-weight: 700;
	font-size: clamp(19px, 2vw, 23px);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.ida-nav {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 500;
}

/*
`wp_nav_menu()` would wrap the links in ul/li if a menu were ever assigned;
the fallback emits bare anchors. Both shapes land on the same flex row.
*/
.ida-nav ul {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 30px);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ida-nav__cta {
	padding: 9px 18px;
	font-size: 14px;
}

.ida-main {
	display: block;
}

/* ------------------------------------------------------------------ hero - */

.ida-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	color: var(--ida-paper);
}

/*
The photograph that is not here yet. When one arrives, give this element a
`background-image` and drop the note badge — the scrim above it is already
sized to sit over a photograph rather than over stripes.
*/
.ida-hero__bg {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		135deg,
		var(--ida-ph-a),
		var(--ida-ph-a) 12px,
		var(--ida-ph-b) 12px,
		var(--ida-ph-b) 24px
	);
	background-size: cover;
	background-position: center;
}

.ida-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		oklch(20% 0.01 60 / 0.92) 0%,
		oklch(20% 0.01 60 / 0.5) 45%,
		oklch(20% 0.01 60 / 0.1) 75%
	);
}

.ida-hero__note {
	position: absolute;
	top: 96px;
	right: 24px;
	font-family: var(--ida-mono);
	font-size: 11px;
	letter-spacing: 0.02em;
	color: oklch(30% 0.01 95);
	background: oklch(96% 0.006 95 / 0.85);
	padding: 5px 10px;
	border-radius: var(--ida-radius);
}

.ida-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 900px;
	padding: 0 var(--ida-gutter) clamp(48px, 7vw, 88px);
}

.ida-hero__title {
	font-size: clamp(36px, 6vw, 76px);
	line-height: 1.08;
	margin: 0 0 8px;
}

.ida-hero__title-alt {
	font-size: clamp(17px, 1.8vw, 24px);
	font-weight: 400;
	opacity: 0.7;
	margin: 0 0 22px;
}

.ida-hero__lead {
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.55;
	max-width: 520px;
	margin: 0 0 24px;
	opacity: 0.94;
}

.ida-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 38px;
}

.ida-hero__meta {
	position: relative;
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 14px;
	opacity: 0.88;
}

.ida-hero__rating {
	color: var(--ida-terracotta-light);
}

/* --------------------------------------------------------------- marquee - */

.ida-marquee {
	overflow: hidden;
	background: var(--ida-terracotta);
	padding: clamp(14px, 1.6vw, 20px) 0;
}

/*
The track holds the ticker string twice and slides exactly one copy, so the
seam lands where the string's own trailing separator already is.
*/
.ida-marquee__track {
	display: flex;
	width: max-content;
	gap: 44px;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ida-paper);
	animation: idaMarquee 34s linear infinite;
}

.ida-marquee__track--reverse {
	animation-direction: reverse;
}

@keyframes idaMarquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

/* ----------------------------------------------------------------- bands - */

.ida-band {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--ida-col-min), 1fr));
	gap: clamp(28px, 5vw, 90px);
	align-items: center;
	max-width: var(--ida-max);
	margin: 0 auto;
	padding: 0 var(--ida-gutter) var(--ida-band-pad);
	scroll-margin-top: calc(var(--ida-header-h) + 24px);
}

/*
Bands stack against each other on their own bottom padding; only the first one
after a marquee needs to open a gap of its own. This is exactly the padding
pattern in the export, expressed as a rule instead of four hardcoded values.
*/
.ida-marquee + .ida-band {
	padding-top: var(--ida-band-pad);
}

/*
`order` rather than a different document order: the text column stays first in
the markup, so it is also first for a screen reader and first when the grid
collapses to one column.
*/
.ida-band--media-left .ida-band__media {
	order: -1;
}

.ida-band__title {
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.15;
	margin: 0 0 4px;
}

.ida-band__title-alt {
	font-size: 15px;
	font-weight: 400;
	opacity: 0.55;
	margin: 0 0 20px;
}

.ida-band__p {
	font-size: 16px;
	line-height: 1.75;
	color: var(--ida-body);
	max-width: 480px;
	margin: 0 0 16px;
}

.ida-band__p--alt {
	font-size: 14px;
	line-height: 1.7;
	color: var(--ida-muted);
}

/*
An English paragraph sits tight against its Icelandic companion; the pair then
breathes. Browsers without `:has()` get an even 16px throughout, which is a
slightly looser version of the same page rather than a broken one.
*/
.ida-band__p:has(+ .ida-band__p--alt) {
	margin-bottom: 6px;
}

.ida-band__p:last-child {
	margin-bottom: 0;
}

.ida-band__cta {
	margin-top: 12px;
}

/* ---------------------------------------------------------- placeholders - */

.ida-ph {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--ida-radius);
	background: repeating-linear-gradient(
		135deg,
		var(--ida-ph-a),
		var(--ida-ph-a) 12px,
		var(--ida-ph-b) 12px,
		var(--ida-ph-b) 24px
	);
}

.ida-ph--portrait {
	aspect-ratio: 4 / 5;
}

.ida-ph--square {
	aspect-ratio: 1;
}

.ida-ph--dark {
	background: repeating-linear-gradient(
		135deg,
		var(--ida-ph-dark-a),
		var(--ida-ph-dark-a) 10px,
		var(--ida-ph-dark-b) 10px,
		var(--ida-ph-dark-b) 20px
	);
}

.ida-ph__caption {
	font-family: var(--ida-mono);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--ida-ph-caption);
	text-align: center;
	padding: 0 24px;
}

.ida-ph--dark .ida-ph__caption {
	font-size: 10.5px;
	color: var(--ida-ph-dark-caption);
	padding: 0 8px;
}

/* --------------------------------------------------------------- reviews - */

.ida-reviews {
	background: var(--ida-paper-2);
	padding: clamp(64px, 10vw, 120px) var(--ida-gutter);
	scroll-margin-top: calc(var(--ida-header-h) + 24px);
}

.ida-reviews__inner {
	max-width: 1200px;
	margin: 0 auto;
	text-align: center;
}

.ida-reviews__title {
	font-size: clamp(26px, 3.2vw, 38px);
	margin: 0 0 4px;
}

.ida-reviews__title-alt {
	font-size: 15px;
	opacity: 0.55;
	margin: 0 0 18px;
}

.ida-reviews__rating {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	color: var(--ida-body);
	margin-bottom: 56px;
}

.ida-reviews__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	text-align: left;
}

.ida-quote {
	background: var(--ida-paper);
	border-radius: var(--ida-radius);
	padding: 30px 26px;
	margin: 0;
}

.ida-quote__text {
	font-size: 17px;
	line-height: 1.6;
	color: var(--ida-ink);
	margin: 0 0 20px;
}

.ida-quote__by {
	font-size: 13px;
	color: var(--ida-faint);
}

.ida-reviews .ida-underline-link {
	margin-top: 44px;
}

/* ------------------------------------------------------------- instagram - */

.ida-insta {
	background: var(--ida-ink-deep);
	color: var(--ida-paper);
	padding: clamp(64px, 9vw, 110px) var(--ida-gutter);
	text-align: center;
	scroll-margin-top: calc(var(--ida-header-h) + 24px);
}

.ida-insta__title {
	font-size: clamp(24px, 3vw, 34px);
	margin: 0 0 4px;
}

.ida-insta__lead {
	font-size: 15px;
	opacity: 0.7;
	margin: 16px 0 44px;
}

.ida-insta__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	max-width: 1100px;
	margin: 0 auto 44px;
}

.ida-insta .ida-btn--ghost {
	border-color: oklch(98% 0.004 95 / 0.5);
	padding: 13px 26px;
	font-size: 14px;
}

/* ---------------------------------------------------------------- footer - */

.ida-footer {
	background: var(--ida-ink-footer);
	color: var(--ida-footer-text);
	padding: clamp(56px, 7vw, 88px) var(--ida-gutter) 28px;
}

.ida-footer a {
	color: var(--ida-footer-text);
}

.ida-footer a:hover {
	color: var(--ida-paper);
}

.ida-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 40px;
	max-width: var(--ida-max);
	margin: 0 auto;
	padding-bottom: 44px;
	border-bottom: 1px solid var(--ida-footer-line);
}

.ida-footer__brand {
	font-weight: 700;
	font-size: 21px;
	color: var(--ida-paper);
	margin-bottom: 14px;
}

.ida-footer__blurb {
	font-size: 14px;
	line-height: 1.7;
	opacity: 0.8;
	max-width: 260px;
	margin: 0 0 18px;
}

.ida-footer__heading {
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ida-footer-heading);
	margin-bottom: 16px;
}

.ida-footer__heading .ida-alt {
	opacity: 0.7;
}

.ida-footer__stack {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 14px;
}

.ida-footer__stack--tight {
	gap: 6px;
	font-size: 13px;
}

.ida-hours__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.ida-hours__day {
	opacity: 0.75;
}

.ida-footer__bar {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	max-width: var(--ida-max);
	margin: 22px auto 0;
	font-size: 12.5px;
	opacity: 0.55;
}

/* -------------------------------------------------------- prose fallback - */

/*
Nothing routes to `index.php` in normal use. It still needs to clear the fixed
header and not run the full page width.
*/
.ida-prose {
	max-width: 48rem;
	margin-inline: auto;
	padding: calc(var(--ida-header-h) + 48px) var(--ida-gutter) 80px;
}

.ida-prose .entry-title {
	font-size: clamp(26px, 3.2vw, 40px);
	line-height: 1.15;
	margin: 0 0 16px;
}

.ida-prose article + article {
	margin-top: 56px;
}

/* ------------------------------------------------------------ responsive - */

@media (max-width: 880px) {

	:root {
		--ida-band-pad: clamp(48px, 9vw, 72px);
		--ida-col-min: 260px;
		--ida-header-h: 64px;
	}

	/*
	The nav carries an Icelandic companion on every item, which is what pushes
	it past the width of a phone. Dropping the second language is the first
	thing to go — the wordmark and the section headings still carry it.
	*/
	.ida-nav .ida-alt {
		display: none;
	}

	.ida-hero__note {
		top: 76px;
		right: 12px;
		font-size: 10px;
	}

	.ida-hero__actions {
		margin-bottom: 28px;
	}

	.ida-hero__meta {
		gap: 10px;
		font-size: 13px;
	}

	/*
	Reset the desktop `order` so the collapsed grid always reads text first,
	whichever side the photograph took on a wide screen.
	*/
	.ida-band--media-left .ida-band__media {
		order: 0;
	}

	.ida-reviews__rating {
		margin-bottom: 36px;
	}

	.ida-insta__lead {
		margin-bottom: 32px;
	}

	.ida-footer__cols {
		gap: 32px;
	}

	.ida-footer__blurb {
		max-width: none;
	}

}

/*
Below this the four anchor links cannot share a row with the wordmark and the
Directions button, and a fixed header that wraps to three rows eats the hero.
The links are positions on this one page and every one of them is repeated in
the footer, so on a phone the header keeps only the two things it alone
offers: identity, and the way here.
*/
@media (max-width: 560px) {

	.ida-nav a:not(.ida-nav__cta),
	.ida-nav ul {
		display: none;
	}

}

/* ------------------------------------------------- responsive: motion --- */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}

	.ida-marquee__track {
		animation: none;
	}

	.ida-skip,
	.ida-btn,
	.ida-header {
		transition: none;
	}

}

/* ---------------------------------------------------------- end of file - */