/*
Theme Name: EVSEurope WPBakery Theme
Theme URI: https://www.evseurope.com
Author: EVS EUROPE LTD - With AI 
Version: 1.57.0
Description: Custom classic theme for EVS Europe Ltd — specialist ambulance seating. Built to run with WPBakery.
Text Domain: evseurope
Requires at least: 6.0
Requires PHP: 7.4
*/

/* ===== Variables ===== */
:root {
  --evs-blue: #0b3d66;
  --evs-blue-soft: #2a577d;
  --evs-bg: #4a6983;

  /* one width + spacing to use everywhere */
  --content-max: 1200px;    /* change to 1140 or 1320 if you prefer */
  --gutter: 16px;
  --radius: 8px;
}

/* ===== Reset / Base ===== */
html, body { margin: 0; padding: 0; }
*, *::before, *::after { box-sizing: border-box; }
body {
  background: #5b7690;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
  color: #1b2a3a;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ===== Layout Container ===== */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ===== Header band (title area) ===== */
.site-header { background: transparent; margin-top: 5px; } /* non-sticky + 5px gap */
.evs-sticky { position: static; box-shadow: none; }        /* ensure wrapper is not sticky */

.site-header .header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 12px var(--gutter);
  background: linear-gradient(#163d5f,#072741);   /* unified colour with menu */
  border-radius: var(--radius);
  /* Was overflow:hidden, which would clip the language list: it hangs below
     this band. The rounded corners do not need it - a background is already
     clipped to border-radius. */
}
.site-header .branding { display: flex; flex-direction: column; }
.site-header .site-title {
  color: #fff; font-weight: bold; text-decoration: none; font-size: 28px;
}
.site-header .site-tagline { color:#cfe3ff; font-size: 12px; }

/* ===== Language switcher (header, top right) =====
   Styled as a sibling of the menu buttons below it, and the open list matches
   the menu's dropdowns. Markup and reasoning are in header.php. */
.header-tools { display: flex; align-items: center; gap: 8px; }
.lang-switch { position: relative; }
.lang-switch__button {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  color: #e9f3ff; font-size: 14px; font-weight: 600;
  background: linear-gradient(#2a577d,#173a57);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  cursor: pointer;
  list-style: none;                 /* no disclosure triangle (Firefox) */
  user-select: none;
}
.lang-switch__button::-webkit-details-marker { display: none; }   /* Safari */
.lang-switch__button:hover,
.lang-switch[open] > .lang-switch__button {
  background: linear-gradient(#2f6a98,#1b4c73);
  color: #fff;
}
.lang-switch__button:focus-visible { outline: 2px solid #9ecbff; outline-offset: 2px; }
.lang-switch__globe { flex: 0 0 auto; }
.lang-switch__chevron {
  width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px);
  transition: transform .15s ease;
}
.lang-switch[open] .lang-switch__chevron { transform: rotate(-135deg) translate(-2px,-2px); }
.lang-switch__code--button { display: none; }   /* the phone layout shows "EN" instead of "English" */

.lang-switch__list {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 200;
  width: max-content; min-width: 200px;
  list-style: none; margin: 0; padding: 6px;
  background: #0b3d66; border: 1px solid #083252; border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.lang-switch__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 8px 10px;
  color: #e9f3ff; font-size: 14px; text-decoration: none;
  border-radius: 6px;
}
.lang-switch__list a:hover,
.lang-switch__list a:focus-visible { background: #1b4c73; color: #fff; outline: none; }
.lang-switch__list a[aria-current="page"] { background: #1b4c73; color: #fff; font-weight: 600; }
.lang-switch__list a[aria-current="page"] > span:first-child::before {
  content: ""; display: inline-block;
  width: 5px; height: 9px; margin: 0 8px 2px 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg);          /* tick */
}
.lang-switch__code { color: #9db8d0; font-size: 12px; letter-spacing: .04em; }
.lang-switch__list a[aria-current="page"] .lang-switch__code { color: #cfe3ff; }

.site-header .branding { min-width: 0; }         /* let a long title wrap rather than push the buttons off */
.header-tools { flex: 0 0 auto; }

@media (max-width: 900px) {
  .lang-switch__name { display: none; }
  .lang-switch__code--button { display: inline; color: inherit; font-size: 13px; }
  .lang-switch__button { padding: 6px 8px; }
}
/* On a phone the title now shares the band with two buttons, and translated
   titles run long ("EVS Europe - Καθίσματα ασθενοφόρων"), so it steps down. */
@media (max-width: 600px) {
  .site-header .site-title { font-size: 20px; line-height: 1.25; }
}

/* ===== Primary menu bar (same width + colours) ===== */
.primary-nav { position: static; background: transparent; border: 0; } /* non-sticky */
.primary-nav .container {
  background: linear-gradient(#163d5f,#072741);   /* same gradient as header */
  border-top: 1px solid rgba(255,255,255,.15);
  border-bottom: 2px solid #072940;
  border-radius: var(--radius);
  /* NO overflow:hidden here. It was clipping the dropdown: the sub-menu is
     position:absolute at top:100%, i.e. outside this box, so overflow:hidden
     made every child page unreachable from the menu - Colour Choices included.
     The rounded corners still work because the menu items carry their own
     border-radius. */
}

.primary-nav ul { list-style: none; margin: 0; padding: 0; }
.primary-nav .menu {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
.primary-nav .menu > li { position: relative; }
.primary-nav .menu > li > a {
  display: inline-block;
  padding: 12px 16px;
  color:#e9f3ff; text-decoration:none; font-weight:600;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  background: linear-gradient(#2a577d,#173a57);
}
.primary-nav .menu > li > a:hover,
.primary-nav .menu > li.current-menu-item > a,
.primary-nav .menu > li.current-menu-ancestor > a {
  background: linear-gradient(#2f6a98,#1b4c73);
  color:#fff;
}

/* Dropdowns */
.primary-nav .menu .sub-menu {
  position: absolute; left: 0; top: 100%; z-index: 100;
  /* Sizes itself to the longest label rather than to a fixed number, so
     adding a menu item cannot silently wrap it again. The widest today is
     "1860U - Flip-Up Child / Attendant" at 240px of text, which needed
     ~282px of box against the old 220px min-width. min-width keeps a
     sensible floor for short menus; max-width stops one long label
     stretching the panel off screen. */
  width: max-content;
  min-width: 220px;
  max-width: min(28rem, 90vw);
  padding: 8px; margin: 0;
  background: #0b3d66; border: 1px solid #083252; border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(0,0,0,.2);
  display: none;
}
.primary-nav .menu li:hover > .sub-menu { display: block; }
/* Hover alone left the dropdown unreachable without a mouse: tabbing to
   "Seats" opened nothing, so every child page was keyboard-inaccessible.
   :focus-within costs no visual change and fixes it. */
.primary-nav .menu li:focus-within > .sub-menu { display: block; }

/* The mobile disclosure button, injected by nav.js. Hidden here - on a
   pointer device hover and :focus-within already open the dropdown. */
.submenu-toggle { display: none; }
.primary-nav .menu .sub-menu li a {
  display:block; padding:10px 12px; color:#e9f3ff; text-decoration:none; border-radius:6px;
  white-space: nowrap;   /* one line per title - the point of the above */
}
.primary-nav .menu .sub-menu li a:hover { background:#1b4c73; color:#fff; }

/* Mobile toggle button */
.nav-toggle { display:none; background:none; border:0; cursor:pointer; }
.nav-toggle .bar { display:block; width:24px; height:3px; margin:5px 0; background:#e6f1ff; border-radius:2px; }

/* ---- Mobile menu --------------------------------------------------------
   Rebuilt 8 Sept. Two faults, both reported from a real phone.

   1. The rows were centred and shrink-to-fit, because align-items:center
      from the desktop flex rule carried straight into the column layout.
      Every row started at a different x - Home at 149px, Contact at 142px -
      and "Seats" at 56px, because it is sized by its widest child
      ("Occupant Awareness Sensors") and so juts ~90px further left than
      anything else. That is the "opens to the left" effect. align-items is
      now stretch, so every row is full width and left aligned.

   2. The dropdown only opened on :hover, which does not exist on a
      touchscreen. Tapping "Seats" navigated to /seats/ rather than
      expanding, so the child pages were effectively unreachable from the
      phone menu. There is now an explicit disclosure button next to the
      parent link: the link still navigates, the chevron opens the list.
      nav.js injects it and carries the aria-expanded state.
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .nav-toggle { display:block; }

  .primary-nav .menu {
    display:none; flex-direction:column; gap:0;
    align-items: stretch;          /* the fix: was inheriting center */
  }
  .primary-nav.is-open .menu { display:flex; }

  /* Each row is link + chevron on one line, with the sub-menu wrapping onto
     the next line at full width. */
  .primary-nav .menu > li {
    display:flex; flex-wrap:wrap; align-items:stretch;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .primary-nav .menu > li:last-child { border-bottom:0; }

  .primary-nav .menu > li > a {
    flex:1 1 auto;
    display:block; text-align:left;
    padding:14px 16px;
    border-radius:0;               /* rows touch, so rounded corners read as a mistake */
    background:transparent; box-shadow:none;
  }
  .primary-nav .menu > li.current-menu-item > a,
  .primary-nav .menu > li.current-menu-ancestor > a {
    background: rgba(255,255,255,.10);
  }

  /* 48px square: comfortably over the 24px minimum in WCAG 2.2 SC 2.5.8, and
     wide enough to hit without catching the link next to it. */
  .submenu-toggle {
    display:flex; align-items:center; justify-content:center;
    flex:0 0 48px; min-height:48px;
    background:transparent; border:0; border-left:1px solid rgba(255,255,255,.12);
    color:#e9f3ff; cursor:pointer; padding:0;
  }
  .submenu-toggle::before {
    content:""; width:9px; height:9px;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .15s ease;
  }
  .submenu-toggle[aria-expanded="true"]::before {
    transform:rotate(-135deg) translate(-2px,-2px);
  }
  .submenu-toggle:focus-visible { outline:2px solid #9ecbff; outline-offset:-2px; }

  .primary-nav .menu .sub-menu {
    position:static; box-shadow:none; border:none; padding:0;
    width:auto; min-width:0; max-width:none;   /* undo the desktop max-content sizing */
    flex:0 0 100%;                             /* full width, on its own line */
    background: rgba(0,0,0,.18);               /* reads as nested, not as more top-level items */
  }
  .primary-nav .menu .sub-menu li a {
    white-space:normal;
    padding:12px 16px 12px 32px;               /* indent shows the hierarchy */
  }

  /* Hover is meaningless on touch and :focus-within would fire the moment the
     chevron took focus, so on mobile the button alone controls the panel. */
  .primary-nav .menu li:hover > .sub-menu,
  .primary-nav .menu li:focus-within > .sub-menu { display:none; }
  .primary-nav .menu li.is-expanded > .sub-menu { display:flex; flex-direction:column; }
}

/* ===== Hero (same width) ===== */
.hero-image {
  max-width: var(--content-max);
  margin: 0 auto 16px;
  padding-left: 0;
  padding-right: 0;
}
.hero-image img { width: 100%; border-radius: var(--radius); }

/* ===== Main content card (same width) ===== */
.site-main {
  background:#fff;
  max-width: var(--content-max);
  margin: 0 auto 32px;
  padding: 24px var(--gutter);
  border-radius: var(--radius);
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* Keep WPBakery rows inside width if any template tries to span full width */
.site-main .vc_row {
  max-width: var(--content-max);
  margin-left: auto; margin-right: auto;
}

/* Reading measure.
   This used to sit on .wpb_wrapper, which capped EVERY WPBakery block at 72ch -
   card grids, spec tables and swatch grids included - so all content sat
   squashed against the left of a 1200px card. Apply the measure to running
   prose only, and let layout components use the full width.
   Uses --evs-measure from components.css so top-level prose and prose inside
   sections share one width. */
.site-main .wpb_text_column .wpb_wrapper > p,
.site-main .wpb_text_column .wpb_wrapper > ul:not([class]),
.site-main .wpb_text_column .wpb_wrapper > ol:not([class]),
.site-main .entry-content > p {
  max-width: var(--evs-measure, 56rem);
}

/* ===== Footer ===== */
.site-footer {
  color:#cfe3ff; background:#0b3d66;
  padding: 16px 0; text-align:center;
}

/* === Footer two-column layout === */
.site-footer {
  background: #0b3d66; /* keep your existing footer colour */
  color: #cfe3ff;
  padding: 24px 0 16px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 12px;
  padding: 20px
}
.footer-col .widget-title {
  color: #fff;
  font-size: 16px;
  margin: 0 0 8px;
}
.footer-col .widget { margin-bottom: 14px; }

/* Footer menu styling to match your theme */
.footer-menu { list-style: none; margin: 0; padding: 0; }
.footer-menu li { margin: 0 0 6px; }
.footer-menu a {
  color: #e6f1ff; text-decoration: none; padding: 6px 8px; border-radius: 6px;
  background: linear-gradient(#1c4363,#173a57);
  display: inline-block;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
}
.footer-menu a:hover { background: linear-gradient(#336a9d,#1d466b); color: #fff; }

.footer-placeholder { opacity: .8; }

.footer-bottom { text-align: center; font-size: 14px; }

/* Responsive stack */
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; }
}


/* ===== Utilities ===== */
.evs-hero, .evs-banner { text-align:center; }
.evs-hero h1, .evs-banner h1 { margin-bottom: 8px; }
.evs-row h2 { color: var(--evs-blue); margin-top: 0; }
.evs-img { margin-top: 8px; }
.evs-btn { margin-right: 8px; }

/* Avoid micro horizontal scrollbars */
body { overflow-x: hidden; }