/* ============================================================================
   NAUTIKA · Public site chrome
   ----------------------------------------------------------------------------
   Styles shared by every page of the public site, CMS-rendered and booking
   funnel alike. Page-specific styling stays in that page's own @section Styles;
   what lives here is only what more than one page needs.
   ========================================================================== */

  /* ---- Site navbar: full-width, secondary-color bar with a height-scaled logo ----
     The outer <nav class="site-navbar"> is a plain full-bleed color strip (no
     framework classes, so no competing background/position/padding). The actual
     layout lives on the inner .nk-navbar.nk-container div: .nk-navbar supplies the
     flex/grid + default vertical padding, .nk-container supplies the same
     max-width + centering + gutter padding used by the rest of the page's
     sections, so the logo lines up with the hero/section content's left edge
     instead of just sitting at the viewport edge. */
  /* The bar stays at the top of the viewport on every page. Two positions, for two reasons:

     - sticky by default. It occupies its own space in the flow, so nothing is hidden underneath
       it at rest, and it pins as soon as the page scrolls. The booking funnel's own sticky
       elements (progress rail, fare pane, seat-map head) pin *below* it by offsetting
       --fsp-topbar-h, which is why that variable is defined here rather than in booking.css.
     - fixed only where the page's hero is drawn underneath the bar (the landing page), which
       needs the bar out of the flow entirely.

     It used to be static everywhere but the landing page, which meant the whole bar scrolled
     away the moment a visitor started picking seats. */
  .site-navbar{position:sticky;left:0;right:0;top:0;z-index:var(--nk-z-nav);background:var(--nk-secondary)}
  .site-navbar-floating{position:fixed}
  /* The bar's own height: .nk-navbar's .8rem padding block, either side of the logo. Anything
     that pins under the bar offsets by this rather than measuring at runtime, so there is no
     first-paint jump. Keep in step with the logo height rules below. */
  :root{--site-navbar-h:4.6rem}
  @media(max-width:900px){:root{--site-navbar-h:3.4rem}}
  .site-navbar .nk-navbar{position:static;background:none;backdrop-filter:none;border:none}
  .site-navbar .nk-navbar-brand{display:flex;align-items:center;color:var(--nk-ink)}
  .site-navbar .nk-navbar-brand img{height:3rem;width:auto;display:block}
  .site-navbar .nk-navbar-link{color:var(--nk-ink)}
  .site-navbar .nk-navbar-link:hover{color:var(--nk-ink);background:rgba(4,18,31,.08)}
  .site-navbar .nk-navbar-link.nk-active{color:var(--nk-ink)}
  .site-navbar .nk-navbar-link.nk-active::after{background:var(--nk-ink)}
  .site-navbar .nk-hamburger{color:var(--nk-ink);border-color:rgba(4,18,31,.3)}
  .site-navbar .nk-navbar-actions .nk-btn-ghost{color:var(--nk-ink)}
  @media(min-width:901px){
    /* The drawer's backdrop is only positioned (fixed) by the framework's sub-900px block. Above
       that it would be an ordinary div — and a fourth child of this grid, which auto-places it into
       the actions' column and wraps Sign in onto a second row. It has no job on a desktop. */
    .site-navbar .nk-navbar-backdrop{display:none}
    .site-navbar .nk-navbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
    .site-navbar .nk-navbar-brand{grid-column:1;justify-self:start}
    .site-navbar .nk-navbar-nav{grid-column:2;justify-self:center;margin:0}
    .site-navbar .nk-navbar-actions{grid-column:3;justify-self:end}
  }
  @media(max-width:900px){
    .site-navbar .nk-navbar-brand img{height:1.8rem}
  }

  /* ---- Main menu: up to three layers, CMS-managed ----
     The bar's items come from a Block List on the home node (see Services/SiteNavigationService and
     Views/Partials/_SiteNavItems.cshtml), so an item may now have a sub-menu, and that sub-menu may
     have one of its own.

     Two behaviours, split by width rather than by device:

     - From 901px the sub-menus are hover/focus panels. That is CSS alone — :hover for a mouse,
       :focus-within for a keyboard — so the menu opens even if scripting never arrives.
     - Below 901px .nk-navbar-nav is the framework's fixed drawer, and hover does not exist. There
       the sub-menus are collapsed rows opened by .is-open, which wwwroot/js/nautika.sitenav.js sets.
       The :hover rule is deliberately inside the desktop media query: left global, a tap would
       "stick" a panel open on a phone. */
  .site-nav-item{position:relative}
  .site-navbar .site-nav-toplink{display:flex;align-items:center;gap:.4rem;padding:.55rem .9rem;
    border-radius:var(--nk-radius-sm);font-weight:600;font-size:var(--nk-text-sm);color:var(--nk-ink);
    background:none;border:none;cursor:pointer;position:relative;font-family:inherit}
  .site-navbar .site-nav-toplink:hover{background:rgba(4,18,31,.08)}
  .site-navbar .nk-navbar-link{display:flex;align-items:center;gap:.4rem}
  /* The caret that says "there is more under this". Hidden on a phone for an item that is also a
     link, where .site-nav-more is the control that opens the sub-menu instead. */
  .site-nav-caret{font-size:1.05rem;line-height:1;transition:transform var(--nk-dur) var(--nk-ease)}
  .site-nav-item.is-open>*>.site-nav-caret{transform:rotate(180deg)}
  /* The sub-menu panel. Kept in the layout (visibility, not display) so its transition runs and so
     a screen reader is not surprised by markup appearing from nowhere. */
  .site-nav-sub{display:flex;flex-direction:column;gap:.1rem}
  .site-nav-sub-link,.site-nav-sub .site-nav-heading{display:flex;align-items:center;gap:.6rem;
    padding:.6rem .8rem;border-radius:var(--nk-radius-sm);font-weight:600;font-size:var(--nk-text-sm);
    color:var(--nk-ink-soft);background:none;border:none;cursor:pointer;width:100%;text-align:left;
    font-family:inherit}
  .site-nav-sub-link:hover,.site-nav-sub .site-nav-heading:hover{background:var(--nk-primary-50);color:var(--nk-primary-700)}
  .site-nav-sub-link.nk-active{color:var(--nk-primary-700);background:var(--nk-primary-50)}
  .site-nav-sub .site-nav-caret{margin-left:auto}
  .site-nav-more{display:none;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
    border:none;background:none;color:inherit;border-radius:var(--nk-radius-sm);cursor:pointer}

  @media(min-width:901px){
    .site-nav-sub{position:absolute;top:100%;left:0;min-width:15rem;padding:.35rem;
      background:var(--nk-surface);border:1px solid var(--nk-line);border-radius:var(--nk-radius);
      box-shadow:var(--nk-shadow-lg);z-index:var(--nk-z-nav);
      opacity:0;visibility:hidden;transform:translateY(-.35rem);
      transition:opacity var(--nk-dur) var(--nk-ease),transform var(--nk-dur) var(--nk-ease),visibility var(--nk-dur)}
    .site-nav-item:hover>.site-nav-sub,
    .site-nav-item:focus-within>.site-nav-sub,
    .site-nav-item.is-open>.site-nav-sub{opacity:1;visibility:visible;transform:none}
    /* The third layer flies out sideways rather than down, so it cannot cover its own parent. */
    .site-nav-sub .site-nav-sub{top:-.35rem;left:100%;margin-left:.2rem}
    .site-nav-sub .site-nav-caret{transform:rotate(-90deg)}
    .site-nav-item.is-open>.site-nav-sub .site-nav-caret{transform:rotate(-90deg)}
    /* A sub-menu near the right edge would otherwise run off the viewport. */
    .nk-navbar-nav>.site-nav-item:last-child>.site-nav-sub{left:auto;right:0}
    .nk-navbar-nav>.site-nav-item:last-child .site-nav-sub .site-nav-sub{left:auto;right:100%;margin:0 .2rem 0 0}
  }

  /* The drawer's own close control and its backdrop. The framework's drawer ships with neither:
     initNavbar only toggles .nk-open on the burger, so with the burger hidden UNDER the drawer a
     visitor's only way out was to pick a link. The backdrop div is rendered by _SiteNavbar.cshtml
     and both are wired in wwwroot/js/nautika.sitenav.js; neither carries .nk-navbar-link, for the
     same reason the sub-menu carets don't (initNavbar would treat them as navigation). */
  .site-nav-close{display:none}
  @media(max-width:900px){
    .site-nav-close{position:absolute;top:.9rem;right:1rem;display:inline-flex;align-items:center;
      justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--nk-radius-sm);
      border:1px solid var(--nk-line);background:var(--nk-surface);color:var(--nk-ink-soft);cursor:pointer}
    .site-nav-close:hover{color:var(--nk-ink);background:var(--nk-surface-2)}
  }
  @media(max-width:900px){
    .site-nav-item{display:flex;flex-wrap:wrap;align-items:center}
    .site-navbar .nk-navbar-nav .nk-navbar-link,
    .site-navbar .nk-navbar-nav .site-nav-toplink{flex:1;padding:.9rem 1rem;font-size:var(--nk-text-base);
      color:var(--nk-ink-soft)}
    .site-nav-more{display:inline-flex}
    .site-nav-item.has-sub.has-link>.nk-navbar-link>.site-nav-caret{display:none}
    .site-nav-sub{flex-basis:100%;display:none;padding-left:1rem;border-left:2px solid var(--nk-line)}
    .site-nav-item.is-open>.site-nav-sub{display:flex}
    .site-nav-more[aria-expanded="true"] .material-symbols-outlined{transform:rotate(180deg)}
  }

