/* ============================================================
   eCatedrala — public stylesheet.
   Mobile-first. Every colour comes from a token in src/Theme.php,
   so this file never needs editing to re-skin a site.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* A short page — a home page holding one picture, say — used to end
     mid-screen with the footer floating above bare background. The column
     fills the viewport and the main area takes up the slack, so the footer
     sits on the bottom edge instead. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; }
img, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--c-primary); text-underline-offset: .18em; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
.muted { color: var(--c-muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; }

.wrap { width: min(100% - 2rem, var(--container)); margin-inline: auto; }
.pad { padding-block: clamp(2rem, 6vw, 4.5rem); }
/* A reading column is narrower than the page it sits in. Left to itself
   it would stand against the container's left edge with all the spare
   width on its right; centred, the page reads as a page. Which way the
   words inside are set is a separate choice, made per section. */
.prose { max-width: 68ch; margin-inline: auto; }
.prose-wide { max-width: none; }
.prose h2 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 3px solid var(--c-accent); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--c-primary); color: var(--c-onprim, #fff); padding: .7rem 1rem;
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .7rem 1.3rem; border: 1px solid var(--c-primary);
  border-radius: var(--radius); background: var(--c-primary); color: var(--c-onprim, #fff);
  text-decoration: none; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: opacity .15s ease, transform .15s ease;
}
.btn:hover { opacity: .9; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--c-primary); }

.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: none; border: 0; border-radius: var(--radius);
  color: inherit; cursor: pointer; font-size: 1.1rem;
}
.icon-btn:hover { background: color-mix(in srgb, var(--c-text) 8%, transparent); }

/* ── Header ────────────────────────────────────────────────── */
/* The rules closing the header and opening the footer are their own
   palette token (Aspect → Culori), so the brand line is set in the admin
   like every other colour rather than being frozen in this file. */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--c-header) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: var(--rule-w, 2px) solid var(--c-rule);
}
/* The header's height, published as a token so the footer can match it.
   A logo taller than the bar pushes the bar open, and the footer follows. */
:root { --head-h: max(68px, var(--logo-h-m, 38px)); }
@media (min-width: 700px) { :root { --head-h: max(68px, var(--logo-h, 46px)); } }
.head-row { display: flex; align-items: center; gap: .5rem; min-height: var(--head-h); }
/* The brand yields space so the controls can never be pushed off-screen. */
.brand { display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.head-tools { flex: 0 0 auto; }
.logo {
  height: var(--logo-h-m, 38px); width: auto;
  max-width: min(46vw, 420px);
  /* An SVG exported with width="100%" has no resolvable ratio; without
     these it would stretch to fill the header on wide screens. */
  object-fit: contain; object-position: left center;
}
@media (min-width: 700px) { .logo { height: var(--logo-h, 46px); } }
.logo-dark { display: none; }
:root[data-theme="dark"] .logo-light { display: none; }
:root[data-theme="dark"] .logo-dark  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark  { display: block; }
}

.burger, .burger::before, .burger::after {
  display: block; width: 22px; height: 2px; background: currentColor;
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.burger::before, .burger::after { content: ""; position: relative; }
.burger::before { top: -7px; }
.burger::after  { top: 5px; }
[aria-expanded="true"] .burger { background: transparent; }
[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); }
[aria-expanded="true"] .burger::after  { transform: translateY(-5px) rotate(-45deg); }

.nav {
  position: fixed; inset: var(--head-h, 68px) 0 auto 0; z-index: 40;
  display: none; padding: .5rem 1rem 1.25rem;
  background: var(--c-header); border-bottom: 1px solid var(--c-border);
  max-height: calc(100dvh - var(--head-h, 68px)); overflow-y: auto;
}
.nav.open { display: block; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav-list a {
  display: block; padding: .95rem .25rem; color: inherit;
  text-decoration: none; border-bottom: 1px solid var(--c-border); font-weight: 500;
}
.nav-list a:hover { color: var(--c-primary); }

/* A page can ask to appear as a button — used for Donations. */
.nav-list a.nav-btn {
  border: 1px solid var(--c-primary); border-radius: var(--radius);
  color: var(--c-primary); text-align: center; margin-top: .6rem; font-weight: 600;
}

.head-tools { display: flex; align-items: center; gap: .1rem; margin-left: auto; }

/* Language menu */
.lang-pick { position: relative; }
.lang-code { font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 60;
  list-style: none; margin: 0; padding: .3rem; min-width: 11rem;
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift, 0 10px 30px rgba(0,0,0,.18));
}
.lang-menu a {
  display: flex; align-items: center; gap: .6rem; padding: .6rem .7rem;
  color: inherit; text-decoration: none; border-radius: calc(var(--radius) - 3px);
  font-size: .95rem;
}
.lang-menu a:hover { background: color-mix(in srgb, var(--c-text) 8%, transparent); }
.lang-menu a.on { color: var(--c-primary); font-weight: 600; }
.lang-menu .code { font-size: .72rem; font-weight: 700; color: var(--c-muted); width: 1.6rem; }

