/* Rivo skin: الصحيفة الكلاسيكية — broadsheet layout (serif headlines, centred masthead, hairline rules)
   in the mobile app's colours (rivo_news_app/lib/theme.dart): warm off-white #FAF8F2 / navy canvas
   #0B1220, white / #111A2E surfaces, #E6E8EC / #24304A dividers, brand blue #1D4ED8 (#60A5FA in dark),
   live red #EF4444. Text greys approximate the app's Material scheme seeded from #1D4ED8. */
:root {
  --q-bg: #faf8f2; --q-bg-soft: #f3f1ea; --q-bg-tint: #ecebe4; --q-paper: #ffffff;
  --q-line: #e6e8ec; --q-line-soft: #efefeb;
  --q-ink: #1a1b21; --q-ink-1: #24262e; --q-ink-2: #45464f; --q-muted: #6b7280;
  --q-accent: #1d4ed8; --q-accent-hover: #1e3a8a; --q-accent-soft: #e8edfc;
  --q-kicker: #ef4444;
  --q-brand: #1d4ed8; --q-brand-hover: #1e3a8a;
  --q-radius: 0; --q-radius-sm: 0; --q-radius-lg: 0;
  --q-shadow-1: none; --q-shadow-2: none;
  --q-display: "Noto Naskh Arabic", Georgia, "Times New Roman", serif;
}
:root[data-theme="dark"] {
  --q-bg: #0b1220; --q-bg-soft: #0f1728; --q-bg-tint: #162038; --q-paper: #111a2e;
  --q-line: #24304a; --q-line-soft: #1a2540;
  --q-ink: #e3e5ee; --q-ink-1: #d4d8e4; --q-ink-2: #b4bacb; --q-muted: #8993ad;
  --q-accent: #60a5fa; --q-accent-hover: #93c5fd; --q-accent-soft: #15233f;
  --q-kicker: #ef4444;
  --q-brand: #1d4ed8; --q-brand-hover: #2563eb;
}
.q-brand .q-wordmark { color: var(--q-accent); } /* app home bar: colorScheme.primary */
.q-ticker { background: #0b1220; }
:root[data-theme="dark"] .q-ticker { background: #070c17; }
.q-nav { background: var(--q-bg); border-bottom: 3px double var(--q-ink); }
.q-nav-menu a { font-weight: 700; color: var(--q-ink); }
.q-nav-menu a:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
/* Centred masthead: wordmark on its own row, sections in a ruled row under it. */
@media (min-width: 961px) {
  .q-nav-inner {
    height: auto; padding-top: 10px;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: ". brand actions" "nav nav nav";
    row-gap: 6px;
  }
  .q-brand { grid-area: brand; justify-self: center; }
  .q-nav-actions { grid-area: actions; justify-self: end; }
  .q-nav-menu { grid-area: nav; display: flex; justify-content: center; border-top: 1px solid var(--q-ink); }
  .q-brand .q-wordmark { font-size: 54px; }
  .q-search-form { top: 100%; }
}
/* Section heads: thick rule above, no accent bar. */
.q-section-head { border-bottom: 0; border-top: 2px solid var(--q-ink); padding-top: 10px; }
.q-section-head h2::before { display: none; }
/* Cards: no boxes — stories sit on the page, divided by hairlines. */
.q-card { border: 0; border-bottom: 1px solid var(--q-line); background: transparent; padding-bottom: 14px; }
.q-card:hover { transform: none; box-shadow: none; }
.q-card:hover .q-thumb img { transform: none; }
.q-card .q-body { padding: 12px 0 0; }
.q-card h3 { font-size: 20px; line-height: 1.45; }
.q-card h3 a:hover { color: inherit; text-decoration: underline; }
.q-card .q-cat { letter-spacing: 0; font-size: 12.5px; }
.q-footer { background: #0b1220; }
:root[data-theme="dark"] .q-footer { background: #070c17; }
.q-radio, :root[data-theme="dark"] .q-radio { background: linear-gradient(135deg, #0b1220 0%, #1e3a8a 100%); }
::selection { background: #1d4ed8; color: #fff; }

/* ---- Layout: front page of a broadsheet ----
   Gallery across two thirds with the trending column beside it, the top
   stories as a full-width band of columns, sidebar narrow and unboxed. */
@media (min-width: 1025px) {
  .home main.q-content {
    grid-template-columns: 1fr 1fr 290px;
    grid-template-areas:
      "gal   gal   hot"
      "hero  hero  hero"
      "radio radio radio"
      "bul   bul   side"
      "main  main  side"
      "app   app   app";
  }
  .home .q-hot-topics { border-right: 1px solid var(--q-line); padding-right: 24px; }
  .home .q-gallery { aspect-ratio: 16/9; }
  /* Lead story + the others as three ruled columns. */
  .home .q-hero { grid-template-columns: 1.6fr 1fr 1fr; gap: 0 24px; border-top: 2px solid var(--q-ink); padding-top: 18px; }
  .home .q-hero-lead { min-height: 420px; grid-row: span 2; }
  .home .q-hero-list { display: contents; }
  .home .q-hero-list .q-card { grid-template-columns: 1fr; border: 0; border-right: 1px solid var(--q-line); padding: 0 16px 16px 0; background: transparent; align-content: start; }
  .home .q-hero-list .q-card .q-media { order: -1; }
  .home .q-hero-list .q-card .q-thumb { aspect-ratio: 3/2; }
  .home .q-hero-list .q-card:hover { transform: none; box-shadow: none; }
  .home .q-hero-list .q-card h3 { font-size: 18px; -webkit-line-clamp: 4; }
}
/* Sidebar: no boxes, small serif headings, a thick rule over each widget. */
.q-sidebar > .widget, .q-sidebar > .q-widget { background: transparent; border: 0; border-top: 3px solid var(--q-ink); padding: 12px 0 6px; }
.q-sidebar .widget-title, .q-sidebar .q-widget-title { font-size: 17px; letter-spacing: 0; color: var(--q-ink); border-bottom: 0; padding-bottom: 4px; }
.q-sidebar li { font-size: 14px; border-bottom-style: solid; }
/* Fallback: no trending topics — the gallery takes the full width. */
@media (min-width: 1025px) {
  .home main.q-content:not(:has(> .q-hot-topics)) {
    grid-template-areas: "gal gal gal" "hero hero hero" "radio radio radio" "bul bul side" "main main side" "app app app";
  }
}