/* ==========================================================================
   SEARCH DECK, ON THE WIDTHS A THUMB DRIVES IT
   --------------------------------------------------------------------------
   The deck itself belongs to Nautika.Components; what lives here is only what
   the public site's phone layout needs on top of it.

   - The swap button comes back. The framework hides it below 820px, which
     leaves a phone visitor re-picking both locations to reverse a route — the
     single most common correction on a return leg. Between 521 and 820px From
     and To sit side by side, so the button rides the seam between them; at
     520px and below they stack, so it becomes its own centred row with the
     icon turned to point up-down.
   - Inputs hold a 16px floor. Below that, iOS Safari zooms the whole page on
     focus, and the deck jumps exactly as the keyboard arrives.
   ========================================================================== */

  @media(max-width:820px){
    .booking input{font-size:max(16px,var(--nk-text-base))}
    .booking .trip-leg{position:relative}
    .booking .swap-btn{display:flex!important;position:absolute;z-index:2;margin:0;
      width:2.3rem;height:2.3rem;left:calc(50% - 1.15rem);top:1rem;
      box-shadow:0 2px 8px rgba(4,18,31,.45)}
  }
  @media(max-width:520px){
    .booking .swap-btn{position:static;align-self:center;justify-self:center;left:auto;top:auto;
      margin-block:-.15rem;box-shadow:none}
    .booking .swap-btn .material-symbols-outlined{transform:rotate(90deg)}
    /* The hover rotation composes with the icon turn rather than replacing it. */
    .booking .swap-btn:hover{transform:none}
  }

