/*
Theme Name: Romeo Art Theme
Theme URI: https://romeomelikyan.com
Author: Romeo Melikyan Studio
Author URI: https://romeomelikyan.com
Description: A gallery-style portfolio theme for painter and sculptor Romeo Melikyan. Bilingual (EN/Armenian) multi-page site with per-artwork pages, QR codes, exhibitions and news.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: romeo-art-theme
Tags: custom-colors, custom-logo, custom-menu, featured-images, translation-ready, full-width-template, block-styles
*/

/* ==========================================================================
   Design tokens
   ========================================================================== */

:root {
	/* Colors */
	--white: #ffffff;
	--off: #faf9f7;
	--light: #f4f1eb;
	--gold: #b8963e;
	--gold2: #d4ae5c;
	--goldp: #f0e4c4;
	--black: #111010;
	--dark: #1c1a18;
	--mid: #6b6560;
	--ash: #7d766f;
	--border: #e2ddd6;

	/* Status colors */
	--green: #3a7d5a;
	--red: #8b3a3a;
	--blue: #2c5f8a;

	/* Typography */
	--font-serif: 'Cormorant Garamond', Georgia, serif;
	--font-display: 'Cinzel', Georgia, serif;
	--font-sans: 'Raleway', Helvetica, Arial, sans-serif;

	/* Spacing scale */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 2rem;
	--space-lg: 4rem;
	--space-xl: 3.75rem;
	--space-2xl: 9rem;

	/* Layout */
	--container-width: 1400px;
	--container-padding: 1.5rem;
	--header-height: 90px;

	/* Motion */
	--transition: 0.3s ease;
	--transition-slow: 0.6s ease;
}

/* Armenian pages, site-wide: none of the three display fonts above (Cormorant
   Garamond, Cinzel, Raleway) contain Armenian glyphs, so Armenian text falls
   back past them to whatever system font the OS substitutes — which has no
   true Light (300) weight, so it renders heavier than Latin/numeral text in
   the same sentence (same colour, --black, throughout — this is purely a
   font-fallback/weight issue, not a colour one). Noto Sans Armenian (already
   enqueued on every /hy/ page — inc/enqueue.php, gated on
   pll_current_language(), not on template, so this covers all page types)
   has a real Light 300 weight. Inserting it as the SECOND font in each of
   the three variables — after the intended Latin font, before the generic
   fallback — means Latin characters keep rendering in the real Cormorant
   Garamond/Cinzel/Raleway exactly as before, while Armenian characters (no
   glyph in that first font) fall through to Noto Sans Armenian instead of a
   heavier system font. Redefining the variables here, rather than adding a
   `:lang(hy)` override to every individual selector that references them, is
   the single point of change: EVERY current and future rule that uses
   var(--font-serif|--font-display|--font-sans) is fixed automatically,
   including ones that only inherit a variable-based font-family without
   re-declaring it (e.g. --font-accent, used by three label-style elements,
   is itself never defined and so already just inherits its ancestor's
   computed font-family — which now carries this fix too, with nothing
   extra needed for it).
   Higher specificity than the plain `:root` block above (two pseudo-classes
   vs. one) guarantees this wins on Armenian pages regardless of source
   order; on English pages `:lang(hy)` simply never matches, so the English
   values above are used completely unchanged — verified byte-for-byte live,
   not just assumed. Does NOT touch `.artwork-single__qr-download`'s existing,
   deliberately different `:lang(hy)` rule (main.css) — that one intentionally
   puts Noto Sans Armenian FIRST because its label mixes Armenian and Latin
   ("QR") in one inline string and needs both scripts in the same font; that
   is a different, correct fix for a different problem and is left alone. */
:root:lang(hy) {
	--font-serif: 'Cormorant Garamond', 'Noto Sans Armenian', Georgia, serif;
	--font-display: 'Cinzel', 'Noto Sans Armenian', Georgia, serif;
	--font-sans: 'Raleway', 'Noto Sans Armenian', Helvetica, Arial, sans-serif;
}

