/* ── main.css ────────────────────────────────────────────────────────────────
   Design tokens + shared components loaded by both base templates.
   nav-height is defined per-base in public.css / app.css since it differs.
   ────────────────────────────────────────────────────────────────────────── */

/* ── CSS custom properties ───────────────────────────────────────── */
:root {
  --c-primary:       #2B4C7E;
  --c-primary-dark:  #142038;
  --c-primary-light: #3D6BA5;
  --c-background:    #EAEFFA;
  --c-accent:        #1A6B4A;
  --c-accent-hover:  #22845C;
  --c-snow:          #F8FAFF;
  --c-grey-light:    #E8EAF0;
  --c-grey-mid:      #9AA3B0;
  --c-grey-dark:     #474952;
  --c-text:          #1C2B3A;
  --c-text-muted:    #6B7A8D;
  --c-white:         #FFFFFF;
  --c-success:       #1A6B4A;
  --c-warning:       #F0833A;
  --c-danger:        #D94040;
  --c-info:          #3BA3C8;
  --c-summit-gold:   #C9A84C;
  --c-background2:    #f2f5f3;
  --font-heading:    'DM Serif Display', Georgia, serif;
  --font-body:       'DM Sans', system-ui, -apple-system, sans-serif;
  --radius-sm:       6px;
  --radius-md:       10px;
  --radius-lg:       16px;
  --shadow-sm:       0 1px 3px rgba(0,0,0,.08);
  --shadow-md:       0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:       0 10px 32px rgba(0,0,0,.14);
  --nav-logo-max-height: 88px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: var(--c-background);
}

/* ── Links ───────────────────────────────────────────────────────── */
/* Text-primary by default; components with their own link colour (buttons,
   nav, etc.) override this via a more specific selector. */
a { color: var(--c-primary); }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1.25rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s, color .18s, border-color .18s, transform .1s, box-shadow .18s;
  border: 2px solid transparent;
  line-height: 1.4;
  white-space: nowrap;
}

.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}
.btn--primary:hover {
  background: var(--c-primary-light);
  border-color: var(--c-primary-light);
}

.btn--accent, .btn--secondary {
  background: var(--c-accent);
  color: var(--c-white);
  border-color: var(--c-accent);
}
.btn--accent:hover, .btn--secondary:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}

.btn--ghost-dark-bg {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,.5);
}
.btn--ghost-dark-bg:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--c-white);
}

.btn--ghost-light-bg {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(var(--c-grey-mid),.5);
}
.btn--ghost-light-bg:hover {
  background: rgba(var(--c-grey-mid),.1);
  border-color: var(--c-white);
}

.btn--grey {
  background: transparent;
  color: var(--c-grey-mid);
  border-color: var(--c-grey-light);
}
.btn--grey:hover {
  color: var(--c-grey-dark);
  border-color: var(--c-grey-mid);
}

.btn--outline, .btn--primary-outline {
  background: transparent;
  color: var(--c-primary);
  border-color: var(--c-primary);
}
.btn--outline:hover, .btn--primary-outline:hover {
  background: var(--c-primary);
  color: var(--c-white);
  border-color: var(--c-primary);
}

.btn--accent-outline {
  background: transparent;
  color: var(--c-accent);
  border-color: var(--c-accent);
}
.btn--accent-outline:hover {
  background: var(--c-accent-hover);
  color: var(--c-white);
  border-color: var(--c-accent-hover);
}

.btn--full { width: 100%; }

.btn--lg {
  padding: .75rem 2rem;
  font-size: 1rem;
}

.btn .ti {
  margin-right: 0.5em;
}

.pr-status-chip .ti {
  margin-right: 0.5em;
}

