/* Dark navy/orange retheme for the 10+ "stariji" pages (stariji.html),
   scoped to `body.stariji-page` so it only ever affects those pages, never
   the young-kids cartoon site. Deliberately reuses style.css's existing
   component classes (.signup-box, .form-field, .btn-primary, etc.) rather
   than duplicating their layout rules - only the color/font custom
   properties are overridden here, plus a handful of new classes for
   markup that doesn't exist on the young-kids pages (badges, info strip,
   build-grid). Palette matches robokacija-main-old-to-new's stariji/
   page exactly (same --rb-* hex values) so a visitor doesn't get a third,
   unrelated look partway through the 10+ funnel. */

body.stariji-page{
  --teal: #FF6B2B;        /* rb-orange - primary accent */
  --teal-dark: #E85A1E;   /* darker orange - link/hover */
  --teal-light: rgba(255,107,43,0.12);
  /* Same hex as the young-kids theme's --orange (#FF6A1A) - the one
     deliberate shared color between the two otherwise-different palettes,
     so the primary CTA button reads as "the same brand" on both pages. */
  --orange: #FF6A1A;
  --orange-dark: #FF8C55; /* rb-orange-light */
  --black: #F4F1EC;       /* rb-white - body text/borders flip to light */
  --cream: #1A3A5C;       /* rb-blue - card backgrounds */
  --cream-2: #16314C;
  --grid-line: rgba(138,155,176,0.10);

  --font-head: 'Syne', 'Space Grotesk', sans-serif;
  --font-body: 'Space Grotesk', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  background: #0D1B2A;
}
body.stariji-page{
  background:
    radial-gradient(var(--grid-line) 1.4px, transparent 1.4px) 0 0/28px 28px,
    #0D1B2A;
}

/* Buttons keep dark text regardless of the --black flip above - orange/
   yellow backgrounds need dark text for contrast, not the page's light
   text color. */
