/* =============================================================================
   thegwchr — Apple Newsroom + Apple Documentation inspired theme
   ============================================================================= */

/* ---------- Design tokens --------------------------------------------------- */

:root {
  /* Brand */
  --gwc-brand:       #2f8f9d;
  --gwc-brand-deep:  #1d6f7b;
  --gwc-link:        #11808f;

  /* Apple greys */
  --apple-ink:        #1d1d1f;
  --apple-ink-2:      #6e6e73;
  --apple-bg:         #ffffff;
  --apple-bg-2:       #f5f5f7;
  --apple-bg-3:       #fbfbfd;
  --apple-hairline:   #d2d2d7;

  /* Apple type ramp */
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                "Helvetica Neue", Helvetica, Arial, sans-serif;
  --apple-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Material remaps (light) */
  --md-text-font-family: var(--apple-font);
  --md-code-font-family: var(--apple-mono);

  --md-primary-fg-color:        var(--gwc-brand);
  --md-primary-fg-color--light: #4aa9b6;
  --md-primary-fg-color--dark:  var(--gwc-brand-deep);
  --md-accent-fg-color:         var(--gwc-link);

  --md-default-bg-color:        var(--apple-bg);
  --md-default-fg-color:        var(--apple-ink);
  --md-typeset-color:           var(--apple-ink);
  --md-typeset-a-color:         var(--gwc-link);
}

/* Dark (slate) — Apple's dark documentation feel */
[data-md-color-scheme="slate"] {
  --gwc-link: #5fc7d4;

  --apple-ink:      #f5f5f7;
  --apple-ink-2:    #a1a1a6;
  --apple-bg:       #000000;
  --apple-bg-2:     #161617;
  --apple-bg-3:     #1d1d1f;
  --apple-hairline: #38383c;

  --md-hue: 222;
  --md-default-bg-color: #000000;
  --md-default-fg-color: #f5f5f7;
  --md-typeset-color:    #f5f5f7;
  --md-typeset-a-color:  #5fc7d4;
  --md-code-bg-color:    #1d1d1f;
  --md-primary-fg-color: #2f8f9d;
}

/* ---------- Base typography ------------------------------------------------- */

/* Pin the root font-size. Material ramps it 125% → 137.5% → 150% on wider
   viewports, which inflates the whole UI on large screens. Apple keeps a
   constant ~16–17px base, so we override all of Material's breakpoints with one
   fixed value (this rule loads after Material's, so it wins everywhere). */
html { font-size: 112.5%; }

body, input, button, .md-typeset {
  font-family: var(--apple-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.md-typeset {
  font-size: 0.9rem;
  line-height: 1.6;
  letter-spacing: -0.003em;
  color: var(--apple-ink);
}

.md-typeset code, .md-typeset pre, .md-typeset kbd {
  font-family: var(--apple-mono);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--apple-ink);
  font-weight: 700;
  letter-spacing: -0.018em;
}

.md-typeset h1 {
  font-size: 2.2rem;
  line-height: 1.08;
  margin: 0 0 0.6em;
}

.md-typeset h2 {
  font-size: 1.6rem;
  line-height: 1.12;
  margin-top: 2.2em;
}

.md-typeset h3 {
  font-size: 1.18rem;
  letter-spacing: -0.012em;
}

.md-typeset a {
  text-decoration: none;
  font-weight: 500;
}
.md-typeset a:hover { text-decoration: underline; }

/* ---------- Global nav bar (Apple translucent) ------------------------------ */

.md-header {
  background-color: color-mix(in srgb, var(--apple-bg) 72%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  color: var(--apple-ink);
  box-shadow: inset 0 -1px 0 var(--apple-hairline);
}
.md-header--shadow { box-shadow: inset 0 -1px 0 var(--apple-hairline); }

.md-header__title { font-weight: 600; font-size: 0.85rem; color: var(--apple-ink); }
.md-header__button { color: var(--apple-ink); }
.md-header__topic { color: var(--apple-ink); }

/* Tabs — minimal Apple text nav. The tabs are a CHILD of .md-header, which
   already paints the translucent blur across the whole bar. So the tabs must be
   transparent with no backdrop-filter of their own — otherwise they stack a
   second tint+blur on top of the header's and render near-solid. */
.md-tabs {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--apple-ink);
  box-shadow: inset 0 -1px 0 var(--apple-hairline);
}
.md-tabs__link {
  color: var(--apple-ink-2);
  opacity: 1;
  font-size: 0.72rem;
  font-weight: 500;
  transition: color 0.2s;
}
.md-tabs__link:hover,
.md-tabs__link--active { color: var(--apple-ink); }

/* Search field — Apple rounded pill */
.md-search__form {
  border-radius: 980px;
  background-color: var(--apple-bg-2);
  box-shadow: none;
}
.md-search__input { color: var(--apple-ink); }
.md-search__input::placeholder { color: var(--apple-ink-2); }
[data-md-color-scheme="slate"] .md-search__form { background-color: #1d1d1f; }

/* ---------- Sidebar / TOC (Apple Documentation) ----------------------------- */

.md-nav { font-size: 0.7rem; }
.md-nav__title { color: var(--apple-ink-2); font-weight: 600; }

.md-nav__link {
  color: var(--apple-ink-2);
  border-radius: 6px;
  transition: color 0.15s, background-color 0.15s;
}
.md-nav__link:hover { color: var(--apple-ink); }
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--gwc-link);
  font-weight: 600;
}

