/*! user.css — front-end styling foundation
 * Site:       Inland Adventures
 * Template:   inland (child of Cassiopeia)
 * Layout:     framed
 * Foundation: Bridge Workbench. Tokens + client layer: Inland Adventures normalisation (2026-06-29).
 *
 * Token-driven: re-skin by editing the brand tokens in :root and re-running
 * the generator (or editing here directly). Build-time output — no runtime
 * dependency; safe for a developer to read, edit and hand over.
 */

:root {
  /* ============================================================
     BRAND TOKENS — Inland Adventures. Derived from the logo
     (INLANDADVENTURES_Logo.png) by pixel analysis. The whole template
     re-skins from these six tokens (+ accent-2).

     Measured logo colours: charcoal ring #232020, water-blue koru
     #0aa9e3, land-green hills #9ac538, wordmark grey #999999.
     Contrast note: the raw blue (2.7:1) and green (2.0:1) are too light
     for text/links on white, so --cc-accent uses a darkened water-blue
     that passes WCAG AA (4.6:1); the vivid green is kept raw as accent-2
     for graphic/eyebrow use, not text.
     ============================================================ */
  --cc-frame: #232020;         /* charcoal ring — header/footer/contact backdrop */
  --cc-panel: #ffffff;         /* content + sidebar panels */
  --cc-ink: #232020;           /* body text — the logo charcoal reads as the natural ink */
  --cc-accent: #077da7;        /* water-blue, darkened for legible links/buttons (AA on white; white-on-fill 4.7:1) */
  --cc-accent-hover: #056a8d;  /* accent darkened ~15% — hover / active */
  --cc-rule: #e4e6e6;          /* hairlines / borders — light neutral off the wordmark grey */

  /* Second brand accent — Inland's land-green (finding A slot). Kept as the
     RAW logo green: brilliant for eyebrows, badges, icons, tints and graphics,
     but NOT for text on white (fails contrast). The raw water-blue #0aa9e3 is
     also available as a "brand-bright" for hero/graphic fills. */
  --cc-accent-2: #9ac538;      /* land-green — graphic / accent use (not text) */

  /* Bridge the brand into Cassiopeia's own variables so core UI adopts it. */
  --cassiopeia-color-primary: var(--cc-accent);
  --cassiopeia-color-link: var(--cc-accent);
  --cassiopeia-color-hover: var(--cc-accent-hover);

  /* ------------------------------------------------------------
     DERIVED COLOURS — mixed live from the tokens above, so they
     track a re-skin. The "on-" colours are contrast-safe as-is.
     ------------------------------------------------------------ */
  --cc-ink-soft: color-mix(in srgb, var(--cc-ink) 78%, var(--cc-panel));
  --cc-ink-faint: color-mix(in srgb, var(--cc-ink) 45%, var(--cc-panel));
  --cc-panel-alt: color-mix(in srgb, var(--cc-panel) 96%, var(--cc-ink));
  --cc-rule-strong: color-mix(in srgb, var(--cc-rule) 55%, var(--cc-ink));
  --cc-accent-tint: color-mix(in srgb, var(--cc-accent) 12%, var(--cc-panel));
  --cc-frame-tint: color-mix(in srgb, var(--cc-frame) 8%, var(--cc-panel));  /* finding C — pale slate panels */
  --cc-on-accent: #ffffff;
  --cc-on-frame: #ffffff;
  --cc-on-frame-soft: color-mix(in srgb, var(--cc-on-frame) 66%, var(--cc-frame));
  --cc-burger-bg: color-mix(in srgb, var(--cc-on-frame) 58%, var(--cc-frame));
  --cc-burger-border: color-mix(in srgb, var(--cc-on-frame) 46%, var(--cc-frame));

  /* ------------------------------------------------------------ TYPOGRAPHY
     PLACEHOLDER. Inland's existing look uses SANS headings (no serif), so both
     base and heading default to the system sans stack until Inland's real
     typefaces are confirmed. If you want a specific web font, set it here AND
     load the face in the wrapper (index.php) — there is a commented slot there. */
  --cc-font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cc-font-heading: var(--cc-font-base);   /* PLACEHOLDER — Inland: sans headings */
  --cc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --cc-line: 1.6;
  --cc-line-tight: 1.25;
  --cc-text: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --cc-h1: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --cc-h2: clamp(1.5rem, 1.28rem + 0.9vw, 2rem);
  --cc-h3: 1.5rem;
  --cc-h4: 1.2rem;

  /* ------------------------------------------------------------ SPACING SCALE */
  --cc-space-3xs: 0.25rem;
  --cc-space-2xs: 0.5rem;
  --cc-space-xs: 0.75rem;
  --cc-space-s: 1rem;
  --cc-space-m: 1.5rem;
  --cc-space-l: 2rem;
  --cc-space-xl: 3rem;
  --cc-space-2xl: 4.5rem;
  --cc-panel-pad: 20px 35px;

  /* ------------------------------------------------------------ SHAPE / LAYOUT */
  --cc-radius: 4px;
  --cc-radius-lg: 6px;
  --cc-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.07);
  --cc-content-max: 1200px;
  --cc-measure: 72ch;
  --cc-transition: 150ms ease;

  /* ------------------------------------------------------------ LAYOUT TUNING (per-site)
     Confirm against Inland Adventures's real header height / logo on staging. */
  --cc-burger-top: 35px;
  --cc-burger-right: 25px;
  --cc-logo-max-width: 225px;
}

