/* ---------------------------------------------------------------------------
   site-tweaks.css — small overrides on top of the original style.css.
   Loaded last so it wins. Keep this file minimal and well-commented.
   --------------------------------------------------------------------------- */

/* Nav container: the original layout floated .main-menu left and .social-links
   right, leaving a big empty gap on the left of the menu. Switch the container
   to flex so the menu auto-centres, and pin the socials to the right edge. */
.header-lower .nav-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 60px;
}

/* Zero out the original offsets (padding-top:15px on .main-menu and
   margin:-12px on .navigation) so flex can vertically centre the items
   without needing a manual margin-top hack. */
.main-menu,
#main-menu-Id {
  float: none;
  width: auto;
  padding-top: 0;
}

.main-menu .navbar-collapse,
#main-menu-Id > div.navbar-collapse.clearfix.collapse {
  float: none;
  width: auto;
  padding: 0;
}

.main-menu .navigation {
  margin: 0;
}

.main-menu .navigation > li {
  float: none;
  display: inline-block;
  margin: 0 14px;
}

/* Social links live in the flex flow (not absolute) so they can never overflow
   past the container's right edge and clip the Instagram icon on tablet widths.
   The menu still centres inside the remaining space. */
.main-header .nav-outer .social-links {
  position: static;
  transform: none;
  margin: 0 0 0 auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-right: 10px;
}
.main-menu {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* Keep the original dot-pattern underline (nav-dots.png) but lift it up from
   bottom:0 of the <a> (which pushed it below the 60px nav bar and into the
   banner) to sit just under the text. */
.main-menu .navigation > li > a:after {
  bottom: 8px !important;
}

.sticky-header .main-menu .navigation > li > a:after {
  bottom: 8px !important;
}

/* Sticky header (appears on scroll): original markup floats the logo left and
   the menu right, leaving the menu off-centre. Give the container the same
   flex-centred treatment and pin the logo/right-col absolutely on the sides. */
.sticky-header #right-col-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 70px;
}

.sticky-header .logo.pull-left {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  margin: 0;
}

.sticky-header .right-col.pull-right {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  float: none;
}

.sticky-header .main-menu,
.sticky-header #main-menu-IdSticky {
  float: none;
  width: auto;
  padding-top: 0;
}

.sticky-header .main-menu .navbar-collapse {
  float: none;
  width: auto;
  padding: 0;
}

.sticky-header .main-menu .navigation {
  margin: 0;
}

.sticky-header .main-menu .navigation > li {
  float: none;
  display: inline-block;
  margin: 0 6px;
}

/* Breadcrumb: rebuilt from scratch (build.js emits clean <nav.site-breadcrumb>).
   The original markup used col-md-6 + position:relative;bottom:-50px which
   overlapped the banner and could never centre across the full bar. */
