/*
  Dark theme (draft).
  Loaded after each page's own styles, so it recolours the existing light design
  without changing the page markup. Remove the <link> to this file to go back.
  The accent colour (#008080) is unchanged.
*/

:root {
  --page: #0b0b0b;        /* near-black sections */
  --page-alt: #1d1d1d;    /* lighter grey sections, alternating with the near-black ones */
  --surface: #181818;     /* cards and panels on near-black sections */
  --surface-alt: #272727; /* cards and panels on grey sections */
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.14);
  --text: #f2f2f2;
  --text-soft: #b4b4b4;   /* paragraphs */
  --text-muted: #8c8c8c;  /* captions, small print */
  --accent: #008080;
  --accent-dark: #006666;
}

html { color-scheme: dark; }

body {
  background: var(--page) !important;
  color: var(--text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Top section (hero) on the home and About pages: near-black like the darker sections.
   The photo's fades use this same colour, so they blend into it. */
.hero-bg { --hero-grey: 11,11,11; }

/* Headings: tighter and a little more refined */
h1, h2 { letter-spacing: -0.02em; }
h3 { letter-spacing: -0.01em; }

/* Section backgrounds: no more white blocks, just two close shades of dark */
.bg-white { background-color: var(--page) !important; }
.bg-\[\#f5f5f5\],
.bg-\[\#f7f7f7\] { background-color: var(--page-alt) !important; }

section.section-spacing { border-top: 1px solid var(--line); }

/* A short accent line under centred section headings */
.section-spacing .text-center > h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  margin: 18px auto 0;
  border-radius: 3px;
  background: var(--accent);
}

/* Text colours */
.text-black,
.text-gray-900,
.text-gray-800,
.text-gray-700 { color: var(--text) !important; }
.text-gray-600,
.text-gray-500 { color: var(--text-soft) !important; }
.text-gray-400 { color: var(--text-muted) !important; }

/* Borders */
.border-gray-200,
.border-gray-100 { border-color: var(--line) !important; }
.faq-item { border-bottom-color: var(--line) !important; }

/* Cards */
.card {
  background: linear-gradient(180deg, #1b1b1b, var(--surface)) !important;
  border: 1px solid var(--line) !important;
}

/* On the grey sections, cards are a step lighter so they still stand out */
.bg-\[\#f5f5f5\] .card,
.bg-\[\#f7f7f7\] .card {
  background: linear-gradient(180deg, #2b2b2b, var(--surface-alt)) !important;
}

.card:hover {
  border-color: rgba(0,128,128,0.55) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,128,128,0.15) !important;
}

/* Plan cards keep their photos; just a softer frame */
.plan-card { box-shadow: 0 18px 40px rgba(0,0,0,0.45); }

/* Light "Check details" buttons become dark glass buttons */
.bg-\[\#ebebeb\] {
  background-color: rgba(255,255,255,0.08) !important;
  color: #ffffff !important;
  border: 1px solid var(--line-strong);
}
.hover\:bg-\[\#dedede\]:hover { background-color: rgba(255,255,255,0.15) !important; }

/* Panels that were white boxes (FAQ list and similar) */
.rounded-3xl.bg-white,
div.bg-white { background-color: var(--surface) !important; }
.bg-\[\#f5f5f5\] div.bg-white,
.bg-\[\#f7f7f7\] div.bg-white { background-color: var(--surface-alt) !important; }

/* Form fields */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
}
input::placeholder,
textarea::placeholder { color: var(--text-muted) !important; }

/* Primary buttons get a soft accent glow */
.btn-primary { box-shadow: 0 8px 24px rgba(0,128,128,0.28); }
.btn-primary:hover { box-shadow: 0 10px 30px rgba(0,128,128,0.4); }

/* ---------- About page timeline ---------- */
.tl-track { background: #353535 !important; }
.tl-dot { background: var(--page-alt) !important; border-color: #4a4a4a !important; }
.tl-item.reached .tl-dot,
.tl-end.reached .tl-dot {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 6px rgba(0,128,128,0.22), 0 0 18px rgba(0,128,128,0.45) !important;
}
.tl-text p { color: var(--text-soft) !important; }
.photo { background: var(--surface) !important; box-shadow: 0 24px 50px rgba(0,0,0,0.55) !important; }
.photo-caption { color: var(--text-muted) !important; }
.record,
.title-row {
  background: var(--surface-alt) !important;
  border-color: var(--line) !important;
}
.record-detail,
.title-place,
.stat-name { color: var(--text-muted) !important; }

/* ---------- Longer, smoother photo fades in the top section ----------
   Each edge fades with an eased curve (strong at the edge, very gentle towards the
   middle), so there is no visible point where the fade starts. As long as the
   photos' width allows: the sides now fade over 40% of the photo on wide screens. */
.hero-photo::after {
  background:
    linear-gradient(to right, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 2.8%, rgba(var(--hero-grey),0.562) 5.5%, rgba(var(--hero-grey),0.391) 8.2%, rgba(var(--hero-grey),0.250) 11.0%, rgba(var(--hero-grey),0.141) 13.8%, rgba(var(--hero-grey),0.062) 16.5%, rgba(var(--hero-grey),0.016) 19.2%, rgba(var(--hero-grey),0.000) 22.0%),
    linear-gradient(to left, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 2.8%, rgba(var(--hero-grey),0.562) 5.5%, rgba(var(--hero-grey),0.391) 8.2%, rgba(var(--hero-grey),0.250) 11.0%, rgba(var(--hero-grey),0.141) 13.8%, rgba(var(--hero-grey),0.062) 16.5%, rgba(var(--hero-grey),0.016) 19.2%, rgba(var(--hero-grey),0.000) 22.0%),
    linear-gradient(to bottom, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 1.8%, rgba(var(--hero-grey),0.562) 3.5%, rgba(var(--hero-grey),0.391) 5.2%, rgba(var(--hero-grey),0.250) 7.0%, rgba(var(--hero-grey),0.141) 8.8%, rgba(var(--hero-grey),0.062) 10.5%, rgba(var(--hero-grey),0.016) 12.2%, rgba(var(--hero-grey),0.000) 14.0%),
    linear-gradient(to top, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 6.9%, rgba(var(--hero-grey),0.562) 13.8%, rgba(var(--hero-grey),0.391) 20.6%, rgba(var(--hero-grey),0.250) 27.5%, rgba(var(--hero-grey),0.141) 34.4%, rgba(var(--hero-grey),0.062) 41.2%, rgba(var(--hero-grey),0.016) 48.1%, rgba(var(--hero-grey),0.000) 55.0%) !important;
}

@media (min-width: 768px) {
  .hero-photo::after {
    background:
      linear-gradient(to right, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 5.0%, rgba(var(--hero-grey),0.562) 10.0%, rgba(var(--hero-grey),0.391) 15.0%, rgba(var(--hero-grey),0.250) 20.0%, rgba(var(--hero-grey),0.141) 25.0%, rgba(var(--hero-grey),0.062) 30.0%, rgba(var(--hero-grey),0.016) 35.0%, rgba(var(--hero-grey),0.000) 40.0%),
      linear-gradient(to left, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 5.0%, rgba(var(--hero-grey),0.562) 10.0%, rgba(var(--hero-grey),0.391) 15.0%, rgba(var(--hero-grey),0.250) 20.0%, rgba(var(--hero-grey),0.141) 25.0%, rgba(var(--hero-grey),0.062) 30.0%, rgba(var(--hero-grey),0.016) 35.0%, rgba(var(--hero-grey),0.000) 40.0%),
      linear-gradient(to bottom, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 3.1%, rgba(var(--hero-grey),0.562) 6.2%, rgba(var(--hero-grey),0.391) 9.4%, rgba(var(--hero-grey),0.250) 12.5%, rgba(var(--hero-grey),0.141) 15.6%, rgba(var(--hero-grey),0.062) 18.8%, rgba(var(--hero-grey),0.016) 21.9%, rgba(var(--hero-grey),0.000) 25.0%),
      linear-gradient(to top, rgba(var(--hero-grey),1.000) 0.0%, rgba(var(--hero-grey),0.766) 4.8%, rgba(var(--hero-grey),0.562) 9.5%, rgba(var(--hero-grey),0.391) 14.2%, rgba(var(--hero-grey),0.250) 19.0%, rgba(var(--hero-grey),0.141) 23.8%, rgba(var(--hero-grey),0.062) 28.5%, rgba(var(--hero-grey),0.016) 33.2%, rgba(var(--hero-grey),0.000) 38.0%) !important;
  }
}

/* ---------- Plan pages and application form ---------- */

/* Their top section gets the same treatment as the home and About pages:
   near-black, with a black and white photo on the right that fades into it.
   Each page sets its own photo with --hero-img on the .hero-photo element. */
.hero {
  --hero-grey: 11,11,11;
  --hero-shade: 0.6;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgb(var(--hero-grey)) !important;
}

.hero .hero-photo {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(rgba(var(--hero-grey),var(--hero-shade)), rgba(var(--hero-grey),var(--hero-shade))),
    var(--hero-img) center 20% / cover no-repeat;
  filter: grayscale(1);
}

@media (min-width: 768px) {
  .hero { --hero-shade: 0.45; }
  .hero .hero-photo {
    left: auto;
    width: auto;
    height: 100%;
    right: max(0px, calc((100% - 80rem) / 2));
  }
}

/* Content sections: grey, so the page alternates black (top) and grey */
section.section {
  background: var(--page-alt);
  border-top: 1px solid var(--line);
}
section.section .card {
  background: linear-gradient(180deg, #2b2b2b, var(--surface-alt)) !important;
  border: 1px solid var(--line) !important;
}

/* Footers on every page: near-black with a thin line on top */
footer {
  background: var(--page) !important;
  border-top: 1px solid var(--line);
}

/* "Have you seen the other plan?" pop-ups */
.pro-popup,
.regular-popup {
  background: #1d1d1d !important;
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6) !important;
}

/* Application form */
.question {
  background: var(--surface) !important;
  border-color: var(--line) !important;
}
.field {
  background: var(--page) !important;
  border-color: var(--line-strong) !important;
}
.choice {
  border-color: var(--line-strong) !important;
}
.choice:hover {
  background: rgba(255,255,255,0.04) !important;
}
.choice:has(input:checked) {
  border-color: var(--accent) !important;
  background: rgba(0,128,128,0.16) !important;
}

/* ---------- Subtle motion (see site-motion.js) ---------- */

/* The top photo eases in when the page opens */
.hero-photo { animation: hero-photo-in 1.6s cubic-bezier(.2,.7,.2,1) both; }

@keyframes hero-photo-in {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 1; transform: none; }
}

/* Items rise and fade in as they scroll into view */
.js .motion {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s ease var(--motion-delay, 0s),
    transform .7s cubic-bezier(.2,.7,.2,1) var(--motion-delay, 0s),
    box-shadow .3s ease, border-color .3s ease, background-color .3s ease !important;
}
.js .motion.shown {
  opacity: 1;
  transform: none;
}

/* Hover lifts still work on cards that have faded in */
.js .card.motion.shown:hover { transform: translateY(-4px); }
.js .plan-card.motion.shown:hover { transform: translateY(-6px); }

/* Buttons respond smoothly to hover */
.btn-primary, .btn-secondary {
  transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease !important;
}
.btn-primary:hover, .btn-secondary:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .hero-photo { animation: none; }
  .js .motion { opacity: 1; transform: none; transition: none; }
  .btn-primary:hover, .btn-secondary:hover { transform: none; }
}

/* Plan pages and application form: the fade layer over the top photo
   (the home and About pages define this in their own styles). */
.hero .hero-photo::after {
  content: '';
  position: absolute;
  inset: -1px;
}

/* ---------- Language switch (see lang.js) ---------- */
.lang-group { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.lang-option {
  padding: 5px 9px;
  border-radius: 999px;
  color: var(--text-muted);
  transition: color .2s ease, background-color .2s ease;
}
a.lang-option:hover { color: #ffffff; }
.lang-option.active { background: var(--accent); color: #ffffff; }
.lang-dot { display: none; }

/* "Prikaži stranicu na hrvatskom?" for visitors whose device is set to Croatian */
.lang-suggest {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  max-width: calc(100vw - 32px);
  padding: 12px 14px;
  border-radius: 16px;
  background: #1d1d1d;
  border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px rgba(0,0,0,0.55);
  color: var(--text);
  font-size: .9rem;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
.lang-suggest.show { opacity: 1; transform: none; }
.lang-suggest-yes {
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
}
.lang-suggest-yes:hover { background: var(--accent-dark); }
.lang-suggest-no { color: var(--text-muted); font-weight: 600; }
.lang-suggest-no:hover { color: #ffffff; }