/* =============================================================================
   decorations.css

   Final layer in the cascade. Loads after all the per-feature stylesheets and
   contributes ONLY non-color polish:

     * a hairline paper-grain texture on cards so surfaces don't read as flat
       AI-generated tiles,
     * a hand-drawn wavy underline used for hero / featured headings,
     * a dice + meeple corner motif on featured cards (board-game cue),
     * one asymmetric corner on cards / modals / auth so the radius doesn't
       feel mechanically uniform,
     * the "first news card = featured" layout (full row, larger title,
       decorative SVG corner so it doesn't look empty),
     * dashed border on planner meeting badges to read informally next to the
       solid play badges.

   The unified color palette (warm clay/amber + cream + ink) lives directly in
   the per-feature stylesheets (app.css, components.css, game-viewer.css,
   news-feed.css, planner.css, auth.css, cookie-consent.css) so this file
   contains zero `!important` and no overrides.
   ========================================================================== */

:root {
    --deco-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --deco-wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'><path d='M0 3 Q 15 0 30 3 T 60 3 T 90 3 T 120 3' fill='none' stroke='%23e07a5f' stroke-width='2' stroke-linecap='round'/></svg>");
    --deco-game: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none'><g stroke-width='2' stroke-linecap='round'><rect x='110' y='40' width='60' height='60' rx='10' transform='rotate(12 140 70)' stroke='%23e07a5f'/><circle cx='130' cy='62' r='3' fill='%23e07a5f'/><circle cx='150' cy='78' r='3' fill='%23e07a5f'/><path d='M30 150 Q 50 110 70 150 L 70 170 Q 50 175 30 170 Z' fill='%236aa84f' stroke='%236aa84f'/><circle cx='50' cy='118' r='14' fill='%236aa84f' stroke='%236aa84f'/><rect x='90' y='130' width='40' height='40' rx='6' transform='rotate(-8 110 150)' stroke='%23e6b450'/><circle cx='100' cy='140' r='2.5' fill='%23e6b450' transform='rotate(-8 110 150)'/><circle cx='110' cy='150' r='2.5' fill='%23e6b450' transform='rotate(-8 110 150)'/><circle cx='120' cy='160' r='2.5' fill='%23e6b450' transform='rotate(-8 110 150)'/></g></svg>");
}

/* ---------- Paper grain on card surfaces ------------------------------------ */

.home-feature-tile,
.home-app-card,
.home-dash-card,
.dash-card,
.news-card,
.planner-card,
.planner-overview-card,
.planner-day-details-card,
.auth-card,
.game-card {
    background-image: var(--deco-grain);
    background-blend-mode: overlay;
    background-repeat: repeat;
}

/* ---------- One asymmetric corner on cards ---------------------------------- */

.home-feature-tile,
.home-app-card,
.home-dash-card,
.dash-card,
.news-card,
.planner-card,
.planner-overview-card,
.planner-day-details-card,
.auth-card,
.game-card,
.planner-modal,
.planner-modal-v2,
.modal-content {
    border-radius: 16px 16px 16px 4px;
}

/* ---------- Hero / featured headings: hand-drawn wavy underline ------------ */

.home-intro-card h1,
.auth-card .auth-header h2 {
    display: inline-block;
    background-image: var(--deco-wave);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 6px;
    padding-bottom: 8px;
}

.auth-card .auth-header h2 {
    background-position: 50% 100%;
    background-size: 60% 6px;
}

/* ---------- Auth card: short top rail + dice/meeple watermark --------------- */

.auth-card {
    position: relative;
    overflow: hidden;
}

.auth-card::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 0;
    width: 44px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #e07a5f, #f2a65a);
}