.site-breadcrumb {
  background: #242424;
  padding: 14px 20px;
  text-align: center;
  color: #efefef;
  font-size: 14px;
  line-height: 1.4;
}
.site-breadcrumb a {
  color: #efefef;
  text-decoration: none;
  transition: color 200ms ease;
}
.site-breadcrumb a:hover { color: #2799ED; }
.site-breadcrumb .sep {
  margin: 0 10px;
  opacity: 0.5;
}
.site-breadcrumb .current { color: #2799ED; }

/* Contact page map: the original CSS set .map-canvas { top:-451px } to overlap
   a foreground "location-text" card. With the plain Google iframe replacement
   that pull-up just hides the map off the top of its section. Reset it. */
.map-canvas {
  top: 0 !important;
  height: 450px !important;
}
.map-section { height: auto !important; }
.map-container { height: auto !important; }
.map-canvas iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Contact page "Πληροφορίες" cards. Fresh 2×2 grid — no inheritance from the
   vendor float-based layout, so heights can differ freely. */
.info-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.info-card {
  display: block;
  padding: 28px 20px;
  text-align: center;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  background: #ffffff;
  color: #555555;
  text-decoration: none;
  transition: background 300ms ease, border-color 300ms ease, color 300ms ease;
}
a.info-card { cursor: pointer; }
.info-card:hover {
  background: #2799ED;
  border-color: #2799ED;
  color: #ffffff;
}
.info-card .value {
  display: block;
  font-size: 14px;
  line-height: 1.4;
  min-height: 40px;
}
.info-card .icon {
  font-size: 34px;
  line-height: 1;
  margin: 14px 0 12px;
  color: #6b6b6b;
  transition: color 300ms ease;
}
.info-card:hover .icon,
.info-card:hover .value,
.info-card:hover .label { color: #ffffff; }
.info-card .label {
  font-weight: 600;
  font-size: 14px;
  color: #222222;
}
@media (max-width: 600px) {
  .info-cards { grid-template-columns: 1fr; }
}

/* Let the address strip above the map size to its content — the fixed 75px
   crops the text on narrow screens. */
.location-text { height: auto; }

/* Lift the scroll-to-top button off the footer so it doesn't sit on top of
   page content (vendor default was 15px). */
.scroll-to-top { bottom: 100px; }

/* Make the whole info-box clickable — handled via JS in layout.js so we don't
   have to touch the icon's absolute positioning. Only add the cursor here. */
.main-header .info-box { cursor: pointer; }

/* Hard-guarantee the burger stays hidden on tablets/desktops (>=768px), and
   the dropdown caret (only useful in the collapsed menu) stays hidden too. */
@media (min-width: 768px) {
  .main-menu .navbar-toggle { display: none !important; }
  .main-menu .navbar-collapse > ul li.dropdown .dropdown-btn { display: none !important; }

  /* Cancel the vendor tablet-range overrides that pushed the nav container
     48px to the right and capped the menu at 90% width — those clipped the
     Instagram icon past the right edge of .nav-outer. */
  .main-menu { width: auto !important; }
  #nav-outer-cnt > div { margin-right: 0 !important; }
}

/* ---- Mobile nav ----
   Independent markup in partials/header.html (.mobile-nav). Rather than fight
   responsive.css's maze of !important rules on .main-menu / .navbar-collapse /
   .navigation, we hide the vendor bars on ≤767px and render this clean
   structure instead. */
.mobile-nav { display: none; }

@media (max-width: 767px) {
  /* Replace the vendor desktop/sticky bars with our clean mobile bar. */
  .main-header .header-lower { display: none !important; }
  .main-header .sticky-header { display: none !important; }

  .mobile-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background: #111111;
    padding: 10px 15px;
    position: relative;
    z-index: 50;
  }

  /* Burger (left) */
  .mobile-burger {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 8px 10px;
    background: transparent;
    border: 2px solid #ffffff;
    border-radius: 4px;
    cursor: pointer;
  }
  .mobile-burger > span {
    display: block;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
  }
  .mobile-burger:hover,
  .mobile-burger:focus {
    background: #2799ED;
    border-color: #2799ED;
    outline: none;
  }

  /* Socials (right, opposite the burger) */
  .mobile-socials {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }
  .mobile-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 18px;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .mobile-socials a:hover,
  .mobile-socials a:focus {
    background: #2799ED;
    border-color: #2799ED;
  }

  /* Dropdown panel: absolute below the bar, full-width. Toggled via .is-open
     on the <nav.mobile-panel> by the click handler in layout.js. */
  .mobile-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    background: #2799ED;
    display: none;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    z-index: 200;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  .mobile-panel.is-open { display: block; }

  .mobile-menu-list,
  .mobile-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .mobile-menu-list > li { border-top: 1px solid rgba(255, 255, 255, 0.25); }
  .mobile-menu-list > li:first-child { border-top: none; }

  .mobile-menu-list > li > a,
  .mobile-menu-row > a {
    display: block;
    padding: 14px 16px;
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
  }
  .mobile-menu-list > li.current > a,
  .mobile-menu-list > li.current .mobile-menu-row > a {
    background: rgba(0, 0, 0, 0.25);
  }

  /* Services row: link on the left flex-grows, caret on the right. */
  .mobile-menu-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
  }
  .mobile-menu-row > a { flex: 1 1 auto; }
  .mobile-sub-toggle {
    flex: 0 0 auto;
    width: 52px;
    background: transparent;
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
  }
  .mobile-sub-toggle > span { transition: transform 200ms ease; display: inline-block; }
  .mobile-sub-toggle[aria-expanded="true"] { background: rgba(0, 0, 0, 0.2); }
  .mobile-sub-toggle[aria-expanded="true"] > span { transform: rotate(180deg); }

  .mobile-submenu { display: none; background: rgba(0, 0, 0, 0.15); }
  .mobile-submenu.is-open { display: block; }
  .mobile-submenu > li > a {
    display: block;
    padding: 12px 16px 12px 28px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }
  .mobile-submenu > li:first-child > a { border-top: none; }
}

/* Narrow phones: hide the "Καλέστε Τώρα" and "Ώρες Λειτουργίας" info boxes in
   the upper header — they wrap awkwardly and duplicate info available on the
   contact page. The CTA button (.contact-div) stays. */
@media (max-width: 680px) {
  .main-header .header-upper .info-box:not(.contact-div) {
    display: none !important;
  }
}

/* "Γιατί εμάς" cards on mobile: the vendor responsive.css stacks the cards
   vertically but the .icon-box keeps stray top offsets (top:75px at ≤767,
   top:-40px !important at ≤684, top:-3px at ≤550, top:20px at ≤499) AND
   inherits line-height:32px / .5em — which are all smaller than the 35–40px
   decorative glyph. Result: the icon either shifts into the wrong card, or
   sits on the title below it because the glyph overflows its line-box.

   Fix: give the icon-box an explicit 60×60 flex container so the glyph is
   fully contained, zero all top/left/right offsets, and guarantee real margin
   below it before the <h3>. */
@media (max-width: 767px) {
  .why-us-column .inner-box .icon-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 0 !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 60px !important;
    height: 60px !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    font-size: 40px !important;
    line-height: 1 !important;
    overflow: visible !important;
  }
  .why-us-column .inner-box .icon-box > span {
    display: inline-block !important;
    line-height: 1 !important;
  }
  .why-us-column .inner-box h3 {
    margin: 0 0 10px !important;
  }
}