/* ============================================================
   TOKYO — קונספט חלופי: "נגרות שקטה" (Wa / 和)
   השראה: נגרות יפנית מסורתית — חיבורי עץ מדויקים בלי מסמר אחד.
   פלטה: דיו, נייר וואשי, אינדיגו, אדום חותמת (הַנְקוֹ).
   מסך שקוף עצמאי — סקופ מלא תחת body.tkwa-theme בלבד.
   ============================================================ */

body.tkwa-theme {
    --wa-bg: #14110d;
    --wa-bg-2: #1c1812;
    --wa-bg-3: #221d16;
    --wa-text: #efe6d3;
    --wa-text-dim: #a89f8c;
    --wa-hair: rgba(239, 230, 211, 0.14);
    --wa-hair-strong: rgba(239, 230, 211, 0.26);
    --wa-vermillion: #d1502f;
    --wa-vermillion-soft: rgba(209, 80, 47, 0.14);
    --wa-indigo: #6e8bb5;
    --wa-radius: 1px;
}

[data-theme="light"] body.tkwa-theme,
body.tkwa-theme[data-theme="light"] {
    --wa-bg: #f5efe0;
    --wa-bg-2: #faf6ec;
    --wa-bg-3: #efe7d3;
    --wa-text: #1c1812;
    --wa-text-dim: #6b6250;
    --wa-hair: rgba(28, 24, 18, 0.13);
    --wa-hair-strong: rgba(28, 24, 18, 0.24);
    --wa-vermillion: #b23a22;
    --wa-vermillion-soft: rgba(178, 58, 34, 0.1);
    --wa-indigo: #3c5578;
}

body.tkwa-theme.tk-page {
    background: var(--wa-bg);
    color: var(--wa-text);
    font-family: 'Assistant', 'Cairo', sans-serif;
}
body.tkwa-theme h1,
body.tkwa-theme h2,
body.tkwa-theme h3,
body.tkwa-theme h4 {
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    margin: 0;
}

.tkwa-accent-font {
    font-family: 'Shippori Mincho', serif;
    direction: ltr;
    unicode-bidi: isolate;
}

/* טקסטורת נייר עדינה מאוד (גרעיניות) */
body.tkwa-theme {
    background-image:
        radial-gradient(circle at 20% 15%, var(--wa-hair) 0%, transparent 45%),
        radial-gradient(circle at 82% 70%, var(--wa-hair) 0%, transparent 40%);
    background-attachment: fixed;
}

/* -------------------- עיצוב מחדש של הרכיבים המשותפים -------------------- */
body.tkwa-theme .tk-header {
    background: color-mix(in srgb, var(--wa-bg) 90%, transparent);
    border-bottom: 1px solid var(--wa-hair);
}
body.tkwa-theme .tk-logo {
    font-family: 'Shippori Mincho', serif;
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--wa-text);
}
body.tkwa-theme .tk-logo span { color: var(--wa-vermillion); }
body.tkwa-theme .tk-login-btn {
    border-radius: 999px;
    border: 1px solid var(--wa-hair-strong);
    color: var(--wa-text);
    font-family: 'Assistant', sans-serif;
    font-weight: 600;
}
body.tkwa-theme .tk-login-btn:hover {
    background: var(--wa-vermillion);
    border-color: var(--wa-vermillion);
    color: #fff;
}
body.tkwa-theme .tk-theme-toggle { border-color: var(--wa-hair-strong); }
body.tkwa-theme .tk-theme-toggle:hover { border-color: var(--wa-vermillion); }
body.tkwa-theme .tk-cursor { border-color: var(--wa-vermillion); mix-blend-mode: normal; }
body.tkwa-theme .tk-cursor.tk-cursor-hover { background: var(--wa-vermillion); }
body.tkwa-theme .tk-cursor-dot { background: var(--wa-indigo); }

