/**
 * Base styles and resets.
 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--travel-font-main);
    font-size: var(--travel-fs-body);
    line-height: 1.6;
    color: var(--travel-text-main);
    background-color: var(--travel-bg);
}

:lang(zh-TW), :lang(zh-Hant) {
    font-family: var(--travel-font-zh);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--travel-space-md);
}

h1 { font-size: var(--travel-fs-h1); }
h2 { font-size: var(--travel-fs-h2); }
h3 { font-size: var(--travel-fs-h3); }
h4 { font-size: var(--travel-fs-h4); }
h5 { font-size: var(--travel-fs-h5); }

/* Global focus-visible (a11y) */
:focus-visible {
    outline: 2px solid var(--travel-accent);
    outline-offset: 2px;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: var(--travel-transition);
}

#content {
    scroll-margin-top: 80px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--travel-space-lg);
}

/* Header styles moved to components/header.css */

/* Footer */
/* Footer styles moved to components/footer.css */

/* ════════════════════════════════════════════════════════════
 * Global Form System
 * 所有 input / textarea / select / label / fieldset 的預設樣式。
 * 任何 form 自動繼承；個別頁面只需處理 layout（grid 排列等）。
 * ════════════════════════════════════════════════════════════ */

/* ── Inputs ───────────────────────────────────────────────── */
/* 全域預設樣式 — 任何 input/textarea/select 自動套；
   個別 component（hero-search、archive-toolbar 等）有更高 specificity 會覆蓋。
   排除：[type="hidden"]、[type="submit"]、[type="button"]、[type="image"]、[type="reset"]、[type="checkbox"]、[type="radio"]、[type="range"]、[type="color"] 由各自規則處理。 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
textarea,
select,
.form-control {
    display: block;
    width: 100%;
    padding: var(--travel-space-sm) var(--travel-space-md);
    border: 1px solid #d8dde2;
    border-radius: var(--travel-radius-btn);
    background: #fff;
    color: var(--travel-text-main);
    font: inherit;
    font-size: var(--travel-fs-body);
    line-height: 1.5;
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="url"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
textarea:hover,
select:hover,
.form-control:hover {
    border-color: #bfc6cd;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
textarea:focus,
select:focus,
.form-control:focus {
    outline: none;
    border-color: var(--travel-accent);
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}

input:disabled,
textarea:disabled,
select:disabled,
.form-control:disabled,
input[readonly],
textarea[readonly] {
    background: var(--travel-bg);
    color: var(--travel-text-muted);
    cursor: not-allowed;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--travel-text-muted);
    opacity: 0.7;
}

/* Textarea-specific */
textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit;
}

/* Select chevron */
select {
    padding-right: var(--travel-space-2xl);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%237f8c8d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--travel-space-md) center;
    background-size: 12px 8px;
    cursor: pointer;
}

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── Validation states ────────────────────────────────────── */
input.is-invalid,
textarea.is-invalid,
select.is-invalid,
.form-control.is-invalid,
input:user-invalid,
textarea:user-invalid {
    border-color: var(--travel-color-danger, #c0392b);
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

input.is-valid,
.form-control.is-valid {
    border-color: var(--travel-status-operating, #27ae60);
}

/* ── Labels & rows ────────────────────────────────────────── */
.form-label {
    display: block;
    margin-bottom: var(--travel-space-xs);
    font-weight: 700;
    font-size: var(--travel-fs-small);
    color: var(--travel-text-main);
}

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--travel-space-xs);
    margin-bottom: var(--travel-space-lg);
}
.form-row > label {
    font-weight: 700;
    font-size: var(--travel-fs-small);
    color: var(--travel-text-main);
}

/* Inline rows — label 在左、input 在右 */
.form-row--inline {
    flex-direction: row;
    align-items: center;
    gap: var(--travel-space-md);
}
.form-row--inline > label {
    margin-bottom: 0;
    flex-shrink: 0;
    min-width: 120px;
}

/* Row 內並排兩個 input（如 city+zip） */
.form-row--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--travel-space-md);
    margin-bottom: var(--travel-space-lg);
}

/* ── Hint / error / required ──────────────────────────────── */
.form-hint,
.hint {
    margin-top: 4px;
    font-size: var(--travel-fs-small);
    color: var(--travel-text-muted);
}

