/*
Theme Name: Hostinger AI theme Child
Template: hostinger-ai-theme
Author: shiratoriasahi.com
Description: Child theme for custom development.
Version: 1.4.0
Text Domain: hostinger-ai-theme-child
*/

/* ============================================
   Fan Club 登入表單美化
   ============================================ */

.fanclub-login-form {
    max-width: 420px;
    margin: 0 auto;
    padding: 48px 40px;
    background: #ffffff;
    border: 1px solid #eee7d9;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.fanclub-login-title {
    margin: 0 0 28px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    text-align: center;
}

.fanclub-login-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a7b5c;
}

.fanclub-login-form .input {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    color: #1a1a1a;
    background: #fbfaf7;
    border: 1px solid #e3dccb;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fanclub-login-form .input:focus {
    outline: none;
    border-color: #b8a06a;
    box-shadow: 0 0 0 3px rgba(184, 160, 106, 0.15);
}

.fanclub-login-form .login-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 24px;
}

.fanclub-login-form .login-remember label {
    margin: 0;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: #6b6b6b;
}

.fanclub-login-form .login-submit .button {
    width: 100%;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.fanclub-login-form .login-submit .button:hover {
    background: #b8a06a;
}

.fanclub-login-lost-password,
.fanclub-login-register-link {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
}

.fanclub-login-lost-password a,
.fanclub-login-register-link a {
    color: #b8a06a;
    text-decoration: none;
}

.fanclub-login-lost-password a:hover,
.fanclub-login-register-link a:hover {
    text-decoration: underline;
}

/* ============================================
   Fan Club 註冊表單美化
   ============================================ */

.fanclub-register-form {
    max-width: 560px;
    margin: 0 auto;
    padding: 48px 40px;
    background: #ffffff;
    border: 1px solid #eee7d9;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.fanclub-register-title {
    margin: 0 0 28px;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    text-align: center;
}

.fanclub-register-form .pms-form-fields-wrapper {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fanclub-register-form .pms-field {
    list-style: none;
    margin: 0 0 20px;
}

.fanclub-register-form .pms-field label {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a7b5c;
}

.fanclub-register-form .pms-field input[type="text"],
.fanclub-register-form .pms-field input[type="email"],
.fanclub-register-form .pms-field input[type="password"] {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    color: #1a1a1a;
    background: #fbfaf7;
    border: 1px solid #e3dccb;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.fanclub-register-form .pms-field input:focus {
    outline: none;
    border-color: #b8a06a;
    box-shadow: 0 0 0 3px rgba(184, 160, 106, 0.15);
}

/* 方案選擇卡片 */
.fanclub-register-form .pms-field-subscriptions {
    list-style: none;
}

.fanclub-register-form .pms-subscription-plan {
    position: relative;
    padding: 20px 20px 20px 52px;
    margin-bottom: 12px;
    background: #fbfaf7;
    border: 1px solid #e3dccb;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.fanclub-register-form .pms-subscription-plan:has(input:checked) {
    border-color: #b8a06a;
    background: #fdfbf6;
    box-shadow: 0 0 0 1px #b8a06a;
}

.fanclub-register-form .pms-subscription-plan input[type="radio"] {
    position: absolute;
    left: 20px;
    top: 24px;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #b8a06a;
    cursor: pointer;
}

.fanclub-register-form .pms-subscription-plan-name {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.fanclub-register-form .pms-subscription-plan-price {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #b8a06a;
}

.fanclub-register-form .pms-subscription-plan-description {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b6b6b;
}

/* 提交按鈕 */
.fanclub-register-form .pms-form-submit {
    width: 100%;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: #1a1a1a;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.fanclub-register-form .pms-form-submit:hover {
    background: #b8a06a;
}

/* ============================================
   內容保護（權限不足）解鎖邀請卡
   ============================================ */

.fanclub-restricted-card {
    max-width: 560px;
    margin: 40px auto;
    padding: 48px 40px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #eee7d9;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.06);
}

.fanclub-restricted-icon {
    display: block;
    font-size: 40px;
    margin-bottom: 16px;
}

.fanclub-restricted-title {
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #1a1a1a;
}

.fanclub-restricted-text {
    margin: 0 0 28px;
    font-size: 15px;
    line-height: 1.7;
    color: #6b6b6b;
}

.fanclub-restricted-button {
    display: inline-block;
    padding: 15px 36px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #ffffff;
    background: #b8a06a;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.fanclub-restricted-button:hover {
    background: #a08a54;
    color: #ffffff;
}

/* ============================================
   會員中心（帳戶頁）美化
   ============================================ */

/* 導覽 tabs */
.pms-account-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    border-bottom: 1px solid #e3dccb;
}

.pms-account-navigation-link a {
    display: inline-block;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #6b6b6b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pms-account-navigation-link a:hover {
    color: #1a1a1a;
}

.pms-account-navigation-link a.pms-account-navigation-link--active {
    color: #b8a06a;
    border-bottom-color: #b8a06a;
}

/* 會員卡 */
.fanclub-member-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #fdfbf6 0%, #f5efe2 100%);
    border: 1px solid #e3dccb;
    border-radius: 14px;
}

.fanclub-member-card-top {
    display: flex;
    align-items: center;
    gap: 16px;
}

.fanclub-member-card-icon {
    font-size: 34px;
    line-height: 1;
}

.fanclub-member-card-name {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

.fanclub-member-card-sub {
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8a7b5c;
}

.fanclub-member-card-status {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    background: #b8a06a;
    border-radius: 999px;
}

/* 訂閱標題列（隱藏，改用卡片呈現） */
.pms-account-subscriptions-header {
    display: none;
}

/* 訂閱卡片 */
.pms-account-subscription {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #e3dccb;
    border-radius: 12px;
}

.pms-account-subscription .pms-subscription-plan-name {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    margin-right: auto;
}

.pms-account-subscription .pms-subscription-status {
    font-size: 13px;
    font-weight: 600;
    color: #b8a06a;
    padding: 6px 14px;
    background: #f5efe2;
    border-radius: 999px;
}

.pms-account-subscription .pms-subscription-plan-expiration {
    font-size: 14px;
    color: #6b6b6b;
}

.pms-account-subscription .pms-subscription-details a {
    font-size: 14px;
    color: #b8a06a;
    text-decoration: none;
}

.pms-account-subscription .pms-subscription-details a:hover {
    text-decoration: underline;
}

/* ============================================
   導覽列 CTA 按鈕
   ============================================ */

.fanclub-nav-cta .wp-block-navigation-item__content {
    padding: 8px 18px;
    color: #ffffff !important;
    background: #b8a06a;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.fanclub-nav-cta .wp-block-navigation-item__content:hover {
    background: #a08a54;
    color: #ffffff !important;
}

/* ============================================
   導覽列語言切換器
   ============================================ */

.fanclub-lang-switcher {
    margin-left: auto;
}

.fanclub-lang-switcher-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.fanclub-lang-link {
    color: #6b6b6b;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.fanclub-lang-link:hover,
.fanclub-lang-link.is-current {
    color: #b8a06a;
}

.fanclub-lang-sep {
    color: #d0c4a8;
}


/* ============================================
   News / Schedule 兩欄 Shortcode
   ============================================ */

.agency-news-schedule {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    background: #fdfbf6;
    padding: 48px 44px;
    border-radius: 16px;
}

.ans-column {
    min-width: 0;
}

.ans-heading {
    margin: 0 0 20px;
    font-family: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #1a1a1a;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3dccb;
}

.ans-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ans-item {
    padding: 15px 0;
    border-bottom: 1px dashed #e3dccb;
}

.ans-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ans-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    text-decoration: none;
}

.ans-date {
    flex: 0 0 auto;
    font-family: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
    font-size: 15px;
    letter-spacing: 0.06em;
    color: #8a7b5c;
}

.ans-tag {
    flex: 0 0 auto;
    padding: 3px 11px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #3a3a3a;
    background: #f5efe2;
    border-radius: 999px;
}

.ans-title {
    font-size: 15px;
    line-height: 1.6;
    color: #1a1a1a;
    transition: color 0.25s ease, text-shadow 0.25s ease;
}

.ans-link:hover .ans-title {
    color: #d4af37;
    text-shadow: 0 0 16px rgba(212, 175, 55, 0.45);
}

@media (max-width: 768px) {
    .agency-news-schedule {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 32px 22px;
    }
}



/* ============================================
   乃木坂46 風格 · 極簡不對稱排版
   ============================================ */

:root {
    --nogi-bg: #FAFAF7;
    --nogi-gold: #D4AF37;
    --nogi-gold-line: rgba(212, 175, 55, 0.3);
    --nogi-ink: #2A2A27;
    --nogi-body: #55554F;
    --nogi-muted: #8C8C84;
    --nogi-serif: "Cormorant Garamond", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", Georgia, "Times New Roman", serif;
    --nogi-sans: "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Arial, sans-serif;
}

.nogi-body {
    margin: 0;
    background: var(--nogi-bg);
    color: var(--nogi-body);
    font-family: var(--nogi-sans);
    font-size: 15px;
    line-height: 1.9;
    letter-spacing: 0.03em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.nogi-body *,
.nogi-body *::before,
.nogi-body *::after { box-sizing: border-box; }

.nogi-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---- Header ---- */
.nogi-header {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: rgba(250, 250, 247, 0.95);
    border-bottom: 1px solid var(--nogi-gold-line);
}

.header-left { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 15px; }
.header-center { flex: 0 0 auto; text-align: center; }
.header-right { flex: 1 1 0; display: flex; justify-content: flex-end; }

.nogi-brand {
    margin: 0;
    font-family: var(--nogi-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--nogi-ink);
}
.nogi-brand a { color: inherit; text-decoration: none; }

/* 語言切換器（pll_the_languages 輸出的 ul/li/a） */
.header-left ul,
.header-left li {
    list-style: none;
    margin: 0;
    padding: 0;
}
.header-left ul {
    display: flex;
    align-items: center;
    gap: 15px;
}
.header-left li {
    display: flex;
    align-items: center;
}
.header-left a {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nogi-muted);
    text-decoration: none;
    transition: color 0.3s ease;
}
.header-left a:hover,
.header-left .current-lang a { color: var(--nogi-gold); }

/* 漢堡選單（兩條極細線，純 CSS） */
.nogi-menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.nogi-burger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.nogi-burger span {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--nogi-ink);
    transition: background 0.3s ease;
}

/* 全螢幕選單 */
.nogi-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--nogi-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}
.nogi-menu-toggle:checked ~ .nogi-menu-overlay {
    opacity: 1;
    visibility: visible;
}
.nogi-menu-nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nogi-menu-nav li { margin: 0 0 28px; }
.nogi-menu-nav a {
    font-family: var(--nogi-serif);
    font-size: 26px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--nogi-ink);
    text-decoration: none;
    transition: color 0.3s ease;
}
.nogi-menu-nav a:hover { color: var(--nogi-gold); }

