/* ==========================================================================
   css/layout.css — Satelitski vodič · layout & components (wave 3)
   Owner: Designer. Imported AFTER design/tokens.css and css/stars.css
   (index.html links all three in that order — do NOT @import tokens here).

   THEME: "Noć nad Jadranom" — night sky over the Adriatic. Dark, calm,
   trustworthy. Gold accent (--accent) used for CTAs, focus, step numbers.

   BREAKPOINTS (mobile-first; all media queries are min-width)
   --------------------------------------------------------------------------
   Base   320px–767px   single column, collapsed mobile nav, stacked CTAs
   ≥48rem  768px       tablet — inline nav, 2-col card grids
   ≥64rem 1024px       desktop — 3-col benefits, 4-col steps, larger rhythm

   CONTAINER: --container (72rem) max-width, fluid side padding.

   CONTRAST: only token colors, per the ratios documented in tokens.css
   (text-primary 16.5:1, text-muted 9.3:1, text-faint 5.4:1 on --bg-0;
   accent 10.4:1; accent-ink 9.8:1 on accent; border-strong 3.9:1 for
   interactive boundaries).

   NO CLS: system fonts only, no images, no async layout. Sticky header is
   in flow; the mobile nav panel is position:absolute (no flow impact);
   nothing animates layout properties.

   REDUCED MOTION: tokens.css carries a global kill-switch for all
   animation/transition. This file only ever transitions color / border /
   box-shadow / transform (chevron) — nothing layout-affecting.

   ==========================================================================
   JS COORDINATION (read by Fixer-js) — state classes this file styles
   --------------------------------------------------------------------------
    MOBILE NAV
    - js/ui.js toggles .is-open on the <nav class="site-nav"> element and
      keeps aria-expanded in sync on .site-nav__toggle.
    - Collapsed by default on mobile (CSS). Desktop nav is always visible.

    FAQ ACCORDION
    - js/ui.js collapses answers by setting the hidden attribute on
      .faq__answer (queries .faq__question button for the toggles).
   - NO-JS FALLBACK: answers are visible by default (no hidden attribute in
     the HTML). They collapse only when JS marks them hidden. This file
     styles .faq__answer[hidden] { display: none }.
   ========================================================================== */

/* ==========================================================================
   BASE
   ========================================================================== */

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  /* keep anchored sections clear of the sticky header */
  scroll-padding-top: 5rem;
}

@media (max-width: 47.99rem) {
  html {
    /* keep focused controls clear of the sticky mobile CTA (WCAG 2.4.11) */
    scroll-padding-bottom: 6.5rem;
  }
}

body {
  margin: 0;
  background-color: var(--bg-0);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

p {
  margin: 0;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--accent-hover);
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

::selection {
  background: rgba(232, 184, 75, 0.3);
  color: var(--text-primary);
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.section {
  padding-block: var(--space-7); /* 48px mobile */
}

.section--alt {
  background: var(--bg-1);
}

.section__title {
  font-size: clamp(1.5rem, 2vw + 1rem, var(--text-3xl));
  margin-bottom: var(--space-4);
  text-wrap: balance;
}

.section__lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: var(--leading-lg);
}

@media (min-width: 64rem) {
  .section {
    padding-block: var(--space-9); /* 96px desktop */
  }
}

/* ==========================================================================
   SKIP LINK — visually hidden until focused (keyboard a11y)
   ========================================================================== */

.skip-link {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-2);
  color: var(--text-primary);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transform: translateY(-250%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

a.link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a.link:hover {
  color: var(--accent-hover);
}

/* ==========================================================================
   HEADER + NAV
   Mobile-first: nav collapsed by default, opened via .is-open (JS).
   Desktop (≥48rem): inline nav, toggle hidden.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 14, 26, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  position: relative;
}

.site-header__cta {
  display: none;
  flex-shrink: 0;
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.brand {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-decoration: none;
}

.brand:hover {
  color: var(--accent);
}

/* Mobile menu button — hidden on desktop */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
}

/* Mobile nav — collapsed by default; overlay panel below the sticky header */
.site-nav {
  display: none;
}

.site-nav.is-open {
  display: block;
}

@media (max-width: 47.99rem) {
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: var(--space-2) var(--space-4);
  color: var(--text-muted);
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--accent);
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .brand {
    font-size: var(--text-lg);
  }

  .site-nav__list {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .site-nav__link {
    padding-inline: var(--space-2);
    font-size: var(--text-sm);
  }
}

@media (min-width: 48rem) {
  .site-nav__toggle {
    display: none;
  }

  .site-nav {
    display: block;
    margin-left: auto;
  }

  .site-nav__list {
    display: flex;
    gap: var(--space-1);
  }

  .site-nav__link {
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
  }

  .site-header__cta {
    display: inline-flex;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  padding-block: var(--space-8) var(--space-7); /* 64px / 48px mobile */
}

.hero__content {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.hero__title {
  font-size: clamp(1.75rem, 4.5vw + 1rem, var(--text-4xl));
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
  text-wrap: balance;
}

.hero__lede {
  font-size: var(--text-lg);
  color: var(--text-muted);
  line-height: var(--leading-lg);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

@media (min-width: 64rem) {
  .hero {
    padding-block: var(--space-9) var(--space-8);
  }
}

/* ==========================================================================
   BUTTONS — min 44px tap targets (--tap-target)
   ========================================================================== */

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out);
}

.button-primary {
  background: var(--accent);
  color: var(--accent-ink); /* 9.8:1 on gold */
  box-shadow: var(--shadow-glow);
}

.button-primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.button-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 2px solid var(--border-strong); /* 3.9:1 interactive boundary */
}

.button-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(232, 184, 75, 0.08);
}