/* ==========================================================================
   PROSE
   --------------------------------------------------------------------------
   Long-form body styling for anything a rich-text field emits, which the
   Nautika design system does not have. This matters more than it looks:
   nautika.core.css opens with a `* { margin: 0 }` reset, so CMS-authored
   <p>/<h2>/<ul>/<blockquote> arrive with no vertical rhythm at all, classless
   <table> and <figure> are unstyled, and inline links get colour but no
   underline. Everything an editor can write has to be given back its spacing
   here.

   It started in nautika.blog.css and moved here when the composable content
   pages needed it too. It is deliberately self-contained, so it can be lifted
   into Nautika.Components later — the internal portals will want it the moment
   they render editor HTML — without dragging a page-specific rule along.
   ========================================================================== */

.nk-prose{color:var(--nk-ink);font-size:var(--nk-text-base);line-height:1.75;
  /* A measure, not a width: long-form copy is unreadable at full container width.
     max-width on the prose block itself rather than its parent, so a full-bleed
     figure inside it can still break out (see .nk-prose > figure.is-wide). */
  max-width:68ch}
.nk-prose > * + *{margin-top:1.15em}

.nk-prose h2,.nk-prose h3,.nk-prose h4{color:var(--nk-ink);font-family:var(--nk-font-display);
  line-height:1.25;letter-spacing:-.01em;scroll-margin-top:calc(var(--site-navbar-h) + 1.5rem)}
