/*
Theme Name: Namynė
Description: Hand-coded classic theme for namyne.lt — dark taupe + cream + lantern amber, taken from the client's own logo and night photography. Built on the Omni Business Lab wp-kit v1.0.0 (grafted 2026-09-20). No builders, no third-party plugins, no external assets.
Version: 1.3.4
Author: Omni Business Lab
Text Domain: namyne
*/

/* Tokens are enqueued from assets/tokens.css before this file. */

/* ================================================================
   == kit primitives (wp-kit v1.0.0) — keep in style.css: G1 W-G1-09
   == greps THIS file for prefers-reduced-motion / :focus-visible /
   == scroll-margin-top. When grafting into an older clone, copy this
   == whole block verbatim.
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: var(--fw-body) var(--fs-base) / var(--lh-body) var(--ff-body); }
img, svg, video { max-width: 100%; height: auto; display: block; }

/* skip link — FIRST focusable in <body>, targets <main id="main"> */
.skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 100; background: var(--c-ink); color: var(--c-surface); padding: var(--s-3) var(--s-4); border-radius: var(--radius); text-decoration: none; font-weight: var(--fw-bold); }
.skip-link:focus { top: var(--s-4); }

/* keyboard focus — visible on every control, never removed */
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.btn:focus-visible, .site-nav a:focus-visible { outline-offset: 3px; }

/* anchors land below the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

/* reveal primitive — the CLASS is added by motion.js to below-the-fold
   [data-rv] targets only; the raw HTML never carries .rv, so no-JS shows all */
.rv { opacity: 0; transform: translateY(var(--rv-shift)); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); will-change: opacity, transform; }
.rv.on { opacity: 1; transform: none; will-change: auto; }

/* reduced motion — every animation and transition the theme declares is
   neutralised, and every reveal target is visible */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.rv, .rv.on { opacity: 1; transform: none; transition: none; }
	.hero-img, .hero-glow { transform: none !important; }
}
/* ================================================================ end kit primitives */

/* ---- type: Bodoni Moda on headings ≥ 1.25 rem and prices, system stack for body ---- */
h1, h2, h3 { font-family: var(--ff-display); font-weight: var(--fw-display); letter-spacing: var(--ls-display); line-height: 1.15; margin: 0 0 .55em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1em; }
a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--c-accent-deep); }
strong { font-weight: var(--fw-bold); }
.lead { font-size: var(--fs-lg); }
.price { font-family: var(--ff-display); font-size: 1.7rem; letter-spacing: var(--ls-display); color: var(--c-accent); }

/* ---- layout ---- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: var(--wrap-narrow); }
section.block { padding-block: var(--s-8); }
section.alt { background: var(--c-bg-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.site-main { min-height: 60vh; }
.page-head { padding-block: 56px 12px; text-align: center; }
.page-head p { color: var(--c-muted); }

/* ---- header: sticky, one row at every width ---- */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(43, 39, 35, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--c-line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: var(--header-h); }
.site-brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--c-ink); font-family: var(--ff-display); letter-spacing: .3em; font-size: 1.05rem; }
.site-brand img { height: 40px; width: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav a { position: relative; display: inline-block; padding: var(--s-2) 0; text-decoration: none; color: var(--c-muted); font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; }
/* micro-interaction: 1-px accent underline grows from the left (transform only) */
.site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--ease); }
.site-nav a:hover, .site-nav .current-menu-item a { color: var(--c-ink); }
.site-nav a:hover::after, .site-nav .current-menu-item a::after, .site-nav a[aria-current]::after { transform: scaleX(1); }
.site-nav--compact { display: none; }
.site-nav--compact summary { list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); cursor: pointer; padding: var(--s-2) 0; color: var(--c-muted); font-size: .92rem; letter-spacing: .08em; text-transform: uppercase; }
.site-nav--compact summary::-webkit-details-marker { display: none; }
.site-nav--compact summary .icon { color: var(--c-accent); }
.site-nav--compact[open] summary { color: var(--c-ink); }
.site-nav--compact nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--c-surface); border-bottom: 1px solid var(--c-line); padding: var(--s-3) var(--gutter) var(--s-4); }
.site-nav--compact ul { flex-direction: column; gap: 0; }
.site-nav--compact li { border-bottom: 1px solid var(--c-line); }
.site-nav--compact li:last-child { border-bottom: 0; }
.site-nav--compact a { display: block; padding: var(--s-3) 0; }

/* ---- hero: the signature slot. Photo (drifts) → glow → dark overlay → text.
   Everything inside is absolutely positioned or static, so CLS = 0; the
   image is a real <img loading="eager" fetchpriority="high"> = LCP. ---- */
