/* 前台共用 CSS
   色票取自「女力主題館」主視覺（業主 2026.09.14 選定 blush 版）：
   墨黑主色、蜜桃粉底、珊瑚橘強調、金色細線、明體標題 */

:root {
    --forest: #211c1a;
    --forest-deep: #14110f;
    --forest-soft: #3b312d;
    --ivory: #fbf6f0;
    --sand: #f7ece2;
    --cream: #f7e3ce;
    --gold: #b08536;
    --bronze: #b5553a;
    --olive: #8f6420;
    --muted: #7a6b65;
    --danger: #b6403d;
    --coral: #d9724f;
    --line: #e8d8cd;
    --ink-soft: #4f4441;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--ivory);
    text-rendering: optimizeLegibility;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

/* 品牌記號：KV 上的高爾夫球 */
.brand-ball {
    display: inline-block;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #fff 0%, #efe7e2 58%, #d5c8c1 100%);
    box-shadow: inset -2px -3px 6px rgba(0, 0, 0, .13), 0 1px 2px rgba(33, 28, 26, .12);
}

/* ===== 元件樣式 ===== */

.section-kicker {
    color: var(--gold);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.3em;
}

.nav-link {
    position: relative;
    padding-block: 0.5rem;
    transition: color 180ms ease;
}

.nav-link::after {
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 2px;
    width: 0;
    content: '';
    background: var(--coral);
    transition: all 180ms ease;
}

.nav-link:hover {
    color: var(--forest);
}

.nav-link:hover::after {
    left: 0;
    width: 100%;
}

.event-card {
    transition: transform 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}

.event-card:hover {
    transform: translateY(-4px);
    border-color: rgb(176 133 54 / 45%);
    box-shadow: 0 26px 50px -32px rgb(120 80 66 / 42%);
}

/* 標籤篩選按鈕 */
.tag-btn {
    font-size: 0.875rem;
    line-height: 1;
    padding: 9px 17px;
    border-radius: 9999px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    transition: background-color .15s, color .15s, border-color .15s;
}

.tag-btn:hover {
    border-color: var(--coral);
}

.tag-btn.is-active {
    background: var(--forest);
    border-color: var(--forest);
    color: var(--cream);
}

/* 鍵盤操作可見焦點（WCAG 2.1 AA） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 2px;
}

/* 活動內文（TinyMCE 產出的 HTML） */
.rich-text {
    color: var(--ink-soft);
    line-height: 1.9;
    font-size: 15px;
}

.rich-text h2,
.rich-text h3 {
    font-family: 'Noto Serif TC', Georgia, serif;
    font-weight: 700;
    color: var(--forest);
    margin: 1.6em 0 .6em;
}

.rich-text h2 { font-size: 20px; }
.rich-text h3 { font-size: 17px; }
.rich-text p { margin: 0 0 1em; }
.rich-text ul,
.rich-text ol { margin: 0 0 1em 1.4em; }
.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li { margin-bottom: .4em; }
.rich-text a { color: var(--bronze); text-decoration: underline; }
.rich-text img { max-width: 100%; height: auto; border-radius: 4px; }

.rich-text table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.rich-text th,
.rich-text td {
    border: 1px solid var(--line);
    padding: 8px 12px;
    text-align: left;
}

.rich-text th {
    background: var(--sand);
    font-weight: 600;
}

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

/* ============================================================
   導覽下拉
   用 hover 與 focus-within，不依賴 JS；鍵盤 Tab 也打得開。
   ============================================================ */
.nav-drop {
    position: absolute;
    left: -14px;
    top: 100%;
    min-width: 232px;
    z-index: 50;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 24px 48px -26px rgba(120, 80, 66, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.group:hover > .nav-drop,
.group:focus-within > .nav-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav-drop a {
    display: block;
    padding: 9px 12px;
    border-radius: 2px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-soft);
    text-decoration: none;
}
.nav-drop a:hover { background: var(--sand); color: var(--forest); }
.nav-drop a i {
    display: block;
    font-style: normal;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}
.nav-drop-head {
    display: block;
    padding: 10px 12px 4px;
    font-size: 11px;
    letter-spacing: .18em;
    color: var(--gold);
}
/* 揚昇場館項目多，攤成多欄才不會拉成長條 */
.nav-drop-wide {
    left: auto;
    right: -14px;
    min-width: 680px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px 8px;
}
@media (max-width: 1280px) {
    .nav-drop-wide { min-width: 520px; grid-template-columns: repeat(3, 1fr); }
}