/* Shared with the ticket system: design tokens, fonts, header and footer. Keep it scoped to these components. */
@font-face { font-family: "Familjen Grotesk"; src: url(../fonts/familjen-grotesk.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Familjen Grotesk"; src: url(../fonts/familjen-grotesk-ext.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Figtree"; src: url(../fonts/figtree-ext.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0; }

:root {
  --lagoon: #07414F;
  --lagoon-soft: #0D5A6C;
  --takamaka: #27543A;
  --reef: #0069A7;
  --leaf: #6BA43A;
  --bougainvillea: #9C3D6E;
  --sun: #F7C948;
  --salt: #F1F6F4;
  --white: #FFFFFF;
  --ink: #16302F;
  --ink-soft: #4A6060;
  --line: #CFDCD8;

  --display: "Familjen Grotesk", "Figtree", system-ui, sans-serif;
  --text: "Figtree", system-ui, sans-serif;

  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
}


.wrap { width: min(100% - 2rem, 78rem); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--white); color: var(--lagoon); }
.skip-link:focus { top: 1rem; }
.site-header, .site-footer { font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; }
.site-header *, .site-footer * { box-sizing: border-box; }
.site-header ul, .site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-header a:focus-visible, .site-header button:focus-visible, .site-header summary:focus-visible { outline: 3px solid var(--reef); outline-offset: 3px; border-radius: 2px; }
.site-footer a:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 2px; }

/* Buttons */
.btn {
  display: inline-block; padding: .72em 1.3em; border: 2px solid transparent;
  border-radius: 1.5em 1.2em 1.4em 1.1em;
  font-weight: 650; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
  font-family: inherit; font-size: 1rem;
}
.btn small { display: block; font-size: .8rem; font-weight: 500; }
.btn--sun { background: var(--sun); color: var(--lagoon); }
.btn--sun:hover { background: #FFD966; color: var(--lagoon); }
.btn--ghost { border-color: currentColor; color: var(--white); background: transparent; }
.btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--lagoon); }
.btn--lagoon { background: var(--lagoon); color: var(--white); }
.btn--lagoon:hover { background: var(--lagoon-soft); color: var(--white); }


/* Header */
.site-header { background: var(--white); position: relative; z-index: 20; }
.site-header__inner { display: flex; align-items: center; gap: var(--space-2) var(--space-4); padding-block: .85rem; flex-wrap: wrap; }
.site-logo img { width: 210px; height: auto; }
.site-header__cta { margin-left: auto; }
.nav-toggle { order: 2; display: none; margin-left: auto; padding: .55rem .9rem; border: 2px solid var(--lagoon); border-radius: 1.2em 1em 1.1em .9em; background: none; color: var(--lagoon); font: 600 1rem var(--text); cursor: pointer; }
.site-nav__list { display: flex; gap: var(--space-3); align-items: center; }
.nav-group { position: relative; }
.nav-group summary, .nav-link { display: block; padding: .4rem .1rem; color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; }
.nav-group summary::marker { color: var(--ink-soft); }
.nav-group summary:hover, .nav-link:hover { color: var(--reef); }
.nav-group ul { position: absolute; top: calc(100% + .4rem); left: -1rem; min-width: 15rem; padding: .6rem; background: var(--white); border: 1px solid var(--line); border-radius: .9rem; box-shadow: 0 14px 30px rgb(7 65 79 / .16); }
.nav-group li a { display: block; padding: .5rem .65rem; border-radius: .5rem; color: var(--ink); text-decoration: none; }
.nav-group li a:hover { background: var(--salt); color: var(--reef); }
[aria-current="page"] { color: var(--reef); font-weight: 650; }

@media (max-width: 860px) {
  .site-header__inner { gap: .75rem .6rem; }
  .site-logo img { width: clamp(126px, 36vw, 170px); }
  .js .nav-toggle { display: block; }
  .site-header__cta { order: 1; margin-left: auto; padding: .55rem .8rem; font-size: .95rem; white-space: nowrap; }
  .nav-toggle { margin-left: 0; padding: .55rem .75rem; font-size: .95rem; }
  .site-nav { order: 3; width: 100%; }
  .js .site-nav:not(.is-open) { display: none; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list > li { border-top: 1px solid var(--line); }
  .nav-group summary, .nav-link { padding: .8rem 0; }
  .nav-group ul { position: static; padding: 0 0 .6rem .6rem; border: 0; box-shadow: none; }
}


/* Footer */
.site-footer { background: var(--lagoon); color: var(--white); }
.site-footer a { color: var(--white); }
.site-footer a:hover { color: var(--sun); }
.site-footer :focus-visible { outline-color: var(--sun); }
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-3) var(--space-4); padding-block: var(--space-5) var(--space-3); }
.site-footer__name { margin: 0; max-width: 14em; font-family: var(--display); font-size: 1.6rem; line-height: 1.2; }
.site-footer__links li { padding-block: .2rem; }
.site-footer__legal { grid-column: 1 / -1; padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / .22); font-size: .92rem; }
.site-footer__legal p { margin: 0; }
@media (max-width: 720px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } .site-footer__name { grid-column: 1 / -1; } }