/* ═══════════════════════════════════════════════════════════════════════════
   apple-theme.css — "Apple look" design system for parked.it (ParkedWeb).

   Ported from TripTrackIt (TripsWeb/wwwroot/css/apple-theme.css); same tokens and
   utilities, only the accent is Parked it brand blue. Self-contained. It provides:

     1. Design tokens (palette, system font stack, type scale, spacing, radii,
        shadows, motion) as CSS custom properties, with dark mode.
     2. Base typography.
     3. Thin frosted-glass sticky nav (.site-header / .nav-pill).
     4. Pill CTA buttons (.ap-btn*) and Apple "text link ›" (.ap-more).
     5. Marketing layout primitives used directly in markup:
          .ap-section (+ --alt / --dark)   full-width bands, 100–160px padding
          .ap-inner / .ap-inner--narrow    980 / 1200px content column
          .ap-eyebrow / .ap-h1 / .ap-h2 / .ap-h3 / .ap-lead / .ap-body
          .ap-bento / .ap-tile (+ --wide / --tall / --dark / --accent / --flush)
          .ap-figure                       large rounded imagery
          .ap-cta-row                      pill button + text link
     6. Scroll-reveal (.reveal, driven by js/reveal.js; reduced-motion safe).
     7. Theme-aware logos, footer.

   Section components (Components/Pages/Home/Sections/*) compose these classes
   in their markup and keep only truly section-specific rules in scoped CSS.
   Dark mode: <html data-theme="dark"> (js/theme.js) or prefers-color-scheme.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1) Design tokens ──────────────────────────────────────────────────── */

:root {
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Segoe UI", Helvetica, Arial, sans-serif;

    /* Type scale — large, tight-tracked headlines */
    --fs-hero:    clamp(3rem, 7.5vw, 5.5rem);        /* 48–88px  */
    --fs-h2:      clamp(2.25rem, 5vw, 4rem);         /* 36–64px  */
    --fs-h3:      clamp(1.5rem, 2.4vw, 2rem);        /* 24–32px  */
    --fs-tile:    clamp(1.25rem, 1.8vw, 1.5rem);     /* 20–24px  */
    --fs-lead:    clamp(1.25rem, 2vw, 1.75rem);      /* 20–28px  */
    --fs-body:    1.0625rem;                         /* 17px     */
    --fs-small:   0.875rem;
    --fs-eyebrow: 0.8125rem;

    --lh-tight: 1.02;
    --lh-snug:  1.15;
    --lh-body:  1.5;

    --ls-hero:  -0.03em;
    --ls-h2:    -0.025em;
    --ls-tight: -0.02em;

    /* Palette — light */
    --bg: #ffffff;
    --bg-alt: #f5f5f7;
    --bg-dark: #000000;
    --bgElev: #ffffff;
    --bgElev2: #fbfbfd;
    --tile: #ffffff;
    --tile-on-alt: #ffffff;
    --tile-on-dark: #1d1d1f;

    --text: #1d1d1f;
    --muted: #6e6e73;
    --text-on-dark: #f5f5f7;
    --muted-on-dark: #86868b;

    --border: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.18);

    /* ONE accent — Parked it brand blue (from the logo; AAA on white) */
    --accent: #0f2f8f;
    --accent-hover: #0c2570;
    --accent-soft: rgba(15, 47, 143, 0.10);
    --accent2: var(--accent);   /* legacy alias */
    --danger: #e0302a;

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 28px;
    --radius-pill: 980px;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow:    0 12px 40px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.14);

    --section-pad: clamp(6.25rem, 12vw, 10rem);   /* 100–160px */
    --section-gap: clamp(3rem, 6vw, 5rem);
    --content-w: 980px;
    --wide-w: 1200px;
    --gutter: clamp(1.25rem, 4vw, 2.5rem);
    --tile-gap: clamp(0.875rem, 1.5vw, 1.25rem);
    --tile-pad: clamp(1.75rem, 3.5vw, 3rem);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur: 0.25s;
    --dur-reveal: 0.8s;

    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(0, 0, 0, 0.08);
    --nav-h: 3rem;   /* 48px */

    /* Overrides of legacy site.css tokens (legal pages etc. keep working) */
    --font-main: var(--font-sans);
    --font-hero: var(--font-sans);
    --header-h: 0px;          /* nav is sticky, pages no longer need a fixed-header offset */
    --ink: var(--text);
    --ink-sub: var(--muted);
    --cta1: var(--accent);
    --cta2: var(--accent-hover);
}

html[data-theme="dark"] {
    --bg: #000000;
    --bg-alt: #161617;
    --bg-dark: #000000;
    --bgElev: #1d1d1f;
    --bgElev2: #272729;
    --tile: #1d1d1f;
    --tile-on-alt: #1d1d1f;
    --tile-on-dark: #1d1d1f;

    --text: #f5f5f7;
    --muted: #a1a1a6;

    --border: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.26);

    --accent: #7c9cff;
    --accent-hover: #9ab2ff;
    --accent-soft: rgba(124, 156, 255, 0.16);
    --danger: #ff6961;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow:    0 12px 40px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.65);

    --glass-bg: rgba(22, 22, 23, 0.72);
    --glass-border: rgba(255, 255, 255, 0.10);
}