/* ---- 主視覺 70/30 ---- */
.nogi-hero-section { background: var(--nogi-bg); }
.nogi-hero-grid {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 8px;
    min-height: 62vh;
}
.hero-main { position: relative; overflow: hidden; background: #f0ece2; }
.hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.hero-side-item { position: relative; overflow: hidden; background: #f0ece2; }

.hero-main img,
.hero-side-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 圖片佔位（尚未上傳精選圖時） */
.nogi-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    font-family: var(--nogi-serif);
    font-size: 15px;
    letter-spacing: 0.16em;
    color: var(--nogi-muted);
    background: linear-gradient(135deg, #f3efe6 0%, #ece6d8 100%);
}

/* ---- 次選單 ---- */
.nogi-sub-nav {
    margin: 80px 0;
    border-top: 1px solid var(--nogi-gold-line);
    border-bottom: 1px solid var(--nogi-gold-line);
}
.nogi-sub-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nogi-sub-nav li { display: flex; align-items: center; }
.nogi-sub-nav li:not(:last-child)::after {
    content: "|";
    margin: 0 26px;
    color: var(--nogi-gold-line);
    font-weight: 300;
}
.nogi-sub-nav a {
    padding: 18px 0;
    font-size: 13px;
    letter-spacing: 0.15em;
    color: var(--nogi-ink);
    text-decoration: none;
    transition: color 0.3s ease;
}
.nogi-sub-nav a:hover { color: var(--nogi-gold); }

/* ---- 內容區塊 ---- */
.nogi-section {
    margin-bottom: 60px;
}

.nogi-section-title {
    margin: 0 0 32px;
    font-family: var(--nogi-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--nogi-ink);
}

/* 列表（News / Blog） */
.nogi-list { list-style: none; margin: 0; padding: 0; }
.nogi-list-item { border-bottom: 1px solid var(--nogi-gold-line); }
.nogi-list-item:first-child { border-top: 1px solid var(--nogi-gold-line); }

.nogi-list-link {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 0;
    text-decoration: none;
}

.nogi-date {
    flex: 0 0 auto;
    padding: 3px 9px;
    border: 1px solid var(--nogi-gold-line);
    font-family: var(--nogi-serif);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--nogi-muted);
    white-space: nowrap;
}

.nogi-tag {
    flex: 0 0 auto;
    padding: 3px 10px;
    border: 1px solid var(--nogi-gold-line);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--nogi-muted);
    white-space: nowrap;
}

