/* Brand vars + small custom layer on top of Tailwind. */
:root {
  --itjw-blue:      #0093C9;
  --itjw-blue-dark: #007AA8;
  --itjw-navy:      #051923;
  --itjw-navy-2:    #003554;
}

html { scroll-padding-top: 5.5rem; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Hero / contact dark gradient. */
.hero-bg,
.hero-gradient {
  background: linear-gradient(135deg, var(--itjw-navy) 0%, var(--itjw-navy-2) 100%);
}

/* Glassy panel used in the hero side card and contact section. */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* Pill nav background. */
.nav-pill {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Coloured consultancy cards: subtle hover lift + tighter rounding. */
.service-card {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 1rem;
}
.service-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 147, 201, 0.30);
  box-shadow: 0 14px 22px -6px rgba(15, 23, 42, 0.10);
}

/* Popup modal entry animation. */
.popup-anim {
  animation: popupIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes popupIn {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Focus visibility. */
*:focus-visible {
  outline: 2px solid var(--itjw-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline-offset: 3px;
}

/* Reduce motion for users who prefer it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Tech News reader overlay ─────────────────────────────────────────── */

/* Themed shell — paper / sepia / dark. The toolbar inherits the theme so
   the controls visually belong to the article rather than the page. */
.reader-shell {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
}
.reader-paper { background: #F7F4EC; color: #1f2937; }
.reader-paper .reader-toolbar { background: #efe9d9; border-color: #e5dec8; }
.reader-paper .reader-toolbar { color: #1f2937; }
.reader-paper .reader-status  { background: #efe9d9; border-color: #e5dec8; }
.reader-paper .reader-body a  { color: #0070a3; }

.reader-sepia { background: #F4ECD8; color: #4b3a1f; }
.reader-sepia .reader-toolbar { background: #ecdcb8; border-color: #d8c599; color: #4b3a1f; }
.reader-sepia .reader-status  { background: #ecdcb8; border-color: #d8c599; }
.reader-sepia .reader-body a  { color: #8a5a00; }

.reader-dark  { background: #11161D; color: #e5e7eb; }
.reader-dark  .reader-toolbar { background: #0b1016; border-color: #1f2937; color: #e5e7eb; }
.reader-dark  .reader-status  { background: #0b1016; border-color: #1f2937; }
.reader-dark  .reader-body a  { color: #7dd3fc; }

/* Toolbar buttons */
.reader-toolbar { backdrop-filter: blur(8px); }
.reader-control-group {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem; border-radius: 9999px;
  background: rgba(0, 0, 0, 0.04);
}
.reader-dark .reader-control-group { background: rgba(255, 255, 255, 0.06); }
.reader-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.4rem 0.7rem; border-radius: 9999px;
  background: transparent; color: inherit;
  transition: background 0.15s ease, color 0.15s ease;
  cursor: pointer; line-height: 1;
}

/* ── YouTube player overlay controls ────────────────────────────── */
/* Bottom-toolbar buttons: chunky enough to read at a glance, with a
   visible chrome ring so they don't disappear against the dark
   toolbar. Icon-only on phones; icon + label from sm breakpoint up. */
.yt-tool-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  height: 2.25rem; padding: 0 0.7rem;
  border-radius: 9999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1;
  color: rgb(226 232 240);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, transform 0.1s ease;
  cursor: pointer;
}
.yt-tool-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.yt-tool-btn:active { transform: translateY(1px); }
.yt-tool-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.yt-tool-icon {
  width: 1.1rem; height: 1.1rem; flex: 0 0 auto;
}
.yt-tool-label { white-space: nowrap; }
/* Play/pause button keeps a fixed minimum width so toggling between
   "Play" and "Pause" labels (different character widths) doesn't
   shove the rest of the toolbar sideways every time the user
   pauses the video. */
.yt-tool-btn--play { min-width: 2.6rem; justify-content: center; }
@media (min-width: 768px) {
  .yt-tool-btn--play { min-width: 5.5rem; }
}

/* The YouTube IFrame API replaces our placeholder <div id="yt-frame">
   with an <iframe id="yt-frame"> that has hard-coded width="640"
   height="360" attributes. Force it to fill the parent so portrait
   videos use the full vertical space on mobile instead of being
   letterboxed inside a 360px-tall box. */
iframe#yt-frame {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}
.reader-btn:hover { background: rgba(0, 0, 0, 0.07); }
.reader-dark .reader-btn:hover { background: rgba(255, 255, 255, 0.08); }
.reader-btn-on { background: rgba(0, 147, 201, 0.15); color: #0093C9; }
.reader-dark .reader-btn-on { background: rgba(125, 211, 252, 0.18); color: #7dd3fc; }
.reader-btn-primary {
  background: #0093C9; color: #fff;
}
.reader-btn-primary:hover { background: #007AA8; color: #fff; }
.reader-range { width: 5.5rem; accent-color: #0093C9; }
.reader-source-pill {
  display: inline-flex; align-items: center;
}

/* Article typography — serif body, paper-friendly leading. The
   selected font family is applied via a .reader-ff-* class on the
   reader shell so both the title and body update together. */
.reader-article,
.reader-title { letter-spacing: -0.005em; }
.reader-ff-serif        .reader-article,
.reader-ff-serif        .reader-title {
  font-family: Georgia, 'Iowan Old Style', 'Apple Garamond', 'Times New Roman', serif;
}
.reader-ff-sans         .reader-article,
.reader-ff-sans         .reader-title {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.reader-ff-merriweather .reader-article,
.reader-ff-merriweather .reader-title {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
}
.reader-ff-lora         .reader-article,
.reader-ff-lora         .reader-title {
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
}
.reader-ff-atkinson     .reader-article,
.reader-ff-atkinson     .reader-title {
  font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
}
.reader-ff-lexend       .reader-article,
.reader-ff-lexend       .reader-title {
  font-family: 'Lexend Deca', system-ui, -apple-system, sans-serif;
}
.reader-ff-system       .reader-article,
.reader-ff-system       .reader-title {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Default before JS applies a class. */
.reader-article {
  font-family: Georgia, 'Iowan Old Style', 'Apple Garamond', 'Times New Roman', serif;
}
.reader-title {
  font-family: Georgia, 'Iowan Old Style', 'Apple Garamond', 'Times New Roman', serif;
}
/* Article images surface inside the reader at a sensible size — never
   wider than the column, never overflowing the rounded shell. */
.reader-body img,
.reader-body figure img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: 0.5rem;
}
/* Breathing room around inline article images so body copy never
   crowds the picture. */
.reader-body figure { margin: 1.6em 0 1.8em; }
.reader-body > img    { margin: 1.6em auto 1.8em; }
.reader-body p > img  { margin: 0.8em auto 1.2em; }
/* Hero image fallback: when the extracted article has no inline
   images we inject the card's image at the very top so the reader
   still leads with a visual. Slightly larger margin than inline figs. */
.reader-hero-img {
  display: block; width: 100%; height: auto;
  /* Generous bottom margin so the body copy doesn't crowd the image. */
  margin: 0 auto 2rem;
  border-radius: 0.75rem;
}

/* Inline chevron used on "Original" and "View original on …" buttons.
   Slightly larger than body text and nudged for optical balance so it
   reads as a clear "go to" indicator after the label. */
.reader-chev {
  display: inline-block;
  margin-left: 0.35em;
  font-size: 1.1em; line-height: 1;
  transform: translateY(-1px);
  font-weight: 700;
}

/* Icon-only Play / Pause / Stop buttons in the popover — square,
   chunky, easy to hit on touch. */
.reader-btn-icon {
  width: 2.4rem; height: 2.4rem; padding: 0;
  font-size: 1rem;
}

/* Popover sections — every row uses the same two-column shape so the
   labels (Theme, Font, Text size, Read aloud, Speed, Voice) stack into
   a tidy column on the left and the controls fill the rest. */
.reader-section {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.reader-section-label {
  flex: 0 0 4.75rem;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  opacity: 0.55;
  margin: 0;
}
.reader-section-control {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.reader-section + .reader-section { margin-top: 0.85rem; }
.reader-section-divider {
  padding-top: 0.95rem;
  margin-top: 0.95rem !important;
  border-top: 1px solid currentColor;
  border-color: rgba(0, 0, 0, 0.1);
}
.reader-dark .reader-section-divider { border-color: rgba(255, 255, 255, 0.12); }
.reader-sepia .reader-section-divider { border-color: rgba(140, 100, 30, 0.25); }
/* The "Open original article" CTA spans the full width of the popover
   instead of following the label-and-control grid above. */
.reader-section-cta { display: block; }

/* Tech News card placeholder — shown when the upstream image is
   missing or fails to load. A rich brand-coloured gradient with a
   soft glow, decorative grid, newspaper glyph and the source name so
   the tile feels intentional rather than empty. */
.tn-card-image-placeholder {
  position: relative; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(125, 211, 252, 0.55), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(0, 147, 201, 0.45), transparent 55%),
    linear-gradient(135deg, #082f49 0%, #0c4a6e 45%, #051923 100%);
  color: #e0f2fe;
}
.tn-card-image-placeholder img { display: none; }
/* Subtle decorative grid lines — give the tile texture so it doesn't
   feel like dead space. Very low opacity so it never competes with
   the source label. */
.tn-card-image-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  pointer-events: none;
}
/* The source label and newspaper icon sit in a centred stack via this
   ::after pseudo, then we layer a real-DOM-free SVG icon above it
   using a second mask. To keep things in pure CSS we render both the
   icon and the label inside ::after with text + emoji positioning. */
.tn-card-image-placeholder::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 0.85rem;
  padding: 1.2rem;
  text-align: center;
  font-size: 13px; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(224, 242, 254, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* Newspaper icon — drawn with a wrapper element via background image so
   it scales crisply and sits above the grid texture, just above the
   source name. */
.tn-card-image-placeholder::after {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23bae6fd' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='12' width='44' height='40' rx='3'/><path d='M52 20h6v28a4 4 0 0 1-4 4'/><path d='M16 22h20M16 30h20M16 38h20M40 22h6v8h-6z'/></svg>")
    no-repeat center calc(50% - 1.6rem) / 56px 56px;
  padding-top: 4rem;
}
.reader-body p { margin: 0 0 1.1em; }
.reader-body h2,
.reader-body h3,
.reader-body h4 { margin: 1.6em 0 0.6em; font-weight: 700; line-height: 1.25; }
.reader-body h2 { font-size: 1.4em; }
.reader-body h3 { font-size: 1.2em; }
.reader-body ul,
.reader-body ol { margin: 0 0 1.1em 1.4em; }
.reader-body li { margin: 0.3em 0; }
.reader-body blockquote {
  margin: 1.1em 0; padding: 0.4em 1em;
  border-left: 3px solid currentColor; opacity: 0.85;
  font-style: italic;
}
.reader-body a { text-decoration: underline; text-underline-offset: 2px; }
.reader-body figcaption { font-size: 0.85em; opacity: 0.7; margin-top: 0.4em; }

/* TTS word highlight. Uses theme-appropriate background. */
.tts-word { transition: background-color 0.1s ease; border-radius: 3px; padding: 0 1px; }
/* Honour OS-level "reduce motion" by removing the highlight transitions
   (and any hover scale on cards rendered by JS). */
@media (prefers-reduced-motion: reduce) {
  .tts-word, .tts-sentence { transition: none !important; }
  .tn-card { transition: none !important; }
}
.reader-paper .tts-word.tts-on { background: #fde68a; }
.reader-sepia .tts-word.tts-on { background: #e9b86b; color: #2b1a00; }
.reader-dark  .tts-word.tts-on { background: #0093C9; color: #fff; }

/* Sentence-level highlight for premium playback (cloud TTS gives us
   per-sentence audio chunks; we wrap each sentence in a span and light
   it up while its audio plays). Subtler than the per-word band so it
   reads as a calm reading guide rather than a flashing karaoke line. */
.tts-sentence { transition: background-color 0.2s ease; border-radius: 4px; }
.reader-paper .tts-sentence.tts-sent-on { background: rgba(0, 147, 201, 0.12); box-shadow: inset 0 0 0 1px rgba(0, 147, 201, 0.18); }
.reader-sepia .tts-sentence.tts-sent-on { background: rgba(180, 110, 30, 0.16);  box-shadow: inset 0 0 0 1px rgba(180, 110, 30, 0.25); }
.reader-dark  .tts-sentence.tts-sent-on { background: rgba(0, 147, 201, 0.22); box-shadow: inset 0 0 0 1px rgba(0, 147, 201, 0.45); }

/* Reader <select> chrome — we draw an explicit per-theme background
   and chevron so the closed control reads as a real dropdown in every
   theme (the dark-mode version was previously transparent on a near-
   black background which made the affordance invisible). */
.reader-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-color: rgba(0, 0, 0, 0.04);
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 0.7rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,5 6,8 9,5'/></svg>");
  color: inherit;
  border: 1px solid rgba(0,0,0,0.25);
  border-radius: 6px;
  padding: 4px 1.6rem 4px 8px;
  max-width: 12rem;
  font-weight: 500;
}
.reader-paper .reader-select { background-color: #fffaec; border-color: rgba(120, 80, 20, 0.35); }
.reader-sepia .reader-select { background-color: #f0dca0; border-color: rgba(120, 80, 20, 0.45); }
.reader-dark  .reader-select {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
  color: #f1f5f9;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='3,5 6,8 9,5'/></svg>");
}
/* The native option list inherits from the OS so we set explicit
   colours per theme for the open dropdown to stay legible. */
.reader-select option         { background: #ffffff; color: #051923; }
.reader-paper .reader-select option { background: #fffaec; color: #1f2937; }
.reader-sepia .reader-select option { background: #f5e9c8; color: #3b2a10; }
.reader-dark  .reader-select option { background: #161c25; color: #e2e8f0; }

/* Read-aloud popover — anchored under the hamburger button in the
   toolbar. Sits above article content and shares the toolbar palette
   so the controls feel like an extension of the bar, not the page. */
.reader-tts-menu {
  position: absolute;
  top: 100%;
  /* Anchor under the ☰ button at the left edge of the toolbar so the
     popover opens in the same direction the user just pressed from,
     instead of flying out to the opposite side of the screen. */
  left: 1rem;
  margin-top: 0.4rem;
  z-index: 10;
  min-width: 16rem; max-width: calc(100vw - 2rem);
  padding: 0.85rem 0.95rem;
  border-radius: 0.85rem;
  background: inherit; color: inherit;
  border: 1px solid currentColor;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.35);
}
.reader-paper .reader-tts-menu { background: #fdfaf0; border-color: #d8c599; }
.reader-sepia .reader-tts-menu { background: #f5e9c8; border-color: #c8a85a; }
.reader-dark  .reader-tts-menu { background: #161c25; border-color: #334155; }

/* Font family selector in the toolbar — same chrome as voice picker. */

/* Reader-controls visibility helpers. Items marked
   .reader-toolbar-only show in the toolbar on tablet/desktop but are
   hidden on phones (the popover hosts duplicates). The mirror class
   .reader-mobile-only does the opposite — only visible inside the
   popover on phones. */
.reader-mobile-only { display: none; }

/* Reader popover anchors to the right edge of the toolbar at every
   breakpoint — the ☰ button lives on the right too, so this keeps
   the menu directly underneath it. */
.reader-tts-menu { left: auto; right: 1rem; }

/* Mobile niceties — toolbar collapses to just the source pill, ☰
   and close button so it fits on a single row even on narrow phones.
   Theme, font-family and "Open original" move into the popover
   behind ☰. The popover stretches edge-to-edge for thumbability. */
@media (max-width: 640px) {
  .reader-shell { border-radius: 0; }
  .reader-toolbar { padding: 0.5rem 0.75rem; gap: 0.4rem; }
  .reader-tts-menu { left: 0.5rem; right: 0.5rem; }
  .reader-toolbar-only { display: none !important; }
  .reader-mobile-only { display: flex; }
}

/* Disabled reader buttons (used by the Play/Pause/Stop pill) — the
   buttons are always visible so users can see all three transport
   actions; whichever is invalid for the current playback state is
   dimmed and non-interactive. */
.reader-btn:disabled,
.reader-btn[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}
.reader-btn:disabled:hover,
.reader-btn[disabled]:hover { background: transparent; }
.reader-dark .reader-btn:disabled:hover,
.reader-dark .reader-btn[disabled]:hover { background: transparent; }

/* (The previous .tn-scroll-pop popover styles were removed when the
   Tech News Sources / Topics popovers were replaced by an inline
   collapsible <details class="tn-filters"> section.) */

/* ─── Tech News card hardening ───────────────────────────────────────
   Long unbroken strings (URLs, hashtags, foreign-language words) used
   to push the card wider than its column on mobile, causing a
   horizontal scroll on the page. Constrain widths and force wrapping. */
.tn-card { max-width: 100%; min-width: 0; }
.tn-card .tn-card-title,
.tn-card .tn-card-summary {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.tn-panel-grid { min-width: 0; }

/* Reader body — guard against wide content (long URLs, oversized
   tables, code blocks) creating a horizontal scrollbar on mobile. */
.reader-body { overflow-wrap: anywhere; word-break: break-word; }
.reader-body img,
.reader-body video,
.reader-body iframe,
.reader-body table { max-width: 100%; height: auto; box-sizing: border-box; }
.reader-body pre { max-width: 100%; overflow-x: auto; }

/* ─── Tech News filters collapsible section ──────────────────────────
   The chevron rotates 180° when the details element is open so the
   open/closed state reads at a glance. */
details.tn-filters[open] > summary .tn-filters-chev {
  transform: rotate(180deg);
}