/* =====================================================================
   Farnosť Bzince pod Javorinou — design system
   Direction: "liturgical editorial". Warm paper, one deep burgundy accent,
   hairline gold rules, Source Serif 4 display + Source Sans 3 text.
   ===================================================================== */
/* Fonts: /assets/fonts/fonts.css is linked by the layouts through asset() (mtime-versioned), not imported here,
   so that a change to the font declarations is never masked by the 7-day stylesheet cache. The WOFF2
   files it names are versioned differently — a content digest in the file name — so asset() leaves
   those URLs alone; see tools/build-fonts.sh. */

:root {
    --paper: #f6f1e8;
    --paper-2: #ece4d4;
    --transparent-paper-2: rgba(236, 228, 212, .4);
    --paper-3: #fffdf8;
    --ink: #241f1c;
    --ink-2: #5a524b;
    --ink-3: #8a817a;
    --wine: #6b1d26;
    --wine-2: #8a2a34;
    --wine-ink: #3f0f15;
    --gold: #b4924f;
    --gold-2: #d9c391;
    --line: #dccfb8;
    --ok: #3d6b45;
    --ok-bg: #e6efe4;
    --err: #a23b2c;
    --err-bg: #f6e4df;
    --display: "Source Serif 4", "Source Serif 4 Fallback", "Source Serif 4 Fallback Noto", Georgia, "Times New Roman", serif;
    --text: "Source Sans 3", "Source Sans 3 Fallback", "Source Sans 3 Fallback Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
    --measure: 42rem;
    --radius: 6px;
    --shadow: 0 1px 2px rgba(36, 31, 28, .06), 0 12px 32px -18px rgba(36, 31, 28, .35);
    --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
@media (max-width: 40rem) { html { font-size: 17px; } }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--text);
    font-synthesis: none; /* five real faces only; bold+italic in content renders as italic, never as a fake */
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    background-color: var(--paper-3);
    background-image:
        radial-gradient(120% 80% at 50% -20%, var(--paper-3) 0%, transparent 60%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    display: flex;
    flex-direction: column;
}

/* ---- typography ---------------------------------------------------- */
h1, h2, h3, .display {
    font-family: var(--display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.005em;
    color: var(--wine-ink);
    margin: 0 0 .5em;
    text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2rem); margin-top: 1.6em; }
h3 { font-size: 1.3rem; margin-top: 1.4em; }
p { margin: 0 0 1em; }
a { color: var(--wine); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { color: var(--wine-2); }
strong { font-weight: 600; }
.eyebrow {
    font-family: var(--text);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 .6rem;
}
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: var(--measure); }
.muted { color: var(--ink-3); }
.prose { max-width: var(--measure); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.prose blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.2em; border-left: 3px solid var(--gold-2); font-family: var(--display); font-size: 1.25em; font-style: italic; font-weight: 500; color: var(--ink); }

/* ornament: gold hairline with a small cross */
.rule {
    display: flex; align-items: center; gap: .9rem;
    margin: 1.75rem 0;
    color: var(--gold);
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1;
}
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent); }
.rule span::before { content: "✠"; }

/* ---- layout -------------------------------------------------------- */
.container { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); }
main { flex: 1; padding: clamp(1.5rem, 5vw, 3.5rem) 0 4rem; }

/* ---- header -------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 10;
    border-top: 5px solid var(--wine);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, var(--paper-2), var(--transparent-paper-2));
    -webkit-backdrop-filter: blur(6px) saturate(1.4);
    backdrop-filter: blur(6px) saturate(1.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header { background: linear-gradient(180deg, var(--paper-3), var(--paper)); }
}
.site-header .container {
    display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
    gap: .75rem 2rem; padding-top: 1.1rem; padding-bottom: 1rem;
}
.brand { text-decoration: none; color: var(--wine-ink); display: flex; align-items: center; gap: .9rem; }
.brand .arms { height: 3.6rem; width: auto; flex: 0 0 auto; }
.brand-text { display: block; }
.brand .eyebrow { margin-bottom: .1rem; }
.brand .name { font-family: var(--display); font-weight: 600; font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.05; display: block; }
.brand:hover .name { color: var(--wine); outline: none; }
.nav { display: flex; gap: .25rem 1.35rem; flex-wrap: wrap; align-items: center; }
.nav a {
    position: relative; text-decoration: none; color: var(--ink);
    font-weight: 600; font-size: .95rem; letter-spacing: .02em; padding: .35rem 0;
}
.nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: .05rem; height: 2px;
    background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--wine); }

/* ---- footer -------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--line);
    background: var(--paper-2);
    color: var(--ink-2); font-size: .9rem;
    padding: 1.75rem 0;
}
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 2rem; }
.site-footer a { color: inherit; }

/* ---- components ---------------------------------------------------- */
.card {
    background: var(--paper-3);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin: 1.25rem 0;
}
.card.narrow { max-width: 30rem; }
.card > :first-child { margin-top: 0; }