/* Search panel, under the bar on every screen size */
.search-panel { border-top: 1px solid var(--c-border); background: var(--c-header); }
.search-form { display: flex; gap: .5rem; align-items: center; padding: .75rem 0; }
.search-form input {
  flex: 1; padding: .8rem 1rem; font: inherit;
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius);
}
.search-big input { width: 100%; padding: .7rem .9rem; font: inherit;
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-border); border-radius: var(--radius); }

.ico-moon { display: none; }
:root[data-theme="dark"] .ico-sun { display: none; }
:root[data-theme="dark"] .ico-moon { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ico-sun { display: none; }
  :root:not([data-theme="light"]) .ico-moon { display: inline; }
}

/* Six links, three controls and a logo need the room: the burger stays
   until there is genuinely space for the lot. */
@media (max-width: 420px) {
  .icon-btn { width: 38px; height: 38px; }
  .head-row { gap: .25rem; }
}

@media (min-width: 700px) { .logo { max-width: min(38vw, 460px); } }

@media (min-width: 1100px) {
  .nav-toggle { display: none; }
  .nav {
    position: static; display: block; padding: 0; margin-left: 1.5rem;
    background: none; border: 0; max-height: none; overflow: visible;
  }
  .nav-list { flex-direction: row; gap: .15rem; }
  .nav-list a { border: 0; padding: .5rem .75rem; }
  .nav-list a.nav-btn { margin: 0 0 0 .4rem; padding: .5rem 1rem; }
  .head-tools { gap: .15rem; }
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative; display: grid; align-items: end;
  background-image: var(--hero-img);   /* the dim layer is ::before, in design.css */
  background-size: cover; background-position: center; color: #fff;
}
.hero-short { min-height: 42vh; }
.hero-tall  { min-height: 62vh; }
.hero-full  { min-height: calc(100dvh - 68px); }
.hero-inner { padding-block: clamp(2rem, 8vw, 5rem); }
.hero-plain {
  background-image: none; color: var(--c-text);
  align-items: center; min-height: 0;
  border-bottom: 1px solid var(--c-border);
}
.hero-title { margin-bottom: .3em; }
.hero-text { max-width: 46ch; font-size: 1.15rem; }
.kicker {
  text-transform: uppercase; letter-spacing: .16em; font-size: .78rem;
  font-weight: 700; color: var(--c-accent); margin-bottom: .8em;
}
.hero:not(.hero-plain) .btn { background: var(--c-accent); border-color: var(--c-accent); color: #1a1512; }
.hero:not(.hero-plain) a { color: #fff; }

/* ── Sections, cards, gallery ──────────────────────────────── */
.block { position: relative; }
.section-title { margin-bottom: .8em; }
.section-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; }
.grid-cards { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.10); }
.card-link { display: block; color: inherit; text-decoration: none; height: 100%; }
.card-media img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card-body { padding: 1rem 1.1rem 1.2rem; }
.card-body h3 { margin-bottom: .35em; }
.date { font-size: .82rem; color: var(--c-muted); letter-spacing: .04em; margin-bottom: .4em; }

/* Useful links: a card per link, its explanation underneath. */
.section-intro { max-width: 60ch; margin-bottom: 1.5em; color: var(--c-muted); }
.link-name { display: flex; align-items: baseline; gap: .4em; }
.link-out { font-size: .7em; color: var(--c-muted); }
.link-card .card-link:hover .link-name { color: var(--c-primary); }
.link-card .card-body p { font-size: .93rem; line-height: 1.5; }

.split { display: grid; gap: 1.75rem; align-items: center; }
.split-media img { width: 100%; border-radius: var(--radius); }
@media (min-width: 800px) {
  /* Two columns only when there are two things to put in them. A contact
     block with no map used to keep the second column open and sit in the
     left half of the page, which reads as content pushed to one side
     rather than as a deliberate two-column section. */
  .split:has(> * + *) { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .split-rev .split-media { order: 2; }
}

.grid-gallery { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(50%, 190px), 1fr)); }
.grid-gallery a { display: block; border-radius: var(--radius); overflow: hidden; }
.grid-gallery img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform .3s ease; }
.grid-gallery a:hover img { transform: scale(1.05); }

.schedule { width: 100%; border-collapse: collapse; }
.schedule th, .schedule td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--c-border); }
.schedule th { font-weight: 600; white-space: nowrap; }
.schedule td.num { text-align: right; color: var(--c-muted); white-space: nowrap; }

