/* ========================================
   Adventure Partners — Avalanche Fundamentals
   Design Tokens & Shared Base Styles
   ======================================== */

/* ----------------------------------------
   1. CSS Custom Properties (Color Palette)
   ----------------------------------------
   Color palette per PLAN.md §3a.
   Usage rules:
   - Dark sections (hero, footer, lesson sidebar) use --ink bg with --snow text.
   - Light sections use --snow bg with --ink/--slate text.
   - Primary CTA buttons: --aurora bg, --ink text (high contrast, premium).
   - Danger/warning callouts: --danger left border + tinted bg.
   -Never combine --aurora and --ice on the same element (they are alternative accents).
*/

:root {
  /* Primary darks — dark surfaces (hero, footer, lesson sidebar) */
  --ink:   #0A1F33;   /* Deep arctic blue — primary text on light, dark section bg */
  --navy:  #123A5C;   /* Secondary dark — headings on light, diagram strokes */

  /* Lights */
  --snow:  #F5F7FA;   /* Light section background */
  --paper: #EEE8DC;   /* Field-notebook parchment (Field Notebook theme) */
  --white: #FFFFFF;   /* Card/hero background */

  /* Text on light — all pass WCAG AA (4.5:1) */
  --slate:      #4A5A6A;  /* Body text on light (6.61:1 AA) */
  --mist:       #8A9BAE;  /* BORDERS/HAIRLINES ONLY (2.65:1 — not text) */
  --mist-text:  #5A6B7C;  /* Caption/small text on light (5.11:1 AA) */

  /* Accents — bright versions are FILL/BACKGROUND ONLY */
  --aurora:      #4FD1A5;  /* CTA fill with ink text (8.75:1 AAA) — NEVER text on light */
  --aurora-deep: #1E6F54;  /* Green foreground on light (6.1:1 AA) — checkmarks, progress */
  --ice:         #7EC8E3;  /* DARK SURFACES ONLY (8.96:1 AAA) — never on light */
  --ice-ink:     #0E6E93;  /* Links/interactive on light (5.33:1 AA) */
  --danger:      #E4572E;  /* FILL/border/large-bold only (3.43:1) */
  --danger-text: #C24A26;  /* Callout headings, warning text (4.9:1 AA) */

  /* Dark-surface secondary text */
  --snow-2: #C9D4E0;  /* Muted text on dark (7:1 AAA) */
}

/* ----------------------------------------
   2. Reset & Box Sizing
   ----------------------------------------
   Modern reset: normalize defaults, set box-sizing to border-box globally.
   This ensures padding and borders are included in element widths.
*/

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

/* Remove default margins from common elements */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, figure,
ul, ol, li,
dl, dt, dd,
form, fieldset, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
}

/* Base document typography.
   Without this, every element that does not set a family of its own falls back
   to the browser default (Times) — which silently affected all lesson prose. */
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Remove default list styles */
ul,
ol {
  list-style: none;
}

/* Remove default bullet points from nested lists */
ul ul,
ol ol {
  margin-left: 1.5em;
}

/* ------------------------------------------------
   3. Typography
   ------------------------------------------------
   Fonts per PLAN.md §3b:
   - Display headings: Barlow Condensed (600/700)
   - Body: Inter (400/500/600)
   - Diagram annotations: Caveat (500)

   Type scale (base 16px):
   - Hero headline:     clamp(2.5rem, 6vw, 4.5rem) / 700
   - Section title:     clamp(1.75rem, 3vw, 2.5rem) / 600
   - Card/module title: 1.5rem / 600
   - Body:              1rem / 400
   - Small / caption:   0.875rem / 500
   - Button:            0.9375rem / 600
*/

/* Font-family stacks (Google Fonts <link> added per-page) */
.display-font {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;  /* Tight spacing for outdoor-brand feel */
}

.display-font--heavy {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.body-font {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.body-font--medium {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
}

.body-font--bold {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.diagram-label {
  font-family: 'Caveat', cursive;
  font-weight: 500;
}

/* Type scale utilities */
.text-hero {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 700;
}

.text-section-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
}

.text-card-title {
  font-size: 1.5rem;
  font-weight: 600;
}

.text-body {
  font-size: 1rem;
}

.text-small {
  font-size: 0.875rem;
}

.text-button {
  font-size: 0.9375rem;
}

/* ------------------------------------------------
   4. Shared Components
   ------------------------------------------------ */

/* ----------------------------------------
   4a. Sticky Header
   ----------------------------------------
   - Adventure Partners logo mark (left)
   - Nav links: Landing / Curriculum / Lesson (center)
   - Right-hand group: login status + "Field Course · Lyngen" badge (right)

   Transparent over hero on landing, solid on inner pages.
   Collapses to single column under 768px.
*/

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem clamp(1rem, 4vw, 2rem);
  background-color: var(--ink);
  border-bottom: 1px solid rgba(138, 155, 174, 0.35);
  color: var(--snow);
  font-family: 'Inter', sans-serif;
}

/* Brand lockup — the same white ice-axe mark the landing page uses, so site
   chrome is identical on every page. */
.header__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--snow);
}

