/*
Theme Name: Cronica Istorica
Theme URI: https://example.com
Author: Just
Description: Temă WordPress modernă, responsive, pentru site de istorie și cultură generală. Include zonă de administrare completă prin Personalizare (culori, fonturi), coloană dreapta widgetizată, secțiuni de categorii pe pagina principală (articole recente sau aleatorii) și zone dedicate de reclamă (widgetizate, poziționate de administrator).
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cronica-istorica
*/

/* =========================================================
   0. RESET & BASE
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

:root{
  /* Culori implicite (pot fi suprascrise din Personalizare > Culori) */
  --bg: #F2ECDD;
  --bg-alt: #E9E1CC;
  --paper: #FBF8F0;
  --ink: #241F1A;
  --ink-soft: #4A423A;
  --accent: #7A2E2E;      /* roșu sigiliu de ceară */
  --accent-2: #A8842C;    /* auriu vechi */
  --header-bg: #1F2A3B;   /* cerneală albastru-închis */
  --header-ink: #F2ECDD;
  --line: rgba(36,31,26,0.14);

  --font-headings: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-ui: 'IBM Plex Sans', -apple-system, Segoe UI, Arial, sans-serif;

  --radius: 6px;
  --shadow-card: 0 1px 2px rgba(36,31,26,0.06), 0 6px 18px rgba(36,31,26,0.08);
  --max-width: 1200px;
}

html, body { margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--accent); text-decoration: none; }
a:hover{ text-decoration: underline; }
:focus-visible{ outline: 3px solid var(--accent-2); outline-offset: 2px; }

