/* ==========================================================================
   Szekely Design — Székely Napló (/naplo/, /naplo/<honap>-<nap>/)
   Markup: szekely-naplo/includes/render.php · Behaviour: szekely-naplo/assets/naplo.js
   Loaded only on Napló pages (szekely_naplo_enqueue_assets()).
   Max 987px column, glass cards, brand colours; cards fade up on scroll
   (377ms), the page fades in / out on day change (377ms); nothing moves
   with prefers-reduced-motion.
   ========================================================================== */

.sn-main {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--sd-987);
    margin: 0 auto;
    padding: var(--sd-34) var(--sd-21) var(--sd-89);
}

.sn-page {
    display: flex;
    flex-direction: column;
    gap: var(--sd-21);
    animation: sn-page-in var(--sd-hover-slow) var(--sd-ease) both;
    transition: opacity var(--sd-hover-slow) var(--sd-ease);
}

/* Opacity only: a transform here would make the fixed mobile nav bar and
   the calendar sheet (both inside .sn-page) position against the page. */
.sn-page.is-leaving {
    opacity: 0;
}

@keyframes sn-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Header: big date, weekday, "Ma", name days
   -------------------------------------------------------------------------- */
.sn-head {
    text-align: center;
}

.sn-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sd-8);
    margin: 0 0 var(--sd-8);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sn-today-badge {
    padding: var(--sd-3) var(--sd-8);
    border-radius: var(--sd-34);
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    letter-spacing: 0;
    text-transform: none;
}

.sn-today-badge[hidden] {
    display: none;
}

.sn-head__date {
    margin: 0;
    color: var(--color-two, #013A63);
    font-size: var(--sd-55);
    font-weight: 700;
    line-height: 1.3;
}

.sn-head__weekday {
    margin: var(--sd-3) 0 0;
    color: var(--sd-text-muted);
    font-size: var(--sd-21);
}

.sn-head__names {
    margin: var(--sd-13) 0 0;
    font-size: var(--sd-21);
    line-height: 1.618;
}

.sn-head__names-label {
    color: var(--sd-text-muted);
}

/* --------------------------------------------------------------------------
   Prev / Naptár / next — desktop: under the header; mobile: sticky bar
   above the bottom menu (#floating-menu: bottom max(8px, safe area),
   at most 55px tall).
   -------------------------------------------------------------------------- */
.sn-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-8);
    padding: var(--sd-5);
    background: var(--sd-glass-strong);
    -webkit-backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    border: 1px solid var(--sd-glass-border);
    border-radius: var(--sd-34);
    box-shadow: var(--sd-shadow);
}

.sn-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sd-5);
    min-height: var(--sd-34);
    margin: 0;
    padding: 0 var(--sd-13);
    border: 0;
    border-radius: var(--sd-34);
    background: transparent;
    color: var(--color-two, #013A63);
    font: inherit;
    font-size: var(--sd-16);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sd-hover) var(--sd-ease), color var(--sd-hover) var(--sd-ease);
}

