/*
Theme Name:   Japanzeit
Theme URI:    https://japanzeit.de/
Description:  Leichtes, schnelles GeneratePress-Child-Theme im japanischen Stil für japanzeit.de — Indigo/Vermillion-Palette, seigaiha-Wellenmotiv, selbst gehostete Schriften (Inter + Zen Maru Gothic), keine externen Font-Requests.
Author:       Japanzeit
Template:     generatepress
Version:      1.0.0
Text Domain:  japanzeit-child
*/

/* ==========================================================
   1. SCHRIFTEN — selbst gehostet, keine Google-Fonts-CDN-Anfrage
   ========================================================== */
@font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Zen Maru Gothic';src:url('fonts/zenmaru-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Zen Maru Gothic';src:url('fonts/zenmaru-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* ==========================================================
   2. BRAND-TOKENS — eine Quelle der Wahrheit für die Palette
   ========================================================== */
:root{
	--jz-ai:      #1B3A5C;   /* Indigo — Überschriften, Footer, starker Text */
	--jz-ai-dark: #12253C;
	--jz-shu:     #E1483A;   /* Vermillion, bewusst kräftiger als im Plugin — Buttons, Links, Akzente */
	--jz-shu-dark:#C7331F;
	--jz-kin:     #D4952F;   /* Gold — sparsamer zweiter Akzent (Hover, Badges) */
	--jz-washi:   #FDFBF7;   /* nahezu Weiß, warm — Hintergrund */
	--jz-washi-2: #F6F1E6;   /* etwas dunkler für Karten/Streifen */
	--jz-sumi:    #22262B;   /* Fließtext */
	--jz-line:    rgba(34,38,43,.10);
	--jz-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--jz-font-head: 'Zen Maru Gothic', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Inter', sans-serif;
	--jz-radius: 14px;
	--jz-shadow: 0 4px 18px rgba(27,58,92,.08);
}

/* ==========================================================
   3. GRUNDLAGEN
   ========================================================== */
