/* ======= 📱 PURE MOBILE STYLES (max-width: 650px) ======= */

  /* === 🌐 Βασικά Reset για Mobile === */
html, body {
  overflow-x: hidden; /* ✅ επιτρεπτό */
}
  html {
    scroll-padding-top: var(--logo-width-mobile); /* offset για sticky header */
  }
 .header-social-wrapper,
 .desktop-search,
 .header-social,
 .thumbnail-overlay,
 .single-post .entry-title,  /* Αφαιρεί τον τίτλο μέσα από τα άρθρα*/
 .main-slider .swiper-slide-active .slide-title .excerpt,
 .slide-title .meta .category,
 .swiper-button-prev,
 .swiper-button-next,
 .separator.desktop-only,
 .primary-article .overlay-title,  /*Απόκρυψη overlay */
 .tertiary-articles .tertiary-article:nth-child(3), /*Αφαιρεί 3ο άρθρο */
 .grid-3posts .article-card:nth-child(n+3) { 
    display: none !important; 
 }

  /* === 🎨 Background του site === */
  .site-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    background-size: contain;
    background-position: center top;
    background-repeat: repeat-y;
    background-attachment: scroll;
    background-image: linear-gradient(var(--header-bg-default), rgba(0, 0, 0, 0.8)),  url('/wp-content/themes/Rovespieros/images/palestine-mob.webp');
  }
  /* ========🔝 STICKY HEADER STRUCTURE  ========== */
 .site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9000;
    height: var(--search-expanded-width);
    background-color: transparent;
    color: #fff;
    box-shadow: none;
    transition: all 0.2s ease;
    display: flex;
    align-items: flex-start;
  }
  .site-header.shrink {
    width: 100%;
    height: 80px;
    background-color: var(--header-bg-shrink);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
  }

  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-content: center;     /* μόνο αν θες το grid κεντραρισμένο */
     width: 100%;
     padding: 0;
     box-sizing: border-box;
     position: relative;
  }
  .site-logo {
    grid-column: 2; 
    justify-self: center;   /*  απόλυτα κεντραρισμένο */
  }
  .site-logo .logo-img {
    display: block;
    width: var(--logo-width-mobile);
    height: auto;
  }
  .site-header.shrink .site-logo .logo-img {
    width: 80px;
    transition: width 0.3s ease;
  }
  .logo-overlay {
     font-size: 0.7rem;
     font-weight: normal;
  }
  .site-header.shrink  .logo-overlay {
     font-size: 0.6rem;
  }
  .header-spacer {
    height: calc(var(--logo-width-mobile) + 5px);
    width: 100%;
  }

/* =============== 🍔 BURGER MENU ===================== */
.menu-toggle {
  position: relative;
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  box-shadow: none;
  outline: none;
}

.menu-toggle span {
  position: absolute;
  left: 10px;
  top: 50%;
  width: 100%;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle span:nth-child(1) {
  transform: translateY(-10px);
}
.menu-toggle span:nth-child(2) {
  transform: translateY(0);
}
.menu-toggle span:nth-child(3) {
  transform: translateY(10px);
}

.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
}
.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
}

 /* ============ 🔎 SEARCH BAR ================= */
 .site-nav.active .mobile-search .interactive-search-form {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
  max-width: 100dvw;
  border-bottom: 1px solid #111;
}
 .mobile-search .interactive-search-form {
    display: none;
 }
 .mobile-search .interactive-search-field {
   width: 100%;
   max-width: var(--search-expanded-width);
   padding: 0.8rem;
   border: 1px solid #111; 
   height: var(--search-size);
   box-sizing: border-box;
   transition: all 0.3s ease;
   pointer-events: auto;
   touch-action: manipulation;
 }
 .mobile-search .interactive-search-submit {
   display: flex;
   width: auto;
   height: auto;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
   padding: 0;
   color: #fff;
   line-height: 1.6;
   cursor: pointer;
 }
 .mobile-search .interactive-search-submit:hover,
 .mobile-search .interactive-search-submit:focus {
   background: var(--color-blue-hover);
 }

 /* ========== 📜 MENU (OVERLAY) =============== */
 .site-nav {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   width: 100dvw;
   height: 100dvh;
   background: var(--header-bg-shrink);
   z-index: 10000;
   overflow-y: auto;
 }
.site-nav.active {
   display: block;
   top: var(--logo-width-mobile);
 }
.main-menu {
   display: flex !important;
   flex-direction: column !important;
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .main-menu li {
   width: 100%;
   text-align: center;
   line-height: 1;
 }

 .main-menu li a {
   display: block;
   padding: 1.2rem 0;
   color: #fff;
   border-bottom: 1px solid rgba(255,255,255,0.1);
   font-size: 1rem;
 }
 /* ===========   🛑 Social Media  ==================== */
 .mobile-social-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
 }

 .mobile-social {
   display: flex;
   flex-direction: row;
   justify-content: center;
   gap: 1.5rem;
   padding: 0.5rem;
   border-top: 1px solid #111;
 }
 .mobile-social .social-link {
   font-size: 1.2rem;
   color: #fff;
   opacity: 0.85;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }

 /* ========  ✅ Περιεχόμενο =============== */
.single-post .entry-content, 
.page .entry-content {
   padding: 0 !important;
}
 /* ========  🛑 Εμφάνιση άρθρων σε GRID =============== */
.post-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 0.5rem;
  padding: 0 1rem;
}
.card-article {
   font-size: 0.9rem;
}
.card-article .card-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
 /* ========  ✅ ΔΙΑΦΟΡΑ ΣΤΟΙΧΕΙΑ =============== */
 .main-content { width: 100%; }
 .category-posts { grid-template-columns: 1fr; }
 .main-slider { height: auto; }
 
 .main-slider .swiper-wrapper,
 .main-slider .swiper-slide {
   height: auto;
 }

 .main-slider .swiper-slide {
   max-height: var(--slide-max-height);
 }

 .slide-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .main-slider .swiper-slide-active .slide-title {
   top: 95%;
   padding: 10px 12px;
 }

 .slide-title .slider-title a {
   color: #fff !important;
   font-size: 1.2rem;
 }

 .thumbs-slider .swiper-slide,
 .thumbs-slider .swiper-slide img {
   height: auto;
   max-height: 50px;
   width: 100%;
   object-fit: cover;
 }

 .main-slider .swiper-slide-active .slide-title .slider-title,
 .main-slider .swiper-slide-active .slide-title .meta {
   opacity: 1 !important;
   transition: none !important;
   transform: none !important;
   transition-delay: 0s;
 }

/* Εικόνες με caption σε άρθρα και σελίδες */
 .wp-caption,
    figure.wp-caption {
    float: none !important;
    clear: both;
 }

/* =========🔁 2-Column-Magaznine ===========*/
 .double-category-block .two-columns {
   grid-template-columns: 1fr !important;
   column-gap: 0;
 }
.primary-article {
  position: relative;
  z-index: 2;
  margin-bottom: 2rem;
}
.primary-article .overlay-content {
  background: none !important;
  position: static;
  padding: 0.5rem 1rem;
}
.primary-article .below-title {
  display: block !important;
  text-align: center;
  font-size: 1.1rem;
  color: #eee;
  font-weight: bold;
}
.post-date-overlay {
   font-size: 0.7rem;
   padding: 2px 4px;
   bottom: 20px;
}
.secondary-articles {
  margin-top: 5rem !important;
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.8rem;
}
.secondary-article .thumb.small-thumb {
   height: var(--secondary-thumb-height);
}
.tertiary-article .title-tertiary {
   font-size: 1rem;
}
.tertiary-article .thumb.xsmall-thumb {
   height: 80px;
}
.category-column {
   margin-top: 1rem !important;
}
.category-title.category-link {
   font-size: 1rem;
   padding: 0.3rem;
}

/* ========== 🧩 Asymmetrical Feature Block ========== */
  .asymmetrical-grid {
    display: block !important;   /* Το grid γίνεται κάθετο απαιτεί important */
  }

  /* 🔷 Πρώτο άρθρο: πλήρες πλάτος με περιθώριο */
  .asym-primary {
    margin-bottom: 2rem;
  }

  .asym-primary .large-thumb img {
    height: 350px !important;
  }

  /* 🔸 Δευτερεύοντα άρθρα: 2x2 grid */
  .asym-secondary-wrapper {
    padding-right: 0 !important;
  }

  .secondary-item .small-thumb img {
    height: 120px;
  }

  .secondary-item .title-side {
    font-size: 1rem;
    line-height: 1.3;
  }

  .asymmetrical-feature-block .category-header {
    padding-right: 0 !important;
  }

  .asymmetrical-feature-block .category-title {
    font-size: 1.1rem;
    padding: 0.3rem 0.8rem;
  }

/* ============ 🌐 Magazine Grid Block========== */
.magazine-grid-block .grid-articles {
  grid-template-columns: repeat(2, 1fr) !important;
}
.magazine-grid-block .article-card .title-center {
   font-weight: 400 !important;
}
 /* ================= 🛑 Footer =================== */

.footer-menu-and-search {
   flex-direction: column;
}
.footer-about-inline-image {
   float: none;
   display: block;
   margin: 0 auto 1rem auto;
}
/* =======📱 Responsive fallback ========== */
.footer-about-inner {
   flex-direction: column;
   align-items: center;
   text-align: center;
}
.footer-grid h2 {
  font-size: 1rem !important;
}
.article-title,
.article-meta {
  text-align: center;
  padding: 0 0.5rem;
}
.archive-title, 
.page-title {
  font-size: 1.2rem;
  padding: 0;
}

  /* ========= 🛑 Scroll to Top ============== */
.scroll-to-top {
   width: 40px !important; 
   right: 0 !important;
  }
.scroll-to-top svg {
   width: 40px !important; 
}
  /* ======= 🛑 Οριζόντια overflow fix ============ */
body.menu-open,
 .header-inner {
   overflow: hidden !important;
   max-width: 100vw !important;
   max-width: 100dvw !important;
 }
 .no-js .menu-toggle {
   display: none;
 }