.nk-prose h2{font-size:var(--nk-text-2xl);font-weight:800;margin-top:2.4em}
.nk-prose h3{font-size:var(--nk-text-xl);font-weight:700;margin-top:2em}
.nk-prose h4{font-size:var(--nk-text-lg);font-weight:700;margin-top:1.6em}
.nk-prose h2:first-child,.nk-prose h3:first-child,.nk-prose h4:first-child{margin-top:0}
/* A hairline under h2 only — enough to read as a section break without ruling the page. */
.nk-prose h2{padding-bottom:.35em;border-bottom:1px solid var(--nk-line)}

.nk-prose p{margin-top:1.15em}
.nk-prose strong,.nk-prose b{font-weight:700;color:var(--nk-ink)}
.nk-prose em,.nk-prose i{font-style:italic}

/* Body links are underlined on purpose. The global `a` rule gives colour only, and colour
   alone is not an accessible link affordance inside a wall of text. */
.nk-prose a{color:var(--nk-primary-700);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--nk-primary) 40%,transparent);
  text-underline-offset:.18em;text-decoration-thickness:.08em;
  transition:text-decoration-color var(--nk-dur-fast) var(--nk-ease)}
.nk-prose a:hover{text-decoration-color:var(--nk-primary)}

/* The reset strips markers from any *classed* list; these are unclassed, but restate it
   anyway so a pasted `<ul class="...">` from the migration still shows its bullets. */
.nk-prose ul,.nk-prose ol{padding-left:1.5em;margin-top:1.15em}
.nk-prose ul{list-style:disc}
.nk-prose ol{list-style:decimal}
.nk-prose li{margin-top:.5em;padding-left:.25em}
.nk-prose li::marker{color:var(--nk-primary)}
.nk-prose ul ul,.nk-prose ol ol,.nk-prose ul ol,.nk-prose ol ul{margin-top:.5em}

.nk-prose blockquote{margin-top:1.6em;padding:.2em 0 .2em 1.25em;border-left:3px solid var(--nk-primary);
  color:var(--nk-ink-soft);font-size:var(--nk-text-lg);font-style:italic}
.nk-prose blockquote p{margin-top:.6em}
.nk-prose blockquote p:first-child{margin-top:0}

.nk-prose img{border-radius:var(--nk-radius);margin-top:1.6em;width:100%;height:auto}
.nk-prose figure{margin-top:1.8em}
.nk-prose figure img{margin-top:0}
.nk-prose figcaption{margin-top:.65em;font-size:var(--nk-text-sm);color:var(--nk-muted);text-align:center}

.nk-prose hr{margin-top:2.4em;border:0;border-top:1px solid var(--nk-line)}

.nk-prose code{font-family:var(--nk-font-mono);font-size:.88em;background:var(--nk-surface-2);
  padding:.15em .4em;border-radius:var(--nk-radius-xs)}
.nk-prose pre{margin-top:1.6em;padding:1rem 1.2rem;background:var(--nk-abyss);color:var(--nk-deck-text);
  border-radius:var(--nk-radius-sm);overflow-x:auto}
.nk-prose pre code{background:none;padding:0;color:inherit}

/* A table wide enough to overflow must scroll inside itself, never push the page sideways. */
.nk-prose table{width:100%;margin-top:1.6em;border-collapse:collapse;font-size:var(--nk-text-sm)}
.nk-prose thead th{text-align:left;font-weight:700;color:var(--nk-ink);
  border-bottom:2px solid var(--nk-line-strong);padding:.6rem .75rem}
.nk-prose td,.nk-prose th{padding:.6rem .75rem;border-bottom:1px solid var(--nk-line);vertical-align:top}
.nk-prose tbody tr:hover{background:var(--nk-surface-2)}
.nk-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.nk-prose sup{font-size:.72em;vertical-align:super;line-height:0}