body.tkwa-theme .tk-modal-box {
    background: var(--wa-bg-2);
    border: 1px solid var(--wa-hair);
    border-radius: var(--wa-radius);
}
body.tkwa-theme .tk-modal-box h3 { font-family: 'Shippori Mincho', serif; color: var(--wa-text); }
body.tkwa-theme .tk-modal-box label { color: var(--wa-text-dim); }
body.tkwa-theme .tk-modal-box input[type=text],
body.tkwa-theme .tk-modal-box input[type=password] {
    background: transparent;
    border: 1px solid var(--wa-hair-strong);
    border-radius: var(--wa-radius);
    color: var(--wa-text);
}
body.tkwa-theme .tk-modal-box input:focus { outline: 2px solid var(--wa-vermillion); border-color: var(--wa-vermillion); }
body.tkwa-theme .tk-modal-submit {
    background: var(--wa-vermillion);
    color: #fff;
    border-radius: 999px;
    font-family: 'Assistant', sans-serif;
    font-weight: 700;
}
body.tkwa-theme .tk-modal-submit:hover { background: #e4623d; }
body.tkwa-theme html, body.tkwa-theme { scrollbar-color: var(--wa-hair-strong) var(--wa-bg); }
body.tkwa-theme::-webkit-scrollbar-track { background: var(--wa-bg); }
body.tkwa-theme::-webkit-scrollbar-thumb { background: var(--wa-hair-strong); border-color: var(--wa-bg); }

/* ==================== HERO ==================== */
.tkwa-hero {
    max-width: 1280px;
    margin: 0 auto;
    padding: 9vh 6vw 10vh;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 6vw;
    align-items: center;
}
@media (max-width: 940px) {
    .tkwa-hero { grid-template-columns: 1fr; padding: 6vh 6vw 6vh; gap: 8vw; }
    .tkwa-hero-art { order: -1; }
}

.tkwa-hanko {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    opacity: 0;
    animation: tkwaFadeUp .8s ease forwards;
}
.tkwa-hanko svg { width: 34px; height: 34px; flex-shrink: 0; }
.tkwa-hanko span {
    font-size: .78rem;
    letter-spacing: .18em;
    color: var(--wa-text-dim);
    text-transform: uppercase;
}

.tkwa-hero h1 {
    font-family: 'Noto Serif Hebrew', serif;
    font-weight: 700;
    font-size: clamp(2.4rem, 5vw, 3.7rem);
    line-height: 1.32;
    margin: 0 0 26px;
    color: var(--wa-text);
    opacity: 0;
    animation: tkwaFadeUp .9s ease forwards;
    animation-delay: .12s;
}
.tkwa-hero h1 em {
    font-style: normal;
    color: var(--wa-vermillion);
}

.tkwa-hero-sub {
    font-size: 1.1rem;
    line-height: 1.85;
    color: var(--wa-text-dim);
    max-width: 46ch;
    margin: 0 0 38px;
    opacity: 0;
    animation: tkwaFadeUp .9s ease forwards;
    animation-delay: .26s;
}

.tkwa-hero-cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0;
    animation: tkwaFadeUp .9s ease forwards;
    animation-delay: .38s;
}
.tkwa-btn {
    font-family: 'Assistant', sans-serif;
    font-weight: 600;
    font-size: .96rem;
    padding: 15px 32px;
    border-radius: 999px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform .3s ease, background .3s ease, color .3s ease, border-color .3s ease;
}
.tkwa-btn-solid { background: var(--wa-vermillion); color: #fff; }
.tkwa-btn-solid:hover { transform: translateY(-3px); background: #e4623d; }
.tkwa-btn-outline { border: 1px solid var(--wa-hair-strong); color: var(--wa-text); }
.tkwa-btn-outline:hover { transform: translateY(-3px); border-color: var(--wa-text); }

@keyframes tkwaFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* -------- איור החתימה: חיבור נגרות נפתח-ונסגר לנצח -------- */
.tkwa-hero-art { position: relative; }
.tkwa-hero-art svg { width: 100%; height: auto; overflow: visible; }

.tkwa-joint-h {
    animation: tkwaJointH 5.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
.tkwa-joint-v {
    animation: tkwaJointV 5.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes tkwaJointH {
    0%, 100% { transform: translateX(0); }
    45%, 55% { transform: translateX(-38px); }
}
@keyframes tkwaJointV {
    0%, 100% { transform: translateY(0); }
    45%, 55% { transform: translateY(-38px); }
}
.tkwa-joint-mark {
    animation: tkwaMarkPulse 5.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}
@keyframes tkwaMarkPulse {
    0%, 40% { opacity: 0; transform: scale(.4); }
    50%, 92% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.4); }
}
.tkwa-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tkwaDraw 1.8s ease forwards;
}
@keyframes tkwaDraw { to { stroke-dashoffset: 0; } }
.tkwa-fade-in { opacity: 0; animation: tkwaFadeUp .7s ease forwards; }

@media (prefers-reduced-motion: reduce) {
    .tkwa-hanko, .tkwa-hero h1, .tkwa-hero-sub, .tkwa-hero-cta, .tkwa-fade-in { opacity: 1; animation: none; }
    .tkwa-draw { stroke-dashoffset: 0; animation: none; }
    .tkwa-joint-h, .tkwa-joint-v, .tkwa-joint-mark { animation: none; }
}

/* ==================== מפריד פרק (Ma — רווח מכוון) ==================== */
.tkwa-divider {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 6vw;
}
.tkwa-divider hr {
    border: none;
    border-top: 1px solid var(--wa-hair);
    margin: 0;
}

/* ==================== SECTIONS ==================== */
.tkwa-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 10vh 6vw;
}
.tkwa-section-head {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 24px;
    margin-bottom: 56px;
}
.tkwa-chapter {
    font-family: 'Shippori Mincho', serif;
    font-size: 2.6rem;
    color: var(--wa-vermillion);
    line-height: 1;
    direction: ltr;
}
.tkwa-chapter small {
    display: block;
    font-size: .68rem;
    letter-spacing: .2em;
    color: var(--wa-text-dim);
    margin-top: 10px;
    font-family: 'Assistant', sans-serif;
}
.tkwa-section-head h2 {
    font-family: 'Noto Serif Hebrew', serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 3.4vw, 2.4rem);
    margin: 0 0 10px;
    color: var(--wa-text);
}
.tkwa-section-head p {
    color: var(--wa-text-dim);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 56ch;
    margin: 0;
}
@media (max-width: 640px) {
    .tkwa-section-head { grid-template-columns: 1fr; gap: 10px; }
    .tkwa-chapter { font-size: 1.8rem; }
}