/* ============================================================
   DARK MODE — for visitors whose OS prefers dark. Redefining the
   six brand tokens (+ the two baked contrast colours) cascades to
   every color-mix-derived token above, so the whole foundation and
   components re-theme. Values: config darkTokens where given, else
   auto-derived from the light tokens. (Front-end only.)
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --cc-frame: #0a0b0d;         /* outer frame / page backdrop */
    --cc-panel: #15171a;         /* content + sidebar panels */
    --cc-ink: #e8eaed;           /* body text */
    --cc-accent: #35bdec;        /* water-blue lightened for legibility on the dark frame */
    --cc-accent-hover: #5fccf0;  /* dark-mode hover */
    --cc-rule: #2a2d31;          /* borders, dividers, hairlines */
    --cc-on-accent: #ffffff;     /* legible text on the accent */
    --cc-on-frame: #ffffff;      /* legible text on the frame */
  }
}

/* ============================================================ BASE
   Global, low-specificity defaults. user.css loads last, so these set the
   baseline without fighting the parent template. */
*,
*::before,
*::after { box-sizing: border-box; }

:where(img, svg, video) { max-width: 100%; height: auto; }

body {
  color: var(--cc-ink);
  font-size: var(--cc-text);
  line-height: var(--cc-line);
}

/* Site-wide link colour (nav/header/footer rules below are more specific
   and override this where a different treatment is wanted). */
a { color: var(--cc-accent); }
a:hover,
a:focus-visible { color: var(--cc-accent-hover); }