/* ── CTA button (replaces onmouseover/onmouseout) ────────────────── */
.btn-cta-accent {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.3rem;
  background: var(--c-accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s;
  white-space: nowrap;
}
.btn-cta-accent:hover { background: var(--c-accent-hover); }

/* ── Utilities ───────────────────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

/* ── Button modifiers ────────────────────────────────────────────── */
.btn--sm { font-size: .82rem; padding: .35rem .75rem; }

.btn--danger {
  background: var(--c-danger);
  color: var(--c-white);
  border-color: var(--c-danger);
}
.btn--danger:hover {
  background: #b53333;
  border-color: #b53333;
}

/* Disabled state for btn elements (e.g. blocked by pending action) */
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Form utilities ───────────────────────────────────────────────── */
/* Renders a <form> inline so it does not break surrounding flex/inline flow */
.form-inline { display: inline; }
.line-above {
  margin-top: 1.25rem;
  border-top: 1px solid var(--c-grey-light);
  padding-top: 1rem;
}

/* ── Utility: text colour ────────────────────────────────────────── */
.text-muted   { color: var(--c-text-muted); }
.text-accent  { color: var(--c-accent); }
.text-danger  { color: var(--c-danger); }
.text-primary { color: var(--c-primary); }
.text-warning { color: var(--c-warning); }

/* ── Utility: spacing ────────────────────────────────────────────── */
.mt-1 { margin-top: 1rem; }
.mb-2 { margin-bottom: 2rem; }

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  color: var(--c-text-muted);
  margin-bottom: 1.75rem;
}
.breadcrumb a { color: var(--c-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--c-grey-mid); }

/* ── Next organiser actions row ──────────────────────────────────── */
/* Context-aware action buttons sitting at the foot of an organiser page. */
.next-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-snow);
  border: 1px solid var(--c-grey-light);
  border-radius: var(--radius-md);
}
/* Pushes a trailing action (e.g. "Edit itinerary") over to the right-hand
   edge while the rest of the row stays left-aligned. */
.next-actions-row__end { margin-left: auto; }

/* ── Sidebar shared utilities ─────────────────────────────────────── */
/* Truncating label inside a sidebar-item flex row */
.sidebar-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty-state message inside a sidebar section */
.sidebar-empty {
  padding: .75rem 1rem;
  font-size: .82rem;
  color: var(--c-text-muted);
}

/* ── Participant role labels ───────────────────────────────────────── */
/* Blue organiser badge displayed next to organiser name in lists/tables */
.organiser-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-primary);
  background: #dce6f5;
  border-radius: 20px;
  padding: .15rem .5rem;
  white-space: nowrap;
  margin-left: .35rem;
}

/* Grey pending badge for invited-but-not-joined participants */
.pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .7rem;
  font-weight: 600;
  color: var(--c-text-muted);
  background: var(--c-grey-light);
  border-radius: 20px;
  padding: .15rem .5rem;
  white-space: nowrap;
  margin-left: .35rem;
}

/* Small italic "(organiser)" em label used in participant banners */
.organiser-em { font-size: .72rem; color: var(--c-primary); }

/* Small italic "(you)" em label used in participant chip lists */
.participant-you { font-size: .75rem; }

/* ── Trip info banner (shared across itinerary, payment, and round pages) ─ */
.trip-info {
  background: var(--c-white);
  border: 1.5px solid var(--c-grey-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.trip-info__label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-text-muted);
  margin-bottom: .2rem;
}
.trip-info__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--c-text);
}
.trip-info__name--link {
  text-decoration: none;
  color: var(--c-primary);
}
.trip-info__name--link:hover { text-decoration: underline; }
.trip-info__participants {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .25rem;
}
.trip-info__meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--c-text-muted);
}
.trip-info__type-pill {
  display: inline-block;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: .2rem .6rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c-primary) 10%, transparent);
  color: var(--c-primary);
}

/* Chip flagging an outstanding platform fee — used on the trip intention
   header and the shared trip info banner (itinerary/payment/round pages). */
.fee-outstanding-chip {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .2rem .6rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c-warning) 12%, transparent);
  color: var(--c-warning);
  text-decoration: none;
  white-space: nowrap;
}
.fee-outstanding-chip:hover { text-decoration: underline; }

/* ── Shared navbar logo ───────────────────────────────────────────── */
/* Applied to the logo <img> in both public and app navbars.
   --nav-height is defined by the page-specific CSS (public.css / app.css).
   Logo aspect ratio is 1056×992 ≈ 1.065 (slightly wider than tall).
   At max height (88px) the logo is ~94px wide. */