body.stariji-page .btn-primary,
body.stariji-page .btn-ghost{ color: #0D1B2A; }

body.stariji-page .site-header{
  background: rgba(13,27,42,0.92);
  border-bottom: 3px solid var(--cream);
}
/* .logo-img's background is var(--black) in style.css, meant to give the
   white-lettered logo artwork a dark backing - the page-wide --black flip
   above (light text for the dark page) accidentally lightened this too,
   turning the backing box itself light and making the white logo text on
   it nearly invisible. Pin it back to a real dark color regardless. */
body.stariji-page .logo-img{ background: #0D1B2A; }
body.stariji-page .main-nav a{ color: var(--black); }
body.stariji-page .main-nav a:hover{ color: var(--teal); }
body.stariji-page .nav-cta{ background: var(--teal); border-color: var(--cream); }

/* style.css's mobile nav (<760px) turns .main-nav into a hidden off-canvas
   panel toggled by #burgerBtn - this page has no burger button (only 2 nav
   items, doesn't need the full slide-out menu), so without this override
   the nav was just permanently invisible below 760px, no way to reach it. */
@media (max-width: 760px){
  body.stariji-page .header-inner{ flex-wrap: wrap; row-gap: 8px; }
  body.stariji-page .main-nav{
    position: static; transform: none; height: auto; width: auto;
    background: transparent; flex-direction: row; flex-wrap: wrap;
    padding: 0; gap: 10px; font-size: 1rem; overflow: visible;
  }
  body.stariji-page .switch-pill{ font-size: .8rem !important; padding: 6px 12px; }
}

body.stariji-page .site-footer{ background: #0A141F; color: var(--black); }

/* Nav "switch to the other track" link, styled as an obvious outlined pill
   (not plain nav text) so it reads as "go here" rather than "you are here". */
.switch-pill{
  border: 1.5px solid rgba(138,155,176,0.5) !important; border-radius: 999px;
  padding: 7px 16px; font-size: .85rem !important; font-weight:700;
}
.switch-pill:hover{ border-color: var(--teal) !important; color: var(--teal) !important; }

/* Form inputs keep their hardcoded white background (style.css doesn't
   tie that to --cream), so text/placeholder color must be set explicitly
   here too - the page-wide --black -> rb-white flip above would otherwise
   render near-white text on that white background, unreadable. */
body.stariji-page .form-field input,
body.stariji-page .form-field select,
body.stariji-page .form-field textarea{
  color: #16314C;
}
body.stariji-page .form-field input::placeholder,
body.stariji-page .form-field textarea::placeholder{
  color: #7C8A99;
}

/* Cross-link row above the form - same markup/classes as the young-kids
   page's .signup-switch, just needs a lighter divider than --cream-2
   (which is navy in this theme, invisible against the navy signup-box). */
body.stariji-page .signup-switch{ border-bottom-color: rgba(138,155,176,0.3); }

/* Same --black flip footgun as the form fields above: .price-card's
   background stays literal white (not tied to --cream), but
   .price-row-period/.price-row-amount inherit body's flipped (near-white)
   text color with nothing overriding it - unreadable on the non-featured
   (white) tier card. The featured/orange card doesn't need this since
   near-white text still reads fine against solid orange. */
body.stariji-page .price-card:not(.featured) .price-row-period,
body.stariji-page .price-card:not(.featured) .price-row-amount{
  color: #16314C;
}

/* ===================== Hero / explainer ===================== */
.stariji-hero{ padding-top: 56px; }
.stariji-hero-grid{
  display:grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items:center;
  margin-bottom: 40px;
}
/* Grid items default to min-width:auto, which sizes them by content instead
   of the track - without this an <img width="760"> can blow the column
   (and the whole page) wider than the viewport on mobile. */
.stariji-hero-copy, .stariji-hero-media{ min-width: 0; }
.stariji-hero-media img{
  width:100%; height:auto; border-radius: var(--radius-lg, 20px);
  border: 2px solid rgba(138,155,176,0.35);
  box-shadow: 0 24px 50px rgba(0,0,0,0.35);
}
@media (max-width: 800px){
  .stariji-hero-grid{ grid-template-columns: 1fr; }
  .stariji-hero-media{ order:-1; width:100%; margin: 0 0 8px; }
}
.badge-row{ display:flex; gap:8px; margin-bottom: 24px; flex-wrap: wrap; }
.badge{
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 13px;
  border-radius: 999px; border: 1.5px solid;
}
.badge-orange{ color: var(--teal); border-color: var(--teal); background: var(--teal-light); }
.badge-blue{ color: #8A9BB0; border-color: rgba(138,155,176,0.4); background: transparent; }

.stariji-title{
  font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.05;
  letter-spacing: -0.01em; margin-bottom: .4em; color: var(--black);
}
.stariji-subtitle{ font-family: var(--font-mono); color: #8A9BB0; font-size: .95rem; margin-bottom: 18px; }
.stariji-desc{ font-size: 1.15rem; max-width: 58ch; color: var(--black); }

.info-strip{
  display:grid; grid-template-columns: repeat(3,1fr); gap:16px;
  padding: 24px 0; border-top:1px solid rgba(138,155,176,0.25);
  border-bottom:1px solid rgba(138,155,176,0.25); margin: 32px 0;
}
.info-label{ font-family: var(--font-mono); font-size:11px; color:#8A9BB0; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.info-value{ font-size: .95rem; color: var(--black); }

.build-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin: 20px 0 8px; }
.build-tile{ background: var(--cream); border-radius:10px; padding:16px; border:1.5px solid rgba(138,155,176,0.3); }
.build-tile-title{ font-weight:700; margin-bottom:4px; color: var(--black); }
.build-tile-sub{ font-family: var(--font-mono); font-size:12px; color:#8A9BB0; }
@media (max-width: 600px){ .build-grid{ grid-template-columns: 1fr; } }

.more-info-link{ margin-top: 24px; font-size: .95rem; color: #8A9BB0; }
.more-info-link a{ color: var(--teal); font-weight: 700; }

.stariji-footer p{ color: #8A9BB0; font-size: .9rem; text-align: center; }
.stariji-footer a{ color: var(--teal); }

/* style.css hardcodes these two as literal hex (not var()-driven), so the
   --black flip above doesn't reach them - fix contrast against the navy
   signup-box explicitly. */
body.stariji-page .section-sub{ color: #b9c2cc; }
body.stariji-page .form-status.error{ color: #FF8C8C; }