/*
Theme Name: Stacks
Theme URI: https://example.com/stacks
Author: Your Name
Author URI: https://example.com
Description: A clean, modern technology news and reviews theme with a sliding featured hero, a three-up card row and a dark feature block. Crisp technical type, per-category colour accents, light and dark modes, self-hosted fonts and one-click demo content with original artwork.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stacks
Tags: blog, news, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, full-width-template
*/

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f4fb;
  --text: #131626;
  --text-2: #3c4155;
  --muted: #6a7085;
  --line: #e4e6f1;
  --accent: #5b6cff;
  --accent-ink: #ffffff;
  --accent-hover: #131626;
  --accent-hover-ink: #ffffff;

  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --w-display: 700;
  --lh-display: 1.08;
  --track-display: -0.02em;

  --radius: 12px;
  --radius-ui: 8px;
  --footer-bg: #0f1120;
  --footer-text: #eef0fa;
  --footer-muted: #969cb6;
  --footer-line: rgba(255,255,255,.12);
  --overlay: linear-gradient(180deg, rgba(10,12,24,0) 30%, rgba(10,12,24,.9) 100%);
}
:root[data-theme="dark"] {
  --bg: #0b0d1a;
  --surface: #12152a;
  --surface-2: #191d38;
  --text: #eef0fa;
  --text-2: #c4c9e0;
  --muted: #8a90ad;
  --line: #242a4a;
  --accent: #7d8bff;
  --accent-ink: #0b0d1a;
  --accent-hover: #eef0fa;
  --accent-hover-ink: #0b0d1a;
  --footer-bg: #070814;
}

body { font-size: 17px; }
.meta, .cat, .primary-menu a, .mobile-menu a, .section-link, .widget-title { font-family: var(--font-ui); }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; }
h1, h2, h3, h4, .card__title, .mini__title, .entry-title, .section-title { font-family: var(--font-display); letter-spacing: -.02em; }

.site-header { border-bottom: 1px solid var(--line); }
.primary-menu > li > a { font-weight: 500; font-size: .92rem; }
.header-cta { background: var(--accent); color: #fff; border-radius: 100px; }
.cat { color: hsl(var(--cat-hue,230) 70% 56%); font-weight: 600; }
.card-overlay .cat, .st-slide .cat { color: #fff; background: var(--accent); padding: .18rem .55rem; border-radius: 5px; }
.section-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* ---------- Carousel ---------- */
.st-carousel { position: relative; margin-top: 1.25rem; }
.st-carousel__viewport { overflow: hidden; border-radius: var(--radius); }
.st-carousel__track { display: flex; transition: transform .5s cubic-bezier(.4,.1,.1,1); }
.st-slide { position: relative; flex: 0 0 100%; min-height: 480px; display: flex; align-items: flex-end; isolation: isolate; }
.st-slide .media { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; }
.st-slide::after { content: ""; position: absolute; inset: 0; background: var(--overlay); z-index: 1; }
.st-slide__body { position: relative; z-index: 2; width: 100%; padding-block: clamp(24px, 4vw, 44px); color: #fff; }
.st-slide__title { font-size: clamp(1.8rem, 3.6vw, 3rem); max-width: 20ch; margin-block: .6rem; }
.st-slide__title a { color: #fff; }
.st-slide .meta, .st-slide .meta a { color: rgba(255,255,255,.85); }
.st-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; backdrop-filter: blur(6px); }
.st-carousel__nav:hover { background: var(--accent); }
.st-carousel__nav--prev { left: 16px; }
.st-carousel__nav--next { right: 16px; }
.st-carousel__dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .4rem; }
.st-carousel__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); }
.st-carousel__dot[aria-selected="true"] { background: #fff; width: 24px; border-radius: 100px; }
@media (max-width: 760px) { .st-slide { min-height: 360px; } .st-carousel__nav { display: none; } }

/* ---------- Row ---------- */
.st-row .card .media { aspect-ratio: 16/10; }
.st-row .card__title { font-size: 1.25rem; }

/* ---------- Watch / review block ---------- */
.st-watch { background: #0f1120; color: #eef0fa; padding-block: clamp(32px, 4vw, 52px); }
[data-theme="dark"] .st-watch { background: #070814; }
.st-watch__title { color: #fff; font-size: 1.4rem; margin-bottom: 1.6rem; display: flex; align-items: center; gap: .5rem; }
.st-watch__slash { color: var(--accent); }
.st-watch__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-watch .card-row { grid-template-columns: 120px 1fr; gap: 14px; background: rgba(255,255,255,.04); padding: 12px; border-radius: var(--radius); }
.st-watch .card-row .media { aspect-ratio: 1; }
.st-watch .card__title { color: #fff; font-size: 1.1rem; }
.st-watch .card__title a { color: #fff; }
.st-watch .card__title a:hover { color: var(--accent); }
.st-watch .cat { color: hsl(var(--cat-hue,230) 70% 70%); }
.st-watch .meta, .st-watch .meta a { color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .st-watch__grid { grid-template-columns: 1fr; } }

/* ---------- Latest + signup ---------- */
.st-latest .card .media { aspect-ratio: 16/10; }
.st-signup { padding-bottom: clamp(36px, 5vw, 56px); }
.signup--band { background: linear-gradient(120deg, var(--accent), #8a63ff); color: #fff; border-radius: var(--radius); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.signup--band .signup__title { color: #fff; }
.signup--band .signup__desc { color: rgba(255,255,255,.9); }
.signup--band .signup__form { min-width: 340px; }
.signup--band .signup__button { background: #0b0d1a; color: #fff; }
.signup--band .signup__note { color: rgba(255,255,255,.8); }
@media (max-width: 760px) { .signup--band { grid-template-columns: 1fr; } .signup--band .signup__form { min-width: 0; } }

.entry-content { font-family: var(--font-body); }