/*
Theme Name: Blocksy Child
Theme URI: https://messolonghivoice.gr/
Description: Child theme for Blocksy - Messolonghi Voice
Author: Messolonghi Voice Team
Author URI: https://messolonghivoice.gr/
Template: blocksy
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blocksy-child
*/

/* === Custom CSS overrides μπαίνουν από εδώ και κάτω === */


/* ============ MV Ticker «Τελευταία» — ΦΑΣΗ 3, Δρόμος Α (v2) ============ */
.mv-ticker{
  --mv-red:#C8102E;
  --mv-red-text:#FFFFFF;
  --mv-height:44px;
  --mv-speed:40s;
  --mv-bite:30px;          /* βάθος της «δαγκωματιάς» της ημισελήνου */
  position:relative; display:flex; align-items:stretch;
  width:100%; max-width:1290px; margin:0 auto;
  height:var(--mv-height); overflow:hidden; font-family:inherit;
}
.mv-ticker__label{
  position:relative; z-index:2; flex:0 0 auto;
  display:flex; align-items:center;
  background:var(--mv-red); color:var(--mv-red-text);
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
  padding:0 calc(var(--mv-bite) + 10px) 0 16px; white-space:nowrap;
  /* Κοίλη (concave) δεξιά άκρη: αφαιρούμε έναν κύκλο με radial-gradient mask */
  -webkit-mask:radial-gradient(circle var(--mv-bite) at calc(100% + 2px) 50%, transparent calc(99% - 1.5px), #000 calc(100% + 0.5px));
  mask:radial-gradient(circle var(--mv-bite) at calc(100% + 2px) 50%, transparent calc(99% - 1.5px), #000 calc(100% + 0.5px));
}
.mv-ticker__viewport{
  position:relative; z-index:1; flex:1 1 auto; overflow:hidden;
  margin-left:calc(var(--mv-bite) * -1); padding-left:var(--mv-bite);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 26px);
  mask-image:linear-gradient(to right, transparent 0, #000 26px);
}
.mv-ticker__track{
  display:flex; align-items:center; height:100%; width:max-content;
  animation:mv-ticker-scroll var(--mv-speed) linear infinite;
}
.mv-ticker:hover .mv-ticker__track,
.mv-ticker.is-paused .mv-ticker__track{ animation-play-state:paused; }
.mv-ticker__item{ display:inline-flex; align-items:center; white-space:nowrap; padding:0 4px; }
.mv-ticker__item::before{ content:"|"; color:var(--mv-red); margin:0 16px; font-weight:400; opacity:.6; }
.mv-ticker__item a{
  color:inherit; text-decoration:none; font-size:14px; font-weight:600;
  line-height:var(--mv-height);
}
.mv-ticker__item a:hover{ color:var(--mv-red); }
@keyframes mv-ticker-scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion:reduce){
  .mv-ticker__track{ animation:none; }
  .mv-ticker__viewport{ overflow-x:auto; }
}

/* ============================================================
   MV — Επικεφαλίδα ενότητας: κόκκινη μπάρα accent
   Κλάση: mv-section-title  (στα H2 term_title των ενοτήτων)
   ============================================================ */
.mv-section-title {
  border-left: 5px solid #C8102E;   /* η κόκκινη μπάρα */
  padding-left: 14px;
  margin: 30px 0 18px;
  line-height: 1.15;
}
.mv-section-title a {
  color: inherit;                   /* dark-mode-proof: ακολουθεί το θέμα */
  text-decoration: none;
}
.mv-section-title a:hover { color: #C8102E; }

/* ============================================================
   MV — Category pill
   Κλάση: mv-pill  (στο Dynamic Data → Terms μέσα στην κάρτα)
   ============================================================ */
.mv-pill a {
  display: inline-block;            /* μαζεύεται στο κείμενο + στοιχίζει 2+ pills */
  margin: 0 4px 4px 0;
  padding: 3px 9px;
  background: #C8102E;              /* hardcoded → dark-mode-proof, όπως ο ticker */
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .3px;
  text-decoration: none;
  border-radius: 3px;
}
.mv-pill a:hover { background: #a30c20; }


/* ===== ΦΑΣΗ 6 — DARK MODE (ουδέτερη παλέτα #16161A) ===== */
html[data-theme="dark"]{
  color-scheme: dark;
  --theme-palette-color-7:#16161A;
  --theme-palette-color-8:#202024;
  --theme-palette-color-4:#E6E6E6;
  --theme-palette-color-3:#F2F2F3;
  --theme-palette-color-5:#9CA3AF;
  --theme-palette-color-6:#2A2C33;
  --theme-text-color:#E6E6E6;
  --theme-headings-color:#F2F2F3;
  --theme-border-color:#2A2C33;
  background-color:#16161A;
}
html[data-theme="dark"] body{ background-color:#16161A; color:#E6E6E6; }

/* Τίτλοι καρτών/άρθρων -> off-white (ΟΧΙ κόκκινο) */
html[data-theme="dark"] .entry-title a,
html[data-theme="dark"] h2 a,
html[data-theme="dark"] h3 a{ color:var(--theme-headings-color); }
html[data-theme="dark"] .entry-title a:hover,
html[data-theme="dark"] h2 a:hover,
html[data-theme="dark"] h3 a:hover{ color:#FF6B6B; }

/* Dropdown υπο-μενού -> off-white (έμενε μαύρο από το Customizer) */
html[data-theme="dark"] .sub-menu a,
html[data-theme="dark"] .ct-menu-dropdown a{ color:#E6E6E6; }
html[data-theme="dark"] .sub-menu a:hover,
html[data-theme="dark"] .ct-menu-dropdown a:hover{ color:#FF6B6B; }

/* Μαλακό κόκκινο ΜΟΝΟ στα links μέσα στο σώμα ΑΡΘΡΟΥ (όχι αρχική/λίστες) */
html[data-theme="dark"] .single .entry-content a:not(.wp-block-button__link):not(.ct-button):not(.mv-pill){ color:#FF6B6B; }
html[data-theme="dark"] .single .entry-content a:not(.mv-pill):hover{ color:#FF8787; }


/* ===== ΦΑΣΗ 6 — Karpos bar + logo dark swap ===== */
.mv-karpos-bar{ width:100%; padding:10px 16px; box-sizing:border-box; text-align:center; }
.mv-karpos-link{ display:inline-block; width:100%; max-width:600px; line-height:0; }
.mv-karpos-img{
  display:block; width:100%;
  aspect-ratio:2560 / 1035;
  background:url(https://messolonghivoice.gr/wp-content/uploads/2026/06/Karpos-ad-light-mode-resized.png) center/contain no-repeat;
}
html[data-theme="dark"] .mv-karpos-img{
  background-image:url(https://messolonghivoice.gr/wp-content/uploads/2026/06/Karpos-ad-dark-mode-resized.png);
}

/* Logo: light = Customizer img· dark = λευκό logo ως background (img μένει για διαστάσεις -> 0 CLS) */
html[data-theme="dark"] .ct-logo-container,
html[data-theme="dark"] .site-logo-container{
  background:url(https://messolonghivoice.gr/wp-content/uploads/2026/06/Messolonghi-Voice-Dark-Mode-resized.png) left center/contain no-repeat;
}
html[data-theme="dark"] .ct-logo-container img,
html[data-theme="dark"] .site-logo-container img{ visibility:hidden; }


/* ===== ΦΑΣΗ 6 — Header dark-mode switch (stylish, sun/moon SVG) ===== */
.mv-theme-switch{ display:inline-flex; align-items:center; vertical-align:middle; margin:0 10px; }
.mv-theme-switch button{
  position:relative; width:64px; height:32px; border-radius:32px; cursor:pointer; padding:0;
  border:1px solid var(--theme-border-color,#E5E7EB);
  background:#dfe3ea; transition:background .25s; flex:0 0 auto;
}
.mv-theme-switch button .mv-knob{
  position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; transition:transform .25s;
}
.mv-theme-switch .mv-knob svg{ width:16px; height:16px; display:block; }
.mv-theme-switch .mv-ico-moon{ display:none; }
.mv-theme-switch .mv-ico-sun{ color:#F5A623; }
html[data-theme="dark"] .mv-theme-switch button{ background:#3a3d44; }
html[data-theme="dark"] .mv-theme-switch button .mv-knob{ transform:translateX(32px); background:#1d1f26; }
html[data-theme="dark"] .mv-theme-switch .mv-ico-sun{ display:none; }
html[data-theme="dark"] .mv-theme-switch .mv-ico-moon{ display:block; color:#9DB4FF; }

/* ===========================================================
   MV AD SLOT - reserved fixed-size ad container (PHASE 7)
   Staging: grey placeholder. Live: replace inner HTML with the
   AdSense <ins> snippet and drop the is-placeholder class.
   Container keeps the reserved size -> zero CLS.
   Desktop 336x280 / Mobile 300x250.
   =========================================================== */
.mv-ad-slot{
    display:flex;
    align-items:center;
    justify-content:center;
    width:336px;
    height:280px;
    max-width:100%;
    margin:2.5rem auto;
    box-sizing:border-box;
}
.mv-ad-slot.is-placeholder{
    background:#f0f0f0;
    border:1px dashed #c9c9c9;
    color:#9aa0a6;
    font-size:13px;
    letter-spacing:.04em;
    text-transform:uppercase;
}
@media (max-width:782px){
    .mv-ad-slot{
        width:300px;
        height:250px;
    }
}

/* ===========================================================
   Newsroom scroll-list (.my-scroll-list) - homepage "Arxiki v2"
   Moved from Foxiz Additional CSS -> child theme (PHASE 8).
   Brand red #C8102E (matches ticker/pill, dark-mode-proof).
   Cross-browser scrollbar (Firefox + WebKit).
   =========================================================== */
.my-scroll-list{
    max-height:400px;          /* adjust if you want a taller box */
    overflow-y:auto;
    overflow-x:hidden;
    padding-right:10px;        /* air so text doesn't touch the bar */
    scrollbar-width:thin;                      /* Firefox + standard */
    scrollbar-color:#C8102E transparent;       /* thumb / track */
}
.my-scroll-list::-webkit-scrollbar{            /* Chrome, Edge, Safari */
    width:6px;
}
.my-scroll-list::-webkit-scrollbar-track{
    background:transparent;
}
.my-scroll-list::-webkit-scrollbar-thumb{
    background:#C8102E;
    border-radius:10px;
}
.my-scroll-list::-webkit-scrollbar-thumb:hover{
    background:#a30c20;
}

/* ===========================================================
   Self-hosted Roboto Slab 700 (PHASE 8 - font localization).
   Body stays System Default. Only headings use this.
   Same family name "Roboto Slab" -> zero visual change,
   kills the Google Fonts request (GDPR-safe).
   =========================================================== */
@font-face{
    font-family:'Roboto Slab';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url('fonts/roboto-slab-v36-greek_latin_latin-ext-700.woff2') format('woff2');
}
h1, h2, h3, h4, h5, h6,
.entry-title{
    font-family:'Roboto Slab', serif;
}

/* ===========================================================
   Hero slider pill fix (PHASE 7). Pull the category pill OUT of
   the cover's content flow (absolute) so slide height no longer
   depends on it -> bottom edge stops flickering on slide change.
   Pill stays a red badge, moves to top-left corner. Pill style
   itself untouched.
   =========================================================== */
.ct-query-template.is-layout-slider .wp-block-cover{
    position:relative;
}
.ct-query-template.is-layout-slider .wp-block-cover__inner-container{
    position:static;
}
.ct-query-template.is-layout-slider .mv-pill{
    position:absolute;
    top:16px;
    left:16px;
    bottom:auto;
    right:auto;
    margin:0;
    padding:0 !important;
    z-index:2;
}

/* Visually-hidden H1 (SEO/accessibility) — readable by Google & screen readers */
.mv-sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}