/*
Theme Name: Cafe Magazin
Theme URI: https://cafemagazin.at/
Description: Egyedi child theme a Twenty Twenty-Five sablonhoz, a CaféMagazin design-rendszer alapján. Playfair Display + Plus Jakarta Sans, homok/réz paletta, világos és sötét mód.
Author: Cafe Magazin
Template: twentytwentyfive
Version: 1.1.2
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: cafemagazin
*/

/* ==========================================================================
   1. Design tokenek
   ========================================================================== */
:root{
  --bg:#FDFBF7;
  --surface:#F3ECE2;
  --ink:#1A120B;
  --muted:#8D7B68;
  --border:#E5DDD1;
  --accent:#C58940;
  --accent-ink:#FDFBF7;
  --footer-bg:#1A120B;
  --footer-fg:#F3ECE2;
  --serif:'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
html[data-theme="dark"]{
  --bg:#15100A;
  --surface:#221A11;
  --ink:#F3ECE2;
  --muted:#B3A28C;
  --border:#3A2F22;
  --accent:#C58940;
  --accent-ink:#1A120B;
  --footer-bg:#0E0A06;
  --footer-fg:#F3ECE2;
}

/* A WordPress preset-változói is kövessék a tokeneket, hogy a
   blokkszerkesztőből beszúrt core blokkok is illeszkedjenek. */
:root,
html[data-theme="dark"]{
  --wp--preset--color--base:var(--bg);
  --wp--preset--color--surface:var(--surface);
  --wp--preset--color--contrast:var(--ink);
  --wp--preset--color--muted:var(--muted);
  --wp--preset--color--border:var(--border);
  --wp--preset--color--accent:var(--accent);
}

/* ==========================================================================
   2. Alapok
   ========================================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  font-family:var(--sans);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}
.serif{font-family:var(--serif)}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Az admin bar ne takarja el a felső sávot */
body.admin-bar .topbar{position:relative}

/* ==========================================================================
   3. Felső infósáv
   ========================================================================== */
.topbar{border-bottom:1px solid var(--border);background:var(--surface)}
.topbar .in{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:12.5px;font-weight:600;color:var(--muted);
  padding:8px 24px;max-width:1280px;margin:0 auto;
}
.topbar i{color:var(--accent)}
.tkdate{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tk{display:flex;align-items:center;gap:14px;flex-wrap:wrap;cursor:help}
.tk b{color:var(--ink);font-weight:700}
.tklabel{font-size:11px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.tk .up{color:#4E7C4A}
.tk .down{color:#A34A2E}
.themebtn{
  display:inline-flex;align-items:center;gap:7px;background:none;
  border:1px solid var(--border);border-radius:999px;padding:5px 14px;cursor:pointer;
  color:var(--ink);font:700 12px var(--sans);
}
.themebtn:hover{border-color:var(--accent);color:var(--accent)}

/* ==========================================================================
   4. Fejléc, brand, navigáció, kereső
   ========================================================================== */
header.site{border-bottom:1px solid var(--border)}
.brandbox{padding:34px 24px 0;text-align:center;max-width:1280px;margin:0 auto}
.kicker{font-size:11px;letter-spacing:.35em;text-transform:uppercase;color:var(--muted);font-weight:700}
.logo{font-family:var(--serif);font-size:56px;font-weight:800;margin:10px 0 4px;letter-spacing:-.01em;line-height:1.1}
.logo a{color:inherit}
.logo span{color:var(--accent)}
.logo img{max-height:72px;width:auto}
.claim{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted)}

nav.pills{
  max-width:1280px;margin:0 auto;padding:22px 24px 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
}
.pill{border:1px solid var(--border);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:600;white-space:nowrap}
.pill:hover{border-color:var(--accent);color:var(--accent)}
.pill.active{background:var(--ink);color:var(--bg);border-color:var(--ink);font-weight:700}
.pill.active:hover{color:var(--bg)}

.searchbtn{
  border:1px solid var(--border);background:none;color:var(--ink);border-radius:999px;
  width:36px;height:36px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;
}
.searchbtn:hover{border-color:var(--accent);color:var(--accent)}
.searchbox{max-width:720px;margin:0 auto;padding:0 24px 20px;display:none}
.searchbox.open{display:block}
.searchbox .row{display:flex;gap:8px}
.searchbox input{
  flex:1;border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:999px;padding:11px 20px;font-size:14px;outline:none;font-family:inherit;
}
.searchbox input:focus{border-color:var(--accent)}

.btn{
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;
  padding:11px 22px;font:700 13px var(--sans);cursor:pointer;display:inline-block;
}
.btn:hover{background:#D69A51;color:var(--accent-ink)}

/* ==========================================================================
   5. Fő tartalom, hero, oldalsáv-widget
   ========================================================================== */
main{max-width:1280px;margin:0 auto;padding:36px 24px 0}
.hero{display:flex;gap:28px;flex-wrap:wrap;align-items:stretch}
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.herocard{flex:1 1 580px;min-width:0;display:flex;flex-direction:column}
.imgwrap{position:relative;display:block;overflow:hidden}
.imgwrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
a.imgwrap:hover img{transform:scale(1.05)}
.ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg,var(--surface),var(--surface) 14px,var(--bg) 14px,var(--bg) 28px);
  color:var(--muted);font-size:13px;font-weight:600;text-align:center;padding:12px;transition:transform .6s ease;
}
a.imgwrap:hover .ph{transform:scale(1.05)}
.badge{
  position:absolute;top:18px;left:18px;background:var(--accent);color:#FDFBF7;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;pointer-events:none;
}
.readtime{
  position:absolute;bottom:12px;right:12px;background:rgba(26,18,11,.82);color:#F3ECE2;
  font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;pointer-events:none;
}
.herobody{padding:28px 32px 30px;display:flex;flex-direction:column;gap:14px}
.herobody h2{font-family:var(--serif);font-size:34px;font-weight:700;line-height:1.15;margin:0;letter-spacing:-.015em}
.herobody p{margin:0;font-size:15.5px;line-height:1.65;color:var(--muted)}
.byline{display:flex;align-items:center;gap:12px;margin-top:4px;font-size:13px}
.avatar{
  width:40px;height:40px;border-radius:50%;background:var(--accent);color:#FDFBF7;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.byline .n{font-weight:700}
.byline .m{color:var(--muted)}

aside.widget{flex:1 1 300px;min-width:280px;display:flex;flex-direction:column;align-self:flex-start}
aside.widget .tabpane > *:last-child{border-bottom:none}
.tabs{display:flex;border-bottom:1px solid var(--border)}
.tabs button{
  flex:1;padding:15px 8px;background:transparent;color:var(--muted);border:none;cursor:pointer;
  font:800 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.tabs button.active{background:var(--accent);color:#FDFBF7}
.dot{width:7px;height:7px;border-radius:50%;background:#A34A2E;animation:livepulse 1.6s infinite}
@keyframes livepulse{0%,100%{opacity:1}50%{opacity:.35}}
.tabpane{display:none;flex-direction:column}
.tabpane.active{display:flex}
.mr{display:flex;gap:16px;padding:17px 20px;border-bottom:1px solid var(--border);align-items:baseline}
.mr:hover{background:var(--bg)}
.mr .nr{font-family:var(--serif);font-size:26px;font-weight:800;color:var(--accent);flex:none;line-height:1}
.mr .t{font-size:14px;font-weight:700;line-height:1.4}
.lf{display:block;padding:16px 20px;border-bottom:1px solid var(--border)}
.lf:hover{background:var(--bg)}
.lf .time{font-size:11px;font-weight:800;color:var(--accent);letter-spacing:.08em;margin-bottom:5px}
.lf .txt{font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink)}

/* ==========================================================================
   6. Szekciócím, cikkrács, kolumnák
   ========================================================================== */
.sechead{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:52px 0 22px;border-bottom:1px solid var(--border);padding-bottom:14px;
}
.sechead h3{font-family:var(--serif);font-size:28px;font-weight:700;margin:0}
.sechead a{font-size:13px;font-weight:700;color:var(--accent)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px}
.acard{
  background:var(--bg);border:1px solid var(--border);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .25s ease;
}
.acard:hover{box-shadow:0 12px 32px rgba(26,18,11,.10)}
.acard .imgwrap{height:200px}
.abody{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.catpill{
  align-self:flex-start;color:var(--accent);border:1px solid var(--accent);
  font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
}
.catpill:hover{background:var(--accent);color:#FDFBF7}
.abody h4{font-family:var(--serif);font-size:20px;font-weight:700;line-height:1.25;margin:0}
.abody p{margin:0;font-size:13.5px;line-height:1.6;color:var(--muted);flex:1}
.meta{font-size:12px;color:var(--muted);font-weight:600}

.colgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;padding-bottom:10px}
.colcard{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:26px 24px;display:flex;flex-direction:column;gap:14px;
}
.colcard .avatar{width:64px;height:64px;font-size:20px}
.colcard .k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.colcard h4{font-family:var(--serif);font-size:19px;font-weight:700;line-height:1.3;margin:0}
.colcard p{margin:0;font-size:13px;line-height:1.6;color:var(--muted);flex:1}
.colcard .a{font-size:12.5px;font-weight:700}
.colcard .a span{color:var(--muted);font-weight:600}

/* ==========================================================================
   7. Egyedi cikk
   ========================================================================== */
main.article{max-width:860px}
.crumbs{font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:20px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.artbadge{
  display:inline-block;background:var(--accent);color:#FDFBF7;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
}
.artbadge:hover{color:#FDFBF7;background:#D69A51}
h1.arttitle{font-family:var(--serif);font-size:42px;font-weight:800;line-height:1.12;letter-spacing:-.015em;margin:18px 0 14px}
.artlead{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--muted);margin:0 0 24px}
.artmeta{display:flex;align-items:center;gap:12px;padding-bottom:24px;border-bottom:1px solid var(--border);font-size:13px}
.artimg{height:400px;border-radius:16px;overflow:hidden;margin:28px 0 8px}
.artimg img{width:100%;height:100%;object-fit:cover}
.caption{font-size:12px;color:var(--muted);margin-bottom:28px}

.artbody{font-size:16.5px;line-height:1.8}
.artbody p{font-size:16.5px;line-height:1.8;margin:0 0 22px}
.artbody h2{font-family:var(--serif);font-size:26px;font-weight:700;margin:36px 0 6px;line-height:1.25}
.artbody h3{font-family:var(--serif);font-size:22px;font-weight:700;margin:30px 0 6px;line-height:1.3}
.artbody h4{font-family:var(--serif);font-size:19px;font-weight:700;margin:26px 0 6px}
.artbody ul,.artbody ol{margin:0 0 22px;padding-left:24px}
.artbody li{margin-bottom:8px}
.artbody a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.artbody img,.artbody figure img{border-radius:14px}
.artbody figure{margin:28px 0}
.artbody figcaption{font-size:12px;color:var(--muted);margin-top:8px}
.artbody table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:15px}
.artbody th,.artbody td{border:1px solid var(--border);padding:10px 14px;text-align:left}
.artbody th{background:var(--surface);font-weight:700}
.artbody hr{border:none;border-top:1px solid var(--border);margin:36px 0}
.artbody blockquote,blockquote.q{
  font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.4;
  margin:36px 0;padding-left:26px;border-left:3px solid var(--accent);
}
.artbody blockquote p{font-size:inherit;line-height:inherit}
blockquote.q .cite,.artbody blockquote cite{
  display:block;font-family:var(--sans);font-style:normal;font-size:13px;font-weight:700;color:var(--muted);margin-top:12px;
}

.authorbox{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:24px 28px;display:flex;gap:18px;align-items:center;margin:44px 0 0;flex-wrap:wrap;
}
.authorbox .k{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.authorbox .n{font-weight:800;font-size:16px}
.authorbox .b{font-size:13.5px;color:var(--muted);line-height:1.6;margin-top:4px}

.relgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;padding-bottom:10px}
.rel{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px 22px;display:flex;flex-direction:column;gap:8px;
}
.rel:hover{border-color:var(--accent)}
.rel .c{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}
.rel .t{font-family:var(--serif);font-size:17px;font-weight:700;line-height:1.3;color:var(--ink)}
.rel .m{font-size:12px;color:var(--muted);font-weight:600}

/* ==========================================================================
   8. Archívum, oldal, keresés, 404
   ========================================================================== */
.listhead{text-align:center;margin-bottom:40px}
.listhead .k{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);font-weight:800}
.listhead h1{font-family:var(--serif);font-size:44px;font-weight:800;margin:10px 0 8px;letter-spacing:-.015em;line-height:1.1}
.listhead p{font-size:15px;color:var(--muted);max-width:640px;margin:0 auto;line-height:1.65}

main.page{max-width:760px;padding-top:48px}
main.page h1{font-family:var(--serif);font-size:40px;font-weight:800;margin:0 0 24px;letter-spacing:-.015em;line-height:1.15}
main.page h2{font-family:var(--serif);font-size:28px;font-weight:700;margin:36px 0 10px}
main.page h3{font-family:var(--serif);font-size:22px;font-weight:700;margin:28px 0 8px}
main.page p{font-size:16px;line-height:1.8;margin:0 0 20px}
main.page ul,main.page ol{font-size:16px;line-height:1.8;margin:0 0 20px;padding-left:24px}
main.page a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
main.page img{border-radius:14px}

.empty{text-align:center;padding:40px 0 20px;color:var(--muted)}
.empty i{font-size:40px;color:var(--accent);display:block;margin-bottom:12px}

.pagination{display:flex;justify-content:center;gap:8px;margin:48px 0 0;flex-wrap:wrap}
.pagination .page-numbers{
  border:1px solid var(--border);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;color:var(--ink);
}
.pagination .page-numbers:hover{border-color:var(--accent);color:var(--accent)}
.pagination .page-numbers.current{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Hozzászólások */
.comments{max-width:860px;margin:56px auto 0;padding:0 24px}
.comments h3{font-family:var(--serif);font-size:26px;font-weight:700;margin:0 0 20px}
.comments ol{list-style:none;padding:0;margin:0}
.comments .comment-body{border-bottom:1px solid var(--border);padding:18px 0}
.comments .comment-author{font-weight:700;font-size:14px}
.comments .comment-meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.comments input[type=text],.comments input[type=email],.comments input[type=url],.comments textarea{
  width:100%;border:1px solid var(--border);background:var(--surface);color:var(--ink);
  border-radius:14px;padding:11px 18px;font-size:14px;font-family:inherit;outline:none;margin-bottom:12px;
}
.comments input[type=submit]{
  background:var(--accent);color:var(--accent-ink);border:none;border-radius:999px;
  padding:11px 22px;font:700 13px var(--sans);cursor:pointer;
}

/* ==========================================================================
   9. Lábléc
   ========================================================================== */
footer.site{background:var(--footer-bg);color:var(--footer-fg);margin-top:56px}
.fgrid{
  max-width:1280px;margin:0 auto;padding:60px 24px 36px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;
}
.fgrid .flogo{font-family:var(--serif);font-size:28px;font-weight:800}
.fgrid .flogo a{color:inherit}
.fgrid .flogo span{color:#C58940}
.fgrid p{font-size:13.5px;line-height:1.7;color:rgba(243,236,226,.65);margin:14px 0 0}
.fgrid .h{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#C58940;margin-bottom:16px}
.fgrid .links{display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.fgrid .links a,.fgrid .soc a{color:rgba(243,236,226,.8)}
.fgrid .links a:hover,.fgrid .soc a:hover{color:#C58940}
.fgrid .soc{display:flex;gap:12px;margin-top:18px;font-size:18px}
.nl{display:flex;gap:8px;margin-top:14px}
.nl input{
  flex:1;min-width:0;background:rgba(243,236,226,.08);border:1px solid rgba(243,236,226,.2);
  border-radius:999px;padding:11px 18px;color:#F3ECE2;font-size:13px;outline:none;font-family:inherit;
}
.nl input::placeholder{color:rgba(243,236,226,.45)}
.nl .btn{color:#1A120B}
.nlok{
  display:none;background:rgba(197,137,64,.15);border:1px solid #C58940;border-radius:12px;
  padding:14px 18px;font-size:13.5px;color:#F3ECE2;margin-top:14px;
}
.legal{border-top:1px solid rgba(243,236,226,.12)}
.legal .in{
  max-width:1280px;margin:0 auto;padding:20px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12px;color:rgba(243,236,226,.5);
}
.legal a{color:rgba(243,236,226,.5)}
.legal a:hover{color:#C58940}

/* ==========================================================================
   10. Reszponzív
   ========================================================================== */
@media(max-width:900px){
  .herobody h2{font-size:28px}
  .artimg{height:280px}
}
/* Auf schmalen Schirmen wird die Kopfleiste zweizeilig: oben der Ticker,
   der bei Bedarf seitlich gescrollt wird, darunter Datum und Umschalter. */
@media(max-width:820px){
  .topbar .in{padding:8px 16px;row-gap:8px}
  .tk{
    order:-1;flex:1 0 100%;flex-wrap:nowrap;gap:12px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  .tk::-webkit-scrollbar{display:none}
  .tk > span{white-space:nowrap;flex:none}
  .tkdate{flex:1 1 auto}
}
@media(max-width:640px){
  .logo{font-size:40px}
  .topbar .in{justify-content:space-between;text-align:left}
  h1.arttitle{font-size:32px}
  .listhead h1{font-size:34px}
  .herobody{padding:24px 22px 26px}
  main{padding-top:26px}
  .sechead{margin:40px 0 18px}
  .artimg{height:220px}
  blockquote.q,.artbody blockquote{font-size:21px}
}