/* ==========================================================================
   BADGE / EYEBROW — hero kicker pill
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: rgba(232, 184, 75, 0.12);
  border: 1px solid rgba(232, 184, 75, 0.35);
  color: var(--accent); /* 10.4:1 on --bg-0 */
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ==========================================================================
   CARDS + GRIDS
   ========================================================================== */

.card {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--border); /* decorative only — cards are not controls */
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.card h3,
.card__title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-2);
}

.card p,
.card__body {
  color: var(--text-muted);
  line-height: var(--leading-base);
}

/* Benefits — 6 cards: 1 → 2 → 3 columns */
#prednosti .container {
  display: grid;
  gap: var(--space-4);
}

#prednosti .section__title {
  grid-column: 1 / -1;
}

@media (min-width: 48rem) {
  #prednosti .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  #prednosti .container {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* How it works — 4 numbered steps (gold constellation numbers) */
#kako-radi ol {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}

#kako-radi ol .card::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-ink); /* 9.8:1 on gold */
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}

@media (min-width: 48rem) {
  #kako-radi ol {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  #kako-radi ol {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ==========================================================================
   PROSE + MID-PAGE CTAs
   ========================================================================== */

.prose {
  max-width: var(--container-narrow);
}

.prose .section__lede,
.prose p {
  color: var(--text-muted);
  line-height: var(--leading-lg);
}

.prose p + p {
  margin-top: var(--space-4);
}

.article__header {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-bottom: var(--space-6);
  display: grid;
  gap: var(--space-3);
  text-align: center;
  justify-items: center;
}

.article__title {
  font-size: clamp(1.75rem, 4vw + 1rem, var(--text-4xl));
}

.article__meta {
  color: var(--text-faint);
  font-size: var(--text-sm);
}

.article-body h2,
.article-body h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.article-body ul,
.article-body ol {
  margin: var(--space-3) 0 var(--space-4);
  padding-left: 1.25rem;
  color: var(--text-muted);
  line-height: var(--leading-lg);
}

.article-body li + li {
  margin-top: var(--space-2);
}

.blog-toolbar {
  max-width: var(--container-narrow);
  margin-inline: auto;
  margin-bottom: var(--space-5);
  width: 100%;
}

.blog-search {
  display: grid;
  gap: var(--space-2);
}

.blog-search__label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
}

.blog-search__input {
  width: 100%;
  min-height: var(--tap-target);
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-2);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
}

.blog-search__input::placeholder {
  color: var(--text-faint);
}

.blog-search__empty {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.blog-list {
  max-width: var(--container-narrow);
  margin-inline: auto;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  align-items: stretch;
}

@media (min-width: 48rem) {
  .blog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blog-list .blog-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

.blog-list .blog-card[hidden] {
  display: none;
}

.blog-list__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.section-cta {
  margin-top: var(--space-5);
  text-align: center;
}

/* ==========================================================================
   AVAILABILITY — centered narrow prose
   ========================================================================== */

#dostupnost .container {
  max-width: var(--container-narrow);
  text-align: center;
}

#dostupnost .section__lede {
  margin-inline: auto;
}

#dostupnost .section__lede + .section__lede {
  margin-top: var(--space-4);
}

/* ==========================================================================
   CJENIK — najam vs kupnja + plan cards
   Nested grids so 2-col compare / 3-col residential / 2-col roam
   stay independent of one another.
   ========================================================================== */

#cjenik .section__lede {
  max-width: var(--container-narrow);
  margin-bottom: var(--space-6);
}

.cjenik__group-title {
  font-size: var(--text-xl);
  margin: var(--space-6) 0 var(--space-3);
}

.cjenik__note {
  max-width: var(--container-narrow);
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.cjenik__grid {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 48rem) {
  .cjenik__grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .cjenik__grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .cjenik__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.price-card__tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2vw + 1rem, var(--text-3xl));
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--accent);
  margin: 0 0 var(--space-3);
  line-height: var(--leading-tight);
}

.price-card__amount span {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  letter-spacing: 0;
  margin-left: 0.15em;
}

.cjenik__extra {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-faint);
  line-height: var(--leading-sm);
}

.compare-card ul,
.price-card ul {
  margin: var(--space-3) 0 0;
  padding-left: 1.2rem;
  color: var(--text-muted);
  line-height: var(--leading-base);
}

.compare-card li + li,
.price-card li + li {
  margin-top: var(--space-2);
}

#cjenik .section-cta {
  margin-top: var(--space-6);
}

/* ==========================================================================
   FAQ ACCORDION
   --------------------------------------------------------------------------
   No-JS fallback: answers are visible by default (no hidden attribute in
   the HTML). js/ui.js collapses them by setting the hidden attribute on
   .faq__answer — this file styles that closed state. Open state is the
   default; the question button also reflects aria-expanded.
   ========================================================================== */

.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}

.faq-item {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.faq__question {
  margin: 0;
}

.faq__question button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--tap-target);
  padding: var(--space-4) var(--space-5);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.faq__question button:hover {
  color: var(--accent);
}

.faq__question button[aria-expanded="true"] {
  color: var(--accent); /* 8.8:1 on --bg-2 */
}

/* Chevron — transform only, no layout impact */
.faq__question button::after {
  content: "";
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); /* pointing down = collapsed */
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq__question button[aria-expanded="true"]::after {
  transform: rotate(-135deg); /* pointing up = open */
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-4);
  color: var(--text-muted);
  line-height: var(--leading-base);
}

/* Closed state — set by js/ui.js via the hidden attribute */
.faq__answer[hidden] {
  display: none;
}

/* ==========================================================================
   FINAL CTA — last section in <main>
   ========================================================================== */

main > .section:last-child .container {
  max-width: var(--container-narrow);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

main > .section:last-child .button-primary {
  font-size: var(--text-lg);
  padding-inline: var(--space-6);
}

/* ==========================================================================
   DISCLOSURE — independent-guide note (hero + footer)
   ========================================================================== */

.disclosure {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-sm);
}

.hero .disclosure {
  max-width: 36rem;
  margin-inline: auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer {
  background: var(--bg-1);
  border-top: 1px solid var(--border);
  padding-block: var(--space-6);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-3);
}

.site-footer .disclosure {
  max-width: var(--container-narrow);
}

.site-footer p {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.site-footer p:last-child {
  color: var(--text-faint); /* 5.4:1 on --bg-0 — small copyright */
}

/* ==========================================================================
   REDUCED MOTION
   tokens.css already kills all animation/transition site-wide under
   prefers-reduced-motion. Nothing in this file animates layout properties,
   so no additional gating is required here.
   ========================================================================== */

/* ==========================================================================
   STICKY MOBILE CTA — fixed bottom referral bar, mobile only
   Restored per wave-3 spec: hidden ≥48rem; body padding-bottom
   compensation keeps it off the footer; position:fixed → no CLS.
   ========================================================================== */

.sticky-cta {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 90; /* below the mobile nav panel (z-index 100) */
  display: none; /* desktop: not shown */
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 47.99rem) {
  .sticky-cta {
    display: flex;
  }

  .sticky-cta.is-hidden {
    display: none;
  }

  /* compensation so the fixed bar never covers the footer */
  body {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
  }
}