/* Shared, hand-written rules layered on top of each page's exported CSS.
   These restore interactions the WordPress/Breakdance export left out
   (there was no JavaScript at all in the exported HTML). */

/* WordPress ships a global CSS reset that zeroes out the browser's default
   margins on these elements; Breakdance's own spacing is all explicit
   (flex `gap`), assuming that reset is already in place. The "export
   element" tool only captured Breakdance's inline styles, not WordPress's
   separate global stylesheet, so without this, browser-default <p>
   margins (~22px top/bottom) were stacking on top of Breakdance's own
   gap and pushing every block below a paragraph further down than it
   should be — most visibly in the homepage hero. */
p,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
blockquote,
figure {
  margin: 0;
  padding: 0;
}

/* Mobile nav (<=1023px): a from-scratch menu (`.cl-mobile-nav`, built and
   driven entirely by main.js) rather than trying to make Breakdance's own
   desktop-flyout markup behave on mobile too. That approach (several
   commits' worth) kept surfacing new bugs — needing a double-tap to open
   a submenu, "Host Schools" rendering empty, the page scrollable behind
   an open panel — each one fixable individually, but symptomatic of
   fighting CSS/markup that was never designed for this, rather than
   owning the whole interaction. The desktop hover dropdowns are untouched
   (this section, and the `.cl-mobile-nav*` rules below, only ever apply
   at <=1023px) and still use Breakdance's own markup as before.

   main.js builds `.cl-mobile-nav`'s content by reading the existing
   (still-present, just hidden here) desktop `.breakdance-menu-list` —
   so this stays in sync automatically if a future Breakdance re-export
   changes a link, adds a destination, etc. */
@media (max-width: 1023px) {
  /* Breakdance's own mobile menu (hamburger panel, flyout dropdowns) is
     fully replaced below — hide all of it. The toggle *button* is the one
     exception: it's already correctly styled/positioned, so main.js
     reuses that exact element and only replaces its click behavior. */
  .breakdance-menu-list,
  .breakdance-dropdown-floater,
  .breakdance-dropdown-floater-2 {
    display: none !important;
  }
}

.cl-mobile-nav-toggle-icon {
  position: relative;
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
.cl-mobile-nav-toggle-icon::before,
.cl-mobile-nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease;
}
.cl-mobile-nav-toggle-icon::before {
  top: -7px;
}
.cl-mobile-nav-toggle-icon::after {
  top: 7px;
}
/* Hamburger -> X, toggled by main.js adding .is-open to the (reused)
   toggle button itself. */
.breakdance-menu-toggle.is-open .cl-mobile-nav-toggle-icon {
  background: transparent;
}
.breakdance-menu-toggle.is-open .cl-mobile-nav-toggle-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.breakdance-menu-toggle.is-open .cl-mobile-nav-toggle-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