.quote { margin: 0; padding: 1.5rem 0; text-align: center; font-family: var(--font-head); }
.quote p { font-size: clamp(1.3rem, 3.2vw, 1.9rem); font-style: italic; }
.quote cite { color: var(--c-muted); font-size: .95rem; font-style: normal; }

.embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-map { aspect-ratio: 4 / 3; }

.single-cover img { width: 100%; max-height: 62vh; object-fit: cover; }
.single header { padding-top: clamp(1.5rem, 4vw, 3rem); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; }
.search-big { display: flex; gap: .6rem; margin-bottom: 2rem; }

/* ── Forms ─────────────────────────────────────────────────── */
.form label { display: block; margin-bottom: .9rem; font-size: .9rem; font-weight: 600; }
.form input, .form textarea {
  display: block; width: 100%; margin-top: .35rem; padding: .7rem .9rem;
  font: inherit; font-weight: 400; color: var(--c-text); background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--radius);
}
.hp { position: absolute; left: -9999px; }
.notice { padding: .8rem 1rem; border-radius: var(--radius); border: 1px solid var(--c-border); }
.notice.ok  { border-color: var(--c-accent); }
.notice.bad { border-color: var(--c-primary); }

/* ── Footer ────────────────────────────────────────────────── */
.site-foot {
  margin-top: var(--foot-gap, 2.5rem); border-top: var(--rule-w, 2px) solid var(--c-rule);
  background: var(--c-foot); font-size: .9rem;
}
.foot-row { display: grid; gap: .6rem 2rem; padding-block: 1.4rem; }
.foot-row p { margin: 0; }
/* Footer links keep their own colour (Aspect → Culori → Linkuri în subsol)
   and drop the underline — an e-mail address reads as an address, and the
   pointer is what says it is clickable. */
.site-foot a { color: var(--c-footlink, inherit); text-decoration: none; }
.site-foot a:hover, .site-foot a:focus-visible { text-decoration: underline; }
.socials { list-style: none; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; }
.foot-copy { color: var(--c-muted); font-size: .82rem; }
@media (min-width: 700px) {
  .foot-row { grid-template-columns: 2fr 1fr auto; align-items: start; }
  .foot-copy { grid-column: 1 / -1; }
}

/* ── Footer as a band the height of the header ─────────────── */
/* The band's height belongs to the footer itself, not to the row inside
   it. That way "the same height as the header" holds whatever the footer
   is made of — the automatic row, sections of your own, or both — and two
   short lines stacked one under the other still fit inside the bar rather
   than making it taller. The header is this min-height plus its rule, and
   the footer's rule is the same width, so the two bars match. */
.st-foot-size-bar .site-foot {
  display: grid; align-content: center;
  min-height: var(--head-h);
}
.st-foot-size-bar .foot-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .35rem 1.5rem; padding-block: .5rem;
}
.st-foot-size-bar .foot-main,
.st-foot-size-bar .foot-contact {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1.25rem;
}
.st-foot-size-bar .foot-copy { margin-left: auto; }
/* Centred: everything gathered in the middle of the bar rather than spread
   to the two edges. */
.st-foot-align-center .foot-row { justify-content: center; text-align: center; }
.st-foot-align-center .foot-main,
.st-foot-align-center .foot-contact { justify-content: center; }
.st-foot-align-center .foot-copy { margin-left: 0; }
/* In one line, an address written over several lines has to read as one. */
.st-foot-size-bar .foot-addr br { display: none; }
.st-foot-size-bar .foot-addr { white-space: normal; }
@media (max-width: 699px) {
  /* A phone cannot hold all of it on one line, so the bar keeps its
     alignment but is allowed to grow rather than overflow. */
  .st-foot-size-bar .foot-row { gap: .3rem 1rem; padding-block: .75rem; }
  .st-foot-size-bar .foot-copy { margin-left: 0; }
}

/* ── Lightbox ──────────────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(0,0,0,.92); padding: 1rem;
}
.lb img { max-width: 100%; max-height: 90dvh; object-fit: contain; }
.lb button {
  position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px;
  font-size: 1.5rem; color: #fff; background: rgba(255,255,255,.12);
  border: 0; border-radius: 50%; cursor: pointer;
}

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

/* The holding page's own minimal switcher. */
.langs-bare { list-style: none; display: flex; flex-wrap: wrap; gap: .2rem; margin: 0; padding: 0; }
.langs-bare a {
  display: block; padding: .4rem .55rem; border-radius: var(--radius);
  color: var(--c-muted); text-decoration: none; font-size: .78rem; font-weight: 700;
}
.langs-bare a.on { color: var(--c-text); background: color-mix(in srgb, var(--c-text) 10%, transparent); }