.hero { position: relative; overflow: hidden; min-height: 78vh; display: flex; align-items: center; justify-content: center; text-align: center; background: var(--c-bg); }
.hero-img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.08); will-change: transform; }
.hero-glow { position: absolute; z-index: 1; left: -18%; top: -35%; width: 160%; height: 160%; pointer-events: none; opacity: 1; background: radial-gradient(closest-side, rgba(var(--c-glow), .38), rgba(var(--c-glow), 0) 70%); transition: opacity 1200ms var(--ease); will-change: opacity, transform; }
.js .hero-glow { opacity: 0; }
.js .hero-glow.lit { opacity: 1; }
/* reduced motion: the glow is simply there — no fade-in, no dependence on
   motion.js adding .lit. Placed after the .js rules so it wins by order (1.2.1). */
@media (prefers-reduced-motion: reduce) { .js .hero-glow { opacity: 1; transition: none; } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .55)); }
.hero .inner { position: relative; z-index: 3; padding: 60px var(--gutter); }
.hero img.hero-logo { width: min(220px, 44vw); height: auto; margin: 0 auto 18px; } /* 165 px at 375: logo + H1 + sub + CTA inside 667 */
.hero h1 { color: var(--c-ink); margin-bottom: .2em; }
.hero .lead { max-width: 620px; margin: 0 auto 26px; color: var(--c-ink); }
.hero .hero-sub { font-family: var(--ff-display); font-style: italic; font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.hero .btn { margin: var(--s-1); }
.divider { text-align: center; color: var(--c-accent); margin: 0 0 var(--s-5); }
.divider .icon { width: 28px; height: 28px; display: inline-block; }

/* ---- buttons: colour + a 1-px lift on hover, press returns ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); background: var(--c-accent); color: var(--c-accent-ink); padding: 13px 28px; border: 1px solid var(--c-accent); border-radius: var(--radius); text-decoration: none; letter-spacing: .1em; text-transform: uppercase; font: inherit; font-size: .88rem; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: var(--c-accent-ink); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--c-ink); border-color: var(--c-accent); }
.btn.ghost:hover { background: var(--c-accent); color: var(--c-accent-ink); }
.btn .icon { width: 1.15em; height: 1.15em; }

/* ---- icons: inline SVG sprite, 24-px grid, currentColor ---- */
.icon { width: var(--icon-size); height: var(--icon-size); flex: none; display: inline-block; vertical-align: -.15em; }
.icon-row { display: inline-flex; align-items: center; gap: var(--s-2); }
h2 .icon, h3 .icon, .lead .icon { width: 1em; height: 1em; color: var(--c-accent); margin-right: .3em; }

/* ---- cards (content lists of equals; no hover effect — they are not links) ---- */
.card { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); }
.card .body { padding: 22px; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.facts { list-style: none; padding: 0; margin: 0 0 1em; display: grid; grid-template-columns: 1fr; gap: 6px; }
.facts li { display: flex; gap: 10px; align-items: flex-start; }
.facts .icon { width: 20px; height: 20px; color: var(--c-accent); margin-top: .25em; }
ul.clean { padding-left: 1.2em; }
ul.clean li { margin-bottom: .35em; }
.callout { display: flex; gap: var(--s-3); align-items: flex-start; justify-content: center; margin-top: 28px; }
.callout .icon { color: var(--c-accent); margin-top: .1em; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 920px; margin: 0 auto 8px; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery.rv { transform: none; } /* images fade only — a sliding grid reads as a carousel */
.gallery-group-title { text-align: center; margin-top: 48px; }
.gallery-group-title:first-child { margin-top: 0; }
.note { border-left: 3px solid var(--c-accent); padding: 12px 18px; background: var(--c-surface); color: var(--c-muted); }
.rules h2 { margin-top: 1.6em; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--c-line); background: var(--c-bg-2); padding-block: 40px; color: var(--c-muted); font-size: .92rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.site-footer a { color: var(--c-muted); }
.site-footer a:hover { color: var(--c-accent); }
.site-footer strong { color: var(--c-ink); }
.footer-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--ff-display); font-weight: var(--fw-display); font-size: 1.15rem; letter-spacing: .06em; }
.footer-brand .icon { color: var(--c-accent); }
.site-footer .icon-row .icon { width: 18px; height: 18px; color: var(--c-accent); }

/* ---- calendar ([namyne_kalendorius]) ---- */
.nm-cal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.nm-month .nm-month-title { text-align: center; font-size: 1.1rem; margin-bottom: .5em; } /* h2 since plugin 1.2.2 (outline), sized as the old h3 */
.nm-month table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.nm-month th { font-size: .75rem; color: var(--c-muted); font-weight: 400; padding: 4px 0; }
.nm-month td { text-align: center; padding: 7px 0; font-size: .9rem; border: 1px solid var(--c-bg); transition: background var(--dur-fast) var(--ease); }
.nm-month td.free { background: var(--c-free); }
.nm-month td.free:hover { background: var(--c-surface); }
.nm-month td.busy { background: var(--c-busy); color: #e7d6cf; text-decoration: line-through; }
/* 1.3.3: departure/check-out day — half-painted, never plain white (client
   finding 2026-09-28 (a)). Diagonal split reads as "half" at any cell size;
   the guest leaves that morning, the night itself stays free until booked. */
.nm-month td.half { background: linear-gradient(135deg, var(--c-busy) 0 50%, var(--c-free) 50% 100%); }
.nm-month td.past { opacity: .35; }
.nm-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: .88rem; color: var(--c-muted); margin: 14px 0; }
.nm-legend span::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.nm-legend .l-free::before { background: var(--c-free); }
.nm-legend .l-half::before { background: linear-gradient(135deg, var(--c-busy) 0 50%, var(--c-free) 50% 100%); }
.nm-legend .l-busy::before { background: var(--c-busy); }
.nm-cal-nav { display: flex; justify-content: space-between; margin-top: 14px; }