/* ==================== רשימת ערים (עריכה אנכית, לא כרטיסים) ==================== */
.tkwa-city-list { border-top: 1px solid var(--wa-hair); }
.tkwa-city-row {
    display: grid;
    grid-template-columns: 70px 1fr auto 40px;
    align-items: center;
    gap: 20px;
    padding: 26px 4px;
    border-bottom: 1px solid var(--wa-hair);
    text-decoration: none;
    color: var(--wa-text);
    transition: padding-inline-start .35s ease, background .35s ease;
}
.tkwa-city-row:hover {
    padding-inline-start: 18px;
    background: var(--wa-vermillion-soft);
}
.tkwa-city-idx {
    font-family: 'Shippori Mincho', serif;
    direction: ltr;
    color: var(--wa-text-dim);
    font-size: 1.05rem;
}
.tkwa-city-name {
    font-family: 'Noto Serif Hebrew', serif;
    font-weight: 700;
    font-size: 1.5rem;
}
.tkwa-city-count {
    font-family: 'Assistant', sans-serif;
    color: var(--wa-text-dim);
    font-size: .92rem;
    white-space: nowrap;
}
.tkwa-city-count b { color: var(--wa-vermillion); font-size: 1.15rem; font-weight: 700; }
.tkwa-city-arrow {
    color: var(--wa-text-dim);
    transition: transform .35s ease, color .35s ease;
    justify-self: end;
}
.tkwa-city-row:hover .tkwa-city-arrow { transform: translateX(-8px); color: var(--wa-vermillion); }
@media (max-width: 640px) {
    .tkwa-city-row { grid-template-columns: 44px 1fr 30px; }
    .tkwa-city-count { display: none; }
}

