/* App-only additions to the design system.
 *
 * design-system/stellamaris.css is shared with the Claude Design project and
 * is the source of truth for anything that has a design decision behind it.
 * This file is for what a static preview never has to answer: making the footer
 * sit at the bottom of a short page, collapsing the nav on a phone, and the
 * couple of modifiers the app needs on top of design-system components.
 *
 * If something here starts making a *design* decision, it belongs upstream in
 * stellamaris.css instead, so Design and the app cannot disagree about it.
 */

/* ---------- Sheet as a page frame ---------- */
/* min-height on the flex column, not height: a fixed 100% overflows once the
 * page is taller than the viewport and leaves dead space past the footer. */

.smt-sheet--app { display: flex; flex-direction: column; min-height: 100vh; }
.smt-main { flex: 1; }

/* The flash sits above the page's own padding, so it needs the horizontal
 * inset without the vertical one. */
.smt-pad--flush { padding-top: var(--sp-5); padding-bottom: 0; }

/* ---------- Header ---------- */

.smt-header__home { display: block; flex: none; line-height: 0; position: relative; z-index: 1; }

/* ---------- Nav, and its phone form ---------- */
/* The design system draws .smt-nav as one flex row, which is the desktop
 * answer. Below 48rem that row is wider than the screen, so it is replaced by
 * a disclosure rather than allowed to wrap into the logo. */

.smt-menu { display: none; position: relative; }

@media (max-width: 47.999rem) {
  .smt-nav { display: none; }
  .smt-menu { display: block; }
  .smt-header__inner { min-height: 5.5rem; }
  .smt-header__logo { width: 110px; }
}

.smt-menu__button {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px, the minimum comfortable target -- this audience skews older. */
  width: 2.75rem;
  height: 2.75rem;
  color: var(--sea-ink);
  cursor: pointer;
  list-style: none;
}
.smt-menu__button::-webkit-details-marker { display: none; }
.smt-menu__button svg { width: 1.75rem; height: 1.75rem; }

.smt-menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 15rem;
  padding: var(--sp-4);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(18, 74, 91, 0.16);
}

.smt-menu__panel a:not(.smt-btn) {
  font-weight: 600;
  text-decoration: none;
  color: var(--sea-ink);
}
.smt-menu__panel a:not(.smt-btn):hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Footer ---------- */
/* The design system defines the footer ground, the rule and the legal row. The
 * brand block above them is the app's, because it renders live nav pages. */

.smt-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}

.smt-wordmark--footer { font-size: var(--text-2xl); color: var(--sea-mist); }
.smt-footer__tagline { margin: var(--sp-2) 0 0; font-size: var(--text-sm); color: var(--sea-mid); }

.smt-footer__nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--text-sm); }

/* ---------- Rich text from the editor ---------- */
/* ActionText output on the public site. Trix wraps its OUTPUT in .trix-content
 * as well as its editor, so this is scoped to a class the app applies rather
 * than to .trix-content, which would put an editor border and a 300px
 * min-height around every published paragraph. */

.smt-prose > :last-child { margin-bottom: 0; }
.smt-prose h2 { font-size: var(--text-xl); margin: var(--sp-6) 0 var(--sp-4); }
.smt-prose h3 { font-size: var(--text-lg); margin: var(--sp-5) 0 var(--sp-3); }
.smt-prose ul, .smt-prose ol { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.smt-prose li { margin-bottom: var(--sp-2); }
.smt-prose img { max-width: 100%; height: auto; }
.smt-prose blockquote {
  margin: 0 0 var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 3px solid var(--sea-mid);
  color: var(--ink-soft);
}
.smt-prose table { width: 100%; border-collapse: collapse; }
/* Imported WordPress tables are wider than a phone; let them scroll in place
 * rather than pushing the whole page sideways. */
.smt-prose .smt-scroll, .smt-scroll { overflow-x: auto; }

/* ---------- hidden ---------- */
/* The filter toggles cards and grids with element.hidden. Every design-system
 * component it touches sets its own display (.smt-card is flex, .smt-grid is
 * grid), and an author display rule beats the UA's [hidden] { display: none }.
 * Tailwind's preflight happens to ship this same rule, but the filter must not
 * silently depend on Tailwind still being loaded to keep working. */
[hidden] { display: none !important; }

/* A trip with no hero: the mark on a tinted ground, not a stretched logo. */
.smt-card__media--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sea-mist);
}
.smt-card__media--blank img { width: 6rem; height: 6rem; opacity: 0.5; }