.navbar-logo {
  /* Grows with viewport width but caps at --nav-logo-max-height.
     Minimum is --nav-height so it never shrinks below the navbar. */
  height: clamp(var(--nav-height, 60px), 10vw, var(--nav-logo-max-height, 88px));
  width: auto;
  /* Anchor the logo to the top of the flex row so it overflows downward only */
  align-self: flex-start;
  /* Keep the top edge a pixel or two below the very top of the page */
  margin-top: 2px;
}

/* Alpine.js: hide elements until Alpine initialises (used by the share widget). */
[x-cloak] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Foundational form-field styles — loaded on every page (public and    */
/* authenticated) so forms look identical everywhere. Specialised form   */
/* widgets live in forms.css.                                           */
/* ------------------------------------------------------------------ */
.form-row { display: grid; gap: 1rem; margin-bottom: 1rem; }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
@media (max-width: 600px) {
  .form-row.cols-2,
  .form-row.cols-3,
  .form-row.cols-4 { grid-template-columns: 1fr; }
}

.field { display: flex; flex-direction: column; gap: .3rem; }
.field label {
  font-size: .78rem;
  font-weight: 600;
  color: var(--c-text);
  letter-spacing: .01em;
}
.field label .req { color: var(--c-danger); margin-left: 2px; }
.field-help {
  font-size: .72rem;
  color: var(--c-text-muted);
  margin-top: .15rem;
}
.field-error { font-size: .75rem; color: var(--c-danger); margin-top: .2rem; }

input.form-input,
select.form-select,
textarea.form-input {
  font-family: var(--font-body);
  font-size: .875rem;
  color: var(--c-text);
  background: var(--c-white);
  border: 1.5px solid var(--c-grey-light);
  border-radius: var(--radius-sm);
  padding: .55rem .8rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input.form-input:focus,
select.form-select:focus,
textarea.form-input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(43,76,126,.08);
}
select.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7A8D' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  padding-right: 2rem;
}
textarea.form-input { resize: vertical; min-height: 70px; }

.check-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--c-text);
  cursor: pointer;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.check-row input[type=checkbox] {
  width: 15px;
  height: 15px;
  accent-color: var(--c-primary);
  margin: 0;
  cursor: pointer;
}
.non-field-errors,
.form-error-summary {
  background: color-mix(in srgb, var(--c-danger) 12%, transparent);
  border: 1px solid var(--c-danger);
  border-radius: var(--radius-sm);
  padding: .7rem 1rem;
  margin-bottom: 1rem;
  font-size: .85rem;
  color: var(--c-danger);
}

/* Open-join headline counts (going / interested / places left). */
.join-counts {
  display: flex;
  gap: .75rem;
  margin-bottom: 1.5rem;
}
.join-count {
  flex: 1;
  text-align: center;
  background: var(--c-grey-light);
  border-radius: var(--radius-md);
  padding: .8rem .5rem;
}
.join-count__n {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.6rem;
  color: var(--c-primary);
  line-height: 1.1;
}
.join-count__label {
  font-size: .74rem;
  color: var(--c-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ------------------------------------------------------------------ */
/* Share widget (partials/_share_button.html) — used on public and     */
/* organiser pages alike.                                              */
/* ------------------------------------------------------------------ */
.trip-share {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.trip-share__net {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--c-grey-light);
  color: var(--c-primary);
  font-size: 1.1rem;
  text-decoration: none;
  transition: background .15s, color .15s, transform .1s;
}
.trip-share__net:hover {
  background: var(--c-primary);
  color: var(--c-white);
  transform: translateY(-1px);
}

/* Share card + labelled link row — used on trip detail (organiser & participant)
   and the organiser edit form. */
.share-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  background: var(--c-white);
  border: 1.5px solid var(--c-grey-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.share-card__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--c-text);
}
.share-card__hint {
  font-size: .82rem;
  color: var(--c-text-muted);
  margin: -.2rem 0 .2rem;
}
.share-card--muted {
  flex-direction: row;
  align-items: center;
  font-size: .85rem;
  color: var(--c-text-muted);
  background: var(--c-grey-light);
  border-style: dashed;
}
.share-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
}
.share-link-row__label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--c-text-muted);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}