.tkwa-empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--wa-text-dim);
    border-top: 1px solid var(--wa-hair);
    border-bottom: 1px solid var(--wa-hair);
}

/* ==================== עקרונות (למה TOKYO) ==================== */
.tkwa-principles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--wa-hair);
    border: 1px solid var(--wa-hair);
}
@media (max-width: 780px) { .tkwa-principles { grid-template-columns: 1fr; } }

.tkwa-principle {
    background: var(--wa-bg);
    padding: 42px 36px;
    transition: background .35s ease;
}
.tkwa-principle:hover { background: var(--wa-bg-2); }
.tkwa-principle-top {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 18px;
}
.tkwa-principle-kanji {
    font-family: 'Shippori Mincho', serif;
    font-size: 1.6rem;
    color: var(--wa-vermillion);
}
.tkwa-principle-num {
    font-family: 'Assistant', sans-serif;
    font-size: .78rem;
    color: var(--wa-text-dim);
    letter-spacing: .1em;
}
.tkwa-principle h4 {
    font-family: 'Noto Serif Hebrew', serif;
    font-size: 1.25rem;
    margin: 0 0 12px;
    color: var(--wa-text);
}
.tkwa-principle p {
    color: var(--wa-text-dim);
    font-size: .98rem;
    line-height: 1.75;
    margin: 0;
}

/* ==================== יצירת קשר ==================== */
.tkwa-contact {
    text-align: center;
    padding: 8vh 6vw 4vh;
}
.tkwa-contact h2 {
    font-family: 'Noto Serif Hebrew', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 18px 0 16px;
}
.tkwa-contact p {
    color: var(--wa-text-dim);
    max-width: 50ch;
    margin: 0 auto 40px;
    font-size: 1.05rem;
    line-height: 1.7;
}
.tkwa-contact-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
}
.tkwa-contact-link {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--wa-hair-strong);
    color: var(--wa-text);
    padding: 15px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 600;
    transition: all .3s ease;
}
.tkwa-contact-link:hover {
    background: var(--wa-vermillion);
    border-color: var(--wa-vermillion);
    color: #fff;
    transform: translateY(-3px);
}

/* ==================== חותמת (Hanko) — חוזרת בכותרת ובתחתית ==================== */
.tkwa-hanko-stamp { display: inline-block; }
.tkwa-hanko-ring { animation: tkwaSpin 40s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tkwaSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tkwa-hanko-ring { animation: none; } }

/* ==================== FOOTER ==================== */
.tkwa-footer {
    max-width: 1280px;
    margin: 0 auto;
    padding: 5vh 6vw 6vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--wa-hair);
    flex-wrap: wrap;
}
.tkwa-footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--wa-text-dim);
    font-size: .88rem;
}
.tkwa-footer-brand svg { width: 30px; height: 30px; }
.tkwa-footer-meta {
    font-size: .8rem;
    color: var(--wa-text-dim);
    letter-spacing: .04em;
}

/* ==================== נגישות ותנועה מופחתת ==================== */
body.tkwa-theme a:focus-visible, body.tkwa-theme button:focus-visible, body.tkwa-theme input:focus-visible {
    outline: 2px solid var(--wa-vermillion);
    outline-offset: 2px;
}

/* ==================== מובייל ==================== */
@media (max-width: 768px) {
    .tkwa-hero { padding: 6vh 5vw 5vh; }
    .tkwa-section { padding: 7vh 5vw; }
    .tkwa-contact { padding: 6vh 5vw 4vh; }
}