/*
 * ==========================================================
 * EATFREE COMMUNITY BOARD — PREMIUM UI
 * File: /comm/assets/css/board-premium.css
 * Build: 2026-09-07
 *
 * UI ONLY:
 * - No API changes
 * - No filtering/search changes
 * - No comments changes
 * - No modal/deep-link changes
 * - No Community Manager changes
 * ==========================================================
 */

@font-face {
    font-family: 'CaprasimoLocal';
    src: url('/assets/fonts/Caprasimo.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --board-brand-green: #61A439;
    --board-brand-orange: #FEAB03;
    --board-white: #FEFEFE;
    --board-charcoal: #555358;
    --board-shadow: #28282A;

    --board-deep: #082d1c;
    --board-deep-2: #0d3824;
    --board-deep-3: #123f29;

    --board-line: rgba(255, 255, 255, 0.14);
    --board-line-soft: rgba(255, 255, 255, 0.09);
    --board-text-soft: rgba(254, 254, 254, 0.68);
    --board-text-faint: rgba(254, 254, 254, 0.48);

    /* Override the old board variables without changing JS/markup contracts. */
    --ef-green: var(--board-brand-green);
    --ef-green-dark: var(--board-brand-green);
    --ef-green-mid: var(--board-brand-green);
    --ef-green-light: #7FBE5C;
    --ef-green-pale: rgba(97, 164, 57, 0.12);
    --ef-green-pale-2: rgba(97, 164, 57, 0.08);

    --ef-yellow: var(--board-brand-orange);
    --ef-yellow-soft: rgba(254, 171, 3, 0.14);

    --ef-white: var(--board-white);
    --ef-page: var(--board-deep);
    --ef-soft: var(--board-deep-2);

    --ef-ink: var(--board-white);
    --ef-text: rgba(254, 254, 254, 0.78);
    --ef-muted: var(--board-text-soft);

    --ef-border: var(--board-line-soft);
    --ef-border-dark: var(--board-line);

    --ef-shadow: 0 22px 60px rgba(0, 0, 0, 0.18);
    --ef-shadow-hover: 0 28px 72px rgba(0, 0, 0, 0.26);
}

/* ==========================================================
   PAGE
   ========================================================== */

body {
    background:
        radial-gradient(circle at 84% 10%, rgba(97, 164, 57, 0.18), transparent 28rem),
        radial-gradient(circle at 14% 18%, rgba(254, 171, 3, 0.055), transparent 24rem),
        linear-gradient(135deg, var(--board-deep) 0%, #0a321f 56%, #123e27 100%);
    color: var(--board-white);
    font-family: 'Montserrat', Arial, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 72%);
}

::selection {
    background: var(--board-brand-orange);
    color: var(--board-shadow);
}

/* ==========================================================
   HEADER — HOMEPAGE VISUAL LANGUAGE
   ========================================================== */

.ef-header {
    min-height: 72px;
    background: rgba(7, 42, 25, 0.93);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: none;
}

.ef-header__inner {
    min-height: 72px;
}

.ef-wordmark {
    gap: 12px;
    align-items: center;
    color: #fff;
    font-family: 'CaprasimoLocal', Georgia, serif;
    font-size: 1.18rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    text-decoration: none !important;
}

.ef-wordmark,
.ef-wordmark:link,
.ef-wordmark:visited,
.ef-wordmark:hover,
.ef-wordmark:focus,
.ef-wordmark span {
    text-decoration: none !important;
}

.ef-wordmark__mark {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.ef-nav {
    gap: 30px;
}

.ef-nav a {
    color: rgba(255,255,255,.82);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ef-nav a:hover {
    color: #fff;
}

.ef-header__actions {
    gap: 15px;
}

.ef-feed-more {
    min-height: 39px;
    padding: 0 16px;
    border: 1px solid var(--board-brand-orange);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.ef-feed-more:hover {
    background: var(--board-brand-orange);
    color: var(--board-shadow);
}

.ef-chef-link {
    color: rgba(255,255,255,.78);
}

.ef-mobile-menu {
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.07);
    color: #fff;
}

/* ==========================================================
   INTRO
   ========================================================== */

.ef-intro {
    position: relative;
    padding: 78px 0 34px;
    text-align: left;
}

.ef-intro::after {
    content: "";
    position: absolute;
    right: -8vw;
    top: 25px;
    width: 36vw;
    height: 36vw;
    max-width: 540px;
    max-height: 540px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(97,164,57,.14), transparent 67%);
    pointer-events: none;
}

.ef-board-kicker {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(255,255,255,.78);
    font-size: .68rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .26em;
    text-transform: uppercase;
}

.ef-intro__mark {
    display: none;
}

.ef-intro h1 {
    position: relative;
    z-index: 2;
    max-width: 900px;
    color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: clamp(3rem, 6vw, 5.7rem);
    font-weight: 500;
    line-height: .96;
    letter-spacing: -0.06em;
}

.ef-intro h1 em {
    color: var(--board-brand-orange);
    font-style: normal;
}

.ef-intro p {
    position: relative;
    z-index: 2;
    max-width: 650px;
    margin: 18px 0 0;
    color: var(--board-text-soft);
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.7;
}

/* ==========================================================
   SEARCH
   ========================================================== */

.ef-search-wrap {
    width: 100%;
    margin: 8px auto 34px;
}

.ef-search {
    display: block;
    max-width: 780px;
}

.ef-search svg {
    color: rgba(255,255,255,.72);
}

.ef-search input {
    min-height: 62px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: #fff;
    padding-left: 54px;
    font-size: 12px;
    box-shadow: none;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ef-search input::placeholder {
    color: rgba(255,255,255,.52);
}

.ef-search input:focus {
    border-color: rgba(254,171,3,.72);
    box-shadow: 0 0 0 4px rgba(254,171,3,.08);
}

/* ==========================================================
   TOPICS
   ========================================================== */

.ef-topics {
    margin-bottom: 34px;
}

.ef-topics__label {
    color: rgba(255,255,255,.72);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ef-topic-row {
    gap: 9px;
}

.ef-topic-chip,
.ef-view-topics {
    min-height: 38px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.78);
    box-shadow: none;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ef-topic-chip:hover,
.ef-view-topics:hover {
    background: rgba(97,164,57,.16);
    border-color: rgba(97,164,57,.46);
    color: #fff;
}

.ef-topic-chip.active {
    border-color: var(--board-brand-green);
    background: var(--board-brand-green);
    color: #fff;
}

.ef-topic-hash {
    color: var(--board-brand-orange);
    opacity: 1;
}

/* ==========================================================
   FEATURED STORY
   ========================================================== */

.ef-featured-holder {
    margin-bottom: 26px;
}

.ef-featured {
    min-height: 330px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 28px;
    background: rgba(255,255,255,.045);
    box-shadow: 0 24px 70px rgba(0,0,0,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.ef-featured:hover {
    border-color: rgba(254,171,3,.38);
    box-shadow: 0 30px 82px rgba(0,0,0,.24);
}

.ef-featured__visual,
.ef-featured__visual.has-image {
    min-height: 330px;
    background:
        radial-gradient(circle at 38% 28%, rgba(254,171,3,.16), transparent 20rem),
        linear-gradient(145deg, #103c27, #081f15);
}

.ef-featured__visual img {
    filter: saturate(.92) contrast(1.04);
}

.ef-featured__visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(8,45,28,.13));
    pointer-events: none;
}

.ef-landscape {
    opacity: .46;
}

.ef-landscape::before {
    background: rgba(97,164,57,.45);
}

.ef-landscape::after {
    background: rgba(97,164,57,.8);
}

.ef-featured__body {
    padding: 38px 40px;
}

.ef-featured-badge {
    margin-bottom: 20px;
    background: rgba(254,171,3,.13);
    color: var(--board-brand-orange);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.ef-featured h2 {
    color: #fff;
    font-family: 'CaprasimoLocal', Georgia, serif;
    font-size: clamp(2rem, 3.2vw, 3.4rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.ef-featured__excerpt {
    max-width: 620px;
    color: var(--board-text-soft);
    font-size: 12px;
}

.ef-featured__category {
    color: rgba(255,255,255,.62);
}

.ef-featured__category svg,
.ef-read-link {
    color: var(--board-brand-orange);
}

/* ==========================================================
   STORY GRID
   ========================================================== */

.ef-story-grid {
    gap: 16px;
    margin-top: 22px;
}

.ef-story-card {
    min-height: 330px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 22px;
    background: rgba(255,255,255,.035);
    box-shadow: none;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ef-story-card:hover {
    transform: translateY(-4px);
    border-color: rgba(254,171,3,.34);
    background: rgba(255,255,255,.055);
    box-shadow: 0 22px 55px rgba(0,0,0,.18);
}

.ef-story-card__top {
    padding: 24px 21px 0;
}

.ef-story-icon {
    width: 58px;
    height: 58px;
    margin: 0 0 26px;
    border-radius: 16px;
    background: rgba(97,164,57,.13);
    color: var(--board-brand-green);
}

.ef-story-category {
    margin-bottom: 10px;
    color: var(--board-brand-orange);
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ef-story-card h3 {
    color: #fff;
    font-size: 16px;
    line-height: 1.28;
    letter-spacing: -0.035em;
}

.ef-story-card p {
    color: rgba(255,255,255,.56);
    font-size: 10.5px;
}

.ef-card-read {
    color: var(--board-brand-orange);
}

.ef-load-more {
    min-height: 44px;
    border: 1px solid var(--board-brand-orange);
    background: transparent;
    color: #fff;
}

.ef-load-more:hover {
    border-color: var(--board-brand-orange);
    background: var(--board-brand-orange);
    color: var(--board-shadow);
}

.ef-empty {
    border-color: rgba(255,255,255,.14);
    background: rgba(255,255,255,.035);
    color: rgba(255,255,255,.6);
}

/* ==========================================================
   FOOTER
   ========================================================== */

.ef-footer {
    border-top-color: rgba(255,255,255,.1);
    color: rgba(255,255,255,.48);
}

.ef-footer a {
    color: rgba(255,255,255,.66);
}

.ef-footer a:hover {
    color: var(--board-brand-orange);
}

/* ==========================================================
   ARTICLE MODAL
   Preserve the reading UX; only update visual styling.
   ========================================================== */

.ef-modal {
    background: rgba(4, 24, 14, .78);
}

.ef-modal__dialog {
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 36px 100px rgba(0,0,0,.38);
}

.ef-modal__toolbar {
    background: linear-gradient(#fff 65%, rgba(255,255,255,0));
}

.ef-modal-close {
    border-color: rgba(40,40,42,.1);
    color: var(--board-shadow);
}

.ef-article__category {
    background: rgba(97,164,57,.11);
    color: var(--board-brand-green);
}

.ef-article h2,
.ef-article__content h1,
.ef-article__content h2,
.ef-article__content h3,
.ef-article__content h4 {
    color: #315b23;
    font-family: 'CaprasimoLocal', Georgia, serif;
    font-weight: 400;
}

.ef-article__content {
    color: #3b463e;
}

.ef-comments {
    background: #f7f8f5;
}

.ef-comments h3,
.ef-comment-form h4 {
    color: #315b23;
}

.ef-comment {
    border-color: rgba(40,40,42,.08);
}

.ef-comment__community {
    background: rgba(97,164,57,.11);
    color: #4c8d2d;
}

.ef-field:focus {
    border-color: rgba(97,164,57,.55);
    box-shadow: 0 0 0 3px rgba(97,164,57,.08);
}

.ef-comment-submit {
    background: var(--board-brand-green);
}

.ef-comment-submit:hover {
    background: #4f8c32;
}

/* ==========================================================
   MOBILE PANEL
   ========================================================== */

.ef-mobile-panel {
    top: 68px;
    border-color: rgba(255,255,255,.12);
    background: rgba(8,45,28,.97);
    box-shadow: 0 24px 64px rgba(0,0,0,.28);
}

.ef-mobile-panel a {
    color: rgba(255,255,255,.78);
}

.ef-mobile-panel a:hover {
    background: rgba(97,164,57,.14);
    color: #fff;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 1060px) {
    .ef-nav {
        gap: 18px;
    }
}

@media (max-width: 820px) {
    .ef-header {
        min-height: 66px;
    }

    .ef-header__inner {
        min-height: 66px;
    }

    .ef-intro {
        padding-top: 58px;
    }

    .ef-featured {
        grid-template-columns: 1fr;
    }

    .ef-featured__visual,
    .ef-featured__visual.has-image {
        min-height: 240px;
    }
}

@media (max-width: 620px) {
    .ef-wordmark {
        font-size: 1.05rem;
    }

    .ef-wordmark__mark {
        width: 30px;
        height: 30px;
    }

    .ef-intro {
        padding: 46px 0 26px;
    }

    .ef-intro h1 {
        font-size: clamp(2.55rem, 13vw, 4.15rem);
    }

    .ef-intro p {
        font-size: 11px;
    }

    .ef-search input {
        min-height: 54px;
    }

    .ef-featured {
        border-radius: 22px;
    }

    .ef-featured__body {
        padding: 24px 20px;
    }

    .ef-story-card__top {
        grid-template-columns: 52px minmax(0,1fr);
    }

    .ef-story-icon {
        margin: 0;
        border-radius: 14px;
    }

    .ef-modal__dialog {
        border-radius: 20px;
    }
}