/* ─────────────────────────────────────────────────────────────────────
   WordPress compatibility layer.

   The design manages its own spacing and its own nav markup. Core injects
   layout margins and wraps navigation in its own elements, so this file
   translates between the two. Every rule here has real specificity, which
   beats core's :where()-wrapped defaults without needing !important.
   ───────────────────────────────────────────────────────────────────── */

/* 1. Core's flow layout adds a 24px block gap between siblings. This design
      sets its own margins, so zero core's out inside our groups. */
.wp-block-group > *,
.wp-block-group > * + *,
.entry-content > * + * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 2. Core Group adds constrained-width padding we do not want; our sections
      handle their own width via .wrap / .inner / .section. */
.wp-block-group {
  padding: 0;
}

/* 3. Blocks should not force their own alignment inside our layouts. */
.wp-block-image,
.wp-block-image figure {
  margin: 0;
}

/* 4. Navigation. Core renders nav > ul > li > a.
      Map that onto what nav.main expects so the header looks identical. */
header.site .wp-block-navigation ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
header.site .wp-block-navigation li {
  margin: 0;
}
header.site .wp-block-navigation a {
  display: inline-block;
  font-size: 14.5px;
  font-weight: 500;
  opacity: .85;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: .15s;
}
header.site .wp-block-navigation a:hover {
  opacity: 1;
  border-color: var(--blue-soft);
}
header.site .wp-block-navigation .current-menu-item > a,
header.site .wp-block-navigation .current_page_item > a {
  opacity: 1;
  border-color: var(--blue-soft);
}
/* The Twisted link is a year-round wayfinder, magenta regardless of season. */
header.site .wp-block-navigation .navseason > a,
header.site .wp-block-navigation a.navseason {
  color: var(--magenta-soft);
  opacity: 1;
  font-weight: 700;
}
header.site .wp-block-navigation .navseason > a:hover,
header.site .wp-block-navigation .navseason.current-menu-item > a {
  border-color: var(--magenta);
}

/* 4b. The member quick strip is a Navigation block too, so the whole strip
       (including the Merchandise dropdown) is editable in the Site Editor.
       Core renders nav > ul > li, with submenus as a button plus a nested ul.
       These rules turn that back into the flat blue bar the design expects. */
.quickstrip .wp-block-group.wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.quickstrip .wp-block-navigation ul {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.quickstrip .wp-block-navigation li { margin: 0; }
.quickstrip .wp-block-navigation .wp-block-navigation-item__content,
.quickstrip .wp-block-navigation .wp-block-navigation-submenu__toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: none;
  border: 0;
  border-left: 1px solid rgba(255,255,255,.18);
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.quickstrip .wp-block-navigation .wp-block-navigation-item__content:hover,
.quickstrip .wp-block-navigation .wp-block-navigation-submenu__toggle:hover {
  background: rgba(255,255,255,.12);
}
.quickstrip .wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.quickstrip .wp-block-navigation .wp-block-navigation-submenu__toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
/* Core ships its own chevron; keep it, size it to the design. */
.quickstrip .wp-block-navigation__submenu-icon svg {
  width: 10px;
  height: 10px;
  fill: currentColor;
}
.quickstrip .wp-block-navigation-submenu[aria-expanded="true"] > .wp-block-navigation-submenu__toggle,
.quickstrip .wp-block-navigation-submenu.is-open > .wp-block-navigation-submenu__toggle {
  background: rgba(255,255,255,.16);
}

/* The dropdown panel. Core positions it absolutely and paints it white at
   z-index 2, which would sit behind the sticky header. These selectors are
   deliberately deeper than core's so they win without !important, and the
   z-index clears the header. */
.quickstrip .wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
  min-width: 232px;
  padding: 0;
  background: var(--ink-2);
  border: 1px solid #2c2c3a;
  border-top: 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  overflow: hidden;
  z-index: 60;
}
.quickstrip .wp-block-navigation .has-child > .wp-block-navigation__submenu-container li {
  width: 100%;
}
.quickstrip .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  width: 100%;
  color: #fff;
  background: none;
  border-left: 0;
  border-bottom: 1px solid #23232e;
  padding: 11px 14px;
  font-weight: 500;
}
.quickstrip .wp-block-navigation .has-child > .wp-block-navigation__submenu-container li:last-child .wp-block-navigation-item__content {
  border-bottom: 0;
}
.quickstrip .wp-block-navigation .has-child > .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: rgba(255,255,255,.09);
}

/* 4c. Donation call to action in the main nav. Core puts the className on the
       <li>, so the pill has to be painted on the anchor inside it. Mirrors the
       nav.main a.navdonate rules in site.css. */
header.site .wp-block-navigation .navdonate > a {
  background: var(--blue-soft);
  color: var(--ink);
  opacity: 1;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  border-bottom: 0;
  white-space: nowrap;
  animation: donate-pulse 2.8s ease-out 3;
}
header.site .wp-block-navigation .navdonate > a:hover {
  background: #fff;
  color: var(--ink);
  border-color: transparent;
}
header.site .wp-block-navigation .navdonate > a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  header.site .wp-block-navigation .navdonate > a { animation: none; }
}