.cl-mobile-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Set as an inline style by main.js to the bottom edge of everything
     above it (contact bar + header), since that height varies (wraps to
     two lines on very narrow phones). main.js also scrolls the page to
     the very top before measuring it and locks it there while open, so
     this stays correct for as long as the panel is open — the header
     (with the logo) always stays visible above it, never scrolls away. */
  top: 0;
  z-index: 1000;
  background: #fff;
  overflow-y: auto;
  /* No horizontal movement or scrolling in this panel at all — it only
     ever fades in in place, so there's nothing that can trigger a
     sideways scrollbar the way a translateX-based slide-in could. */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  /* Site-wide "Anek Latin" is set on a page-specific wrapper class (e.g.
     `.home`), not on <body> — this panel is appended straight to <body>
     as a sibling of that wrapper, not a descendant, so it never inherits
     it. Set explicitly rather than relying on inheritance from a class
     that isn't even the same on every page template. */
  font-family: "Anek Latin", sans-serif;
}
.cl-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.cl-mobile-nav-list,
.cl-mobile-nav-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cl-mobile-nav-list > li {
  border-bottom: 1px solid #eee;
}
.cl-mobile-nav-link,
.cl-mobile-nav-toggle-row {
  /* Without this, `width: 100%` plus this row's own padding adds up to
     more than 100% of the panel's width (the browser's default box model
     puts padding outside the width, not inside it) — on nested rows,
     enough to actually overflow the panel and, if anything is scrollable
     enough to reveal it, the exact cause of a real lateral-scroll bug. */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 20px;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 500;
  font-size: 17.5px;
  color: #000;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.cl-mobile-nav-sublist .cl-mobile-nav-link,
.cl-mobile-nav-sublist .cl-mobile-nav-toggle-row {
  padding: 14px 20px 14px 36px;
  font-size: 16px;
}
.cl-mobile-nav-sublist .cl-mobile-nav-sublist .cl-mobile-nav-link {
  padding-left: 52px;
}
.cl-mobile-nav-chevron {
  flex: none;
  width: 12px;
  height: 12px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-top: -4px;
}
.cl-mobile-nav-toggle-row[aria-expanded="true"] .cl-mobile-nav-chevron {
  transform: rotate(-135deg);
  margin-top: 4px;
}

/* The grid-rows trick: a 0fr -> 1fr row transition animates open/closed
   height without ever measuring anything in JS, and (unlike an explicit
   max-height) it composes correctly when nested — opening a submenu
   inside an already-open one just grows the grid, no ancestor to keep
   back in sync. */
.cl-mobile-nav-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.cl-mobile-nav-collapse.is-open {
  grid-template-rows: 1fr;
}
.cl-mobile-nav-collapse > div {
  overflow: hidden;
}

.cl-mobile-nav-list > li:first-child {
  border-top: 1px solid #eee;
}

/* Desktop: hover reveals the dropdown, no click needed. Driven by the
   `.is-open` class main.js toggles (with its ~300ms close delay) — NOT
   raw `:hover`. A plain `:hover` rule here looks identical while the
   mouse sits still, but loses the match the instant the pointer leaves
   the toggle for the ~20px gap above the floater (an unrelated header
   element, not a descendant of `.breakdance-dropdown`, so it doesn't
   count as "still hovering"), snapping the panel closed mid-transit with
   zero grace period — exactly the "dropdown disappears the moment I move
   toward it" bug. main.js's delay logic was already there and already
   correct; it just wasn't wired to anything, since this rule was still
   keying off `:hover` instead of the class it sets. */
@media (min-width: 1024px) {
  .breakdance-dropdown-floater.is-open,
  .breakdance-dropdown-floater-2.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

.form-status {
  margin-top: 12px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
}

.form-status.is-success {
  color: #146c2e;
  background-color: #e6f6ea;
  border-color: #bfe8c9;
}

.form-status.is-error {
  color: #a11d3a;
  background-color: #fbe8ec;
  border-color: #f3c1cd;
}

/* The exported CSS never defines a `:checked` appearance for this
   custom (appearance: none) checkbox — on any page, not just this one —
   so ticking "I accept ... privacy policy" showed no visual change at
   all, even though the checkbox's actual state was updating correctly. */
input[type="checkbox"]:checked {
  background-color: #dd183b;
  border-color: #dd183b;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.7 4.3a1 1 0 0 1 0 1.4l-5 5a1 1 0 0 1-1.4 0l-2-2a1 1 0 1 1 1.4-1.4L6.7 8.6l4.3-4.3a1 1 0 0 1 1.4 0z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7em 0.7em;
}

/* This text is styled to sit on top of the animated marker-highlight that
   assets/js/highlight.js draws behind it with the rough-notation library
   (see build.py) — pale text reads clearly over the solid red strokes,
   the same pairing the original site used. Needs `position: relative` for
   rough-notation to anchor its SVG correctly against this element. */
.dual-heading--secondary {
  position: relative;
  color: #fdede6 !important;
}

/* The "Choose your destination" cards on the homepage already carry their
   location captions in the markup (e.g. "Spain" / "Jaén, Andalucía") with
   the CSS to animate them in — transitions, starting opacity:0 /
   translateY(100%) — but the export has no matching `:hover` rule to ever
   trigger that reveal, so the captions just stay hidden. Add it back. */
figure[class^="ee-imagehover"]:hover [class^="c4-reveal-up"] {
  opacity: 1 !important;
}
figure[class^="ee-imagehover"]:hover [class^="ee-imagehover-title"] {
  transform: translateY(0) !important;
}
figure[class^="ee-imagehover"] figcaption {
  background: transparent;
  transition: background 300ms ease;
}
figure[class^="ee-imagehover"]:hover figcaption {
  background: rgba(255, 255, 255, 0.7);
}

/* Tabs (language tabs on cookie/privacy policy, "Benefits of being a Host
   School/Family", etc.): the exported CSS styles the *first* tab button
   permanently red/active and every other one permanently white/inactive —
   a frozen snapshot of whichever tab happened to be open at export time,
   keyed to each button's fixed position class (.js-tab, .js-tab-2, ...)
   rather than to any actual selected state. Override by real state
   instead, so switching tabs (via main.js, which toggles aria-selected)
   actually restyles the right button. */
[role="tab"] {
  background-color: #fff !important;
}
[role="tab"]::after {
  background-color: transparent !important;
}
[role="tab"] svg,
[role="tab"] span {
  color: #000 !important;
}
[role="tab"][aria-selected="true"] {
  background-color: #dd183b !important;
}
[role="tab"][aria-selected="true"]::after {
  background-color: #dd183b !important;
}
[role="tab"][aria-selected="true"] svg {
  color: #fff !important;
}
[role="tab"][aria-selected="true"] span {
  color: #fff !important;
}

/* Every "Contact us" / "Get in touch" button site-wide jumps to
   #get-in-touch. Make in-page anchor jumps (this one included) animate
   instead of snapping straight there. */
html {
  scroll-behavior: smooth;
}

/* Safety net: a couple of decorative elements (e.g. the hand-drawn-style
   SVG underline behind "Languages" on the homepage) use pixel coordinates
   baked in at export time for a wide desktop viewport, since the library
   that draws them normally recalculates via JS that isn't part of this
   export. Rather than reimplement that library, just stop them from
   creating page-wide horizontal scroll on narrow screens. */
html,
body {
  overflow-x: hidden;
}

/* Photo gallery lightbox (lightGallery): move the prev/next arrows from
   the vertical middle of the photo — where they sit on top of the actual
   subject and are easy to hit by accident while trying to view the photo
   — down to the bottom, out of the way of the image itself. */
.lg-prev,
.lg-next {
  top: auto !important;
  bottom: 16px !important;
  margin-top: 0 !important;
}

/* Breakdance popups (e.g. the homepage "Choose a trip" UK-flag popup) —
   the export already ships these fully hidden (opacity/visibility/
   z-index/pointer-events all zeroed on both the full-screen dark-backdrop
   wrapper, e.g. `.bde-popup-210-100`, and the popup box inside it, e.g.
   `.breakdance-popup-2`) with a smooth opacity transition already defined
   on both. main.js adds/removes `.is-open` on the wrapper; this is just
   the other half, reversing those same properties back — nothing here
   needs to know which numbered popup it is. */
[class*="bde-popup-"].is-open,
[class*="bde-popup-"].is-open > [data-breakdance-popup-id] {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2000 !important;
  pointer-events: auto !important;
}