/* ---------- Buttons — Apple pills ------------------------------------------- */

.md-typeset .md-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-radius: 980px;
  border: 1px solid transparent;
  padding: 0.55em 1.15em;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--gwc-link);
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.05s ease;
}
.md-typeset .md-button:hover {
  background: color-mix(in srgb, var(--gwc-link) 10%, transparent);
  text-decoration: none;
  transform: none;
}
.md-typeset .md-button--primary {
  color: #fff;
  background: var(--gwc-brand);
  box-shadow: none;
}
.md-typeset .md-button--primary:hover {
  background: var(--gwc-brand-deep);
  color: #fff;
}

/* ---------- Content surfaces (Apple Documentation) -------------------------- */

.md-typeset hr { border-bottom: 1px solid var(--apple-hairline); }

.md-typeset table:not([class]) {
  border: 1px solid var(--apple-hairline);
  border-radius: 14px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 0.78rem;
  box-shadow: none;
}
.md-typeset table:not([class]) th {
  background: var(--apple-bg-2);
  color: var(--apple-ink);
  font-weight: 600;
  border: none;
}
.md-typeset table:not([class]) td { border: none; border-top: 1px solid var(--apple-hairline); }

.md-typeset pre > code,
.md-typeset > p code,
.md-typeset li code {
  border-radius: 8px;
}
.md-typeset pre > code { border: 1px solid var(--apple-hairline); }
.md-typeset .highlight > pre { border-radius: 14px; }
[data-md-color-scheme="default"] .md-typeset code { background-color: var(--apple-bg-2); }

/* Admonitions — Apple "callout" cards */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--apple-hairline);
  border-left-width: 1px;
  border-radius: 14px;
  box-shadow: none;
  font-size: 0.78rem;
}

/* Content-level tabs (pymdownx tabbed) */
.md-typeset .tabbed-labels > label { font-weight: 500; }
.md-typeset .tabbed-set { border-radius: 14px; }

/* Footer */
.md-footer { background: var(--apple-bg-2); color: var(--apple-ink); }
.md-footer-meta { background: var(--apple-bg-2); }
.md-footer__inner { color: var(--apple-ink); }
.md-copyright { color: var(--apple-ink-2); }
.md-footer-meta .md-footer__link,
.md-footer-meta a { color: var(--gwc-link); }

/* Center Mermaid diagrams (kept from before) */
.md-typeset .mermaid { text-align: center; }
.md-typeset .mermaid > svg { display: inline-block; margin: 0 auto; max-width: 100%; height: auto; }

/* =============================================================================
   LANDING PAGE — Apple Newsroom layout
   ============================================================================= */

/* Let the landing breathe edge-to-edge (home hides nav + toc) */
.md-grid { max-width: 61rem; }

.apple-landing { margin: 0; }
.apple-landing a { text-decoration: none; }

/* ---- Hero / featured story ---- */
.apple-hero {
  position: relative;
  margin: 0.5rem 0 2.5rem;
  padding: clamp(2.5rem, 6vw, 5rem) 1.5rem clamp(2.5rem, 6vw, 4.5rem);
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
  color: var(--apple-ink);
  background:
    radial-gradient(120% 120% at 50% -10%, rgba(47,143,157,0.18), transparent 60%),
    radial-gradient(80% 80% at 90% 110%, rgba(95,199,212,0.16), transparent 60%),
    var(--apple-bg-2);
  border: 1px solid var(--apple-hairline);
}