/* ── 2) Base typography ────────────────────────────────────────────────── */

html, body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    background: var(--bg);
    color: var(--text);
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    letter-spacing: var(--ls-tight);
    text-wrap: balance;
}

::selection { background: var(--accent-soft); }

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

/* ── 3) Page shell & thin frosted-glass nav ────────────────────────────── */

.page-shell { background: var(--bg); }

.site-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: transparent;
}

.nav-pill {
    width: 100%;
    margin: 0;
    padding: 0 max(var(--gutter), calc((100vw - var(--wide-w)) / 2));
    min-height: var(--nav-h);
    display: flex;
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0;
    background: var(--glass-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: none;
}

@media (max-width: 767px) {
    .nav-pill { padding-inline: 1rem; }
}


/* ── 4) Buttons & text links ───────────────────────────────────────────── */

.ap-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    padding: 0 1.4rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 1.0625rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease), transform 0.1s var(--ease);
}

.ap-btn:hover, .btn:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
}

.ap-btn:active, .btn:active { transform: scale(0.98); }

.ap-btn--primary, .btn-primary {
    border-color: transparent;
    background: var(--accent);
    color: #fff;
    box-shadow: none;
}

.ap-btn--primary:hover, .btn-primary:hover {
    background: var(--accent-hover);
    color: #fff;
    border-color: transparent;
}

/* White pill on dark bands */
.ap-btn--light {
    border-color: transparent;
    background: #fff;
    color: #1d1d1f;
}

.ap-btn--light:hover {
    background: #e8e8ed;
    color: #1d1d1f;
}

.ap-btn--lg, .btn-lg {
    min-height: 3.25rem;
    padding: 0 1.9rem;
    font-size: 1.125rem;
    border-radius: var(--radius-pill);
}

/* Apple-style "Learn more ›" text link */
.ap-more {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    color: var(--accent);
    font-size: 1.0625rem;
    font-weight: 400;
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.ap-more::after {
    content: "›";
    font-size: 1.25em;
    line-height: 1;
    transition: transform var(--dur) var(--ease);
}

.ap-more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ap-more:hover::after { transform: translateX(2px); }

.ap-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.75rem;
}

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

/* ── 5) Marketing layout primitives ────────────────────────────────────── */

.ap-section {
    padding: var(--section-pad) var(--gutter);
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
}

.ap-section--alt  { background: var(--bg-alt); }
.ap-section--dark {
    background: var(--bg-dark);
    color: var(--text-on-dark);
    --text: var(--text-on-dark);
    --muted: var(--muted-on-dark);
    --tile: var(--tile-on-dark);
    --border: rgba(255, 255, 255, 0.12);
}
.ap-section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.ap-section--flush-bottom { padding-bottom: 0; }

.ap-inner         { width: min(100%, var(--wide-w));    margin-inline: auto; }
.ap-inner--narrow { width: min(100%, var(--content-w)); margin-inline: auto; }

.ap-center { text-align: center; }

/* Section header: eyebrow + big headline + lead */
.ap-header {
    max-width: var(--content-w);
    margin: 0 auto var(--section-gap);
    text-align: center;
}

.ap-header--left {
    margin-inline: 0;
    text-align: left;
}

.ap-eyebrow {
    display: block;
    margin: 0 0 1rem;
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Eyebrows on dark surfaces: the brand navy (#0f2f8f) is unreadable on black,
   so switch to a light brand blue and a slightly larger size. */
.ap-section--dark .ap-eyebrow,
.ap-tile--dark .ap-eyebrow {
    color: #a9bcff;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.ap-h1 {
    margin: 0;
    font-size: var(--fs-hero);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-hero);
    font-weight: 700;
    color: var(--text);
}

.ap-h2 {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-h2);
    font-weight: 700;
    color: var(--text);
}

.ap-h3 {
    margin: 0;
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    font-weight: 700;
    color: var(--text);
}

.ap-h2 span, .ap-h1 span { color: var(--accent); }

.ap-lead {
    margin: 1.25rem auto 0;
    max-width: 40rem;
    font-size: var(--fs-lead);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    font-weight: 400;
    color: var(--muted);
}

.ap-header--left .ap-lead { margin-inline: 0; }

.ap-body {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--muted);
}

.ap-body + .ap-body { margin-top: 1rem; }

/* Bento grid — 12 columns; tiles span 4/6/8/12 */
.ap-bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--tile-gap);
}

