/* Saffron and Argan theme styles. Logical properties are used so that the Arabic version mirrors cleanly. */

:root {
	--sa-radius: 8px;
	--sa-line: var(--wp--preset--color--mist);
}

/* Focus states: ink ring on light surfaces, gold ring on ink surfaces. */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
	border-radius: 2px;
}
.has-ink-background-color :where(a, button, input, summary):focus-visible {
	outline-color: var(--wp--preset--color--gold);
}

/* Header */
.wp-site-blocks > header {
	position: sticky;
	top: 0;
	z-index: 10;
	border-block-end: 1px solid var(--sa-line);
}
.admin-bar .wp-site-blocks > header { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header { position: static; }
}
.sa-logo { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.sa-logo img { width: 34px; height: 34px; }
.sa-logo .wp-block-site-title { margin: 0; }
.sa-logo .wp-block-site-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wp-block-navigation { font-weight: 500; font-size: var(--wp--preset--font-size--small); }
.wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; padding-block: 0.6rem; min-height: 44px; display: inline-flex; align-items: center; }
.wp-block-navigation .wp-block-navigation-item__content:hover { text-decoration: underline; }
.wp-block-navigation .sa-nav-cta > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--stigma);
	color: var(--wp--preset--color--white);
	padding-inline: 1.25rem;
	border-radius: 6px;
	font-weight: 600;
}
.wp-block-navigation .sa-nav-cta > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--stigma-dark); text-decoration: none; }

/* Labels and tags */
.sa-eyebrow,
.sa-meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
}
.sa-eyebrow { color: var(--wp--preset--color--gold); }
.sa-meta { color: var(--wp--preset--color--muted); letter-spacing: 0.04em; text-transform: none; }

.wp-block-post-terms.sa-tag a,
.sa-tag-label {
	display: inline-block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.35rem 0.55rem;
	border-radius: 3px;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ink);
	text-decoration: none;
}
.sa-tag-saffron, .wp-block-post-terms.sa-tag a[rel~="tag"][href*="/saffron"] { background: var(--wp--preset--color--stigma-dark); }
.sa-tag-argan, .wp-block-post-terms.sa-tag a[href*="/argan-oil"] { background: var(--wp--preset--color--argan); }
.sa-tag-recipes, .wp-block-post-terms.sa-tag a[href*="/recipes"] { background: var(--wp--preset--color--gold-dark); }
.sa-tag-visit, .wp-block-post-terms.sa-tag a[href*="/visit-morocco"] { background: var(--wp--preset--color--ink); }

/* Hero */
.sa-hero .wp-block-heading { color: var(--wp--preset--color--plaster); text-wrap: balance; }
.sa-hero p:not(.sa-eyebrow) { color: #DDD0EA; max-width: 46ch; font-size: 1.1875rem; }
.sa-hero .is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--plaster);
	border: 1.5px solid rgba(248, 245, 249, 0.6);
	background: transparent;
}
.sa-hero .is-style-outline .wp-block-button__link:hover { background: rgba(248, 245, 249, 0.12); }
.sa-hero img { max-width: min(100%, 420px); height: auto; margin-inline: auto; display: block; }

/* Cards: one link per card, stretched over the whole card for a large tap target. */
.sa-card {
	position: relative;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	padding: 1.25rem;
	min-width: 0;
}
.sa-card p { color: var(--wp--preset--color--muted); font-size: 0.9375rem; margin: 0; }
.sa-card .wp-block-heading,
.sa-card .wp-block-post-title { font-size: 1.3125rem; margin: 0; }
.sa-card .wp-block-heading a,
.sa-card .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.sa-card .wp-block-heading a::after,
.sa-card .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.sa-card:hover { border-color: var(--wp--preset--color--ink); }
.sa-card--saffron { border-block-start: 4px solid var(--wp--preset--color--stigma); }
.sa-card--argan { border-block-start: 4px solid var(--wp--preset--color--argan); }
.sa-card--recipes { border-block-start: 4px solid var(--wp--preset--color--gold); }
.sa-card--visit { border-block-start: 4px solid var(--wp--preset--color--ink); }

/* Query loop cards */
.wp-block-post-template.sa-posts > li { position: relative; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.wp-block-post-template.sa-posts .wp-block-post-featured-image { margin: 0; }
.wp-block-post-template.sa-posts .wp-block-post-featured-image img { border-radius: 6px; width: 100%; height: auto; }
.wp-block-post-template.sa-posts .wp-block-post-title { font-size: 1.3125rem; margin: 0; }
.wp-block-post-template.sa-posts .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; }
.wp-block-post-template.sa-posts .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.wp-block-post-template.sa-posts .wp-block-post-terms { position: relative; z-index: 1; }

