/* 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 menu + dropdown open state, driven by main.js toggling .is-open */
@media (max-width: 1023px) {
  .breakdance-menu-list.is-open {
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    visibility: visible !important;
    /* The exported CSS bakes in a hardcoded off-screen `left` value meant to
       be animated by Breakdance's own runtime JS, which isn't part of this
       export. Pin the panel on-screen instead when it's open. */
    left: 0 !important;
  }

  .breakdance-dropdown-links.is-open,
  .breakdance-dropdown-links-2.is-open,
  .breakdance-dropdown-links-3.is-open {
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
    visibility: visible !important;
  }

  .breakdance-dropdown-column [role="heading"],
  .breakdance-dropdown-column-2 [role="heading"],
  .breakdance-dropdown-column-3 [role="heading"] {
    cursor: pointer;
  }

  /* On mobile the dropdown panel should flow inline in the stacked menu
     list instead of floating absolutely over it (the absolute positioning
     values baked into the export assume a desktop flyout). */
  .breakdance-dropdown-floater.is-open,
  .breakdance-dropdown-floater-2.is-open {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    box-shadow: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* The multi-column destination lists need to stack on narrow screens;
     side-by-side flex columns squeeze the second column out of view. */
  .breakdance-dropdown-columns,
  .breakdance-dropdown-columns-2 {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* `width: var(--dropdown-section-width)` references a custom property
     that's only ever set for the desktop flyout's measured width, so on
     mobile it resolves to a stale/oversized value and pushes link labels
     off-screen. Force it back to the panel's own width. */
  .breakdance-dropdown-section {
    width: 100% !important;
  }

  /* Nested flex children default to a content-based min-width, which lets
     the long "Spain -> UK"-style labels force their flex ancestors wider
     than the viewport instead of wrapping/shrinking. */
  .breakdance-dropdown-section,
  .breakdance-dropdown-columns,
  .breakdance-dropdown-columns-2,
  .breakdance-dropdown-column,
  .breakdance-dropdown-column-2,
  .breakdance-dropdown-column-3,
  .breakdance-dropdown-links,
  .breakdance-dropdown-links-2,
  .breakdance-dropdown-links-3,
  .breakdance-dropdown-item,
  [class^="breakdance-link-"] {
    min-width: 0 !important;
  }
}

.breakdance-dropdown-floater.is-open,
.breakdance-dropdown-floater-2.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Desktop: hover reveals the dropdown, no click needed */
@media (min-width: 1024px) {
  .breakdance-dropdown:hover .breakdance-dropdown-floater,
  .breakdance-dropdown-2:hover .breakdance-dropdown-floater-2 {
    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;
}