/* Noto Sans Armenian's metrics (x-height, cap-height) run visibly larger than
   Cormorant Garamond/Cinzel/Raleway at the same declared font-size, and its
   apparent "colour" (visual density) is heavier than those fonts even at a
   matching numeric font-weight — two different type designs rarely look
   equally bold/large at identical CSS values, and matching the weight
   keyword alone (the earlier fix, above) wasn't sufficient on its own.
   Fixed at the same two single points of control as the font-family fix,
   for the same reason (full coverage, no per-component patching):
     1. Nearly every font-size in this theme is set in rem or em (verified —
        the two lone `em` cases are on elements whose parent is itself
        rem-sized, so they scale proportionally too), and rem is always
        relative to the ROOT (<html>) element's font-size regardless of any
        ancestor's own font-size. Scaling that one root value scales every
        rem/em-based font-size site-wide in one step.
     2. `h1-h6`'s own explicit `font-weight: 500` (below) is the ONLY place
        heading weight is set — Armenian headings (About page section
        headings, the artwork single-page title) both come from this one
        rule, so overriding it here — rather than on each heading — fixes
        both reported cases and any other heading site-wide.
   Starting calibration (96% size, 400 weight vs. English's 500) — a
   reasoned first pass, not a pixel-measured value (no visual rendering tool
   was available to confirm exact parity); flagged for the artist to fine-
   tune after a real visual check. Body text's own weight (300) is left
   alone — not reported as mismatched, and Noto Sans Armenian's true Light
   weight already applies there via the font-family fix above. */
html:lang(hy) {
	font-size: 96%;
}

:lang(hy) h1,
:lang(hy) h2,
:lang(hy) h3,
:lang(hy) h4,
:lang(hy) h5,
:lang(hy) h6 {
	font-weight: 400;
}

/* Latin words embedded inside an Armenian heading (e.g. a news title quoting
   an English publication name, "The Brief-ի հոդվածը...") still render
   mismatched even with the two fixes above: the :root:lang(hy) font-stack
   change (near the top of this file) inserts 'Noto Sans Armenian' as the
   SECOND font in each stack, which only helps the ARMENIAN characters (the
   ones Cormorant Garamond/Cinzel actually lack glyphs for) fall through
   correctly — it does nothing for Latin characters mixed into the same
   heading, since Cormorant Garamond/Cinzel already have Latin glyphs and
   the browser renders them in the first-listed font regardless of the
   surrounding language. So a heading that mixes scripts ends up with the
   Armenian portion in Noto Sans Armenian and the Latin portion in Cormorant
   Garamond side by side — visually inconsistent even though each
   individually "worked as intended" for its own script. This is the exact
   same underlying mechanism as the artwork single page's QR-download-button
   fix (below, `.artwork-single__qr-download`), which solved it for that one
   inline Armenian+"QR" string by putting Noto Sans Armenian FIRST so both
   scripts render in one consistent font. Applied here at the same central
   point as the size/weight fixes above (every Armenian heading site-wide,
   not per-component) so ANY current or future heading mixing Armenian and
   Latin text renders uniformly, not just this one news title. Scoped to
   headings only, per the reported issue — body text is unaffected (still
   reads through the unchanged :root:lang(hy) stacks above), matching the
   task's explicit "headings and titles" scope; a body-text sweep found the
   identical underlying mismatch is very likely still present wherever Latin
   words are embedded in Armenian body copy (e.g. "Latitude Art Space" inside
   an Armenian paragraph) — flagged, not fixed here, since it wasn't asked
   for and would be a much larger, more visible change to every Armenian
   page's body text than adding one heading-scoped rule. */
:lang(hy) h1,
:lang(hy) h2,
:lang(hy) h3,
:lang(hy) h4,
:lang(hy) h5,
:lang(hy) h6 {
	font-family: 'Noto Sans Armenian', 'Cormorant Garamond', Georgia, serif;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	height: 100%;
}

/* Sticky footer: on any page whose content is shorter than the viewport
   (e.g. the Testimonials archive with few entries, or a short-truncated
   quote), the footer used to end wherever the content ended, leaving the
   body's white background exposed below it down to the viewport's bottom
   edge. body becomes a column flex container spanning at least the full
   viewport height; .site-header-main-wrap (below) is the one flexible child
   that grows to fill any leftover space, so .site-footer always lands
   exactly at the bottom of the viewport on short pages, and behaves
   completely normally (no visible change) on any page whose content
   already exceeds viewport height. */
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--black);
	background-color: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-serif);
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 var(--space-sm);
	color: var(--black);
}

p {
	margin: 0 0 var(--space-sm);
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

button, input, textarea, select {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
}

figure {
	margin: 0;
}

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.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 !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--white);
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.4);
	clip: auto !important;
	clip-path: none;
	color: var(--black);
	display: block;
	font-size: 0.875rem;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 1em 1.5em;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

.skip-link {
	left: -9999px;
	position: absolute;
	top: -9999px;
	z-index: 999999;
}

.skip-link:focus {
	left: var(--space-sm);
	top: var(--space-sm);
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.alignwide {
	max-width: calc(var(--container-width) + 4rem);
	margin-inline: auto;
}