.form-error,
.error-message {
    margin-top: 4px;
    font-size: var(--travel-fs-small);
    color: var(--travel-color-danger, #c0392b);
    font-weight: 600;
}

.form-required,
.required {
    color: var(--travel-color-danger, #c0392b);
    margin-left: 2px;
}

/* ── Input group：input 前後接 prefix / suffix（例如 https://） ── */
.input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid #d8dde2;
    border-radius: var(--travel-radius-btn);
    overflow: hidden;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.input-group:focus-within {
    border-color: var(--travel-accent);
    box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}
.input-group__addon {
    display: flex;
    align-items: center;
    padding: 0 var(--travel-space-md);
    background: var(--travel-bg);
    color: var(--travel-text-muted);
    font-size: var(--travel-fs-small);
    white-space: nowrap;
    border-right: 1px solid #e6e8eb;
}
.input-group__addon:last-child {
    border-right: none;
    border-left: 1px solid #e6e8eb;
}
.input-group .form-control,
.input-group input,
.input-group select,
.input-group textarea {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-grow: 1;
    min-width: 0;
}

/* ── Checkbox / radio ─────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0 var(--travel-space-xs) 0 0;
    accent-color: var(--travel-accent);
    cursor: pointer;
    vertical-align: middle;
}

.form-check {
    display: inline-flex;
    align-items: center;
    gap: var(--travel-space-xs);
    cursor: pointer;
    font-size: var(--travel-fs-small);
    user-select: none;
}
.form-check + .form-check { margin-left: var(--travel-space-md); }

/* ── Fieldset ─────────────────────────────────────────────── */
fieldset.travel-fieldset,
.form-fieldset {
    border: 1px solid #e6e8eb;
    border-radius: var(--travel-radius-card);
    padding: var(--travel-space-lg);
    margin-bottom: var(--travel-space-lg);
}
fieldset.travel-fieldset > legend,
.form-fieldset > legend {
    padding: 0 var(--travel-space-sm);
    font-weight: 700;
    font-size: var(--travel-fs-small);
    color: var(--travel-text-main);
}

/* ── File input ───────────────────────────────────────────── */
input[type="file"] {
    font: inherit;
    font-size: var(--travel-fs-small);
}
input[type="file"]::file-selector-button {
    padding: var(--travel-space-xs) var(--travel-space-md);
    margin-right: var(--travel-space-md);
    border: 1px solid #d8dde2;
    border-radius: var(--travel-radius-btn);
    background: #fff;
    color: var(--travel-text-main);
    font: inherit;
    font-size: var(--travel-fs-small);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
input[type="file"]::file-selector-button:hover {
    border-color: var(--travel-accent);
    color: var(--travel-accent);
}

/* ── Form actions（送出列） ───────────────────────────────── */
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--travel-space-sm);
    padding-top: var(--travel-space-lg);
    border-top: 1px solid #eee;
    margin-top: var(--travel-space-lg);
    flex-wrap: wrap;
}

@media (prefers-reduced-motion: reduce) {
    input,
    textarea,
    select,
    .form-control,
    .input-group { transition: none; }
}

/* Sections */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--travel-space-xl);
}

.section-title {
    margin: 0;
}

.view-all {
    color: var(--travel-accent);
    font-weight: 700;
    font-size: var(--travel-fs-small);
}

/* ════════════════════════════════════════════════════════════
 * Global Button System
 * 尺寸 × 風格 × 狀態 × 修飾。
 * 新命名走 BEM（.btn--primary），舊命名（.btn-primary）保留 alias。
 * 「裸 <button>」跟 <input type="submit"> 也自動套 .btn 預設樣式。
 * ════════════════════════════════════════════════════════════ */

/* ── 全站 button baseline ──────────────────────────────────
 * 所有 <button> / <input type="submit|button|reset"> 都有預設樣式。
 * specificity 維持 0,0,1（純元素選擇器），任何 .class（包括 .btn 系統、
 * .hero-search button、.carousel-nav、.empty-clear 等）都會自然覆蓋。
 * 不必加 .btn class 或包 <form> — 完全裸 button 也會變成像樣的按鈕。 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--travel-space-xs);
    padding: var(--travel-space-sm) var(--travel-space-lg);
    border-radius: var(--travel-radius-btn);
    border: 1px solid #d8dde2;
    background: #fff;
    color: var(--travel-text-main);
    font: inherit;
    font-size: var(--travel-fs-small);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
    border-color: var(--travel-accent);
    color: var(--travel-accent);
}
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="button"]:focus-visible {
    outline: 2px solid var(--travel-accent);
    outline-offset: 2px;
}
button:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
input[type="button"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
/* 「送出」按鈕走主色（type=submit 大多是表單主動作） */
button[type="submit"],
input[type="submit"] {
    background: var(--travel-accent);
    color: #fff;
    border-color: var(--travel-accent);
}
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: #d35400;
    border-color: #d35400;
    color: #fff;
}

/* ── Base ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--travel-space-xs);
    padding: var(--travel-space-sm) var(--travel-space-lg);
    border-radius: var(--travel-radius-btn);
    border: 1px solid transparent;
    background: var(--travel-bg);
    color: var(--travel-text-main);
    font: inherit;
    font-size: var(--travel-fs-small);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        transform 0.2s;
    -webkit-appearance: none;
    appearance: none;
}
.btn:hover { border-color: var(--travel-accent); color: var(--travel-accent); }
.btn:focus-visible { outline: 2px solid var(--travel-accent); outline-offset: 2px; }
.btn:disabled,
.btn[aria-disabled="true"],
.btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading state */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    color: var(--travel-text-main);
    animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Sizes ────────────────────────────────────────────────── */