/* The whole media block is a link to the trip; the title link is the one that
 * carries the accessible name, so this one is removed from the tab order. */
.smt-card > a { display: block; line-height: 0; }

/* ---------- Trip page layout ---------- */
/* The design system has no sidebar pattern -- it is a layout the app needs for
 * the "Upcoming Trips" rail the live site carries, not a design decision. */

.smt-with-aside { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 64rem) { .smt-with-aside { grid-template-columns: 2fr 1fr; gap: var(--sp-8); } }

.smt-trip-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.smt-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.smt-aside-list li { display: flex; gap: var(--sp-3); }
.smt-aside-list img { width: 4rem; height: 4rem; object-fit: cover; display: block; flex: none; }
.smt-aside-list a { font-weight: 600; text-decoration: none; line-height: var(--leading-tight); }
.smt-aside-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.smt-aside-list p { margin: var(--sp-1) 0 0; }

/* Section headings inside the flow of a long trip page need air above them
 * that a heading opening a page does not. */
.smt-prose + .smt-section-heading,
.smt-days + .smt-section-heading,
.smt-days + .smt-callout,
.smt-prose + .smt-callout { margin-top: var(--sp-7); }

.smt-callout .smt-btn { margin-top: var(--sp-2); }

/* ---------- Forms ---------- */
/* The design system defines the controls (.smt-field, .smt-label, .smt-input);
 * these are the arrangements around them. */

.smt-form { max-width: 46rem; }

.smt-pair { display: grid; gap: 0 var(--sp-5); }
@media (min-width: 40rem) { .smt-pair { grid-template-columns: 1fr 1fr; } }

.smt-fieldset { border: 0; margin: 0 0 var(--sp-5); padding: 0; }
.smt-fieldset legend { padding: 0; margin-bottom: var(--sp-3); }

/* Checkbox and radio rows: the whole line is the target, and the control keeps
 * its own size rather than being stretched by the flex row. */
.smt-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  cursor: pointer;
  line-height: var(--leading-tight);
  padding: var(--sp-2) 0;
}
.smt-choice input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--sea-ink); }

.smt-form .smt-section-heading { font-size: var(--text-xl); margin: var(--sp-6) 0 var(--sp-4); }
.smt-form input[type="submit"] { margin-top: var(--sp-4); }

/* ---------- Forms ---------- */
/* The design system defines the controls (.smt-field, .smt-label, .smt-input);
 * these are the arrangements around them. */

.smt-form { max-width: 46rem; }

.smt-pair { display: grid; gap: 0 var(--sp-5); }
@media (min-width: 40rem) { .smt-pair { grid-template-columns: 1fr 1fr; } }

.smt-fieldset { border: 0; margin: 0 0 var(--sp-5); padding: 0; }
.smt-fieldset legend { padding: 0; margin-bottom: var(--sp-3); }

/* Checkbox and radio rows: the whole line is the target, and the control keeps
 * its own size rather than being stretched by the flex row. */
.smt-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  cursor: pointer;
  line-height: var(--leading-tight);
  padding: var(--sp-2) 0;
}
.smt-choice input { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; accent-color: var(--sea-ink); }

.smt-form .smt-section-heading { font-size: var(--text-xl); margin: var(--sp-6) 0 var(--sp-4); }
.smt-form input[type="submit"] { margin-top: var(--sp-4); }