.nogi-list-title {
    margin: 0;
    font-family: var(--nogi-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--nogi-ink);
    transition: color 0.3s ease;
}
.nogi-list-link:hover .nogi-list-title { color: var(--nogi-gold); }

/* 網格（Portfolio / Shop） */
.nogi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 48px 40px;
}

.nogi-card { border: 1px solid var(--nogi-gold-line); }

.nogi-card-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-bottom: 1px solid var(--nogi-gold-line);
    background: #f0ece2;
}
.nogi-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.nogi-card:hover .nogi-card-media img { transform: scale(1.05); }

.nogi-card-body { padding: 18px 20px 22px; }

.nogi-card-title {
    margin: 12px 0 0;
    font-family: var(--nogi-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
.nogi-card-title a {
    color: var(--nogi-ink);
    text-decoration: none;
    transition: color 0.3s ease;
}
.nogi-card-title a:hover { color: var(--nogi-gold); }

.nogi-price {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--nogi-gold);
}

/* ---- Footer ---- */
.nogi-footer {
    margin-top: 20px;
    padding: 40px 0 60px;
    border-top: 1px solid var(--nogi-gold-line);
    text-align: center;
}
.nogi-footer-copy {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--nogi-muted);
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .nogi-header { padding: 16px 20px; }
    .nogi-hero-grid { grid-template-columns: 1fr; min-height: 0; }
    .hero-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .hero-main { min-height: 280px; }
    .hero-side-item { min-height: 160px; }
    .nogi-sub-nav li:not(:last-child)::after { margin: 0 12px; }
    .nogi-sub-nav a { font-size: 11px; letter-spacing: 0.1em; }
    .nogi-list-link { flex-wrap: wrap; gap: 12px; }
    .nogi-container { padding: 0 20px; }
}