:where(:focus-visible) {
  outline: 2px solid var(--cc-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection {
  background: var(--cc-accent);
  color: var(--cc-on-accent);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================ LAYOUT FRAME */
body { color: var(--cc-ink); line-height: var(--cc-line); }
.site-grid,
.container-main { background: transparent; }
.site-grid { gap: 0 var(--cc-space-m); }

/* Preset: FRAMED — content panels float on the coloured frame. */
body { background: var(--cc-frame); }
.container-component,
.container-sidebar-left .moduletable,
.container-sidebar-right .moduletable,
.container-sidebar-left .card,
.container-sidebar-right .card {
  background: var(--cc-panel);
  padding: var(--cc-panel-pad);
  margin-bottom: var(--cc-space-m);
}
.container-sidebar-left .moduletable,
.container-sidebar-right .moduletable,
.container-sidebar-left .card,
.container-sidebar-right .card { padding: var(--cc-space-m); }

/* ============================================================ HEADER + NAV
   On the frame. Cassiopeia's menu is metismenu (not Bootstrap .navbar-nav), so
   we target both to be safe across menu module choices. */
.container-header {
  background: var(--cc-frame);
  border-bottom: 0;
  padding-block: 0;
}
/* Logo size is a per-site knob — set via config layoutTuning.logoMaxWidth. */
.brand-logo img,
.logo-image img { max-width: var(--cc-logo-max-width); height: auto; }
.container-nav { background: var(--cc-frame); }

.container-nav .mod-menu a,
.container-nav .metismenu > .metismenu-item > a,
.container-nav .metismenu > li > a,
.container-nav ul.nav > li > a,
.navbar-nav .nav-link {
  color: var(--cc-on-frame);
  font-weight: 600;
  padding-inline: 0.9rem;
}
.container-nav .mod-menu a:hover,
.container-nav .mod-menu a:focus,
.container-nav .metismenu > li.active > a,
.container-nav .mod-menu .current > a,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active { color: var(--cc-accent); }

/* Dropdown / collapsed sub-menus need a solid panel bg (else on-frame on frame). */
.container-nav .metismenu .mm-collapse,
.container-nav .metismenu ul { background: var(--cc-panel); }
.container-nav .metismenu ul a { color: var(--cc-ink); }

/* Mobile burger, visible on the frame. */
.container-nav .navbar-toggler,
.container-nav button.toggler-burger {
  color: var(--cc-on-frame);
  border-color: var(--cc-burger-border);
  background: var(--cc-burger-bg);
}

/* ============================================================ FOOTER
   Cassiopeia lays the footer out as a grid; force a simple centred block so the
   credit fills the width (proven footer-centring fix). */
.container-footer {
  display: block;
  background: var(--cc-frame);
  color: var(--cc-on-frame-soft);
  font-size: 0.9rem;
  border-top: 0;
  text-align: center;
}
.container-footer .grid-child { display: flex; }
.container-footer a { color: var(--cc-on-frame); }
.container-footer a:hover,
.container-footer a:focus { color: var(--cc-accent); }

/* Designer credit strip. */
.footer-credit {
  width: 100%;
  text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--cc-on-frame) 14%, transparent);
  margin-top: var(--cc-space-m);
  padding-top: var(--cc-space-m);
}
.footer-credit .footer-copyright { margin: 0 0 1rem; }
.footer-credit .footer-tagline {
  color: var(--cc-on-frame-soft);
  font-size: 10px;
  letter-spacing: 0.08em;
  margin-top: 0.35rem;
}

/* ============================================================ MOBILE NAV (proven fix)
   Under 991.98px, position the whole .container-nav cluster to the header's
   top-right rather than trying to position the burger button itself. The offsets
   are tokens with sensible defaults — set them per site via config
   layoutTuning.burgerTop / burgerRight when the logo height differs. */
@media (max-width: 991.98px) {
  .container-header { position: relative; }
  .container-header .container-nav {
    position: absolute;
    top: var(--cc-burger-top);
    right: var(--cc-burger-right);
    width: auto;
    z-index: 9999;
  }
}

/* ============================================================ CONTENT (.container-component)
   Headings, text, lists, quotes, media and unclassed content tables. */
.container-component h1,
.container-component h2,
.container-component h3,
.container-component h4,
.container-component h5,
.container-component h6 {
  font-family: var(--cc-font-heading);
  line-height: var(--cc-line-tight);
  color: var(--cc-ink);
  font-weight: 700;
  margin: 1.6em 0 0.5em;
}
.container-component > :first-child { margin-top: 0; }
.container-component h1 { font-size: var(--cc-h1); }
.container-component h2 { font-size: var(--cc-h2); }
.container-component h3 { font-size: var(--cc-h3); }
.container-component h4 { font-size: var(--cc-h4); }

.container-component p,
.container-component ul,
.container-component ol,
.container-component dl { margin: 0 0 1em; }
.container-component ul,
.container-component ol { padding-left: 1.4em; }
.container-component li { margin: 0.3em 0; }

.container-component a {
  color: var(--cc-accent);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}
.container-component a:hover,
.container-component a:focus { color: var(--cc-accent-hover); }
.container-component strong,
.container-component b { font-weight: 700; }

.container-component blockquote {
  margin: var(--cc-space-m) 0;
  padding: var(--cc-space-2xs) var(--cc-space-m);
  border-left: 4px solid var(--cc-accent);
  background: var(--cc-panel-alt);
  color: var(--cc-ink-soft);
  font-style: italic;
}
.container-component blockquote > :last-child { margin-bottom: 0; }

.container-component hr {
  border: 0;
  border-top: 1px solid var(--cc-rule);
  margin: var(--cc-space-l) 0;
}

.container-component img { max-width: 100%; height: auto; }
.container-component figure { margin: var(--cc-space-m) 0; }
.container-component figcaption {
  margin-top: var(--cc-space-3xs);
  color: var(--cc-ink-faint);
  font-size: 0.9em;
}

.container-component code {
  font-family: var(--cc-font-mono);
  font-size: 0.9em;
  background: var(--cc-panel-alt);
  padding: 0.15em 0.4em;
  border-radius: 0.25em;
}
.container-component pre {
  font-family: var(--cc-font-mono);
  background: var(--cc-panel-alt);
  padding: var(--cc-space-s);
  border-radius: var(--cc-radius);
  overflow-x: auto;
}
.container-component pre code { background: none; padding: 0; }

/* Content tables (article tables with no class). */
.container-component table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
}
.container-component th,
.container-component td {
  padding: 0.5rem 0.75rem;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid var(--cc-rule);
}
.container-component thead th,
.container-component tr:first-child th {
  border-bottom: 2px solid var(--cc-ink-soft);
  font-weight: 600;
}
.container-component tr:nth-child(even) td { background: var(--cc-panel-alt); }

