/* ── 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);
}

/* ── 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; }

/* ── 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); }

/* ── 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 banner (shared across itinerary, payment, and round pages) ─ */
.trip-banner {
  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-banner__label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-text-muted);
  margin-bottom: .2rem;
}
.trip-banner__name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--c-text);
}
.trip-banner__name--link {
  text-decoration: none;
  color: var(--c-primary);
}
.trip-banner__name--link:hover { text-decoration: underline; }
.trip-banner__participants {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .25rem;
}
.trip-banner__meta {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .85rem;
  color: var(--c-text-muted);
}
.trip-banner__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);
}

/* ── 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;
}