/* ==========================================================================
   DIMOCRACY — main CSS (async). Shared components: post-card, section grid,
   breadcrumbs, drawer menu, footer, pagination, content body.
   Tokens + fonts live in critical.css. Per-template CSS lives in
   assets/css/templates/*.css (auto-enqueued).
   ========================================================================== */

/* ---- Layout helpers ---- */
.site-main{display:block;}
.site-content{padding:30px 15px 60px;}

/* ---- Breadcrumbs ---- */
.breadcrumbs{margin:0 0 20px;font-size:12px;color:var(--color-muted);}
.breadcrumbs__list{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;}
.breadcrumbs__item{display:flex;align-items:center;}
.breadcrumbs__item:not(:last-child)::after{content:"/";margin-left:6px;color:var(--color-line-strong);}
.breadcrumbs__link{color:var(--color-muted);}
.breadcrumbs__link:hover{color:var(--color-black);}
.breadcrumbs__current{color:var(--color-black);}

/* ==========================================================================
   Post card — the shared card component (matches live grid cards)
   Variants: --standard (default), --feature (large), --overlay, --row
   ========================================================================== */
.post-card{display:flex;flex-direction:column;background:var(--color-white);}
.post-card__media{display:block;position:relative;overflow:hidden;aspect-ratio:16/9;background:var(--color-line);}
.post-card__image{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.post-card__media:hover .post-card__image{transform:scale(1.04);}
.post-card__image--placeholder{background:var(--color-line-strong);}
.post-card__body{padding:14px 0 0;display:flex;flex-direction:column;gap:6px;}
.post-card__kicker{display:inline-block;font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--color-kicker);}
.post-card__kicker:hover{color:var(--color-muted);}
.post-card__title{font-family:var(--font-serif);font-weight:700;font-size:18px;line-height:1.28;margin:0;color:var(--color-ink);}
.post-card__title a{color:inherit;}
.post-card__title a:hover{color:var(--color-muted);}
.post-card__date{font-size:11px;color:var(--color-faint);text-transform:uppercase;letter-spacing:.4px;}

/* feature card — bigger title */
.post-card--feature .post-card__title{font-size:28px;line-height:1.2;}
.post-card--feature .post-card__media{aspect-ratio:16/9;}

/* overlay card — title on top of image */
.post-card--overlay{position:relative;}
.post-card--overlay .post-card__body{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));z-index:2;}
.post-card--overlay .post-card__title,.post-card--overlay .post-card__title a{color:#fff;}
.post-card--overlay .post-card__kicker{color:#fff;}
.post-card--overlay .post-card__date{color:rgba(255,255,255,.7);}

/* row card — small thumb + title side by side */
.post-card--row{flex-direction:row;gap:12px;align-items:flex-start;}
.post-card--row .post-card__media{flex:0 0 110px;aspect-ratio:3/2;}
.post-card--row .post-card__body{padding:0;}
.post-card--row .post-card__title{font-size:15px;}

/* post-meta line (helper dimocracy_post_meta) */
.post-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--color-faint);}
.post-meta .post-card__kicker{font-size:12px;}

/* ==========================================================================
   Section grid + heading (homepage / archive sections)
   ========================================================================== */
.home-section{margin:0 0 50px;}
.section-heading{font-family:var(--font-serif);font-weight:700;font-size:22px;text-transform:uppercase;margin:0 0 20px;padding-bottom:10px;border-bottom:3px solid var(--color-black);}
.section-heading a{color:var(--color-black);}
.section-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);}
.section-grid .post-card--feature{grid-column:1 / -1;}

@media (max-width:980px){.section-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.section-grid{grid-template-columns:1fr;}.post-card--feature .post-card__title{font-size:22px;}}

/* ==========================================================================
   Menu dropdown — opens BELOW the header with a glassmorphism panel.
   --drawer-top is set by main.js to the live header bottom on open.
   ========================================================================== */