/* ---- form ([namyne_forma]) ---- */
.nm-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nm-form .field { margin-bottom: 14px; }
.nm-form label { display: block; font-size: .85rem; color: var(--c-muted); margin-bottom: 4px; }
.nm-form input, .nm-form select, .nm-form textarea { width: 100%; padding: 11px 12px; background: var(--c-bg); color: var(--c-ink); border: 1px solid var(--c-line); border-radius: var(--radius); font: inherit; transition: border-color var(--dur-fast) var(--ease); }
.nm-form input:hover, .nm-form select:hover, .nm-form textarea:hover, .nm-form input:focus, .nm-form select:focus, .nm-form textarea:focus { border-color: var(--c-accent); }
/* B5.4 2026-10-04 (client-eye point 4): at 375 the group title and the first
   checkbox shared one line and the rest wrapped. The title is now its own
   block and the options are a wrapping flex row with a real gap. */
.nm-form .checks .checks-title { display: block; font-size: .85rem; color: var(--c-muted); margin-bottom: 6px; }
.nm-form .checks .checks-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.nm-form .checks label { display: inline-flex; gap: 6px; align-items: center; margin: 0; color: var(--c-ink); }
.nm-form .checks input { width: auto; }
.hp-field { position: absolute; left: -9999px; }
.form-success { background: var(--c-free); border-left: 3px solid var(--c-ok); padding: 14px 18px; margin-bottom: 18px; }

/* ---- signature slot (DESIGN.md § 2) ---- */
[data-signature] { position: relative; }

/* laptop-height desktops (G2 finding 5, theme 1.2.2): between 900 and 1200 px the
   hero content (logo 281 px + H1 + sub + lead + CTA + 60/60 padding = 717 px) pushed
   the first CTA to y 656–706 at 1054×667. Smaller logo + tighter padding keep the
   whole promise (logo, H1, sub, CTA) inside 667; ≤ 820 (phone) and ≥ 1201 (1440×900
   design) are untouched. The H1 still sits over the glow's centre band. */
/* ---- image slot (plugin 1.3.0 [namyne_slot], R1 #6): a grid-2 whose photo has not
   arrived yet has ONE child — it spans the row, so the text is never half-width ---- */
.grid-slot > :only-child { grid-column: 1 / -1; max-width: var(--wrap-narrow); }
.slot img { width: 100%; }

/* ---- footer address = directions link (R1 #4) ---- */
.footer-address { color: inherit; }

/* ---- gallery lightbox (theme 1.3.0, R1 #5; assets/lightbox.js) ----
   The opener button is wrapped around each .gallery img BY JS, so no-JS keeps
   the plain grid. The dialog fades by opacity only; the photo is shown whole
   (object-fit: contain, no crop), never larger than its own pixels. */
.gallery .lb-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; color: inherit; font: inherit; }
.lb { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 64px 16px; background: rgba(20, 17, 15, .94); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.lb[hidden] { display: none; }
.lb.on { opacity: 1; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.lb img { max-width: 100%; max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; aspect-ratio: auto; }
.lb figcaption { color: var(--c-muted); font-size: var(--fs-sm); text-align: center; }
.lb-btn { position: absolute; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); color: var(--c-ink); cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.lb-btn:hover { background: var(--c-accent); color: var(--c-accent-ink); }
.lb-btn .icon { width: 24px; height: 24px; }
.lb-close { top: 12px; right: 12px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-prev[hidden], .lb-next[hidden] { display: none; }
body.lb-lock { overflow: hidden; }
@media (max-width: 820px) {
	.lb { padding: 56px 8px 72px; }
	.lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; }
	.lb img { max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); }
}

@media (min-width: 900px) and (max-width: 1200px) {
	.hero .inner { padding-block: 36px; }
	.hero img.hero-logo { width: 160px; margin-bottom: 12px; }
	.hero .hero-sub { margin-bottom: var(--s-4); }
	.hero .lead { margin-bottom: 20px; }
}

@media (max-width: 820px) {
	:root { --header-h: 60px; }
	.grid-2, .grid-3, .nm-form .row, .facts { grid-template-columns: 1fr; }
	.gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.hero { min-height: 64vh; }
	.hero .inner { padding-block: 40px; }
	section.block { padding-block: 44px; }
	.site-header .wrap { position: relative; }
	.site-nav--wide { display: none; }
	.site-nav--compact { display: block; }
}