/* Article furniture */
.sa-short-answer {
	background: var(--wp--preset--color--mist);
	border-inline-start: 5px solid var(--wp--preset--color--ink);
	border-radius: 0 var(--sa-radius) var(--sa-radius) 0;
	padding: 1.25rem 1.5rem;
}
[dir="rtl"] .sa-short-answer { border-radius: var(--sa-radius) 0 0 var(--sa-radius); }
.sa-short-answer > :first-child { margin-block-start: 0; }
.sa-short-answer > :last-child { margin-block-end: 0; }
.sa-verified {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	padding: 1.25rem 1.5rem;
}
.sa-author-box {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	padding: 1.5rem;
}
.sa-affiliate-line { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); border-block-start: 1px solid var(--sa-line); padding-block-start: 1rem; }
.entry-content h2, .wp-block-post-content h2 { margin-block-start: 2.5rem; scroll-margin-block-start: 5rem; }
.wp-block-post-content h3 { margin-block-start: 2rem; }
.wp-block-post-content img { height: auto; }
.wp-block-post-content figcaption { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); }

/* Recipe card */
.sa-recipe-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--sa-line);
	border-block-start: 5px solid var(--wp--preset--color--gold);
	border-radius: var(--sa-radius);
	padding: clamp(1.25rem, 4vw, 2rem);
}
.sa-recipe-card .sa-facts {
	background: var(--wp--preset--color--plaster);
	border-radius: 6px;
	padding: 0.9rem 1.1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.875rem;
	gap: 0.75rem 2rem;
}
.sa-recipe-card .sa-facts p { margin: 0; }
.sa-recipe-card h3 { margin-block-start: 1.5rem; }
.sa-recipe-card .sa-safety {
	background: #FBF1DC;
	border-inline-start: 4px solid var(--wp--preset--color--gold-dark);
	padding: 0.9rem 1.1rem;
	border-radius: 0 6px 6px 0;
	font-size: var(--wp--preset--font-size--small);
}
[dir="rtl"] .sa-recipe-card .sa-safety { border-radius: 6px 0 0 6px; }

/* Footer */
.sa-footer a { color: #E8DDF2; text-decoration: none; }
.sa-footer a:hover { color: var(--wp--preset--color--gold); text-decoration: underline; }
.sa-footer .wp-block-heading { color: var(--wp--preset--color--gold); font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.sa-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.sa-footer p { color: #CBBBDD; }

/* Pagination and search */
.wp-block-query-pagination { gap: 1rem; font-size: var(--wp--preset--font-size--small); }
.wp-block-query-pagination a { color: var(--wp--preset--color--ink); font-weight: 600; }
.wp-block-search__button { background: var(--wp--preset--color--stigma); color: var(--wp--preset--color--white); border: 0; border-radius: 6px; padding-inline: 1.2rem; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Layout rhythm */
.wp-site-blocks > * { margin-block-start: 0; }
.sa-header { padding-block: 0.5rem; }
.sa-section { padding-block: clamp(2.5rem, 6vw, 4rem); }
.wp-site-blocks > main.sa-main { padding-block: clamp(1.5rem, 4vw, 3rem); }
.sa-hero img { aspect-ratio: 1 / 1; width: 100%; }
.sa-posts .wp-block-post-title { margin-block: 0; }

/* Table of contents */
.sa-toc {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--sa-line);
	border-radius: var(--sa-radius);
	padding: 1rem 1.5rem;
}
.sa-toc > summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--young-serif);
	color: var(--wp--preset--color--ink);
	min-height: 44px;
	display: flex;
	align-items: center;
}
.sa-toc ol { margin-block: 0.5rem 0; padding-inline-start: 1.25rem; }
.sa-toc li { margin-block: 0.35rem; }
.sa-toc a { text-decoration: none; }
.sa-toc a:hover, .sa-toc a:focus { text-decoration: underline; }
h2[id] { scroll-margin-top: 1.5rem; }

/* Caption for AI-generated placeholder images */
.sa-illustration { font-size: 0.8rem; color: var(--wp--preset--color--muted); text-align: start; margin-block-start: 0.4rem; }