.sn-nav__btn:hover,
.sn-nav__btn:focus-visible {
    background: var(--sd-tint);
    color: var(--color-four, #0285BA);
}

.sn-nav__cal {
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    font-weight: 600;
}

.sn-nav__cal:hover,
.sn-nav__cal:focus-visible {
    background: var(--color-two, #013A63);
    color: var(--color-one, #fff);
}

@media (max-width: 767px) {
    .sn-main {
        padding: var(--sd-21) var(--sd-13) calc(var(--sd-144) + var(--sd-21));
    }

    .sn-head__date {
        font-size: var(--sd-34);
    }

    .sn-head__weekday,
    .sn-head__names {
        font-size: var(--sd-16);
    }

    .sn-nav {
        position: fixed;
        left: max(var(--sd-13), env(safe-area-inset-left));
        right: max(var(--sd-13), env(safe-area-inset-right));
        bottom: calc(max(var(--sd-8), env(safe-area-inset-bottom)) + var(--sd-55) + var(--sd-8));
        z-index: 89;
        box-shadow: var(--sd-shadow-raised);
    }

    .sn-nav__btn {
        padding: 0 var(--sd-8);
        font-size: var(--sd-13);
    }

    .sn-nav__label {
        display: none; /* just the arrows on phones */
    }

    .sn-nav__prev,
    .sn-nav__next {
        min-width: var(--sd-55);
        font-size: var(--sd-21);
    }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.sn-card {
    padding: var(--sd-21) var(--sd-34);
    background: var(--sd-glass-strong);
    border: 1px solid var(--sd-glass-border);
    border-radius: var(--sd-21);
    box-shadow: var(--sd-shadow);
}

@media (max-width: 767px) {
    .sn-card {
        padding: var(--sd-21);
    }
}

/* Jeles nap + regula */
.sn-feast {
    background:
        radial-gradient(ellipse at 89% 0%, color-mix(in srgb, var(--color-four, #0285BA) 21%, transparent), transparent 55%),
        var(--sd-glass-strong);
    border-color: color-mix(in srgb, var(--color-four, #0285BA) 34%, transparent);
}

.sn-feast__eyebrow,
.sn-section__title {
    margin: 0 0 var(--sd-8);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sn-feast__title {
    margin: 0;
    color: var(--color-two, #013A63);
    font-size: var(--sd-34);
    line-height: 1.3;
}

.sn-feast__regula {
    margin: var(--sd-13) 0 0;
    padding: 0 0 0 var(--sd-13);
    border-left: 3px solid var(--color-four, #0285BA);
    font-size: var(--sd-21);
    font-style: italic;
    line-height: 1.618;
}

.sn-feast__szokas {
    margin: var(--sd-13) 0 0;
    color: var(--sd-text-muted);
    font-size: var(--sd-16);
    line-height: 1.618;
}

@media (max-width: 767px) {
    .sn-feast__title {
        font-size: var(--sd-21);
    }

    .sn-feast__regula {
        font-size: var(--sd-16);
    }
}

/* Sections and entries */
.sn-section {
    display: flex;
    flex-direction: column;
    gap: var(--sd-21);
}

.sn-section__title {
    margin-bottom: 0;
}

.sn-entry {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sd-13);
    align-items: start;
}

.sn-entry + .sn-entry {
    padding-top: var(--sd-21);
    border-top: 1px solid var(--sd-glass-border);
}

.sn-entry__year {
    min-width: var(--sd-55);
    padding: var(--sd-3) var(--sd-8);
    border-radius: var(--sd-34);
    background: var(--sd-tint);
    color: var(--color-four, #0285BA);
    font-size: var(--sd-13);
    font-weight: 700;
    text-align: center;
}

.sn-entry__body {
    grid-column: 2;
    min-width: 0;
}

.sn-entry:not(:has(.sn-entry__year)) .sn-entry__body {
    grid-column: 1 / -1;
}

.sn-entry__title {
    margin: 0 0 var(--sd-5);
    color: var(--color-two, #013A63);
    font-size: var(--sd-21);
    line-height: 1.3;
}

.sn-entry__text {
    font-size: var(--sd-16);
    line-height: 1.618;
    overflow-wrap: anywhere;
}

.sn-entry__text > :first-child { margin-top: 0; }
.sn-entry__text > :last-child { margin-bottom: 0; }

.sn-entry__source {
    margin: var(--sd-8) 0 0;
    color: var(--sd-text-muted);
    font-size: var(--sd-13);
}

.sn-entry__source a {
    color: var(--color-four, #0285BA);
}

/* Scroll reveal (377ms, 13px) — .is-pending is only set by naplo.js. */
.sn-reveal.is-pending {
    opacity: 0;
    transform: translateY(var(--sd-13));
    transition: opacity var(--sd-hover-slow) var(--sd-ease), transform var(--sd-hover-slow) var(--sd-ease);
}

.sn-reveal.is-pending.is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   Calendar sheet — mobile: bottom sheet; desktop: centred panel.
   12 small month grids, today highlighted, a dot on days with content.
   -------------------------------------------------------------------------- */
html.sn-locked,
html.sn-locked body {
    overflow: hidden;
}

.sn-sheet {
    position: fixed;
    inset: 0;
    z-index: 100001; /* over the header (100) and side menu (100000) */
    visibility: hidden;
    transition: visibility 0s linear var(--sd-hover-slow);
}

.sn-sheet.is-open {
    visibility: visible;
    transition: none;
}

.sn-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.34);
    opacity: 0;
    transition: opacity var(--sd-hover-slow) var(--sd-ease);
}

.sn-sheet.is-open .sn-sheet__backdrop {
    opacity: 1;
}

.sn-sheet__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sd-13);
    max-height: 89vh;
    overflow-y: auto;
    padding: var(--sd-13) var(--sd-21) max(var(--sd-21), env(safe-area-inset-bottom));
    background: var(--color-one, #fff);
    border-radius: var(--sd-21) var(--sd-21) 0 0;
    box-shadow: var(--sd-shadow-raised);
    transform: translateY(100%);
    transition: transform var(--sd-hover-slow) var(--sd-ease);
}

.sn-sheet.is-open .sn-sheet__panel {
    transform: none;
}

.sn-sheet__panel::before {
    content: '';
    align-self: center;
    flex: 0 0 auto;
    width: var(--sd-34);
    height: var(--sd-5);
    border-radius: var(--sd-5);
    background: var(--sd-tint);
}

.sn-sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--color-two, #013A63);
    font-size: var(--sd-16);
    font-weight: 700;
}

.sn-sheet__close {
    display: grid;
    place-items: center;
    width: var(--sd-34);
    height: var(--sd-34);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sd-tint);
    color: var(--color-two, #013A63);
    font-size: var(--sd-13);
    cursor: pointer;
}

.sn-months {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--sd-144), 1fr));
    gap: var(--sd-21) var(--sd-13);
}

.sn-month__name {
    margin: 0 0 var(--sd-5);
    color: var(--color-two, #013A63);
    font-size: var(--sd-13);
    font-weight: 700;
    text-transform: capitalize;
}

.sn-month__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.sn-day {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-height: var(--sd-21);
    border-radius: var(--sd-5);
    color: inherit;
    font-size: var(--sd-13);
    text-decoration: none;
    transition: background-color var(--sd-hover) var(--sd-ease), color var(--sd-hover) var(--sd-ease);
}

.sn-day:hover,
.sn-day:focus-visible {
    background: var(--sd-tint);
    color: var(--color-four, #0285BA);
}

.sn-day.has-content::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-four, #0285BA);
    transform: translateX(-50%);
}

.sn-day.is-current {
    outline: 1px solid var(--color-four, #0285BA);
    outline-offset: -1px;
    font-weight: 700;
}

.sn-day.is-today {
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    font-weight: 700;
}

.sn-day.is-today::after {
    background: var(--color-one, #fff);
}

@media (min-width: 768px) {
    .sn-sheet__panel {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(var(--sd-987), calc(100vw - var(--sd-34)));
        max-height: calc(100vh - var(--sd-89));
        padding: var(--sd-21) var(--sd-34) var(--sd-34);
        border-radius: var(--sd-21);
        opacity: 0;
        transform: translate(-50%, calc(-50% + var(--sd-21)));
        transition: transform var(--sd-hover-slow) var(--sd-ease), opacity var(--sd-hover-slow) var(--sd-ease);
    }

    .sn-sheet.is-open .sn-sheet__panel {
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    .sn-sheet__panel::before {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Reduced motion: no fades, no slides.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .sn-page {
        animation: none;
        transition: none;
    }

    .sn-reveal.is-pending,
    .sn-nav__btn,
    .sn-day,
    .sn-sheet,
    .sn-sheet__backdrop,
    .sn-sheet__panel {
        transition: none;
    }
}