.ap-tile {
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
    min-height: 15rem;
    padding: var(--tile-pad);
    border-radius: var(--radius-lg);
    background: var(--tile);
    color: var(--text);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.ap-section--alt .ap-tile:not(.ap-tile--dark):not(.ap-tile--accent) { background: var(--tile-on-alt); }

@media (hover: hover) {
    .ap-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
}

.ap-tile--half  { grid-column: span 6; }
.ap-tile--wide  { grid-column: span 8; }
.ap-tile--full  { grid-column: span 12; }
.ap-tile--tall  { grid-row: span 2; }
.ap-tile--center{ align-items: center; text-align: center; justify-content: center; }
.ap-tile--end   { justify-content: flex-end; }
.ap-tile--flush { padding: 0; }

.ap-tile--dark {
    background: #1d1d1f;
    color: #f5f5f7;
    --text: #f5f5f7;
    --muted: #a1a1a6;
}

.ap-tile--accent {
    background: var(--accent);
    color: #fff;
    --text: #fff;
    --muted: rgba(255, 255, 255, 0.78);
}

.ap-tile__title {
    margin: 0;
    font-size: var(--fs-tile);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    font-weight: 600;
    color: var(--text);
}

.ap-tile--wide .ap-tile__title,
.ap-tile--full .ap-tile__title {
    font-size: var(--fs-h3);
}

.ap-tile__text {
    margin: 0;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--muted);
}

.ap-tile__media {
    margin-top: auto;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.ap-tile__media img { max-height: 100%; width: auto; }

.ap-tile__icon {
    width: 2.75rem;
    height: 2.75rem;
    object-fit: contain;
}

/* Huge numeral used for steps / stats */
.ap-numeral {
    font-size: clamp(3.5rem, 7vw, 5.5rem);
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--accent);
}

/* Large imagery */
.ap-figure {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-alt);
}

.ap-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ap-figure--shadow { box-shadow: var(--shadow-lg); }

/* Hairline divider list (FAQ etc.) */
.ap-hairline { border-top: 1px solid var(--border); }

/* Responsive bento */
@media (max-width: 1120px) {
    .ap-tile, .ap-tile--wide { grid-column: span 6; }
    .ap-tile--full { grid-column: span 12; }
    .ap-tile--tall { grid-row: auto; }
}

@media (max-width: 720px) {
    .ap-tile, .ap-tile--half, .ap-tile--wide { grid-column: span 12; }
    .ap-tile { min-height: 0; }
    .ap-cta-row { flex-direction: column; }
    .ap-cta-row .ap-btn { width: 100%; }
}

/* ── 6) Scroll reveal (js/reveal.js adds .is-visible) ──────────────────── */
/* Hidden state applies only once JS has flagged the document, so no-JS
   visitors, crawlers and prerendered HTML always see the content. */

html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger helpers for tiles */
.ap-bento > .reveal:nth-child(2) { --reveal-delay: 80ms; }
.ap-bento > .reveal:nth-child(3) { --reveal-delay: 160ms; }
.ap-bento > .reveal:nth-child(4) { --reveal-delay: 240ms; }
.ap-bento > .reveal:nth-child(5) { --reveal-delay: 320ms; }
.ap-bento > .reveal:nth-child(6) { --reveal-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    html.js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 7) Theme-aware logos & footer ─────────────────────────────────────── */

.theme-logo-dark  { display: none; }
.theme-logo-light { display: block; }
html[data-theme="dark"] .theme-logo-dark  { display: block; }
html[data-theme="dark"] .theme-logo-light { display: none; }

.site-footer {
    background: var(--bg-alt);
    padding: 1.5rem 0 2.5rem;
    font-size: 0.75rem;
    color: var(--muted);
}

.site-footer .container { width: min(var(--content-w), calc(100vw - 2 * var(--gutter))); }

.ap-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

.ap-footer__brand { display: flex; align-items: center; gap: 0.6rem; }
.ap-footer__brand img { height: 14px; width: auto; filter: grayscale(1); opacity: 0.7; }
.ap-footer__brand strong { font-weight: 600; color: var(--text); }

.ap-footer__links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.ap-footer__links a { color: var(--muted); text-decoration: none; }
.ap-footer__links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }

.ap-footer__legal { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }

/* ── 8) Photography: large rounded photos & image+text splits ──────────── */

.ap-photo {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--bgElev2);
    box-shadow: var(--shadow);
}

.ap-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ap-photo--landscape { aspect-ratio: 16 / 10; }
.ap-photo--square    { aspect-ratio: 1 / 1; }

.ap-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.ap-split + .ap-split { margin-top: var(--section-gap); }

.ap-split--reverse > .ap-photo { order: 2; }

.ap-split__copy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ap-split__copy > * { margin: 0; }

@media (max-width: 860px) {
    .ap-split { grid-template-columns: 1fr; }
    .ap-split--reverse > .ap-photo { order: 0; }   /* photo always first when stacked */
    .ap-photo--landscape { aspect-ratio: 4 / 3; }
}

/* Footer social links: small monochrome icons next to the label */
.ap-footer__social { display: inline-flex; align-items: center; gap: 0.4rem; }
.ap-footer__social img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
.ap-footer__social:hover img { filter: none; opacity: 1; }