/*
Theme Name:  Maraki Beladaki
Theme URI:   https://marakibeladaki.gr
Author:      Ελένη Μαράκη-Μπελαδάκη
Author URI:  https://marakibeladaki.gr
Description: Επίσημο θέμα της Αντιπεριφερειάρχη Παιδείας Κρήτης
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: maraki
Tags:        custom-header, custom-menu, featured-images, responsive-layout
*/

/* =====================================================
   RESET & VARIABLES
   ===================================================== */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }

:root {
  --navy:       #57658f;
  --navy-mid:   #57658f;
  --navy-light: #57658f;
  --accent:     #03B9C6;
  --accent-light:#05d4e3;
  --cream:      #f9f6f0;
  --cream-dark: #eee8da;
  --white:      #ffffff;
  --text:       #2a2a2a;
  --muted:      #686868;
  --border:     #ddd3bb;
  --shadow-sm:  0 2px 12px rgba(87,101,143,.07);
  --shadow-md:  0 8px 32px rgba(87,101,143,.11);
  --shadow-lg:  0 20px 60px rgba(87,101,143,.16);
  --transition: .28s cubic-bezier(.4,0,.2,1);
}

body {
  font-family:'Inter', system-ui, sans-serif;
  background:var(--cream);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img { display:block; max-width:100%; height:auto; }
a   { text-decoration:none; color:inherit; }

/* =====================================================
   UTILITY
   ===================================================== */
.label {
  font-family:'Inter', system-ui, sans-serif;
  font-size:.68rem; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:.45rem;
}
.label--white { color:var(--accent-light); }

.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.75rem 1.8rem; transition:var(--transition); cursor:pointer; border:none;
}
.btn--accent      { background:var(--accent); color:#fff; }
.btn--accent:hover{ background:var(--accent-light); transform:translateY(-2px); box-shadow:0 8px 24px rgba(3,185,198,.35); }
.btn--yt {
  background:rgba(255,255,255,.12);
  color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.20);
  border-radius:2px;
}
.btn--yt:hover { background:rgba(255,255,255,.22); color:#fff; transform:translateY(-1px); }
.btn--outline { border:1.5px solid var(--navy); color:var(--navy); background:transparent; }
.btn--outline:hover { background:var(--navy); color:#fff; }

.arrow-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); border-bottom:1.5px solid var(--accent); padding-bottom:2px;
  transition:var(--transition);
}
.arrow-link::after { content:'→'; transition:transform var(--transition); }
.arrow-link:hover  { color:var(--accent); }
.arrow-link:hover::after { transform:translateX(5px); }

/* =====================================================
   HAMBURGER
   ===================================================== */
.hamburger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:40px; height:40px; cursor:pointer;
  background:none; border:none; padding:4px;
}
.hamburger span {
  display:block; height:2px; background:var(--navy);
  border-radius:2px; transition:var(--transition); transform-origin:center;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position:fixed;
  top:40px; left:0; right:0; z-index:200;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(87,101,143,.08);
  border-top:1px solid rgba(255,255,255,.25);
  transition:background var(--transition), top var(--transition), box-shadow var(--transition);
}
.site-header.scrolled {
  top:0;
  background:rgba(255,255,255,.97);
  box-shadow:0 2px 16px rgba(0,0,0,.10);
}

.header-inner {
  max-width:1320px; margin:0 auto;
  padding:0 2.2rem;
  display:flex; align-items:center; justify-content:flex-start; gap:3rem;
  height:88px;
}
.site-logo { padding:10px 0; }
.site-logo img { height:52px; width:auto; }
.site-nav { display:flex; align-items:center; margin-left:auto; }
.site-nav a {
  font-family:'Inter', system-ui, sans-serif;
  font-size:1rem; font-weight:600; letter-spacing:.06em;
  color:var(--navy); padding:.5rem 1.3rem;
  border-bottom:2px solid transparent; transition:var(--transition);
}
.site-nav a:hover,
.site-nav a.current-menu-item,
.site-nav a.active { border-bottom-color:var(--navy); }

/* Mobile overlay nav */
.mobile-nav {
  display:none; position:fixed;
  inset:112px 0 0 0; z-index:190;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(16px);
  flex-direction:column; align-items:center; justify-content:center; gap:2rem;
  padding:2rem;
}
.mobile-nav.open { display:flex; }
.mobile-nav a {
  font-family:'Inter', system-ui, sans-serif;
  font-size:1.2rem; font-weight:600; letter-spacing:.1em;
  color:var(--navy); text-transform:uppercase;
  border-bottom:2px solid transparent; padding-bottom:4px;
  transition:var(--transition);
}
.mobile-nav a:hover { border-bottom-color:var(--accent); color:var(--accent); }

/* =====================================================
   HERO — VIDEO BACKGROUND
   ===================================================== */
.hero {
  position:relative; width:100%;
  height:100vh; min-height:520px;
  overflow:hidden; background:var(--navy);
}
.hero-video-wrap {
  position:absolute; inset:0;
  pointer-events:none; overflow:hidden;
}
.hero-video-wrap iframe,
.hero-video-wrap video {
  position:absolute;
  top:50%; left:50%;
  width:max(100vw, 177.78vh);
  height:max(100vh, 56.25vw);
  transform:translate(-50%,-50%);
  border:none; pointer-events:none;
  object-fit:cover;
}
.hero-overlay {
  position:absolute; inset:0; z-index:1;
}
.hero-sepia { display:none; }

/* 3-panel institution bar */
.hero-bar {
  position:absolute; bottom:0; left:0; right:0; z-index:10;
  display:grid; grid-template-columns:repeat(3,1fr);
}
.inst-panel {
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px; padding:18px 24px;
  background:rgba(85,100,145,.72);
  backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.18);
  border-right:1px solid rgba(255,255,255,.12);
  text-align:center; min-height:96px;
  transition:background var(--transition);
  animation:slideUp .5s ease both;
}
.inst-panel:nth-child(1) { animation-delay:.08s; }
.inst-panel:nth-child(2) { animation-delay:.18s; border-left:1px solid rgba(255,255,255,.12); }
.inst-panel:nth-child(3) { animation-delay:.28s; border-right:none; }
.inst-panel:hover { background:rgba(85,100,145,.92); }
.inst-panel img {
  height:68px; width:auto; object-fit:contain;
}
.inst-panel-label {
  font-family:'Inter', system-ui, sans-serif;
  font-size:.64rem; font-weight:500; letter-spacing:.06em;
  color:rgba(255,255,255,.9); text-transform:uppercase; line-height:1.5;
}

/* =====================================================
   SECTION SHELL
   ===================================================== */
.section { padding:72px 1.5rem; }
.section-inner { max-width:1240px; margin:0 auto; }

.section-head {
  display:flex; align-items:flex-end;
  justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-bottom:2.8rem;
  padding-bottom:1.2rem;
  border-bottom:1px solid var(--border);
}
.section-head h2 {
  font-family:'Lora', Georgia, serif;
  font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700;
  color:var(--navy); line-height:1.15;
}

/* =====================================================
   POSTS
   ===================================================== */
.featured-card {
  display:grid; grid-template-columns:1fr 1fr;
  min-height:400px; margin-bottom:2rem;
  background:var(--white);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:box-shadow var(--transition);
}
.featured-card:hover { box-shadow:var(--shadow-lg); }

.featured-card__img {
  position:relative; overflow:hidden;
  background:var(--cream-dark); min-height:280px;
}
.featured-card__img img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s ease;
}
.featured-card:hover .featured-card__img img { transform:scale(1.05); }

.featured-card__badge {
  position:absolute; top:18px; left:18px; z-index:2;
  background:var(--accent); color:#fff;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.6rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  padding:5px 13px;
}
.featured-card__body {
  padding:2.4rem 2.6rem;
  display:flex; flex-direction:column; justify-content:center; gap:.75rem;
}

.post-meta {
  display:flex; align-items:center; gap:10px;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.66rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.post-meta__cat { color:var(--accent); font-weight:700; }
.post-meta__dot { width:3px; height:3px; background:var(--border); border-radius:50%; flex-shrink:0; }

.featured-card__title {
  font-family:'Lora', Georgia, serif;
  font-size:clamp(1.25rem,2.2vw,1.65rem); font-weight:700;
  color:var(--navy); line-height:1.25;
}
.featured-card__excerpt {
  font-size:.94rem; color:var(--muted); line-height:1.82;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

.posts-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

.post-card {
  background:var(--white);
  border:1px solid var(--border);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.post-card:hover {
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:rgba(3,185,198,.55);
}
.post-card__thumb {
  position:relative; aspect-ratio:16/10;
  overflow:hidden; background:var(--cream-dark);
}
.post-card__thumb img {
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease;
}
.post-card:hover .post-card__thumb img { transform:scale(1.07); }
.post-card__overlay {
  position:absolute; inset:0;
  background:rgba(15,22,52,.55);
  opacity:0; transition:opacity var(--transition);
}
.post-card:hover .post-card__overlay { opacity:1; }
.post-card__num {
  position:absolute; bottom:10px; right:14px;
  font-family:'Lora', Georgia, serif;
  font-size:3rem; font-weight:900; line-height:1;
  color:rgba(255,255,255,.12); transition:color var(--transition);
}
.post-card:hover .post-card__num { color:rgba(255,255,255,.28); }
.post-card__cat-pill {
  position:absolute; top:12px; left:14px; z-index:2;
  background:var(--accent); color:#fff;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.58rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 10px;
  opacity:0; transform:translateY(-6px);
  transition:opacity var(--transition), transform var(--transition);
}
.post-card:hover .post-card__cat-pill { opacity:1; transform:translateY(0); }
.post-card__body {
  padding:1.35rem 1.4rem 1.55rem;
  flex:1; display:flex; flex-direction:column; gap:.5rem;
}
.post-card__meta {
  display:flex; align-items:center; gap:8px;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.62rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}
.post-card__tag {
  background:var(--cream-dark); color:var(--navy);
  font-weight:700; padding:2px 8px; font-size:.6rem; letter-spacing:.1em;
}
.post-card__title {
  font-family:'Lora', Georgia, serif;
  font-size:1.05rem; font-weight:700;
  color:var(--navy); line-height:1.35; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card__excerpt {
  font-size:.83rem; color:var(--muted); line-height:1.78;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card__footer {
  display:flex; align-items:center; justify-content:space-between;
  padding-top:.85rem; margin-top:auto;
  border-top:1px solid var(--cream-dark);
}
.post-card__date {
  font-family:'Inter', system-ui, sans-serif;
  font-size:.62rem; color:var(--muted);
}
.post-card__read {
  font-family:'Inter', system-ui, sans-serif;
  font-size:.64rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:4px;
}
.post-card__read::after { content:'→'; font-size:.8em; }

/* =====================================================
   YOUTUBE SECTION
   ===================================================== */
.yt-section {
  background:var(--navy);
  position:relative; overflow:hidden;
}
.yt-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--accent);
}
.yt-head {
  display:flex; align-items:flex-end;
  justify-content:space-between; flex-wrap:wrap; gap:1.2rem;
  margin-bottom:2.5rem;
}
.yt-head h2 {
  font-family:'Lora', Georgia, serif;
  font-size:clamp(1.6rem,3vw,2.1rem); font-weight:700; color:var(--white);
}
.yt-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
.yt-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  display:flex; flex-direction:column; overflow:hidden;
  transition:background var(--transition), border-color var(--transition), transform var(--transition);
}
.yt-card:hover {
  background:rgba(255,255,255,.09);
  border-color:rgba(3,185,198,.45);
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.yt-card__thumb {
  position:relative; aspect-ratio:16/9;
  background:var(--navy-mid); overflow:hidden;
}
.yt-card__thumb iframe {
  position:absolute; inset:0; width:100%; height:100%; border:none;
}
.yt-card__info {
  padding:1rem 1.2rem 1.3rem;
  flex:1; display:flex; flex-direction:column; gap:.35rem;
}
.yt-card__meta {
  font-family:'Inter', system-ui, sans-serif;
  font-size:.62rem; letter-spacing:.07em; text-transform:uppercase;
  color:rgba(255,255,255,.35);
  display:flex; align-items:center; gap:6px;
}
.yt-card__title {
  font-family:'Lora', Georgia, serif;
  font-size:.95rem; font-weight:700;
  color:var(--white); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* =====================================================
   ABOUT STRIP
   ===================================================== */
.about-section {
  background:var(--cream-dark);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.about-inner {
  display:grid; grid-template-columns:1fr 2fr;
  gap:64px; align-items:center;
}
.roles-stack { display:flex; flex-direction:column; gap:12px; }
.role-item {
  display:flex; align-items:flex-start;
  padding:13px 17px;
  background:var(--white);
  border-left:3px solid var(--accent);
  box-shadow:var(--shadow-sm);
}
.role-text { font-size:.87rem; color:var(--text); line-height:1.5; }
.role-text strong {
  display:block;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.68rem; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--navy); margin-bottom:2px;
}
.about-copy h2 {
  font-family:'Lora', Georgia, serif;
  font-size:clamp(1.5rem,2.5vw,1.9rem); font-weight:700;
  color:var(--navy); line-height:1.25; margin-bottom:.9rem;
}
.about-copy p {
  font-size:.94rem; color:var(--muted);
  line-height:1.88; margin-bottom:1.5rem;
}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer {
  background:var(--navy);
  padding:56px 1.5rem 28px;
}
.footer-inner {
  max-width:1240px; margin:0 auto;
  display:grid; grid-template-columns:2.2fr 1fr 1fr;
  gap:56px;
  padding-bottom:2.2rem;
  border-bottom:1px solid rgba(255,255,255,.15);
  margin-bottom:2rem;
}
.footer-logo img {
  height:40px; width:auto; margin-bottom:1rem;
}
.footer-desc { font-size:.83rem; line-height:1.85; color:#fff; }
.footer-heading {
  font-family:'Inter', system-ui, sans-serif;
  font-size:.66rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:#fff; margin-bottom:1rem;
}
.footer-links { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-links a {
  color:#fff; font-size:.85rem; transition:color var(--transition);
}
.footer-links a:hover { color:var(--accent); }
.footer-bottom {
  max-width:1240px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem;
  font-family:'Inter', system-ui, sans-serif;
  font-size:.66rem; color:#fff; letter-spacing:.05em;
}
.footer-bottom a { color:var(--accent); }

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes slideUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* =====================================================
   RESPONSIVE — TABLET
   ===================================================== */
@media (max-width:1024px) {
  .posts-grid    { grid-template-columns:repeat(2,1fr); }
  .yt-grid       { grid-template-columns:repeat(2,1fr); }
  .yt-head       { flex-direction:column; align-items:flex-start; }
  .about-inner   { gap:40px; }
}

/* =====================================================
   RESPONSIVE — MOBILE
   ===================================================== */
@media (max-width:768px) {
  .site-nav  { display:none; }
  .hamburger { display:flex; }

  .hero { height:75vh; min-height:450px; }
  .hero-bar { grid-template-columns:1fr; }
  .inst-panel {
    flex-direction:row; gap:14px;
    padding:12px 20px; min-height:auto;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,.1);
    justify-content:flex-start; text-align:left;
  }
  .inst-panel:last-child { border-bottom:none; }
  .inst-panel img { height:48px; }

  .featured-card  { grid-template-columns:1fr; }
  .featured-card__img { min-height:220px; aspect-ratio:16/9; }
  .featured-card__body { padding:1.6rem 1.4rem; }
  .posts-grid { grid-template-columns:1fr; }

  .about-inner { grid-template-columns:1fr; gap:2.2rem; }

  .footer-inner  { grid-template-columns:1fr; gap:2.2rem; }
  .footer-bottom { flex-direction:column; align-items:flex-start; }

  .section { padding:52px 1.2rem; }
}

/* =====================================================
   RESPONSIVE — SMALL MOBILE
   ===================================================== */
@media (max-width:480px) {
  .hero { height:65vh; }
  .header-inner { padding:0 1.2rem; }
  .site-logo img { height:40px; }
  .section-head { flex-direction:column; align-items:flex-start; }
  .yt-grid { grid-template-columns:1fr; }
  .yt-head { flex-direction:column; align-items:flex-start; }
}