/**
 * Tainan Glass — Apple-style visual language on top of Olivero.
 *
 * Color and content style follow apple.com's own conventions: near-black
 * headline text, muted gray secondary/meta text, a single blue accent for
 * links and actions, flat light-gray section backgrounds (not colorful
 * gradients), hairline dividers instead of heavy borders, and a frosted
 * translucent nav bar that blurs whatever scrolls beneath it.
 *
 * Approach: override Olivero's own design tokens (CSS custom properties)
 * plus a small set of high-level component rules. No Olivero templates or
 * JS are touched, so the mobile nav / sticky header behaviour keeps working
 * exactly as Olivero built it — this file only changes how things look.
 */

:root {
  /* Typography: system font stack (San Francisco on Apple devices) with
     proper Traditional Chinese fallbacks. */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro TC", "PingFang TC",
    "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;

  /* Olivero uses --font-serif (Lora, Latin-only) for body/CKEditor content.
     Lora has no CJK glyphs, so Traditional Chinese text falls back to
     whatever serif the OS ships (often a dated Ming-style face) — mixing
     badly with the sans-serif UI everywhere else. Point it at the same
     CJK-friendly sans stack instead. */
  --font-serif: var(--font-sans);

  /* Apple's own palette: near-black headlines, muted gray secondary text,
     a single blue accent for links/buttons. */
  --apple-ink: #1d1d1f;
  --apple-ink-soft: #424245;
  --apple-gray: #86868b;
  --apple-hairline: rgb(0 0 0 / 8%);
  --apple-surface: #ffffff;
  --apple-surface-alt: #f5f5f7;
  --apple-blue: #0071e3;
  --apple-blue-hover: #0058b9;

  /* Map onto Olivero's own primary/text tokens so the whole theme
     (links, buttons, focus rings) picks these up consistently. */
  --color--primary-30: var(--apple-ink);
  --color--primary-40: var(--apple-ink-soft);
  --color--primary-50: var(--apple-blue);
  --color--primary-60: var(--apple-blue-hover);
  --color--primary-80: #2997ff;
  --color-text-neutral-loud: var(--apple-ink);
  --color-text-neutral-medium: var(--apple-ink-soft);
  --color-text-neutral-soft: var(--apple-gray);
  --color-text-primary-medium: var(--apple-blue);
  --color-text-primary-loud: var(--apple-blue-hover);

  /* Glass tokens, reused across header/cards/blocks. */
  --glass-bg: rgb(255 255 255 / 70%);
  --glass-bg-strong: rgb(255 255 255 / 88%);
  --glass-border: var(--apple-hairline);
  --glass-shadow: 0 2px 24px rgb(0 0 0 / 6%);
  --glass-blur: blur(20px) saturate(180%);
  --glass-radius: 18px;
}

/* Flat, near-white section background — Apple's own pages are plain,
   letting content (and the blurred nav bar) carry the visual interest,
   not decorative gradients. */
body {
  background-color: var(--apple-surface-alt);
}

/* ----------------------------------------------------------------------
 * Header / navigation — sticky frosted glass bar.
 * ------------------------------------------------------------------- */
.site-header__initial,
body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-block-end: 1px solid var(--glass-border);
}

.site-header {
  transition: box-shadow 0.3s ease;
}

.primary-nav__menu-link-inner {
  color: var(--apple-ink);
  font-weight: 590;
  letter-spacing: 0.01em;
}