.drawer{position:fixed;inset:0;z-index:480;} /* below sticky header (z-index 500) so header stays crisp */
.drawer[hidden]{display:none;}
.drawer::before{content:"";position:fixed;inset:0;background:rgba(12,15,20,.34);opacity:0;transition:opacity var(--transition);}
.drawer.is-open::before{opacity:1;}
.drawer__panel{
	position:fixed;left:0;right:0;top:var(--drawer-top,116px);
	max-height:calc(100vh - var(--drawer-top,116px));
	overflow-y:auto;
	padding:26px clamp(15px,5vw,56px) 34px;
	background:rgba(255,255,255,.72);
	-webkit-backdrop-filter:blur(22px) saturate(180%);
	backdrop-filter:blur(22px) saturate(180%);
	border-bottom:1px solid rgba(255,255,255,.55);
	box-shadow:0 28px 64px -24px rgba(0,0,0,.45);
	transform:translateY(-14px);opacity:0;pointer-events:none;
	transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .26s ease;
}
.drawer.is-open .drawer__panel{transform:translateY(0);opacity:1;pointer-events:auto;}
.drawer__close{position:absolute;top:12px;right:clamp(15px,5vw,56px);width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,0,0,.05);border:0;border-radius:50%;font-size:24px;line-height:1;color:var(--color-black);transition:background var(--transition);}
.drawer__close:hover{background:rgba(0,0,0,.1);}
.drawer__search{display:flex;max-width:560px;margin:4px 0 26px;background:rgba(255,255,255,.6);border:1px solid rgba(0,0,0,.12);border-radius:999px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);}
.drawer__search input{flex:1;border:0;padding:13px 20px;font-family:inherit;font-size:15px;outline:none;background:transparent;color:var(--color-ink);}
.drawer__search-submit{border:0;background:var(--color-black);color:#fff;padding:0 22px;display:inline-flex;align-items:center;transition:background var(--transition);}
.drawer__search-submit:hover{background:var(--color-accent-red);}
.drawer__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.drawer__item{}
.drawer__link{display:flex;align-items:center;padding:15px 18px;font-family:var(--font-sans);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-ink);background:rgba(255,255,255,.5);border:1px solid rgba(0,0,0,.07);border-radius:12px;transition:background var(--transition),color var(--transition),transform var(--transition),box-shadow var(--transition);}
.drawer__link::before{content:"";width:7px;height:7px;margin-right:12px;border-radius:50%;background:var(--color-accent-red);flex:0 0 auto;opacity:.55;transition:opacity var(--transition),transform var(--transition);}
.drawer__link:hover{color:#fff;background:var(--color-ink);transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(0,0,0,.5);}
.drawer__link:hover::before{opacity:1;transform:scale(1.25);}
.drawer__item--accent .drawer__link{color:var(--color-accent-red);}
.drawer__item--accent .drawer__link:hover{color:#fff;background:var(--color-accent-red);}
body.menu-open{overflow:hidden;}

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination{margin:40px 0 0;}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;border:1px solid var(--color-line-strong);font-size:14px;font-weight:600;color:var(--color-black);}
.pagination .page-numbers.current{background:var(--color-black);color:#fff;border-color:var(--color-black);}
.pagination .page-numbers:hover:not(.current){background:var(--color-bg-alt);}
.no-results{padding:40px 0;color:var(--color-muted);font-size:16px;}

/* ==========================================================================
   Article body (shared base — single template extends this)
   ========================================================================== */
.entry-content{font-size:18px;line-height:1.75;color:var(--color-ink);}
.entry-content p{margin:0 0 1.2em;}
.entry-content a{color:var(--color-black);text-decoration:underline;text-underline-offset:3px;}
.entry-content a:hover{color:var(--color-muted);}
.entry-content h2,.entry-content h3{margin:1.4em 0 .5em;}
.entry-content img{margin:1.2em auto;}
.entry-content blockquote{margin:1.5em 0;padding:6px 0 6px 20px;border-left:4px solid var(--color-black);font-style:italic;color:var(--color-muted);}
.dimocracy-embed{margin:1.5em 0;}
.dimocracy-embed--video{position:relative;aspect-ratio:16/9;}
.dimocracy-embed--video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ==========================================================================
   Footer — astro-style clean centred layout, refined dark glass
   ========================================================================== */
.site-footer{position:relative;background:var(--color-footer-bg);color:var(--color-footer-text);margin-top:64px;overflow:hidden;}
.site-footer__rule{height:3px;width:100%;background:linear-gradient(90deg,transparent,var(--color-accent-red) 35%,var(--color-accent-red) 65%,transparent);opacity:.9;}
.site-footer__inner{padding:56px 15px 40px;display:flex;flex-direction:column;align-items:center;text-align:center;}
.site-footer__brand{font-family:var(--font-sans);font-weight:400;font-size:46px;letter-spacing:-1.5px;line-height:1;color:#fff;text-transform:uppercase;transition:opacity var(--transition);}
.site-footer__brand:hover{opacity:.75;color:#fff;}
.site-footer__tagline{margin:14px 0 0;color:var(--color-footer-muted);font-size:15px;letter-spacing:.3px;}
.site-footer__social{display:flex;gap:12px;margin:26px 0 4px;}
.site-footer__social a{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;color:var(--color-footer-muted);border:1px solid rgba(255,255,255,.16);border-radius:50%;line-height:0;transition:all var(--transition);}
.site-footer__social a:hover{color:#fff;background:var(--color-accent-red);border-color:var(--color-accent-red);transform:translateY(-2px);}
.site-footer__nav{margin:34px 0 0;width:100%;border-top:1px solid rgba(255,255,255,.1);padding-top:28px;}
.site-footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;}
.site-footer__menu a{position:relative;color:var(--color-footer-muted);font-family:var(--font-sans);font-weight:600;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;transition:color var(--transition);}
.site-footer__menu a:hover{color:#fff;}
.site-footer__menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--color-accent-red);transition:right var(--transition);}
.site-footer__menu a:hover::after{right:0;}
.site-footer__bottom{border-top:1px solid rgba(255,255,255,.1);}
.site-footer__bottom-inner{padding:18px 15px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;}
.site-footer__copy{font-size:12px;color:var(--color-footer-muted);}
.site-footer__credit{font-size:12px;color:var(--color-footer-muted);letter-spacing:.4px;}
.site-footer__credit:hover{color:#fff;}

@media (max-width:782px){
  .site-footer__brand{font-size:38px;}
  .site-footer__inner{padding:44px 15px 32px;}
  .site-footer__bottom-inner{justify-content:center;text-align:center;}
}

/* ==========================================================================
   ASTRO-PORTED SHARED COMPONENTS (EfSyn-style, adapted to dimocracy fonts/tokens)
   Reused across author / search / tag / single. Generic + token-driven.
   Markup contract is documented in the agent MANIFEST — emit the exact classes.
   Font mapping: astro --headings/--title-font -> 'Literata-Bold' (--font-serif),
                 astro --body-font -> 'StoneSansITC' (--font-sans).
   Accent: use --color-accent-red for the news-red rule/chip/link states.
   ========================================================================== */

/* ---- Archive shell: breadcrumb -> section-header(h1) -> two columns -> pagination ---- */
.archive-wrap{padding:24px 15px 60px;}
.archive-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start;}
@media (max-width:980px){
  .archive-layout{grid-template-columns:1fr;gap:40px;}
}

/* ==========================================================================
   1. Breadcrumb — slim row (astro .breadcrumb). New class; coexists with the
      foundation .breadcrumbs. Uses a chevron between items.
   ========================================================================== */
.breadcrumb{margin:0 0 14px;font-family:var(--font-sans);font-size:13px;color:var(--color-muted);}
.breadcrumb-list{list-style:none;margin:0;padding:0;display:flex;flex-flow:row wrap;align-items:center;column-gap:6px;row-gap:2px;}
.breadcrumb-item{display:flex;align-items:center;gap:6px;font-weight:600;}
.breadcrumb-item:not(:last-child)::after{content:"";width:.45em;height:.8em;flex:0 0 auto;background-color:var(--color-line-strong);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M.53.53l8 8-8 8' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 18'%3E%3Cpath d='M.53.53l8 8-8 8' stroke='%23000' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;}
.breadcrumb-item a{color:var(--color-muted);}
.breadcrumb-item a:hover{color:var(--color-accent-red);}
.breadcrumb-item[aria-current],.breadcrumb-item.is-current{color:var(--color-ink);font-weight:400;}

/* ==========================================================================
   2. Section header — archive / results / section title (astro .section-header).
      Serif h1 with a red accent rule. Top+bottom hairlines like astro.
   ========================================================================== */
.section-header{border-top:1px solid var(--color-line);border-bottom:1px solid var(--color-line);margin:0 0 28px;}
.section-header__inner{padding:18px 0;}
.section-header .breadcrumb{margin-bottom:10px;}
.section-header__title,.section-header h1{position:relative;font-family:var(--font-serif);font-weight:700;font-size:34px;line-height:1.12;letter-spacing:-.5px;color:var(--color-ink);margin:0;padding:0 0 0 18px;}
.section-header__title::before,.section-header h1::before{content:"";position:absolute;left:0;top:.12em;bottom:.12em;width:5px;background:var(--color-accent-red);}
.section-header__title small,.section-header__sub{display:block;font-family:var(--font-sans);font-weight:400;font-size:15px;letter-spacing:0;color:var(--color-muted);margin-top:8px;padding:0;text-transform:none;}
.section-header__sub strong{color:var(--color-ink);font-weight:600;}
@media (max-width:600px){
  .section-header__title,.section-header h1{font-size:26px;padding-left:14px;}
  .section-header__title::before,.section-header h1::before{width:4px;}
}

/* ==========================================================================
   3. Post list + post (horizontal list-row card, astro .post / .post-list).
      Thumbnail left, content right, red category chip + date meta.
   ========================================================================== */
.post-list{list-style:none;margin:0;padding:0;display:flex;flex-flow:column nowrap;gap:0;}
.post-list--grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 32px;}
@media (max-width:680px){.post-list--grid{grid-template-columns:1fr;gap:0;}}

/* the list-row card */
.post{display:flex;flex-flow:row nowrap;gap:22px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--color-line);}
.post-list--grid .post{border-bottom:1px solid var(--color-line);}
.post:first-child{padding-top:4px;}
.post-thumbnail{flex:0 0 200px;width:200px;margin:0;overflow:hidden;background:var(--color-line);aspect-ratio:3/2;border-radius:var(--radius);}
.post-thumbnail a{display:block;width:100%;height:100%;overflow:hidden;}
.post-thumbnail img,.post-thumbnail .img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.33,1,.68,1);}
.post-thumbnail--placeholder{display:block;width:100%;height:100%;background:var(--color-line-strong);}
.post:hover .post-thumbnail img,.post:focus-within .post-thumbnail img{transform:scale(1.05);}
.post .content{flex:1 1 auto;min-width:0;display:flex;flex-flow:column nowrap;gap:6px;}
.post .vignette{display:block;font-family:var(--font-sans);font-weight:600;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--color-accent-red);}
.post .title{font-family:var(--font-serif);font-weight:700;font-size:20px;line-height:1.26;letter-spacing:-.2px;margin:0;color:var(--color-ink);}
.post .title a{color:inherit;}
.post .title a:hover{color:var(--color-accent-red);}
.post .desc{font-family:var(--font-sans);font-weight:400;font-size:14px;line-height:1.55;color:var(--color-muted);margin:2px 0 0;max-width:60ch;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;}
.post .author{font-family:var(--font-sans);font-weight:600;font-size:12px;color:var(--color-muted);margin-top:4px;}