body{background:var(--jz-washi);color:var(--jz-sumi);font-family:var(--jz-font-body);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.site-title,.entry-title{font-family:var(--jz-font-head);color:var(--jz-ai);font-weight:700;line-height:1.28;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4vw,2.7rem)}
h2{font-size:clamp(1.5rem,3vw,2rem);margin-top:2.2em;position:relative;padding-bottom:.35em}
h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;background:var(--jz-shu);border-radius:2px}
h3{font-size:1.3rem;color:var(--jz-ai-dark)}
a{color:var(--jz-shu);text-decoration-thickness:1.5px;text-underline-offset:2px;transition:color .15s ease}
a:hover{color:var(--jz-shu-dark)}
::selection{background:var(--jz-shu);color:#fff}

/* ==========================================================
   4. HEADER / NAVIGATION
   ========================================================== */
#site-header,.site-header{background:var(--jz-washi);border-bottom:1px solid var(--jz-line)}
.main-navigation,.main-nav ul li a{font-family:var(--jz-font-body);font-weight:600;font-size:.98rem;color:var(--jz-sumi)}
.main-navigation a:hover,.main-nav ul li a:hover{color:var(--jz-shu)}
.site-logo img,.custom-logo{max-height:52px;width:auto}
.site-header::before{content:"";display:block;height:5px;width:100%;
	background:repeating-linear-gradient(90deg,var(--jz-ai) 0 24px,var(--jz-shu) 24px 26px,var(--jz-ai) 26px 50px);
	opacity:.85}

/* ==========================================================
   5. BUTTONS
   ========================================================== */
.button,button,input[type=submit],.wp-block-button__link{
	background:var(--jz-shu);color:#fff;border:none;border-radius:999px;
	padding:.75em 1.7em;font-weight:600;font-family:var(--jz-font-body);
	box-shadow:0 3px 10px rgba(225,72,58,.25);transition:transform .12s ease,box-shadow .12s ease}
.button:hover,button:hover,input[type=submit]:hover{background:var(--jz-shu-dark);transform:translateY(-1px);box-shadow:0 6px 16px rgba(225,72,58,.32);color:#fff}

/* ==========================================================
   6. INHALTE / ARTIKEL
   ========================================================== */
.entry-content{font-size:1.06rem}
.entry-content table{border-collapse:collapse;width:100%;margin:1.6em 0;border-radius:10px;overflow:hidden;box-shadow:var(--jz-shadow)}
.entry-content table th{background:var(--jz-ai);color:#fff;padding:.7em 1em;text-align:left;font-family:var(--jz-font-head)}
.entry-content table td{padding:.65em 1em;border-bottom:1px solid var(--jz-line)}
.entry-content table tr:nth-child(even){background:var(--jz-washi-2)}
.entry-content blockquote{border-left:4px solid var(--jz-shu);background:var(--jz-washi-2);padding:1.1em 1.4em;border-radius:0 var(--jz-radius) var(--jz-radius) 0;font-style:italic;margin:1.8em 0}
.entry-content blockquote cite{display:block;margin-top:.6em;font-style:normal;font-weight:600;color:var(--jz-ai);font-size:.9rem}
.entry-content figure{margin:2em 0}
.entry-content figure img{border-radius:var(--jz-radius);box-shadow:var(--jz-shadow)}
.entry-content figcaption{font-size:.88rem;color:var(--jz-sumi);opacity:.65;text-align:center;margin-top:.6em}
.entry-content strong{color:var(--jz-ai-dark)}

/* Featured Image */
.post-image img,.featured-image img,.entry-content > img:first-child{border-radius:var(--jz-radius);box-shadow:var(--jz-shadow)}

/* ==========================================================
   7. ARCHIV- / KATEGORIE-KARTEN — hell, freundlich, luftig
   ========================================================== */
.inside-article,article.post{background:#fff;border-radius:var(--jz-radius);box-shadow:var(--jz-shadow);padding:1.6em;margin-bottom:1.8em;border:1px solid var(--jz-line);transition:transform .15s ease,box-shadow .15s ease}
.inside-article:hover,article.post:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(27,58,92,.13)}
.entry-meta,.post-meta{color:var(--jz-shu);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.entry-title a{color:var(--jz-ai)}

/* Kategorie-Badges */
.cat-links a,.entry-categories a{
	display:inline-block;background:var(--jz-washi-2);color:var(--jz-ai);
	padding:.25em .9em;border-radius:999px;font-size:.78rem;font-weight:600;
	text-decoration:none;margin:.2em .3em .2em 0}
.cat-links a:hover{background:var(--jz-shu);color:#fff}

/* ==========================================================
   8. FOOTER
   ========================================================== */
#footer,.site-footer,.footer-widgets{background:var(--jz-ai);color:var(--jz-washi-2)}
.site-footer a,#footer a{color:#fff;opacity:.85}
.site-footer a:hover,#footer a:hover{opacity:1;color:var(--jz-kin)}
.site-footer::before{content:"";display:block;height:4px;width:100%;
	background:repeating-linear-gradient(90deg,var(--jz-shu) 0 24px,var(--jz-kin) 24px 26px,var(--jz-shu) 26px 50px)}
.copyright-bar,.site-info{background:var(--jz-ai-dark);color:rgba(255,255,255,.6);font-size:.85rem}

/* ==========================================================
   9. WIDGETS / SIDEBAR
   ========================================================== */
.widget{background:#fff;border-radius:var(--jz-radius);padding:1.4em;margin-bottom:1.4em;box-shadow:var(--jz-shadow);border:1px solid var(--jz-line)}
.widget-title{font-family:var(--jz-font-head);color:var(--jz-ai);font-size:1.05rem;margin-bottom:.7em}

/* ==========================================================
   10. JAPANZEIT-TOOLS-PLUGIN — Farb-Handshake
   Das Plugin bringt eigene .mk-*-Klassen mit; hier nur sanfte
   Angleichung an die (etwas kräftigere) Theme-Palette, damit
   Tool-Widgets und Artikel-Layout wie aus einem Guss wirken.
   ========================================================== */
.mk-btn{background:var(--jz-shu);border-radius:999px}
.mk-btn:hover{background:var(--jz-shu-dark)}
.mk-standalone,.mk-widget{border-radius:var(--jz-radius)}

/* ==========================================================
   11. RESPONSIVE
   ========================================================== */
@media (max-width:768px){
	body{font-size:16px}
	.inside-article,article.post{padding:1.2em}
	h2{margin-top:1.6em}
}

/* ==========================================================
   12. BARRIEREFREIHEIT / PERFORMANCE
   ========================================================== */
:focus-visible{outline:3px solid var(--jz-kin);outline-offset:2px}
img{height:auto;max-width:100%}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}