.primary-nav__menu-link--level-1 {
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.primary-nav__menu-link--level-1:hover {
  background-color: rgb(0 0 0 / 5%);
}

/* .js-nav-current is set client-side (js/active-nav.js) rather than
   relying on Drupal's server-rendered active-trail class, which this
   Drupal 12 alpha build computes incorrectly (stuck on one link
   regardless of the actual current page). */
.primary-nav__menu-link.js-nav-current {
  background-color: rgb(0 113 227 / 8%);
}

.primary-nav__menu-link.js-nav-current .primary-nav__menu-link-inner {
  color: var(--apple-blue);
  font-weight: 700;
}

.secondary-nav__menu-link {
  color: var(--apple-gray);
}

.secondary-nav__menu-link:hover {
  color: var(--apple-ink);
}

/* ----------------------------------------------------------------------
 * Typography — Traditional Chinese readability.
 *
 * Olivero's headings (h1/h2) and a few components ship negative
 * letter-spacing tuned for Latin text. Negative tracking makes CJK
 * characters crowd each other and hurts legibility, so it's neutralized
 * here wherever Chinese text is the norm on this site.
 * ------------------------------------------------------------------- */
h1,
h2,
.text-content blockquote {
  letter-spacing: normal;
}

.page-title {
  font-weight: 700;
  letter-spacing: normal;
  color: var(--apple-ink);
}

a {
  color: var(--apple-blue);
}

/* ----------------------------------------------------------------------
 * Generic blocks (sidebar, footer) — flat white panels with a hairline
 * border, not heavy shadows. Apple relies on contrast and whitespace,
 * not drop-shadows, to separate content.
 * ------------------------------------------------------------------- */
.region--sidebar .block,
.region--footer-top .block {
  background: var(--apple-surface);
  border: 1px solid var(--apple-hairline);
  border-radius: var(--glass-radius);
  padding: 1.5rem;
}

.block__title {
  font-weight: 700;
  letter-spacing: normal;
  color: var(--apple-ink);
}

.site-footer {
  background: var(--apple-surface-alt);
  border-block-start: 1px solid var(--apple-hairline);
}

/* ----------------------------------------------------------------------
 * Tainan News API cards — clean white cards, hairline border, generous
 * whitespace, understated hover. This is Apple's actual card language
 * (see apple.com/newsroom): no heavy borders or colorful shadows.
 * ------------------------------------------------------------------- */
html .tainan-newsapi-card {
  background: var(--apple-surface);
  border: 1px solid var(--apple-hairline);
  border-radius: var(--glass-radius);
  box-shadow: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}

html .tainan-newsapi-card:hover {
  background: var(--apple-surface);
  box-shadow: var(--glass-shadow);
  transform: translateY(-3px);
}

html .tainan-newsapi-card__title {
  color: var(--apple-ink);
  letter-spacing: normal;
  font-weight: 600;
}

html .tainan-newsapi-card__summary {
  color: var(--apple-gray);
}

html .tainan-newsapi-card__date {
  color: var(--apple-gray);
}

html .tainan-newsapi-search input[type="search"] {
  background: var(--apple-surface-alt);
  border: 1px solid transparent;
  border-radius: 999px;
  padding-inline: 1.1rem;
  color: var(--apple-ink);
}

html .tainan-newsapi-search input[type="search"]:focus {
  border-color: var(--apple-blue);
  outline: none;
}

html .tainan-newsapi-search button {
  background: var(--apple-blue);
  border-radius: 999px;
  box-shadow: none;
  transition: background-color 0.15s ease;
}

html .tainan-newsapi-search button:hover {
  background: var(--apple-blue-hover);
  transform: none;
  box-shadow: none;
}

html .tainan-newsapi-article {
  background: var(--apple-surface);
  border: 1px solid var(--apple-hairline);
  border-radius: var(--glass-radius);
  box-shadow: none;
  padding: 2rem clamp(1.25rem, 4vw, 3rem);
}

html .tainan-newsapi-article__meta,
html .tainan-newsapi-article__source {
  color: var(--apple-gray);
}

html .tainan-newsapi-latest__item a {
  color: var(--apple-ink);
  font-weight: 600;
}

html .tainan-newsapi-latest__item {
  border-bottom: 1px solid var(--apple-hairline);
}

html .tainan-newsapi-latest__date {
  color: var(--apple-gray);
}

/* ----------------------------------------------------------------------
 * Pager — clean pill-shaped page numbers, Apple-blue current page,
 * muted prev/next controls. Replaces Olivero's square boxed-in look.
 * ------------------------------------------------------------------- */
.pager {
  margin-block-start: 2.5rem;
}

.pager__items {
  justify-content: center;
  gap: 0.25rem;
}

.pager__item {
  width: var(--sp2);
  height: var(--sp2);
  border-radius: 999px;
  background-color: transparent;
  color: var(--apple-gray);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pager__link {
  border-radius: 999px;
  color: inherit;
}

.pager__link:hover {
  background-color: var(--apple-surface-alt);
  color: var(--apple-ink);
}

.pager__link:focus {
  color: var(--apple-blue);
  outline: solid 2px var(--apple-blue);
  outline-offset: 2px;
}

.pager__item--active {
  background-color: var(--apple-blue);
  color: #ffffff;
}

.pager__item--ellipsis {
  color: var(--apple-gray);
  background-color: transparent;
}

.pager__item--control .pager__link {
  color: var(--apple-ink);
}

.pager__item--control .pager__link:hover {
  background-color: var(--apple-surface-alt);
}

/* ----------------------------------------------------------------------
 * Small screens: simplify padding/radius.
 * ------------------------------------------------------------------- */
@media (max-width: 480px) {
  .tainan-newsapi-article {
    padding: 1.5rem 1.1rem;
    border-radius: 14px;
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .tainan-newsapi-card,
  .tainan-newsapi-search button,
  .site-header {
    transition: none;
  }
}