/* ---------- Booking summary ---------- */
/* A definition list read as label/value pairs, so the label stays left and the
 * number stays right and both stay on one line until they cannot. */

.smt-summary { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.smt-summary > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); }
.smt-summary dt { color: var(--ink-soft); }
.smt-summary dd { margin: 0; text-align: right; font-weight: 600; }
.smt-summary__credit dt, .smt-summary__credit dd { color: var(--ok); }
.smt-summary__total { border-top: 1px solid var(--sea-mid); padding-top: var(--sp-3); }
.smt-summary__total dt { color: var(--ink); font-weight: 700; }

/* Reference numbers, card fields, codes: tabular so digits line up, and a face
 * that cannot confuse 0 with O when someone reads it down the phone. */
.smt-ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }

.smt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---------- Test-mode bar ---------- */
/* Deliberately not a design-system component: it exists only while simulated
 * payments are on, and it should look like scaffolding, because it is. */

.smt-testbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--warn-wash);
  border-top: 2px solid var(--warn);
  border-bottom: 2px solid var(--warn);
  color: var(--warn);
  font-size: var(--text-sm);
  font-weight: 600;
}
@media (min-width: 64rem) { .smt-testbar { padding-left: var(--sp-8); padding-right: var(--sp-8); } }

/* ---------- Holding page ---------- */

.smt-splash { display: grid; gap: var(--sp-6); align-items: center; }
@media (min-width: 55rem) { .smt-splash { grid-template-columns: 5fr 7fr; gap: var(--sp-8); } }
.smt-splash img { display: block; width: 100%; height: auto; }

/* ---------- Nav button ---------- */
/* .smt-nav a is (0,1,1) and .smt-btn--primary is (0,1,0), so the nav's link
 * colour was winning and the Contact button rendered as sea-ink text on a
 * sea-ink ground -- a solid teal rectangle with an invisible label. The nav is
 * the only place a button sits inside a link container, so the fix is here
 * rather than upstream. */
.smt-nav a.smt-btn--primary { color: #fff; }
.smt-nav a.smt-btn--primary:hover { color: #fff; }
.smt-nav a.smt-btn--secondary { color: var(--sea-ink); }

/* The wordmark is a link in the header; it should not pick up link styling. */
.smt-header__home { text-decoration: none; }
.smt-header__home:hover .smt-wordmark { color: var(--sea-ink); }
.smt-header__inner .smt-wordmark { font-size: clamp(1.75rem, 4vw, 2.75rem); }

/* ---------- Reviews page ---------- */
/* The homepage shows three in a row; the reviews page shows all of them, and a
 * fixed three columns leaves a ragged last row. */
.smt-pad > .smt-quotes { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

/* ---------- Staff bio heading ---------- */
/* The live page opens the founder's story with a heading inside the text
 * column, not with a page title above the row. It is an h1 here because it is
 * still the page's subject and a page needs one, but it is sized and coloured
 * as the live one is. */
.smt-bio__heading {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--sea-ink);
  line-height: var(--leading-tight);
  margin: 0 0 var(--sp-4);
}

/* The legal row's right-hand side holds more than one link now. */
.smt-footer__links { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

/* A CTA that is nothing but its button still needs room around it. */
.smt-cta-button { padding: 0 var(--sp-5) var(--sp-6); margin: 0; }
@media (min-width: 64rem) { .smt-cta-button { padding-left: var(--sp-8); padding-right: var(--sp-8); } }

/* A promo band with no photograph is one column, not two with one empty. */
.smt-band__inner--solo { grid-template-columns: 1fr; }
.smt-band__inner--solo > div { max-width: 46rem; }

/* ---------- Sign in ---------- */
/* Narrower than the booking forms: this one is two fields and a button, and at
 * 46rem the inputs stretch far past anything anyone types into them. */
.smt-signin { max-width: 26rem; }

/* A required consent, marked as the live form marks it. */
.smt-required { color: var(--alert); font-weight: 600; text-transform: none; letter-spacing: 0; }