.header__brand img {
  display: block;
  height: 54px;
  width: auto;
}

.header__nav {
  display: flex;
  gap: 2rem;
}

.header__nav a {
  position: relative;
  text-decoration: none;
  color: var(--snow-2);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.header__nav a:hover,
.header__nav a:focus {
  color: var(--snow);
}

/* Active page marked with an accent rule rather than a colour shift alone. */
.header__nav a.is-active {
  color: var(--snow);
}

.header__nav a.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.5rem;
  height: 2px;
  background-color: var(--aurora);
}

/* Language switch: EN / FI at the end of the nav row, set off by a hairline.
   The links inherit the nav's type so they read as part of the same row; the
   current language is marked by colour alone, since the accent rule under the
   nav links means "this page", not "this language". */
.header__lang {
  display: flex;
  gap: 0.75rem;
  margin-left: 0.5rem;
  padding-left: 1.5rem;
  border-left: 1px solid rgba(245, 247, 250, 0.3);
}

.header__nav .header__lang a {
  color: var(--snow-2);
  opacity: 0.7;
}

.header__nav .header__lang a[aria-current],
.header__nav .header__lang a:hover,
.header__nav .header__lang a:focus {
  color: var(--snow);
  opacity: 1;
}

.header__badge {
  border: 1px solid rgba(245, 247, 250, 0.45);
  color: var(--snow-2);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 2px;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}

/* The badge links to the field courses on the company site. It keeps the
   look of a quiet label and only brightens on hover, like the nav links. */
.header__badge:hover,
.header__badge:focus-visible {
  color: var(--snow);
  border-color: var(--snow);
}

.header__badge:focus-visible {
  outline: 2px solid var(--ice);
  outline-offset: 2px;
}

/* The right-hand end of the header. Grouping the badge and the account links
   in one flex child keeps the header a three-part layout, so space-between
   still puts the brand left and the nav centre.

   Stacked, login status above the badge, both flush right. Two bordered boxes
   are taller than the 54px logo, so the header grows by roughly 10px on
   desktop — the sticky offset is unaffected, it is measured, not fixed. */
.header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.375rem;
}

/* Login status. Borderless, so it reads as a quiet line of state above the
   boxed "Field Course · Lyngen" badge rather than as a second badge competing
   with it. Casing, weight and letter spacing still match, which is what keeps
   the two looking related without the outline.

   Type, padding and gap were scaled together — a quarter down, then a tenth
   back up — so the block stays in proportion. At 0.515625rem the text is
   8.25px, still small enough to be worth a look on a real screen. */