h1,h2,h3,h4{
  font-family: var(--font-headings);
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1{ font-size: clamp(2rem, 4vw, 3rem); }
h2{ font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3{ font-size: 1.25rem; }
p{ margin: 0 0 1.2em; }

.container{
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}
.screen-reader-text{
  position:absolute !important; width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--header-bg); color:var(--header-ink);
  padding:10px 16px; z-index:10000; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

/* =========================================================
   1. ANTET / HEADER
   ========================================================= */
.site-header{
  background: var(--header-bg);
  color: var(--header-ink);
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: 3px double var(--accent-2);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  gap: 20px; padding-top: 14px; padding-bottom: 14px;
}
.site-branding{ display:flex; align-items:center; gap:12px; min-width:0; }
.site-branding img.custom-logo{ max-height:48px; width:auto; }
.site-title{
  font-family: var(--font-headings); font-size:1.5rem; margin:0; letter-spacing:0.3px;
}
.site-title a{ color: var(--header-ink); text-decoration:none; }
.site-description{
  font-family: var(--font-ui); font-size:0.75rem; color: rgba(242,236,221,0.65);
  margin:2px 0 0; text-transform:uppercase; letter-spacing:1.5px;
}

.menu-toggle{
  display:none; background:transparent; border:2px solid rgba(242,236,221,0.4); color:var(--header-ink);
  font-family: var(--font-ui); font-size:0.9rem; padding:8px 12px; border-radius: var(--radius); cursor:pointer;
}
.primary-navigation ul{ list-style:none; display:flex; gap: 6px; margin:0; padding:0; }
.primary-navigation li{ position:relative; }
.primary-navigation a{
  font-family: var(--font-ui); color: var(--header-ink); text-decoration:none; font-size:0.95rem;
  padding: 8px 12px; border-radius: var(--radius); display:inline-block; transition: background .15s ease;
}
.primary-navigation a:hover, .primary-navigation a:focus{ background: rgba(242,236,221,0.12); text-decoration:none; }
.primary-navigation .current-menu-item > a{ color: var(--accent-2); }

/* Săgeată pentru itemii care au submeniu */
.primary-navigation .menu-item-has-children > a::after{
  content: '▾'; font-size:0.7em; margin-left:6px; opacity:.7;
}

/* Submeniuri (dropdown) - ascunse implicit */
.primary-navigation .sub-menu{
  display:none;
  list-style:none;
  margin:0; padding:6px;
  flex-direction:column;
}

@media (min-width: 781px){
  /* Desktop: dropdown plutitor, apare la hover/focus */
  .primary-navigation .sub-menu{
    position:absolute; top:100%; left:0; min-width:230px; z-index:600;
    background: var(--header-bg); border:1px solid rgba(242,236,221,0.18);
    border-radius: var(--radius); box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  }
  .primary-navigation .sub-menu .sub-menu{ top:0; left:100%; }
  .primary-navigation li:hover > .sub-menu,
  .primary-navigation li:focus-within > .sub-menu{ display:flex; }
  .primary-navigation .sub-menu a{ display:block; width:100%; border-radius:4px; white-space:nowrap; }
}

@media (max-width: 780px){
  .menu-toggle{ display:inline-block; }
  .primary-navigation{
    display:none; position:absolute; left:0; right:0; top:100%;
    background: var(--header-bg); border-bottom: 3px double var(--accent-2);
    max-height: 80vh; overflow-y:auto;
  }
  .primary-navigation.is-open{ display:block; }
  .primary-navigation ul{ flex-direction:column; padding: 10px 20px 16px; }

  /* Mobil: submeniu deschis/închis cu buton, indentat sub părinte */
  .primary-navigation .menu-item-has-children{ position:static; display:flex; flex-wrap:wrap; align-items:center; }
  .primary-navigation .menu-item-has-children > a{ flex:1; }
  .primary-navigation .sub-menu{
    flex-basis:100%; padding-left:16px; border-left:2px solid rgba(242,236,221,0.2); margin:4px 0 4px 10px;
  }
  .primary-navigation .sub-menu.is-open{ display:flex; }
  .primary-navigation .submenu-toggle{
    background:transparent; border:none; color:var(--header-ink); font-size:1rem; padding:6px 10px;
    cursor:pointer; line-height:1; flex:none;
  }
  .primary-navigation .submenu-toggle[aria-expanded="true"]{ transform:rotate(180deg); }
}

/* =========================================================
   2. HERO
   ========================================================= */
.hero{
  background: linear-gradient(180deg, var(--header-bg) 0%, var(--header-bg) 55%, var(--bg) 55%);
  color: var(--header-ink);
  padding: 48px 0 70px;
}
.hero-inner{ max-width: 760px; }
.hero-eyebrow{
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: 2px; font-size:0.75rem;
  color: var(--accent-2); display:block; margin-bottom: 10px;
}
.hero h1{ color: var(--header-ink); margin-bottom:14px; }
.hero p{ color: rgba(242,236,221,0.78); font-size:1.1rem; max-width:56ch; }
.hero-search{ margin-top:22px; display:flex; max-width:420px; }
.hero-search input[type="search"]{
  flex:1; border:none; padding:12px 14px; font-family:var(--font-ui); border-radius: var(--radius) 0 0 var(--radius);
}
.hero-search button{
  background: var(--accent); color:#fff; border:none; padding:0 18px; font-family:var(--font-ui); font-weight:600;
  border-radius: 0 var(--radius) var(--radius) 0; cursor:pointer;
}
.hero-search button:hover{ background: var(--accent-2); }

/* Divizor "hârtie ruptă" */
.torn-divider{ display:block; width:100%; height:22px; margin-top:-1px; }
.torn-divider path{ fill: var(--bg); }

/* =========================================================
   2b. BANNER "ARTICOL RECOMANDAT / FIXAT"
   ========================================================= */
.featured-banner{ margin: 0 0 34px; }
.featured-banner-link{
  display:grid; grid-template-columns: 1fr; overflow:hidden; border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow-card); color: inherit; text-decoration:none;
}
.featured-banner-link:hover{ text-decoration:none; box-shadow: 0 12px 30px rgba(36,31,26,0.18); }
.featured-banner-media{
  aspect-ratio: 21/9; background: var(--header-bg); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.featured-banner-media img{ width:100%; height:100%; object-fit:cover; }
.featured-banner-media.no-image .wax-seal{ width:64px; height:64px; font-size:1.6rem; }
.featured-banner-body{ padding: 22px 26px 26px; }
.featured-banner-tag{
  display:inline-block; font-family: var(--font-ui); font-size:0.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:1.5px; color:#fff; background: var(--accent);
  padding:5px 12px; border-radius:20px; margin-bottom:12px;
}
.featured-banner-body h2{ margin-bottom:10px; }
.featured-banner-body p{ color: var(--ink-soft); margin-bottom:10px; }
.featured-banner-cta{ font-family: var(--font-ui); font-size:0.85rem; font-weight:600; color: var(--accent); }
@media (min-width: 720px){
  .featured-banner-link{ grid-template-columns: 1.1fr 1fr; align-items:stretch; }
  .featured-banner-media{ aspect-ratio:auto; }
  .featured-banner-body{ padding: 34px 38px; display:flex; flex-direction:column; justify-content:center; }
}

/* Imagine reprezentativă de categorie (înlocuiește sigiliul cu prima literă) */
.categorie-iconita{
  width:44px; height:44px; border-radius:50%; overflow:hidden; flex:none;
  box-shadow: inset 0 0 0 2px rgba(244,233,216,0.4), 0 2px 5px rgba(0,0,0,0.2);
}
.categorie-iconita img{ width:100%; height:100%; object-fit:cover; display:block; }

/* =========================================================
   3. LAYOUT PRINCIPAL (conținut + coloană dreapta)
   ========================================================= */
.page-wrap{ padding: 40px 0 60px; }
.layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 900px){
  .layout{ grid-template-columns: minmax(0,1fr) 320px; align-items:start; }
}
main.content-area{ min-width:0; }
.sidebar-right{ min-width:0; }

/* =========================================================
   4. SIGILIU (element semnătură) + SECȚIUNI CATEGORII
   ========================================================= */
.wax-seal{
  width:44px; height:44px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--accent) 0%, #5a1f1f 100%);
  color:#f4e9d8; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-headings); font-size:1.1rem; flex:none;
  box-shadow: inset 0 0 0 2px rgba(244,233,216,0.25), 0 2px 5px rgba(0,0,0,0.25);
}
.chapter-section{ margin-bottom: 52px; }
.chapter-head{
  display:flex; align-items:center; gap:14px; margin-bottom:20px;
  border-bottom:1px solid var(--line); padding-bottom:14px;
}
.chapter-head h2{ margin:0; flex:1; }
.chapter-head .chapter-more{
  font-family: var(--font-ui); font-size:0.85rem; font-weight:600; white-space:nowrap;
}
.posts-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap:22px;
}
.post-card{
  background: var(--paper); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease;
  display:flex; flex-direction:column;
}
.post-card:hover{ transform: translateY(-4px); box-shadow: 0 10px 26px rgba(36,31,26,0.16); }
.post-card .thumb{ aspect-ratio: 16/10; overflow:hidden; background: var(--bg-alt); }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.post-card .thumb.no-image{ display:flex; align-items:center; justify-content:center; }
.post-card .thumb.no-image .wax-seal{ opacity:.55; }
.post-card .card-body{ padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; }
.post-card .card-meta{
  font-family: var(--font-ui); font-size:0.72rem; text-transform:uppercase; letter-spacing:1px;
  color: var(--accent-2); margin-bottom:8px;
}
.post-card h3{ margin-bottom:8px; font-size:1.1rem; }
.post-card h3 a{ color: var(--ink); }
.post-card h3 a:hover{ color: var(--accent); text-decoration:none; }
.post-card .excerpt{ font-size:0.92rem; color: var(--ink-soft); margin-bottom:0; flex:1; }
.post-card .read-more{ font-family:var(--font-ui); font-size:0.8rem; font-weight:600; margin-top:10px; display:inline-block; }

/* =========================================================
   5. WIDGETURI / COLOANA DREAPTA
   ========================================================= */
.widget{
  background: var(--paper); border-radius: var(--radius); padding:20px 22px; margin-bottom:24px;
  box-shadow: var(--shadow-card);
}
.widget-title{
  font-family: var(--font-headings); font-size:1.05rem; margin:0 0 14px; padding-bottom:10px;
  border-bottom: 2px solid var(--accent-2);
}
.widget ul{ list-style:none; margin:0; padding:0; }
.widget li{ padding:7px 0; border-bottom:1px dashed var(--line); font-size:0.92rem; }
.widget li:last-child{ border-bottom:none; }
.widget select, .widget input[type="text"], .widget input[type="search"]{
  width:100%; padding:8px 10px; font-family:var(--font-ui); border:1px solid var(--line); border-radius:4px;
}

/* =========================================================
   6. ZONE DE RECLAMĂ (widgetizate, poziționate de admin)
   ========================================================= */
.ad-zone{ margin: 30px 0; }
.ad-zone:empty{ display:none; }
.ad-zone-label{
  font-family: var(--font-ui); font-size:0.65rem; text-transform:uppercase; letter-spacing:1.5px;
  color: var(--ink-soft); opacity:.55; text-align:center; margin-bottom:6px;
}
.ad-zone .widget{ box-shadow:none; background: transparent; padding:0; text-align:center; }
.ad-zone .textwidget, .ad-zone .widget_text, .ad-zone .widget_custom_html{ overflow-x:auto; }

/* =========================================================
   7. ARTICOL SINGUR
   ========================================================= */
.entry-header{ margin-bottom:24px; }
.entry-meta{
  font-family: var(--font-ui); font-size:0.8rem; text-transform:uppercase; letter-spacing:1px;
  color: var(--accent); margin-bottom:12px;
}
.entry-meta span{ margin-right:14px; }
.entry-thumb{ margin: 0 0 28px; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-card); }