.auth-card::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: -14px;
    width: 160px;
    height: 160px;
    pointer-events: none;
    opacity: 0.22;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160' fill='none'><g stroke-width='2' stroke-linecap='round'><rect x='80' y='28' width='52' height='52' rx='8' transform='rotate(14 106 54)' stroke='%23e07a5f'/><circle cx='98' cy='48' r='2.5' fill='%23e07a5f'/><circle cx='116' cy='62' r='2.5' fill='%23e07a5f'/><path d='M22 130 Q 38 96 54 130 L 54 146 Q 38 150 22 146 Z' fill='%236aa84f' stroke='%236aa84f'/><circle cx='38' cy='102' r='12' fill='%236aa84f' stroke='%236aa84f'/></g></svg>");
    background-repeat: no-repeat;
}

/* ---------- News feed: first card = featured (full row, larger title, motif) - */

.news-grid > .news-card:first-child {
    grid-column: 1 / -1;
    min-height: 280px;
    padding: 1.6rem 1.8rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.news-grid > .news-card:first-child .news-card-title {
    font-size: 1.55rem;
    line-height: 1.25;
    max-width: 70%;
}

.news-grid > .news-card:first-child::after {
    content: "";
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 220px;
    height: 220px;
    pointer-events: none;
    opacity: 0.18;
    background-image: var(--deco-game);
    background-repeat: no-repeat;
}

.page.theme-light .news-grid > .news-card:first-child::after {
    opacity: 0.24;
}

/* ---------- Planner: dashed meeting badge vs solid play badge --------------- */

.planner-badge-meeting {
    border-style: dashed;
}

/* ---------- Tags / badges: subtle stamp-offset shadow ----------------------- */

.home-intro-badge,
.news-card-tag,
.tag-chip,
.news-card-new-badge,
.news-card-read-badge,
.game-card-chip {
    box-shadow: 2px 2px 0 0 rgba(176, 74, 44, 0.22);
    border-radius: 4px;
}

/* ---------- Reduced motion: drop translate hovers we add via card classes --- */

@media (prefers-reduced-motion: reduce) {
    .home-feature-tile,
    .news-card,
    .game-card,
    .home-intro-badge,
    .news-card-tag,
    .tag-chip {
        transition: none;
    }
}

/* ---------- Brand logo in the sidebar ---------------------------------------
   The expanded state uses the dedicated SVG wordmark, while collapsed keeps
   the square mark for compact navigation. */

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.25rem 0;
    text-decoration: none;
    min-width: 0;
    flex: 0 1 auto;
    max-width: calc(100% - 2.75rem);
    overflow: hidden;
}

.navbar-brand-logo {
    display: block;
    user-select: none;
    flex-shrink: 0;
}

.navbar-brand-logo-mark {
    width: 32px;
    height: 32px;
}

.navbar-brand-logo-wordmark {
    display: block;
    height: 40px;
    width: auto;
    max-width: 100%;
}

/* Toggle sidebar logos via a single .nav-collapsed class without rebuilding the
   DOM — the rules live here (decorations.css is loaded last) so they override
   the generic .navbar-brand-logo { display: block; } above and beat any older
   rules in components.css. */
.nav-wrapper:not(.nav-collapsed) .navbar-brand-logo-mark { display: none; }
.nav-wrapper:not(.nav-collapsed) .navbar-brand-logo-wordmark { display: block; }
.nav-wrapper.nav-collapsed .navbar-brand-logo-mark { display: block; }
.nav-wrapper.nav-collapsed .navbar-brand-logo-wordmark { display: none; }

/* Same trick for nav-link labels: keep them in DOM, hide via CSS when collapsed. */
.nav-wrapper:not(.nav-collapsed) .nav-link-label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    flex: 1;
    overflow: hidden;
}
.nav-wrapper.nav-collapsed .nav-link-label { display: none !important; }

/* In dark mode swap to the light-on-dark variant of the wordmark so the
   text stays legible without an extra cream frame. */
.page.theme-dark .nav-wrapper:not(.nav-collapsed) .navbar-brand-logo-wordmark {
    content: url('/img/logo-wordmark-dark.svg');
}