/* Contact details: a label column, so address / phone / e-mail line up. */
.contact-line { display: grid; grid-template-columns: 7rem 1fr; gap: .25rem 1rem; margin-bottom: .6rem; }
/* Centred, the pair is drawn together in the middle instead of leaving the
   value stranded halfway across the page: the label ends where the value
   begins, and the two of them sit as one block. */
.sec--align-center .contact-line {
  grid-template-columns: max-content max-content;
  justify-content: center; text-align: left;
}
.sec--align-center .contact-line .lbl { text-align: right; }
.contact-line .lbl { color: var(--c-muted); font-size: .85rem; padding-top: .1rem; }
@media (max-width: 500px) { .contact-line { grid-template-columns: 1fr; gap: 0; } }

/* ── The cathedral in 3D ───────────────────────────────────── */
.model3d {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius);
  /* Whatever shows around or behind the canvas — the rounded corners, the
     moment before the model arrives — is the page's own ground, so the
     block sits in light and dark alike instead of on a patch of its own. */
  background: var(--c-bg);
}
.model3d.is-bare { background: none; border-radius: 0; }
.model3d-canvas {
  display: block; width: 100%; height: 100%;
  /* The view is the one chosen in the studio: the canvas never takes the
     pointer, so a phone scrolls straight past it instead of trapping the
     finger in a drag that does nothing. */
  touch-action: auto; pointer-events: none;
}
.model3d--short  { height: min(46vh, 340px); }
.model3d--normal { height: min(62vh, 520px); }
.model3d--tall   { height: min(82vh, 760px); }
@media (max-width: 700px) {
  .model3d--short  { height: 40vh; }
  .model3d--normal { height: 48vh; }
  .model3d--tall   { height: 62vh; }
}
/* A quiet pulse while seven megabytes arrive, and no jump when they do. */
.model3d.has-poster.is-loading::after { content: none; }
.model3d.is-loading::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.22) 50%, transparent 80%);
  animation: m3d-sweep 1.6s ease-in-out infinite;
}
@keyframes m3d-sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }
.model3d-note {
  position: absolute; inset: auto 0 0 0; padding: .8rem 1rem;
  text-align: center; font-size: .9rem; color: var(--c-muted); background: var(--c-surface);
}
.model3d.is-failed:not(.has-poster) { height: auto; min-height: 0; }
.model3d.is-failed .model3d-canvas { display: none; }
.model3d.is-failed .model3d-note { position: static; }
/* The stand-in picture fills the same frame. It is on screen immediately,
   so the block never opens as an empty box, and the model fades in over it
   only once it is genuinely ready to draw. */
.model3d picture { display: contents; }
.model3d-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Fill the frame and crop, or show the whole picture and let the page's
   own ground fill what is left over. The frame is roughly 2.7:1 across a
   desktop and about 0.9:1 on a phone, so one picture cannot fill both —
   hence the separate upright version and this choice. */
.model3d.fit-contain .model3d-poster { object-fit: contain; }
.model3d.focus-top    .model3d-poster { object-position: 50% 0%; }
.model3d.focus-bottom .model3d-poster { object-position: 50% 100%; }
.model3d.focus-left   .model3d-poster { object-position: 0% 50%; }
.model3d.focus-right  .model3d-poster { object-position: 100% 50%; }
.model3d.has-poster .model3d-canvas { position: relative; z-index: 1; opacity: 0; transition: opacity .5s ease; }
.model3d.has-poster.is-ready .model3d-canvas { opacity: 1; }
/* If the model is off, failed, or never asked for, the picture is the block. */
.model3d.has-poster.is-failed .model3d-canvas,
.model3d.has-poster.is-failed .model3d-note { display: none; }
.model3d-caption { margin-top: .7rem; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
  .model3d.is-loading::after { animation: none; }
}
/* ── The footer's own sections ─────────────────────────────────
   The footer is built from the same blocks a page is, so a second text
   under the first is simply two text blocks. Inside the footer they have
   to read as footer: the rhythm token is redefined here rather than each
   block's own padding being overridden, so "Puțin / Normal / Mult" keep
   meaning something relative to one another. */
.foot-blocks { --section-pad: 1.5rem; }
/* Room above the first section, but only where the footer is a tall one.
   In a band there is no room to give, and taking it would push the bar
   past the header's height. */
.st-foot-size-normal .foot-blocks .block:first-child { padding-top: clamp(1.25rem, 3.5vw, 2.5rem); }
.foot-blocks h2 { font-size: clamp(1.1rem, 2.4vw, 1.45rem); }
.foot-blocks h3 { font-size: 1.05rem; }
.foot-blocks .prose { max-width: 62ch; }
/* A line between your own sections and the row the site fills in — but
   not in a band, where the whole point is that it reads as one bar. */
.st-foot-size-normal .foot-blocks + .foot-row { border-top: 1px solid var(--c-border); }