/* Cuprins automat (TOC) - generat pentru articolele lungi, cu 3+ titluri */
.toc{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius);
  padding: 6px 20px; margin: 0 0 28px; box-shadow: var(--shadow-card);
}
.toc summary{
  font-family: var(--font-headings); font-weight:600; font-size:1.05rem; padding:12px 0;
  cursor:pointer; list-style:revert;
}
.toc summary::marker{ color: var(--accent-2); }
.toc ol{ margin: 4px 0 16px; padding-left: 22px; }
.toc li{ margin-bottom:6px; font-family: var(--font-ui); font-size:0.92rem; }
.toc li.toc-nivel-3{ list-style-type: circle; margin-left: 18px; font-size:0.88rem; }
.toc a{ text-decoration:none; }
.toc a:hover{ text-decoration:underline; }

.entry-content{ font-size:1.08rem; }
.entry-content p{ margin-bottom:1.3em; }
.entry-content h2, .entry-content h3{ margin-top:1.6em; }
.entry-content blockquote{
  margin: 24px 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--accent-2);
  font-style: italic; color: var(--ink-soft);
}
.entry-content img{ border-radius: var(--radius); }
.entry-content a{ text-decoration: underline; text-decoration-color: var(--accent-2); }
.entry-footer{ margin-top:34px; padding-top:18px; border-top:1px solid var(--line); }
.tags-list a{
  display:inline-block; font-family:var(--font-ui); font-size:0.78rem; background:var(--bg-alt);
  padding:5px 12px; border-radius:20px; margin:0 6px 6px 0; color:var(--ink-soft);
}
.tags-list a:hover{ background:var(--accent-2); color:#fff; text-decoration:none; }

.related-posts{ margin-top:46px; }

/* =========================================================
   8. ARHIVĂ / CATEGORIE / CĂUTARE
   ========================================================= */
.archive-header{ margin-bottom:30px; padding-bottom:16px; border-bottom:2px solid var(--accent-2); }
.archive-list .post-row{
  display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--line);
}
.archive-list .post-row .thumb{ width:180px; flex:none; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; }
.archive-list .post-row .thumb img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:600px){ .archive-list .post-row{ flex-direction:column; } .archive-list .post-row .thumb{ width:100%; } }

.pagination{ display:flex; gap:8px; margin-top:30px; flex-wrap:wrap; }
.pagination a, .pagination span{
  font-family:var(--font-ui); padding:8px 13px; border-radius:4px; background:var(--paper); box-shadow: var(--shadow-card);
}
.pagination .current{ background: var(--accent); color:#fff; }

/* =========================================================
   9. FOOTER
   ========================================================= */
.site-footer{
  background: var(--header-bg); color: rgba(242,236,221,0.8); margin-top:60px; padding: 40px 0 26px;
  font-family: var(--font-ui); font-size:0.9rem;
}
.site-footer a{ color: var(--accent-2); }
.footer-grid{ display:grid; gap:30px; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); margin-bottom:26px; }
.footer-grid .widget-title{ color: var(--header-ink); border-bottom-color: rgba(242,236,221,0.25); }
.footer-grid .widget{ background:transparent; box-shadow:none; padding:0; }
.footer-bottom{
  border-top:1px solid rgba(242,236,221,0.15); padding-top:18px; text-align:center; font-size:0.8rem;
  color: rgba(242,236,221,0.55);
}

/* =========================================================
   10. COMENTARII
   ========================================================= */
.comments-area{ margin-top:50px; }
.comment-list{ list-style:none; margin:0; padding:0; }
.comment-body{ background:var(--paper); border-radius:var(--radius); padding:16px 18px; margin-bottom:16px; box-shadow: var(--shadow-card); }
.comment-meta{ font-family:var(--font-ui); font-size:0.8rem; color:var(--ink-soft); margin-bottom:6px; }
.comment-respond input, .comment-respond textarea{
  width:100%; padding:10px 12px; font-family:var(--font-ui); border:1px solid var(--line); border-radius:4px; margin-bottom:12px;
}
.comment-respond button{
  background:var(--accent); color:#fff; border:none; padding:11px 22px; border-radius:var(--radius);
  font-family:var(--font-ui); font-weight:600; cursor:pointer;
}
.comment-respond button:hover{ background:var(--accent-2); }

/* =========================================================
   11. UTILITARE
   ========================================================= */
.btn{
  display:inline-block; font-family:var(--font-ui); font-weight:600; background:var(--accent); color:#fff;
  padding:11px 22px; border-radius:var(--radius); text-decoration:none;
}
.btn:hover{ background:var(--accent-2); color:#fff; text-decoration:none; }
.text-center{ text-align:center; }
.no-results{ padding:40px 0; text-align:center; }