/* ==========================================================================
   CONTACT DETAILS AND SOCIAL LINKS
   --------------------------------------------------------------------------
   Shared by the footer's Contact Info column and the Contact Info block a page
   can carry, because both render the same partial over the same details from
   the home node. The `-footer` variant only changes colour: the layout is the
   same in both places, so a change to one is a change to both.
   ========================================================================== */

  .site-contact{display:flex;flex-direction:column;gap:1rem}
  .site-contact-item{display:flex;align-items:flex-start;gap:.75rem}
  .site-contact-icon{font-size:1.25rem;line-height:1.5;color:var(--nk-primary);flex-shrink:0}
  .site-contact-body{display:flex;flex-direction:column;gap:.35rem;font-style:normal;
    font-size:var(--nk-text-sm);line-height:1.6;color:var(--nk-ink-soft)}
  .site-contact-body a{color:var(--nk-ink-soft);text-decoration:none}
  .site-contact-body a:hover{color:var(--nk-primary-700);text-decoration:underline}
  .site-contact-phone{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem}
  .site-contact-label{font-weight:700;color:var(--nk-ink)}

  /* On the footer's dark ground. Only colours change — see the note above. */
  .site-contact-footer .site-contact-icon{color:var(--nk-reef)}
  .site-contact-footer .site-contact-body{color:var(--nk-deck-muted)}
  .site-contact-footer .site-contact-body a{color:var(--nk-deck-muted)}
  .site-contact-footer .site-contact-body a:hover{color:#fff}
  .site-contact-footer .site-contact-label{color:var(--nk-deck-text,#fff)}

  .site-social{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin-top:.35rem}
  .site-social a{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;
    border-radius:50%;border:1px solid var(--nk-line);color:var(--nk-ink-soft);
    transition:color var(--nk-dur) var(--nk-ease),border-color var(--nk-dur) var(--nk-ease),
      background var(--nk-dur) var(--nk-ease),transform var(--nk-dur) var(--nk-ease)}
  .site-social a:hover{color:var(--nk-primary-700);border-color:var(--nk-primary);
    background:var(--nk-primary-50);transform:translateY(-2px)}
  .site-social-icon{width:1.05rem;height:1.05rem;display:block}
  .site-contact-footer .site-social a{border-color:var(--nk-deck-line);color:var(--nk-deck-muted)}
  .site-contact-footer .site-social a:hover{color:#fff;border-color:var(--nk-reef);
    background:rgba(255,255,255,.08)}

  /* The footer's brand is the logo, not a wordmark beside an icon. Capped by height so a
     replacement mark of any width sits on the same baseline as the tagline under it. */
  .site-footer-brand{display:inline-flex;align-items:center}
  .site-footer-brand img{height:2.6rem;width:auto;display:block}
  /* The site's own logo is a dark wordmark, drawn for the light footer the legacy site had. On this
     footer's dark ground it is all but invisible, so the *fallback* is whited out. An editor who
     uploads a footer logo has picked a mark for this ground, and it is left untouched. */
  .site-footer-brand.is-default img{filter:brightness(0) invert(1);opacity:.92}

  @media(prefers-reduced-motion:reduce){
    .site-social a{transition:none}
    .site-social a:hover{transform:none}
  }

/* ==========================================================================
   SITE FOOTER
   --------------------------------------------------------------------------
   These three rules used to live in landingPage.cshtml's own @section Styles,
   from before the footer was lifted into a shared partial. That left the
   footer painted only on the home page: every other page — the blog, the
   activities pages, anything on a Content Page — rendered the same markup with
   light-on-dark colours over a white ground, which is close to invisible.
   Shared markup needs shared styling, so it lives here with the rest of the
   chrome that every page loads.
   ========================================================================== */

  .site-footer{background:var(--nk-abyss);color:#fff;padding-block:3.5rem 2rem}
  .site-footer a{color:rgba(217,232,244,.78)}
  .site-footer a:hover{color:#fff}
  /* The link columns' rows were 24px tall — text-sized, not finger-sized. Padding rather than a
     bigger font keeps the column's look while the target grows to ~34px. */
  .site-footer .nk-stack > a{padding-block:.3rem}
  .site-footer .nk-stack{gap:.2rem}

/* ==========================================================================
   SCREEN-READER-ONLY TEXT
   --------------------------------------------------------------------------
   Nautika.Components has no class for this and several places here need one:
   a star rating drawn as glyphs is decoration, and the number it stands for has
   to be said in words beside it.

   clip-path rather than display:none or visibility:hidden — both of those take
   the text out of the accessibility tree, which is the opposite of the point.
   ========================================================================== */

  .nk-sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap;border:0}