.tiles { list-style: none; padding: 0; margin: 1.5rem 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.tiles a {
    display: block; height: 100%;
    background: var(--paper-3); border: 1px solid var(--line); border-top: 3px solid var(--gold);
    border-radius: var(--radius); padding: 1.25rem 1.4rem;
    text-decoration: none; color: inherit;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.tiles a:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-top-color: var(--wine); }
.tiles strong { display: block; font-family: var(--display); font-size: 1.5rem; font-weight: 600; color: var(--wine-ink); margin-bottom: .2rem; }
.tiles span { color: var(--ink-2); font-size: .95rem; }

.flash { padding: .75rem 1rem; border-radius: var(--radius); border: 1px solid; margin: 0 0 1.25rem; font-weight: 600; }
.flash-ok { background: var(--ok-bg); border-color: #b9d1b7; color: var(--ok); }
.flash-error { background: var(--err-bg); border-color: #e2b8ae; color: var(--err); }

/* forms */
label { display: block; font-weight: 600; font-size: .85rem; margin: 1rem 0 .3rem; color: var(--ink-2); }
label.check { display: flex; align-items: center; gap: .55rem; font-weight: 400; color: var(--ink); margin-top: .9rem; }
label.check input { width: 1.15rem; height: 1.15rem; accent-color: var(--wine); }
input[type=text], input[type=email], input[type=number], input[type=time], input[type=date], input[type=url], select, textarea {
    width: 100%; font: inherit; font-size: .92rem; /* one compact size for every admin field; the public site has no forms */
    padding: .35rem .55rem; color: var(--ink);
    background: #fff; border: 1px solid #c9bda6; border-radius: var(--radius);
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(180, 146, 79, .25); }
select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235a524b' stroke-width='1.6'/></svg>"); background-repeat: no-repeat; background-position: right .6rem center; }

button, .button {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font: inherit; font-weight: 600; font-size: 1rem; letter-spacing: .01em;
    padding: .7rem 1.3rem; margin-top: 1.1rem;
    border: 1px solid var(--wine); border-radius: var(--radius);
    background: var(--wine); color: #fff; cursor: pointer; text-decoration: none;
    transition: background .2s, transform .2s var(--ease), box-shadow .2s;
}
button:hover, .button:hover { background: var(--wine-2); color: #fff; transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(107, 29, 38, .7); }
button:focus-visible, .button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(180, 146, 79, .45); }
button.secondary, .button.secondary { background: transparent; color: var(--wine); }
button.secondary:hover, .button.secondary:hover { background: rgba(107, 29, 38, .06); }
button.danger { background: transparent; color: var(--err); border-color: #d6a89d; }
button.danger:hover { background: var(--err); color: #fff; border-color: var(--err); }
button.small { padding: .35rem .7rem; font-size: .85rem; margin: 0; }
button.link { background: none; border: 0; color: inherit; padding: 0; margin: 0; font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
button.link:hover { transform: none; box-shadow: none; color: var(--wine); background: none; }
form.inline { display: inline; }
form.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
form.row > div { flex: 1 1 12rem; }
form.row label { margin-top: 0; }

/* tables */
.table { width: 100%; border-collapse: collapse; background: var(--paper-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.table th { text-align: left; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; padding: .7rem .8rem; background: var(--paper-2); }
.table td { padding: .7rem .8rem; border-top: 1px solid var(--line); vertical-align: middle; }
.table tr.inactive td { color: var(--ink-3); }
.table td.actions { white-space: nowrap; text-align: right; }
.table select { width: auto; }
.table form.inline { display: inline-flex; gap: .4rem; align-items: center; }
@media (max-width: 44rem) {
    .table, .table tbody, .table tr, .table td { display: block; }
    .table thead { display: none; }
    .table tr { padding: .6rem 0; border-top: 1px solid var(--line); }
    .table td { border: 0; padding: .25rem .8rem; }
    .table td.actions { text-align: left; white-space: normal; }
    .table td[data-label]::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
}

/* ---- utility pages -------------------------------------------------- */
.centered { text-align: center; max-width: 34rem; margin: 3rem auto; }
.centered .rule { max-width: 14rem; margin: 1.5rem auto; }

@media print {
    body { background: #fff; }
    .site-header, .site-footer, .nav, .no-print { display: none !important; }
}

/* ---- utilities ------------------------------------------------------ */
.w-full { width: 100%; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 1.25rem; margin-bottom: 0; }
form.row > .col-narrow { flex: 0 1 11rem; }
form.row > .col-auto { flex: 0 0 auto; }


/* ---- announcements on the home page ------------------------------------------ */
.intro { margin-bottom: 2rem; }
/* Stacked only while both weeks are shown: with the switch script one of them is [hidden]
   (display: none from the UA stylesheet) and the one left must not carry a divider. */
.week:not([hidden]) + .week { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.week-header .eyebrow { margin-bottom: .25rem; }
/* The tabs follow the main menu: the week on screen is marked wine with a gold rule under it,
   the other week is a plain link that gains the same rule on hover. */
.week-tabs span, .week-tabs a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: .35em; transition: text-decoration-color .3s var(--ease), color .3s var(--ease); }
.week-tabs span { color: var(--wine); text-decoration-color: var(--gold); }
.week-tabs a { color: inherit; }
.week-tabs a:hover { color: var(--wine); text-decoration-color: var(--gold); }
.week-header h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 0; }
/* home.js moves the focus here after a tab switch so the new week is announced; the ring is noise on a heading. */
.week-header h1:focus { outline: none; }
.week .rule { margin: 1rem 0 1.75rem; }
/* Every line of a day is a row of the same grid, and the two cells of a row are aligned on their
   baseline, not on the top of their boxes: the day name is set larger than the liturgical title
   beside it, and the date smaller, so equal 2rem lines still carry their baselines at three
   different heights. Aligning the tops is what left them a couple of pixels apart. */
.wday { display: grid; grid-template-columns: 8rem 1fr; grid-template-areas: "name title" "date events"; column-gap: 1.5rem; align-items: baseline; padding: .9rem 0; border-top: 1px solid var(--line); }
/* Nothing to align the first line to: the events begin on the day name's line, as they always did. */
.wday:not(:has(.wday-title)) { grid-template-areas: "name events" "date events"; }
.wday:first-of-type { border-top: 0; }
.wday-name { grid-area: name; margin: 0; font-size: 1.35rem; line-height: 2rem; }
.wday-date { grid-area: date; margin: 0; font-family: var(--text); font-weight: 400; font-size: 1rem; line-height: 2rem; }
.wday-title { grid-area: title; margin: 0; line-height: 2rem; font-family: var(--display); font-style: italic; font-weight: 500; }
.wevents { grid-area: events; list-style: none; margin: 0; padding: 0; }
.wevents li { display: grid; grid-template-columns: 3rem 1fr; gap: 0 .75rem; padding: .2rem 0; align-items: baseline; }
.wtime { font-variant-numeric: tabular-nums; font-weight: 600; }
.wtitle { font-weight: 600; }
.wnote::before { content: "– "; }
.wday.wnotes { grid-template-areas: "name events"; } /* the heading and the list of notes, one row */
.wnotes-body { grid-area: events; max-width: var(--measure); margin: 0; padding: 0; }
.wnotes li { margin: 0 0 .6em; }
.wnotes li::marker { color: var(--gold); }
.wnotes li:last-child { margin-bottom: 0; }
.site-footer .container { align-items: flex-start; }
.footer-contact { font-style: normal; display: flex; flex-direction: column; gap: .1rem; }
.footer-meta { display: flex; flex-direction: column; gap: .1rem; text-align: right; }
@media (max-width: 40rem) {
    /* Stacked: the date follows the day name on the first line, the title and the events below it. */
    .wday, .wday:not(:has(.wday-title)) { grid-template-columns: auto 1fr; grid-template-areas: "name date" "title title" "events events"; gap: 0 .7rem; }
    .wday-name, .wday-date { margin-bottom: .1rem; } /* the only gap in the stack sits under the day name */
    .wday.wnotes { grid-template-areas: "name name" "events events"; }
    .wnotes-body { padding-left: 1.2rem; }
    .wday-title { line-height: 1.6; }
    .wevents li { grid-template-columns: 3.5rem 1fr; }
    .footer-meta { text-align: left; }
}