.header__account {
  display: flex;
  align-items: center;
  gap: 0.61875rem;
  padding: 0.33rem 0.61875rem;
  color: var(--snow-2);
  font-size: 0.515625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* An address long enough to squeeze the nav is truncated rather than allowed
   to push the layout around. */
.header__account-user {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The address itself keeps the case the person registered with: uppercasing
   an email address misrepresents it, and lowercase reads faster anyway. */
.header__account-user strong {
  color: var(--snow);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* Links keep the accent colour so they stay identifiable as controls inside
   what is otherwise a static-looking box. */
.header__account a {
  color: var(--ice);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.header__account a:hover,
.header__account a:focus {
  color: var(--snow);
  text-decoration: underline;
}

/* Mobile: header collapses to single column layout */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    gap: 0.75rem;
  }

  .header__nav {
    gap: 1.5rem;
    order: 2;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 0.75rem;
  }

  /* The language links do not fit beside the page links on a phone, so they
     move to a centred row of their own, without the divider. */
  .header__lang {
    flex-basis: 100%;
    justify-content: center;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }

  .header__badge {
    display: none;
  }

  /* The badge above is decorative and hides on small screens, but logging out
     must stay reachable, so the group itself keeps its place under the nav. */
  .header__right {
    order: 3;
    gap: 0;
  }

  .header__account {
    gap: 0.515625rem;
    padding: 0.2475rem 0.495rem;
    font-size: 0.495rem;
  }

  .header__account-user {
    max-width: 16ch;
  }

  .header__brand img {
    height: 42px;
  }
}

/* ----------------------------------------
   4b. Footer
   ----------------------------------------
   Three columns:
   - Brand + tagline (left)
   - Contact (email, phone) (center)
   - Safety disclaimer (right)

   Collapses to single column under 768px.
*/

.footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 2.5rem 1rem 1.5rem;
  background-color: var(--ink);
  color: var(--snow);
  font-family: 'Inter', sans-serif;
}

.footer__brand {
  margin-bottom: 1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer__brand img {
  display: block;
  height: 64px;
  width: auto;
}

/* Contact column holds a short link list; keep the rows readable when one of
   them carries several links side by side. */
.footer__contact-item {
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer__tagline {
  color: var(--snow-2);
  font-size: 0.875rem;
}

.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.footer__contact-item a {
  color: var(--ice);
  text-decoration: none;
}

.footer__contact-item a:hover,
.footer__contact-item a:focus {
  color: var(--white);
}

.footer__safety {
  font-size: 0.75rem;
  color: var(--mist);
  line-height: 1.5;
}

.footer__safety strong {
  color: var(--white);
  display: block;
  margin-bottom: 0.5rem;
}

/* Mobile: footer collapses to single column */
@media (max-width: 768px) {
  .footer {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }

  .footer__brand,
  .footer__tagline,
  .footer__contact-item,
  .footer__safety {
    text-align: center;
  }
}

/* ----------------------------------------
   4c. Primary CTA Button
   ----------------------------------------
   Aurora-green background, ink text.
   High contrast, premium feel.
*/

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
  border: none;
}

.btn--primary {
  background-color: var(--aurora);
  color: var(--ink);
  font-size: 0.9375rem;
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: #3dbb8f;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(79, 209, 165, 0.3);
}

.btn--primary:active {
  transform: translateY(0);
}

/* ----------------------------------------
   4d. Secondary Button
   ----------------------------------------
   Outline style: white border, ink text.
   Used for secondary actions.
*/

.btn--secondary {
  background-color: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  font-size: 0.9375rem;
}

.btn--secondary:hover,
.btn--secondary:focus {
  background-color: rgba(10, 31, 51, 0.05);
}

.btn--secondary:active {
  background-color: rgba(10, 31, 51, 0.1);
}

/* ----------------------------------------
   4e. Key-Point Callout
   ----------------------------------------
   Highlight important takeaways with a subtle background
   and left border accent (aurora).
*/

.callout {
  padding: 1.25rem;
  margin: 1.5rem 0;
  background-color: var(--white);
  border-left: 4px solid var(--aurora);
  border-radius: 0 6px 6px 0;
}

.callout--key-point .callout__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--navy);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.callout__text {
  color: var(--slate);
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ----------------------------------------
   4f. Danger/Warning Callout
   ----------------------------------------
   Warning callouts: danger left border + tinted background.
   Used for safety warnings and critical information.
*/

.callout--danger {
  border-left-color: var(--danger);
  background-color: rgba(228, 87, 46, 0.05);
}

.callout--danger .callout__label {
  color: var(--danger);
}

.callout--danger .callout__text {
  color: var(--slate);
}

/* ----------------------------------------
   4g. Text Colors
   ----------------------------------------
   Convenience classes for consistent text colors.
*/

.text-ink {
  color: var(--ink);
}

.text-navy {
  color: var(--navy);
}

.text-slate {
  color: var(--slate);
}

.text-mist {
  color: var(--mist);
}

.text-snow {
  color: var(--snow);
}

.text-white {
  color: var(--white);
}

.text-aurora {
  color: var(--aurora);
}

.text-ice {
  color: var(--ice);
}

.text-danger {
  color: var(--danger);
}

/* ------------------------------------------------
   5. Responsive Utilities
   ------------------------------------------------
*/

.hidden-mobile {
  display: none;
}

@media (max-width: 768px) {
  .hidden-desktop {
    display: none;
  }
}

.hidden-tablet {
  @media (min-width: 769px) and (max-width: 1024px) {
    display: none;
  }
}

/* ------------------------------------------------
   6. Layout Utilities
   ------------------------------------------------
*/

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.grid {
  display: grid;
  gap: 1.5rem;
}

.grid--2cols {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3cols {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4cols {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .grid--2cols,
  .grid--3cols,
  .grid--4cols {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------
   7. Background Colors
   ------------------------------------------------
*/

.bg-ink {
  background-color: var(--ink);
}

.bg-navy {
  background-color: var(--navy);
}

.bg-slate {
  background-color: var(--slate);
}

.bg-snow {
  background-color: var(--paper);
}

.bg-white {
  background-color: var(--white);
}

.bg-snow-aurora {
  background-color: var(--aurora);
}

.bg-ice-tint {
  background-color: rgba(126, 200, 227, 0.1);
}

/* ------------------------------------------------
   8. Spacing Utilities
   ------------------------------------------------
*/

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-5 { margin-bottom: 3rem; }

.py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2 { padding-top: 1rem; padding-bottom: 1rem; }
.py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-4 { padding-top: 2rem; padding-bottom: 2rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }