/* 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;
}

/* .btn-primary keeps dark text regardless of the --black flip above - its
   background is the orange accent, which needs dark text for contrast, not
   the page's light text color. .btn-ghost is NOT included here (bug fixed
   2026-09-23, maker.html "Pogledaj program"): its background is var(--cream)
   which in this dark theme is dark navy (#1A3A5C), so forcing the same dark
   text made it nearly invisible - dark text on a dark background. Left
   unoverridden, .btn-ghost's text correctly inherits the flipped (light)
   --black instead. */
body.stariji-page .btn-primary{ 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 (Ivan
   wants the 3 nav items always visible, not tucked behind a menu), so
   without this override the nav would be permanently invisible below
   760px with 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: .76rem !important; padding: 5px 12px; }
  body.stariji-page .current-page-tag{ font-size: .72rem; }
}

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

/* "You are here" tag, read first in the nav (before the switch link) so
   visitors know which program this page is for before they hit the link
   to the other one. Plain colored text, deliberately NOT pill/button
   shaped (no border, no background, no padding) - a first attempt gave it
   an outlined-pill look and it got mistaken for a second, confusing
   button sitting right next to the real "Prijava" CTA. It's a label, not
   a control, so it shouldn't look like one. */
.current-page-tag{
  color: var(--teal); font-size:.76rem; font-weight:800;
  text-transform: uppercase; letter-spacing:.03em; white-space: nowrap;
}

/* Nav "switch to the other track" link - a real outlined pill so it still
   visibly reads as clickable (a plain-text version was too easy to miss
   entirely), but in a muted neutral tone rather than orange, so it's
   clearly a secondary/utility link and not confusable with the solid
   orange "Prijava" CTA button next to it. */
.switch-pill{
  border: 1.5px solid rgba(138,155,176,0.5) !important; border-radius: 999px;
  padding: 6px 14px; font-size: .8rem !important; font-weight:700;
  color: rgba(244,241,236,0.85) !important;
}
.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; align-items:start; 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); overflow:hidden; }
.build-tile-img{
  display:block; width: calc(100% + 32px); margin: -16px -16px 12px; aspect-ratio: 4/3;
  object-fit: cover; border-bottom: 1.5px solid rgba(138,155,176,0.3);
}
/* This one's a labeled diagram, not a photo - cover would crop its edge
   labels illegible, so it needs the whole thing visible instead. */
.build-tile-img-diagram{ object-fit: contain; background: #fff; }
/* Konzola/Katapult have no confirmed real photo yet (no need to guess
   wrong and repeat the mismatched-photo problem this was fixing) - a
   plain placeholder keeps the grid's row heights consistent instead of
   leaving those two tiles conspicuously text-only. */
.build-tile-img-placeholder{
  display:flex; align-items:center; justify-content:center;
  background: rgba(138,155,176,0.12); font-size:2rem; opacity:.5;
}
.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; }

/* Always-visible hook sentence, only present on tiles with real module
   copy written yet (currently just Svjetlost/Modul 1) - other tiles are
   untouched until their own content lands. */
.build-tile-hook{ font-size:13px; color:#B7C2CE; margin: 8px 0 0; line-height:1.5; }

/* Collapsed skills list, same +/- disclosure pattern as .faq-item
   (style.css) but compact enough to sit inside a build-grid card instead
   of the full-width FAQ section. align-items:start on .build-grid (below)
   keeps an opened tile from stretch-inflating its row neighbor. */
.build-tile-skills{ margin-top: 10px; border-top: 1.5px solid rgba(138,155,176,0.3); padding-top: 8px; }
.build-tile-skills summary{
  cursor:pointer; list-style:none; position:relative; padding-right: 22px;
  font-family: var(--font-head); font-weight:700; font-size:12.5px; color: var(--black);
}
.build-tile-skills summary::-webkit-details-marker{ display:none; }
.build-tile-skills summary::after{
  content:"+"; position:absolute; right:0; top:50%; transform: translateY(-50%);
  font-size:1.1rem; font-weight:800; color: var(--teal-dark); line-height:1;
}
.build-tile-skills[open] summary::after{ content:"−"; }
.build-tile-skills ul{ margin: 10px 0 0; padding-left: 18px; }
.build-tile-skills li{ font-size:12.5px; color:#B7C2CE; line-height:1.5; margin-bottom:6px; }
.build-tile-skills li:last-child{ margin-bottom:0; }

@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; }

/* .faq-item's own background is var(--cream-2) (dark navy here), but its
   paragraph text is style.css's hardcoded #4d473c (a light-theme muted
   brown) - unlike .price-card and the form fields above, .faq-item's
   background DOES follow the theme, so this one goes dark-on-dark instead
   of light-on-white, reading as nearly invisible (caught 2026-09-23 on
   maker.html, the first stariji-page page to actually use .faq-item -
   stariji.html itself uses its own .build-tile-skills disclosure instead,
   which was already themed correctly). */
body.stariji-page .faq-item p{ color: #B7C2CE; }

/* Same "background follows the theme, hardcoded text color doesn't"
   footgun as .faq-item above, on the muted instructional text inside an
   empty gallery/photo placeholder (.img-placeholder's own background is
   var(--teal-light), which resolves to a dark orange-tinted overlay in
   this theme, not the light-theme's pale teal tint the hardcoded #3d7d7a
   was tuned for). */
body.stariji-page .img-placeholder span{ color: #E8C4AE; }