/* ============================================================ COMPONENTS
   Reusable content blocks, paired with the files in /snippets. */

/* ---- Buttons (solid + outline). a.btn-* so links adopt the styling. ---- */
a.btn-cc,
a.btn-cc-outline {
  display: inline-block;
  padding: 0.55rem 1.25rem;
  border: 2px solid var(--cc-accent);
  border-radius: var(--cc-radius);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--cc-transition);
}
a.btn-cc { background: var(--cc-accent); color: var(--cc-on-accent); }
a.btn-cc:hover,
a.btn-cc:focus {
  background: var(--cc-accent-hover);
  border-color: var(--cc-accent-hover);
  color: var(--cc-on-accent);
}
a.btn-cc-outline { background: transparent; color: var(--cc-accent); }
a.btn-cc-outline:hover,
a.btn-cc-outline:focus { background: var(--cc-accent); color: var(--cc-on-accent); }

/* ---- Multi-column helper (native CSS columns: up to ~3, min 16em each) ---- */
div.columns {
  columns: 2 16em;
  column-gap: 40px;
  column-rule: 1px solid var(--cc-rule);
  margin-bottom: var(--cc-space-m);
}
div.columns > * { break-inside: avoid; }

/* ---- Card grid (responsive: 3 → 2 → 1 columns) ---- */
.card-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: var(--cc-space-xl) 0;
}
.card-cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-col h3 { margin-top: 0; }
.card-col ul { margin: 0.5rem 0; padding-left: 1.2rem; }
.card-col img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cc-radius);
  margin-bottom: 0.5rem;
}

/* ---- Callout / note ---- */
.callout {
  margin: var(--cc-space-m) 0;
  padding: var(--cc-space-s) var(--cc-space-m);
  background: var(--cc-accent-tint);
  border-left: 4px solid var(--cc-accent);
  border-radius: var(--cc-radius);
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 0.25rem; font-weight: 700; }

/* ---- Wide table helper: lets a wide table scroll on small screens ---- */
.table-wrap { overflow-x: auto; }

/* ---- Responsive ---- */
@media (max-width: 782px) {
  .card-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .card-cols,
  .card-cols-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   PRINT — ink-friendly, content-only. Overrides the tokens for
   paper (white ground, black ink, no shadows) so it prints clean
   even from a dark-mode screen, hides site navigation, and avoids
   awkward page breaks. Component chrome is hidden in each module.
   ============================================================ */
@media print {
  :root {
    --cc-frame: #ffffff;
    --cc-panel: #ffffff;
    --cc-ink: #000000;
    --cc-rule: #999999;
    --cc-on-frame: #000000;
    --cc-shadow: none;
  }

  /* site navigation isn't useful on paper (body bg follows --cc-frame above) */
  .container-nav { display: none; }

  /* keep links recognisable (and spell out external URLs) */
  a { color: var(--cc-accent); text-decoration: underline; }
  .container-component a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }

  /* tame page breaks */
  h1, h2, h3, h4 { break-after: avoid; }
  img, figure, table, blockquote, .cc-item, .card { break-inside: avoid; }
}