/* =============================
   styles.css — CLEANED + LOCKED (AD BASELINE)
   Desktop navbar (LG+) + Offcanvas mobile menu + Titles + Hero swap
   ============================= */

/* =============================
   GLOBAL
============================= */

html, body {
  overflow-x: hidden;
}

/* Remove underline from all links by default */

a {
  text-decoration: none !important;
}

/* Utility underline class (optional) */

a.underline {
  text-decoration: underline !important;
}

/* =============================
   NAVBAR — WIDTH / ALIGNMENT
   Goal: full-width bar, centered content up to 1100px
============================= */

/* Constrain inner container */

.navbar .container, .navbar .container-fluid .container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Bootstrap navbar side padding via CSS vars */

.navbar {
  --bs-navbar-padding-x: 0;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Link colors */

.navbar .nav-link, .navbar .dropdown-toggle {
  color: #62483D !important;
  transition: color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.navbar .nav-link:hover, .navbar .dropdown-toggle:hover {
  color: #FAC16A !important;
}

/* Kill borders/lines/focus outlines on nav links */

.navbar-nav .nav-link, .navbar-nav .dropdown-toggle {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.navbar-nav .nav-link:focus, .navbar-nav .nav-link:active, .navbar-nav .nav-link:focus-visible, .navbar-nav .dropdown-toggle:focus, .navbar-nav .dropdown-toggle:active, .navbar-nav .dropdown-toggle:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Optional legacy class (if used anywhere) */

.lang-icon {
  width: 40px;
  margin-right: 0.5rem;
  cursor: pointer;
  opacity: 0.5;
}

/* =============================
   DROPDOWN CARET RULES (Desktop)
   Show arrows ONLY for items with submenu
============================= */

.navbar-nav .dropdown-toggle::after {
  display: none !important;
}

.navbar-nav .dropdown.has-submenu > .dropdown-toggle::after {
  display: inline-block !important;
  margin-left: 0.35rem;
}

/* =============================
   DESKTOP (>= 992px) — Hover dropdown
============================= */

@media (min-width: 992px) {
  .navbar .dropdown-menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center;
    background-color: #fff !important;
    border: 1px solid #ddd !important;
    padding: 0.5rem 0 !important;
    min-width: 200px;
    margin-top: 0 !important;
    display: none !important;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block !important;
    animation: fadeInDown 0.25s ease-in-out forwards;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown-item {
    color: #62483D !important;
    background-color: transparent !important;
    transition: all 0.25s ease;
    padding: 0.25rem 1rem;
    white-space: nowrap;
  }
}

@media (min-width: 992px) {
  .navbar .dropdown-item:hover {
    color: #FAC16A !important;
    background-color: #f0f0f0 !important;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* =============================
   DESKTOP FIXES (locked)
============================= */

@media (min-width: 992px) {
  .navbar .nav-inner.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: space-between !important;
  }
}

@media (min-width: 992px) {
  .navbar #navcol-2 {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 992px) {
  .navbar #navcol-2 > .navbar-nav {
    margin-left: auto !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
    column-gap: 10px;
  }
}

@media (min-width: 992px) {
  .navbar > .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Hide offcanvas trigger on desktop */

@media (min-width: 992px) {
  .navbar .offcanvas-trigger {
    display: none !important;
  }
}

/* Keep the bottom rule tight under the navbar (if you use ::after elsewhere) */

.navbar::after {
  margin-top: 0 !important;
}

/* =============================
   MD & κάτω — κόφτης desktop collapse
============================= */

@media (max-width: 991.98px) {
  #navcol-2 {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  #navcol-2 .dropdown-menu {
    display: none !important;
  }
}

/* =============================
   OFFCANVAS / MOBILE MENU (final, scoped)
   Uses: .mobile-menu on the offcanvas (ID is mobileMenu)
============================= */

/* Background transparency without fading text */

.mobile-menu.offcanvas {
  background-color: rgba(249, 241, 231, 0.92) !important;
}

/* Font + base colors */

.mobile-menu {
  font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #F8F0E5;
  color: #5D493C;
}

/* Top-level (accordion headers + top/bottom standalone list items) */

.mobile-menu .accordion-button, .mobile-menu > .offcanvas-body > .list-group > .list-group-item {
  font-size: 18.8px;
  line-height: 25.2px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #5f4a3d;
}

/* Submenu items */

.mobile-menu .accordion .list-group .list-group-item {
  font-size: 16.4px;
  line-height: 23.0px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #7a6658;
}

/* Accent for open section title (z2 feel) */

.mobile-menu .accordion-button:not(.collapsed) {
  color: #D0A45A;
}

/* One line + ellipsis */

.mobile-menu .list-group-item, .mobile-menu .accordion-button {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* FINAL padding pass */

.mobile-menu .offcanvas-body {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.mobile-menu .accordion-button, .mobile-menu > .offcanvas-body > .list-group > .list-group-item {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Reserve space for the accordion caret (prevents early truncation) */

.mobile-menu .accordion-button {
  padding-right: 42px !important;
}

/* Remove inner accordion-body padding so list aligns cleanly */

.mobile-menu .accordion-body {
  padding: 0 !important;
}

/* Submenu indent */

.mobile-menu .accordion .list-group-item {
  padding-left: 24px !important;
  padding-right: 8px !important;
}

.mobile-menu .accordion .list-group {
  margin-left: 0 !important;
}

/* Touch feedback (locked) */

.mobile-menu .accordion-button:active, .mobile-menu > .offcanvas-body > .list-group > .list-group-item:active {
  background-color: rgba(95, 74, 61, 0.08) !important;
}

.mobile-menu .accordion .list-group-item:active {
  background-color: rgba(95, 74, 61, 0.06) !important;
}

/* No animation — paper feel */

.mobile-menu .accordion-button, .mobile-menu .list-group-item {
  transition: none !important;
}

/* Hover only for mouse devices */

@media (hover: hover) and (pointer: fine) {
  .mobile-menu .accordion .list-group-item:hover {
    background-color: rgba(95, 74, 61, 0.05) !important;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mobile-menu .accordion-button:hover {
    background-color: rgba(95, 74, 61, 0.04) !important;
  }
}

/* Optional: kill focus only where you used the class */

.no-focus-outline:focus, .no-focus-outline:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Hide Offcanvas demo title (mobile menu) */

.mobile-menu .offcanvas-title {
  display: none !important;
}

/* =============================
   HAMBURGER BUTTON (offcanvas trigger)
============================= */

.offcanvas-trigger.btn {
  background-color: rgba(249, 241, 231, 0.92) !important;
  border: 1px solid rgba(95, 74, 61, 0.35) !important;
  color: #5f4a3d !important;
}

.offcanvas-trigger.btn:focus, .offcanvas-trigger.btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.offcanvas-trigger.btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(95, 74, 61, 0.45) !important;
}

/* =============================
   LANGUAGE SWITCHER — FINAL (locked)
   Requires: Navbar has lang-page-gr / lang-page-en
             Links have lang-gr / lang-en
============================= */

.navbar a.lang-gr, .navbar a.lang-en {
  opacity: 0.65;
  text-decoration: none !important;
}

.navbar.lang-page-gr a.lang-gr, .navbar.lang-page-en a.lang-en {
  opacity: 1;
  pointer-events: none;
  cursor: default;
  text-decoration: underline !important;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

@media (hover: hover) and (pointer: fine) {
  .navbar a.lang-gr:hover, .navbar a.lang-en:hover {
    opacity: 0.85;
  }
}

/* =============================
   HERO IMAGE SWAP (CSS ONLY)
============================= */

.hero-desktop {
  display: block;
}

.hero-mobile {
  display: none;
}

@media (max-width: 991.98px) {
  .hero-desktop {
    display: none;
  }
}

@media (max-width: 991.98px) {
  .hero-mobile {
    display: block;
  }
}

/* =============================
   TITLE LOCKS (Τα Κείμενα + ⚜ + υπότιτλος)
============================= */

@media (min-width: 992px) {
  .title-k {
    font-size: 40px !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 992px) {
  .title-k-orn {
    font-size: 28px !important;
    line-height: 1 !important;
    margin-left: 0.2em !important;
    opacity: 0.85 !important;
  }
}

@media (min-width: 992px) {
  .title-k-sub {
    font-size: 20px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 991.98px) {
  .title-k {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
}

@media (max-width: 991.98px) {
  .title-k-orn {
    font-size: 22px !important;
    line-height: 1 !important;
    margin-left: 0.2em !important;
    opacity: 0.85 !important;
  }
}

@media (max-width: 991.98px) {
  .title-k-sub {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
}

/* MOBILE MENU — THIN TOP-LEVEL SEPARATORS (SAFE) */

.mobile-menu .accordion-item, .mobile-menu > .offcanvas-body > .list-group > .list-group-item {
  border-bottom: 1px solid rgba(95, 74, 61, 0.10) !important;
}

/* =========================================================
   BUTTON SYSTEM — MAIN (DESKTOP) — FINAL (SIMPLE, NO JUMP)
   - Fixed size: 234w × 29h (desktop reference)
   - Always centered
   - Border width stays 4px (NO hover thickness change)
   - Radius: 5px
   - Stable vertical centering via flex
   - Link-safe (no underline, no visited color)
   - Text label remains free per button
   - SWAP applied: BACK COLLECTION ⇄ NEXT PERIOD
   ========================================================= */

/* Base */

a.btn-main, button.btn-main, .btn-main {
  box-sizing: border-box !important;
  width: 240px !important;
  height: 35px !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-style: solid !important;
  border-width: 4px !important;
  border-radius: 5px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* No underline ever */

a.btn-main:hover, a.btn-main:focus, a.btn-main:active, a.btn-main:visited, button.btn-main:hover, button.btn-main:focus, button.btn-main:active {
  text-decoration: none !important;
}

/* ---------- Variants ---------- */

/* BACK HOMEPAGE */

a.btn-main.btn-back-homepage, button.btn-main.btn-back-homepage, .btn-main.btn-back-homepage {
  background-color: #7C0E0E !important;
  border-color: #8E6C57 !important;
  color: #FDF6EB !important;
}

a.btn-main.btn-back-homepage:hover, button.btn-main.btn-back-homepage:hover, .btn-main.btn-back-homepage:hover {
  background-color: #A52A2A !important;
  border-color: #C78725 !important;
  color: #C78725 !important;
}

/* BACK COLLECTION (SWAPPED: former NEXT PERIOD) */

a.btn-main.btn-back-collection, button.btn-main.btn-back-collection, .btn-main.btn-back-collection {
  background-color: #F0E6D2 !important;
  border-color: #A67C52 !important;
  color: #3A2A1E !important;
}

a.btn-main.btn-back-collection:hover, button.btn-main.btn-back-collection:hover, .btn-main.btn-back-collection:hover {
  background-color: #D9C5A0 !important;
  border-color: #C78725 !important;
  color: #C78725 !important;
}

/* NEXT CHAPTER */

a.btn-main.btn-next-chapter, button.btn-main.btn-next-chapter, .btn-main.btn-next-chapter {
  background-color: #62483D !important;
  border-color: #C78725 !important;
  color: #FDF6EB !important;
}

a.btn-main.btn-next-chapter:hover, button.btn-main.btn-next-chapter:hover, .btn-main.btn-next-chapter:hover {
  background-color: #8E6C57 !important;
  border-color: #C78725 !important;
  color: #C78725 !important;
}

/* NEXT PERIOD (SWAPPED: former BACK COLLECTION) */

a.btn-main.btn-next-period, button.btn-main.btn-next-period, .btn-main.btn-next-period {
  background-color: #E0CFAA !important;
  border-color: #8B6B47 !important;
  color: #3D2B1F !important;
}

a.btn-main.btn-next-period:hover, button.btn-main.btn-next-period:hover, .btn-main.btn-next-period:hover {
  background-color: #C5A670 !important;
  border-color: #C5A670 !important;
  color: #F9D195 !important;
}

/* =========================================================
   MOBILE MENU — submenu spacing (SAFE patch)
   στόχος: λίγο πιο άνετη ανάγνωση στα submenu items
   ΠΙΆΝΕΙ και #mobileMenu και #mobilemenu (case mismatch safe)
   ========================================================= */

#mobileMenu .accordion .list-group .list-group-item, #mobilemenu .accordion .list-group .list-group-item {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  line-height: 1.45 !important;
}

/* λίγο “αέρας” μετά το submenu πριν το επόμενο κεντρικό item */

#mobileMenu .accordion-collapse.show .accordion-body, #mobilemenu .accordion-collapse.show .accordion-body {
  padding-bottom: 14px !important;
}