/* 5. Core's own responsive overlay is disabled in favour of the existing
      .menu-btn, which site.js drives. Hide core's button entirely. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  display: none !important;
}

/* 6. Mobile: the nav collapses the same way nav.main always did. */
@media (max-width: 860px) {
  header.site .wp-block-navigation {
    display: none;
  }
  header.site .wp-block-navigation.open {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ink-2);
    padding: 10px 20px 16px;
    border-bottom: 1px solid #2c2c3a;
  }
  header.site .wp-block-navigation.open ul {
    flex-direction: column;
    gap: 0;
  }
  header.site .wp-block-navigation.open a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #23232e;
    font-size: 16px;
  }
}

/* 7. Contact Form 7 wraps every field in <p> and <span class="wpcf7-form-control-wrap">.
      Make that structure behave like the .contact-form flex column the design
      expects, so the CF7 form is visually identical to the static mock's. */
.wpcf7-form {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wpcf7-form p {
  display: contents;
}
.wpcf7-form label {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-top: 14px;
}
.wpcf7-form-control-wrap {
  display: block;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form select,
.wpcf7-form textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--slate);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
}
.wpcf7-form textarea {
  resize: vertical;
  line-height: 1.55;
}
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.wpcf7-form input[type="submit"] {
  margin-top: 22px;
  align-self: flex-start;
  width: auto;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
}
/* CF7's own validation and status messages, in the design's voice. */
.wpcf7-not-valid-tip {
  font-size: 13px;
  color: #c0304a;
  font-weight: 600;
  margin-top: 4px;
}
.wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--line);
}
.wpcf7 form.sent .wpcf7-response-output {
  border-color: #2f7d47;
  color: #2f7d47;
  font-weight: 600;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  border-color: #c0304a;
  color: #c0304a;
  font-weight: 600;
}
.wpcf7-spinner {
  margin-left: 10px;
}

/* 8. Legacy pages.
      The twelve redesigned pages wrap everything in their own full-bleed
      sections. Every other page on the site (the old Shuttle content, plus
      anything a booster writes later in the plain editor) arrives as bare
      headings and paragraphs with no wrapper, which would otherwise run edge
      to edge with no rhythm. These rules give that content the same measure
      and spacing as the rest of the site.

      Everything here is scoped through :is(...) to unwrapped elements only,
      so the designed sections keep their full-bleed layout. That scoping has
      to include the first/last-child spacing: an unscoped :first-child would
      push the homepage hero down and expose a strip of page background. */
.entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, blockquote,
                     figure, form, hr, iframe, pre, div:not([class]),
                     .wp-block-image, .wp-block-embed) {
  max-width: 860px;
  margin-inline: auto;
  padding-inline: 20px;
}
.entry-content > :is(p, ul, ol, dl, table, blockquote, figure, pre,
                     .wp-block-image) {
  margin-block: 0 18px;
  line-height: 1.65;
}
.entry-content > :is(h1, h2, h3) {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin-block: 40px 14px;
}
.entry-content > h1 { font-size: clamp(30px, 5vw, 44px); }
.entry-content > h2 { font-size: clamp(25px, 4vw, 34px); }
.entry-content > h3 { font-size: 22px; }
.entry-content > :is(h4, h5, h6) {
  font-weight: 700;
  margin-block: 28px 10px;
}
.entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, blockquote,
                     figure, form, hr, iframe, pre, div:not([class]),
                     .wp-block-image, .wp-block-embed):first-child {
  margin-block-start: 46px;
}
.entry-content > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, table, blockquote,
                     figure, form, hr, iframe, pre, div:not([class]),
                     .wp-block-image, .wp-block-embed):last-child {
  margin-block-end: 64px;
}
.entry-content > table { border-collapse: collapse; width: 100%; }
.entry-content > table :is(td, th) {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}
.entry-content > :is(figure, .wp-block-image) img { max-width: 100%; height: auto; }

/* 9. Password-protected pages.
      /updates-and-itineraries/ is behind a password and is one of the most
      used pages in season, so its form should not be raw browser default. */
/* Scoped through .entry-content so it outranks the legacy-content rule
   above, which also matches <form>. */
.entry-content > .post-password-form,
.post-password-form {
  max-width: 560px;
  margin: 64px auto;
  padding: 0 20px;
}
.post-password-form p {
  margin: 0 0 14px;
  line-height: 1.6;
}
.post-password-form label {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--slate-soft);
  margin-bottom: 6px;
}
.post-password-form input[type="password"] {
  width: 100%;
  font-family: var(--body);
  font-size: 15px;
  color: var(--slate);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px 13px;
}
.post-password-form input[type="password"]:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.post-password-form input[type="submit"] {
  margin-top: 16px;
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 11px 20px;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.post-password-form input[type="submit"]:hover { background: var(--blue-deep); }

/* 10. Admin bar must not fight the sticky header. */
.admin-bar header.site {
  top: 32px;
}
@media (max-width: 782px) {
  .admin-bar header.site {
    top: 46px;
  }
}