/* compact variant (sidebar / dense lists): small square thumb */
.post--compact{gap:14px;padding:14px 0;}
.post--compact .post-thumbnail{flex:0 0 88px;width:88px;aspect-ratio:1/1;}
.post--compact .title{font-size:15px;line-height:1.3;}
.post--compact .desc{display:none;}

@media (max-width:520px){
  .post{gap:14px;}
  .post-thumbnail{flex-basis:120px;width:120px;}
  .post .title{font-size:17px;}
  .post .desc{-webkit-line-clamp:2;}
}

/* ==========================================================================
   6. Meta helpers — .meta line with .category chip + .date (astro).
      (Listed last in brief but defined here so .post above can use them.)
   ========================================================================== */
.meta{display:flex;flex-flow:row wrap;align-items:center;gap:10px;margin-top:6px;font-family:var(--font-sans);font-size:12px;font-weight:400;line-height:1;}
.meta>*{display:inline-flex;align-items:center;}
.meta .category{font-weight:700;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--color-accent-red);}
.meta .category:hover{color:var(--color-accent-red-dark);}
.meta .date{color:var(--color-faint);text-transform:uppercase;letter-spacing:.4px;}
.meta .meta__sep{color:var(--color-line-strong);}
/* filled chip variant (use .category--chip when a solid badge is wanted) */
.category--chip{padding:3px 8px;background:var(--color-accent-red);color:#fff!important;border-radius:2px;font-weight:700;}
.category--chip:hover{background:var(--color-accent-red-dark);color:#fff!important;}

/* ==========================================================================
   4. Pagination — astro .pagination (rule + numbered .pagination-nav).
      Works with WP paginate_links() output AND manual prev/next nav.
      (The foundation numbered .pagination .page-numbers stays in place above.)
   ========================================================================== */
.pagination-nav{display:flex;flex-flow:row wrap;align-items:center;justify-content:center;gap:6px;margin:44px 0 0;font-family:var(--font-sans);}
.pagination-nav .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--color-line-strong);font-size:14px;font-weight:600;color:var(--color-ink);transition:var(--transition);}
.pagination-nav a.page-numbers:hover{border-color:var(--color-accent-red);color:var(--color-accent-red);}
.pagination-nav .page-numbers.current{background:var(--color-accent-red);border-color:var(--color-accent-red);color:#fff;}
.pagination-nav .page-numbers.dots{border-color:transparent;}
.pagination-nav .prev,.pagination-nav .next{font-weight:700;}
/* slim astro bar variant: a hairline that fills the row beside the nav */
.pagination-bar{display:flex;flex-flow:row nowrap;align-items:center;gap:16px;margin:40px 0 0;font-family:var(--font-sans);font-size:13px;color:var(--color-muted);}
.pagination-bar::before{content:"";height:1px;background:var(--color-line-strong);flex:1;order:1;}
.pagination-bar .pagination-nav{margin:0;order:2;}
.pagination-bar__count strong{color:var(--color-ink);font-weight:700;}

/* ==========================================================================
   5. Aside / sidebar widget shell — .aside + .aside__heading + list.
      For a real "Δημοφιλή / Τελευταία" widget (real posts, never ads).
   ========================================================================== */
.aside{display:flex;flex-flow:column nowrap;gap:32px;}
@media (min-width:981px){
  .aside.is-sticky{position:sticky;top:calc(var(--header-h) + 20px);}
}
.aside__widget{display:block;}
.aside__heading{font-family:var(--font-serif);font-weight:700;font-size:18px;line-height:1.2;letter-spacing:-.2px;color:var(--color-ink);margin:0 0 14px;padding:0 0 10px;border-bottom:2px solid var(--color-ink);text-transform:uppercase;}
.aside__heading--accent{border-bottom-color:var(--color-accent-red);}
.aside__list{list-style:none;margin:0;padding:0;display:flex;flex-flow:column nowrap;}
.aside__list .post{padding:14px 0;}
.aside__list .post:first-child{padding-top:0;}
.aside__list .post:last-child{border-bottom:0;padding-bottom:0;}
/* ranked variant: big red numerals (Δημοφιλή 1..5) */
.aside__list--ranked{counter-reset:rank;}
.aside__list--ranked .post{counter-increment:rank;gap:14px;}
.aside__list--ranked .post::before{content:counter(rank);flex:0 0 auto;font-family:var(--font-serif);font-weight:700;font-size:26px;line-height:1;color:var(--color-accent-red);min-width:28px;}
.aside__list--ranked .post .title{font-size:15px;line-height:1.3;}