.apple-hero__mark {
  display: block;
  width: clamp(76px, 12vw, 112px);
  height: auto;
  margin: 0 auto 1.25rem;
  filter: drop-shadow(0 10px 30px rgba(47,143,157,0.28));
}

/* NOTE: landing headings/paragraphs are prefixed with `.apple-landing` so they
   out-specify Material's `.md-typeset h1/h2/h3/p` rules — otherwise those win
   and strip the `margin: 0 auto` centering. */
.apple-landing .apple-hero__eyebrow {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gwc-link);
}

.apple-landing .apple-hero__title {
  margin: 0 auto 0.6rem;
  max-width: 18ch;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.025em;
  text-align: center;
  color: var(--apple-ink);
}

.apple-landing .apple-hero__sub {
  margin: 0 auto 1.6rem;
  max-width: 44ch;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  text-align: center;
  color: var(--apple-ink-2);
}

.apple-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.apple-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  border-radius: 980px;
  padding: 0.7em 1.4em;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--gwc-brand);
  color: #fff !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease;
}
.apple-btn:hover { background: var(--gwc-brand-deep); text-decoration: none !important; }
.apple-btn--ghost {
  background: transparent;
  color: var(--gwc-link) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gwc-link) 45%, transparent);
}
.apple-btn--ghost:hover {
  background: color-mix(in srgb, var(--gwc-link) 10%, transparent);
}

/* ---- Section heading ---- */
.apple-section { margin: 3rem 0; }
.apple-landing .apple-section__title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.4rem;
}

/* ---- Story-card grid ---- */
.apple-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.story-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  background: var(--apple-bg);
  border: 1px solid var(--apple-hairline);
  color: var(--apple-ink) !important;
  transition: transform 0.25s cubic-bezier(0.2,0.7,0.2,1), box-shadow 0.25s ease;
}
.story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

.story-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.story-card__media svg { width: 64px; height: 64px; opacity: 0.96; }

/* per-card gradients */
.story-card--wifi  .story-card__media { background: linear-gradient(135deg, #2f8f9d, #1d6f7b); }
.story-card--gui   .story-card__media { background: linear-gradient(135deg, #3aa6c2, #2a6f93); }
.story-card--bt    .story-card__media { background: linear-gradient(135deg, #4a76d6, #2f4ea8); }
.story-card--src   .story-card__media { background: linear-gradient(135deg, #5b6675, #343a45); }

.story-card__body { padding: 1.25rem 1.35rem 1.45rem; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; }
.apple-landing .story-card__eyebrow {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gwc-link);
}
.apple-landing .story-card__title { margin: 0; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
.apple-landing .story-card__desc { margin: 0.1rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--apple-ink-2); flex: 1; }
.apple-landing .story-card__more { margin-top: 0.9rem; font-size: 0.82rem; font-weight: 600; color: var(--gwc-link); }
.story-card:hover .story-card__more { text-decoration: underline; }

/* ---- "How it fits together" band (markdown-enabled — hosts the Mermaid diagram) ---- */
.apple-band {
  margin: 3rem 0;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 4vw, 3rem);
  border-radius: 24px;
  background: var(--apple-bg-2);
  border: 1px solid var(--apple-hairline);
  text-align: center;
}
.apple-band > h2 {
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
  text-align: center;
}
.apple-band > p {
  color: var(--apple-ink-2);
  max-width: 56ch;
  margin: 0 auto 1.6rem;
  font-size: 1.02rem;
  line-height: 1.5;
  text-align: center;
}
.apple-band .mermaid { margin-top: 0.5rem; }
.apple-band .headerlink { display: none; }
.apple-band a, .apple-closer a { text-decoration: none; }

/* ---- Closing CTA ---- */
.apple-closer { text-align: center; margin: 3.5rem 0 1rem; }
.apple-landing .apple-closer h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 1.2rem;
  text-align: center;
}
.apple-closer .apple-hero__cta { margin-top: 0.5rem; }

/* hide the auto heading permalink on landing custom headings */
.apple-landing .headerlink { display: none; }