.btn--sm,
.btn-sm,
.btn--small,
.btn-small {
    padding: var(--travel-space-xs) var(--travel-space-md);
    font-size: 12px;
}
.btn--lg,
.btn-lg {
    padding: var(--travel-space-md) var(--travel-space-2xl);
    font-size: var(--travel-fs-body);
}

/* ── Style variants ───────────────────────────────────────── */
.btn--primary,
.btn-primary {
    background: var(--travel-accent);
    color: #fff;
    border-color: var(--travel-accent);
}
.btn--primary:hover,
.btn-primary:hover { background: #d35400; border-color: #d35400; color: #fff; }
.btn--primary.is-loading::after,
.btn-primary.is-loading::after { color: #fff; }

.btn--secondary,
.btn-secondary {
    background: var(--travel-primary);
    color: #fff;
    border-color: var(--travel-primary);
}
.btn--secondary:hover,
.btn-secondary:hover { background: var(--travel-accent); border-color: var(--travel-accent); color: #fff; }

.btn--ghost,
.btn--outline,
.btn-outline {
    background: transparent;
    border-color: currentColor;
}
.btn--ghost:hover,
.btn--outline:hover,
.btn-outline:hover {
    background: rgba(230, 126, 34, 0.08);
    border-color: var(--travel-accent);
    color: var(--travel-accent);
}

.btn--danger {
    background: var(--travel-color-danger, #c0392b);
    color: #fff;
    border-color: var(--travel-color-danger, #c0392b);
}
.btn--danger:hover { background: #962c20; border-color: #962c20; color: #fff; }

.btn--success {
    background: var(--travel-status-operating, #27ae60);
    color: #fff;
    border-color: var(--travel-status-operating, #27ae60);
}
.btn--success:hover { background: #1e8449; border-color: #1e8449; color: #fff; }

/* Subtle text-link button */
.btn--link {
    background: transparent;
    border-color: transparent;
    color: var(--travel-accent);
    padding-left: 0;
    padding-right: 0;
}
.btn--link:hover { background: transparent; text-decoration: underline; color: #d35400; }

/* ── Modifiers ────────────────────────────────────────────── */
.btn--block,
.btn-block { width: 100%; }

.btn--pill,
.btn-pill { border-radius: 999px; }

.btn--icon-only {
    width: 40px;
    height: 40px;
    padding: 0;
    gap: 0;
}
.btn--icon-only.btn--sm { width: 32px; height: 32px; }
.btn--icon-only.btn--lg { width: 48px; height: 48px; }

/* Icon sizing inside buttons */
.btn .dashicons,
.btn .icon,
.btn svg {
    width: 1em;
    height: 1em;
    font-size: inherit;
    flex-shrink: 0;
}
.btn--icon-only .dashicons,
.btn--icon-only .icon,
.btn--icon-only svg { font-size: 18px; }

/* Active / pressed */
.btn.is-active,
.btn[aria-pressed="true"] {
    background: var(--travel-accent);
    color: #fff;
    border-color: var(--travel-accent);
}

/* Group — 一排相連按鈕 */
.btn-group {
    display: inline-flex;
    align-items: stretch;
}
.btn-group > .btn { border-radius: 0; }
.btn-group > .btn:first-child { border-top-left-radius: var(--travel-radius-btn); border-bottom-left-radius: var(--travel-radius-btn); }
.btn-group > .btn:last-child  { border-top-right-radius: var(--travel-radius-btn); border-bottom-right-radius: var(--travel-radius-btn); }
.btn-group > .btn + .btn { border-left-width: 0; }

@media (prefers-reduced-motion: reduce) {
    .btn { transition: none; }
    .btn.is-loading::after { animation: none; }
}

/* ── Breadcrumb ───────────────────────────────────────────── */
.breadcrumb { font-size: var(--travel-fs-small); color: var(--travel-text-muted); padding: var(--travel-space-sm) 0; }
.breadcrumb-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--travel-space-xs);
    align-items: center;
    margin: 0;
    padding: 0;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--travel-space-xs);
}
.breadcrumb-item:not(:last-child)::after {
    content: '/';
    color: var(--travel-text-secondary);
    margin: 0 var(--travel-space-xs);
    opacity: 0.6;
}
.breadcrumb-item a { color: var(--travel-text-muted); transition: var(--travel-transition); }
.breadcrumb-item a:hover { color: var(--travel-accent); }
.breadcrumb-item.is-current span { color: var(--travel-text-main); font-weight: 700; }

/* Responsive Grid */
.place-grid,
.card-grid,
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--travel-space-lg);
}

@media (max-width: 1023px) {
    .header-container {
        flex-direction: column;
        gap: var(--travel-space-md);
    }
    
    .footer-widgets {
        grid-template-columns: 1fr;
        gap: var(--travel-space-xl);
    }
    
    .footer-nav-container ul {
        grid-template-columns: repeat(2, 1fr);
    }
}