/* ──────────────────────────────────────────────────────────────────────────
   Theme adaptations for static HTML.
   In the React prototype, dropdowns / modal / mobile-nav were conditionally
   rendered (mounted only when open). In WordPress we render them once in the
   DOM and toggle visibility, so we need a few default-hidden rules that the
   prototype didn't. Nothing here changes the visual design.
   ────────────────────────────────────────────────────────────────────────── */

/* Desktop dropdowns: hidden until hover / keyboard focus within the item. */
.nav-item > .nav-dropdown { display: none; }
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown { display: flex; }

/* Elements toggled via the [hidden] attribute from site.js. */
.nav-mobile[hidden],
.pm-overlay[hidden] { display: none !important; }

/* Mobile nav only ever shows below the desktop breakpoint. */
@media (min-width: 1024px) {
	.nav-mobile { display: none !important; }
}

/* Mobile header order: [☰] [dolphin] [wordmark] ........ [Connect with us].
   The burger sits on the left, the logo (dolphin + wordmark) next to it, and
   the CTA is pushed to the right. Desktop layout is unchanged (the burger is
   hidden ≥1024px, so the logo stays first on the left). */
@media (max-width: 1023px) {
	.nav-inner { justify-content: flex-start; }   /* group burger + logo on the left */
	.nav-burger { order: -1; margin-left: -4px; } /* hamburger first, on the left */
	.nav-wordmark { display: block; }             /* show the wordmark beside the dolphin */
	.nav-right { margin-left: auto; }             /* push the CTA to the far right */
	.nav-right .nav-cta { display: inline-flex; } /* keep "Connect with us" in the header */
}

/* On very small phones, trim the CTA padding a little so it always fits
   beside the dolphin + wordmark without wrapping. */
@media (max-width: 400px) {
	.nav-cta { padding: 8px 12px; }
	.nav-burger { margin-left: -6px; }
}

/* No default underline on links that were clickable <div>s/<button>s in the
   prototype and are now real <a href>s in WordPress (nav dropdowns, cards,
   tiles). The design intentionally shows no underline on these. Prose links
   (a.aj / .aj-link) keep their underline. */
.nav-drop-link,
.nav-mobile-link,
.nav-mobile-sub,
.nav-logo,
.jstop,
.path-card,
.pod-card,
.prog-card,
.cove-card,
.shop-card,
.team-card,
.award-card,
.spec-card,
.transport-card,
.gallery-tile,
.pod-focus-tile,
.why-bubble,
.contact-map-link,
.footer a,
a.profile-link { text-decoration: none; }

/* Cards that are now anchors should inherit text colour, not the link blue. */
.jstop,
.path-card,
.pod-card,
.prog-card,
.cove-card,
.shop-card,
.team-card,
.award-card,
.spec-card,
.transport-card,
.pod-focus-tile { color: inherit; }

/* Accessible focus state for keyboard users on nav links/buttons. */
.nav-link:focus-visible,
.nav-drop-link:focus-visible,
.btn:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }

/* Accordion answer (Cove workshops / Gamdevi FAQs) was conditionally rendered
   in React; in static HTML it's always present, so hide until the row is open. */
.ws-item > .ws-body { display: none; }
.ws-item.open > .ws-body { display: block; }

/* Forms: simple inline error + honeypot hiding. */
.aj-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--brand-red); }
.aj-form-error { color: var(--red-600); font-size: 14px; font-weight: 700; margin: 8px 0 0; }