@import url('https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope');

/* General Reset and Setup */
*,
*::before,
*::after {
  padding: 0;
  box-sizing: border-box;
}

/* CRITICAL: Hide body content until layout class is set - prevents ANY flash */
/* This ensures no layout (high-tech or creative) shows until the script sets the class */
html:not(.creative-layout):not(.high-tech-layout) body {
  visibility: hidden !important;
}
html.creative-layout body,
html.high-tech-layout body {
  visibility: visible !important;
}

/* ===== Prevent layout flash: hide both initially, show based on layout class ===== */
/* Hide elements until layout is determined */
.creative-hidden,
.high-tech-hidden {
  display: none !important;
}

/* Show correct elements when layout class is applied */
/* .creative-hidden = hide on creative layout, show on high-tech */
html.high-tech-layout .creative-hidden,
body.high-tech-layout .creative-hidden {
  display: revert !important;  /* Show on high-tech */
}
html.high-tech-layout .high-tech-hidden,
body.high-tech-layout .high-tech-hidden {
  display: none !important;  /* Hide on high-tech */
}

/* .high-tech-hidden = hide on high-tech layout, show on creative */
html.creative-layout .high-tech-hidden,
body.creative-layout .high-tech-hidden {
  display: revert !important;  /* Show on creative */
}
html.creative-layout .creative-hidden,
body.creative-layout .creative-hidden {
  display: none !important;  /* Hide on creative */
}

/* ===== High-tech (DEFAULT) ===== */
/* DO NOT apply default styles - wait for layout class to be set */
/* This prevents any flash by not showing any layout until class is applied */
html.high-tech-layout,
body.high-tech-layout {
  background-color: #fff;      /* was #141414 */
  color: #000;                 /* was #fff */
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 0;
}

/* ===== Creative layout (UNCHANGED) ===== */
html.creative-layout {
  background-color: #DBE9B7;
}

html.creative-layout,
body.creative-layout {
  background-color: #DBE9B7;
  font-family: 'Annie Use Your Telescope', cursive;
  letter-spacing: 0.0875rem; /* Responsive letter-spacing */
  font-weight: bold;
}

body.creative-layout p {
  font-size: 1.2rem;
}

body.creative-layout .nav-item {
  color: #DBE9B7;
}

body.creative-layout .toggle-btn {
  background-color: #4B3621;
  color: #DBE9B7;
}

body.creative-layout .dashicons {
  font-family: 'Dashicons' !important;
}

/* Fluid Images and Typography for all devices */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Responsive Typography */
h1, h2, h3, h4, h5, h6 {
  font-size: 2rem;
  line-height: 1.2;
  color: inherit;           /* inherit black */
}

p {
  font-size: 1rem;
  line-height: 1.6;
  color: inherit;
}

/* Mobile First Typography Scaling */
@media (max-width: 768px) { 
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.6rem; }
  p  { font-size: 0.9rem; }
}

@media (max-width: 480px) { 
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  p  { font-size: 0.8rem; }
}

/* Footer - Start */
#footer {
  text-align: center;
  padding: 1rem;
}

.footer-text {
  margin: 0 auto;
  color: #000;               /* was #00ffff */
  font-size: 1.125rem;       /* Responsive typography */
  display: flex;
  justify-content: center;
}

.contact-icons {
  display: flex;
  flex-wrap: wrap;           /* Wrap on smaller screens */
  justify-content: center;
  gap: 1.25rem;              /* 20px equivalent */
  margin: 1rem auto 0;
}

.contact-icons a {
  color: #000;               /* was #00ffff */
  text-decoration: none;
}

.contact-icons svg {
  width: 2rem;
  height: 2rem;
  fill: currentColor;        /* inherit black from link */
  transition: transform 0.3s ease;
}

/* ===== Desktop-only hover effects ===== */
@media (hover: hover) and (pointer: fine) {
  .contact-icons a:hover svg {
    transform: scale(1.1);
  }
}

/* ===== Touch devices: neutralize any :hover ===== */
@media (hover: none), (pointer: coarse) {
  .contact-icons a:hover svg {
    transform: none !important;
  }
}

/* Responsive Design - početak */
@media (max-width: 768px) { 
  #footer .footer-text {
    font-size: 1.1rem;
  }

  #footer .contact-icons {
    gap: 0.75rem;
  }

  #footer .contact-icons svg {
    width: 1.5rem;
    height: 1.5rem;
  }
}

@media (min-width: 769px) and (max-width: 1200px) {
  #footer .footer-text {
    font-size: 2rem;
  }

  #footer .contact-icons {
    gap: 1.4rem;
  }

  #footer .contact-icons svg {
    width: 4rem;
    height: 4rem;
  }
}
/* Responsive Design - kraj */

/* Creative footer tweaks remain */
body.creative-layout .footer-text {
  font-size: 1.2rem; /* 16px -> 1rem for responsive typography */
}

body.creative-layout .contact-icons svg {
  color: #4B3621;
}

/* Footer - End */


/* ================================
   Minimal Navbar + Offcanvas CSS
   ================================ */

:root{
  --nav-height: 150px;
  --top-gap: 12px;

  --toggle-gap-mobile: 24px;
  --toggle-gap-desktop: 12px;

  --pad-x: 20px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --backdrop: rgba(0,0,0,.36);
  --link: #111;
  --link-dim: #444;
  --hover-bg: rgba(17,17,17,.06);
  --submenu-bg: rgba(255,255,255,.98);

  /* Offcanvas indentation */
  --oc-indent-l2: 18px;
  --oc-indent-l3: 32px;
}

@media (max-width:1024px){
  :root{ --top-gap: 28px; }
}

html { scrollbar-gutter: stable; }

section[id], [id].anchor-target {
  scroll-margin-top: calc(var(--nav-height) + var(--top-gap) + env(safe-area-inset-top, 0px));
}

#layoutToggleForm{ margin-bottom: var(--toggle-gap-desktop); }
@media (max-width: 1024px){
  #layoutToggleForm{ margin-bottom: var(--toggle-gap-mobile); }
}

/* Reserve space for header container to prevent layout shift when injected */
/* This prevents content from jumping down when header loads */
/* Matches navbar height (150px) - header is sticky, so this reserves initial space */
[data-include="/header.html"],
div[data-include="/header.html"],
div[data-include="/header.html"] > * {
  min-height: var(--nav-height) !important;  /* 150px - matches .navbar height */
  display: block !important;
}

/* ---------- Header / Navbar ---------- */
#header{
  position: sticky;
  top: 0;
  z-index: 5000;
  background: transparent;
  isolation: isolate;
  overflow: visible;
  padding-bottom: 1.5%;
}

.navbar{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  height: var(--nav-height);
  padding-inline: var(--pad-x);
  overflow: visible;
}

.site-branding{ display:flex; align-items:center; min-width:0; }
.site-logo-container{
  display:block;
  max-height: var(--nav-height);
  width:auto;
  object-fit:contain;
}

/* Desktop menu (top-level) */
#header .navbar > ul{
  display:flex; align-items:center; gap:6px;
  list-style:none; margin:0; padding:0; overflow:visible;
}
#header .navbar > ul > li{ position:relative; overflow:visible; }
#header .navbar .nav-item{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px;
  text-decoration:none; color:var(--link);
  line-height:1; white-space:nowrap; font-weight: 900;
}
#header .navbar .nav-item:hover{ background:var(--hover-bg); }

.dashicons{ width:20px; height:20px; display:inline-block; vertical-align:-3px; }
#header .navbar span.nav-item{ cursor:default; }

/* ---------- Submenus (Desktop hover) ---------- */
#header .navbar ul ul{
  position:absolute; left:0; top:100%;
  min-width:240px; margin:0; padding:8px;
  background:var(--submenu-bg); backdrop-filter:blur(8px);
  border-radius:var(--radius); box-shadow:var(--shadow);
  border:1px solid rgba(0,0,0,.06);
  opacity:0; visibility:hidden; transform:translateY(8px);
  pointer-events:none; transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  z-index:6000;
}
#header .navbar ul ul::before{
  content:""; position:absolute; left:0; right:0; top:-10px; height:12px;
}

/* THIRD LEVEL — opens to the LEFT, stuck to the chip */
#header .navbar ul ul ul{
  top:-8px;
  left:auto;
  right:100%;
  transform:none;
}
/* side hover bridge so cursor can cross the seam without closing */
#header .navbar ul ul ul::after{
  content:"";
  position:absolute;
  top:0;
  right:-12px;
  width:12px;
  height:100%;
}

/* SHOW/HIDE RULES */
/* CHANGED: swap li:focus-within > ul for li:has(:focus-visible) > ul
   This keeps keyboard accessibility but prevents "stuck open" after mouse new-tab clicks. */
@media (hover:hover){
  #header .navbar li:hover > ul,
  #header .navbar li:has(:focus-visible) > ul,
  #header .navbar ul ul:hover{
    opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
    transition:opacity .18s ease, transform .18s ease, visibility 0s;
  }
}

#header .navbar ul ul li{ position:relative; }
#header .navbar ul ul a.nav-item,
#header .navbar ul ul span.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:10px;
  color:var(--link); text-decoration:none;
}
#header .navbar ul ul a.nav-item:hover,
#header .navbar ul ul span.nav-item:hover{ background:var(--hover-bg); }

#header .navbar li.active-parent > .nav-item{ background:var(--hover-bg); color:var(--link); }

/* ---------- Hamburger (desktop hidden) ---------- */
.toggle-btn{
  margin-left:auto; display:none; align-items:center; gap:10px;
  padding:10px 14px; font:inherit; border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
  cursor:pointer; z-index:6050;
}
.toggle-btn .findoutmore{ margin:0; font-size:14px; color:var(--link-dim); }
body.creative-layout .toggle-btn .findoutmore{ color: white; }

@media (max-width:1024px){
  #header .navbar > ul{ display:none; }
  .toggle-btn{ display:inline-flex; }
}

/* ---------- Offcanvas Panel ---------- */
.offcanvas{
  position:fixed; inset:0 0 0 auto; width:min(86vw,420px);
  transform:translateX(100%); transition:transform .28s ease-out;
  z-index:8000; background:#fff; backdrop-filter:none;
  display:flex; flex-direction:column; overflow:hidden;
}
.offcanvas.active{ transform:translateX(0); }

html.offcanvas-open::before{
  content:""; position:fixed; inset:0; background:var(--backdrop);
  z-index:4500; pointer-events:auto;
}

.close-btn{
  align-self:flex-end; margin:12px; padding:8px 10px;
  border-radius:10px; border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.9); cursor:pointer;
}

/* Offcanvas menu structure */
.offcanvas > ul{
  list-style:none; margin:10px 12px 24px; padding:0 2px 14px; overflow:auto;
}

/* Level 1 (root) */
.offcanvas > ul > li > a.nav-item,
.offcanvas > ul > li > span.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:14px 12px; border-radius:12px;
  color:var(--link); text-decoration:none;
  font-size:16px; font-weight:600;
}
.offcanvas li[aria-expanded="true"] > .nav-item{ background: transparent !important; }
.offcanvas > ul > li > a.nav-item:hover{ background:var(--hover-bg); }

/* Nested guideline */
.offcanvas ul ul{
  list-style:none; margin:4px 0 8px 12px;
  padding-left:10px;
  border-left:1px dashed rgba(0,0,0,.12);
}

/* Level 2 (subitems) */
.offcanvas > ul > li > ul > li > a.nav-item,
.offcanvas > ul > li > ul > li > span.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 4px 10px calc(12px + var(--oc-indent-l2));
  border-radius:8px; color:var(--link); text-decoration:none;
  font-size:14px; font-weight:500;
}
.offcanvas > ul > li > ul > li > a.nav-item:hover,
.offcanvas > ul > li > ul > li > span.nav-item:hover{ background:var(--hover-bg); }

/* Level 3 (sub-subitems) */
.offcanvas > ul > li > ul > li > ul > li > a.nav-item,
.offcanvas > ul > li > ul > li > ul > li > span.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 4px 10px calc(12px + var(--oc-indent-l3));
  border-radius:8px; color:var(--link); text-decoration:none;
  font-size:14px; font-weight:500;
}
.offcanvas > ul > li > ul > li > ul > li > a.nav-item:hover,
.offcanvas > ul > li > ul > li > ul > li > span.nav-item:hover{ background:var(--hover-bg); }

/* Remove gray dot bullets */
.offcanvas ul ul a.nav-item::before,
.offcanvas ul ul span.nav-item::before{ content:none; }

/* Active trail in offcanvas */
.offcanvas .active-parent > .nav-item{ background:var(--hover-bg); }

@media (max-width:480px){
  .offcanvas > ul > li > a.nav-item,
  .offcanvas > ul > li > span.nav-item{ padding:16px 12px; }
}

/* Small polish */
#header ul{ list-style:none; margin:0; padding:0; }
#header .navbar .nav-item, .offcanvas .nav-item{ font-weight:500; letter-spacing:.2px; }
#header .navbar .nav-item:focus-visible,
.offcanvas .nav-item:focus-visible,
.toggle-btn:focus-visible,
.close-btn:focus-visible{
  outline:2px solid #000; outline-offset:2px;
}

@media (min-width:1025px){
  #header .navbar > ul{
    padding:6px; border-radius:999px;
    background:rgba(255,255,255,.55); backdrop-filter:blur(8px);
    box-shadow:var(--shadow); border:1px solid rgba(0,0,0,.06);
  }
}

/* ================================
   Creative layout – larger type
   ================================ */

/* Desktop / default */
body.creative-layout #header .navbar .nav-item{
  font-size: 1.25rem;   /* ~20px top-level chips */
}
body.creative-layout #header .navbar ul ul a.nav-item,
body.creative-layout #header .navbar ul ul span.nav-item{
  font-size: 1.125rem;  /* ~18px in dropdowns */
}
body.creative-layout .offcanvas > ul > li > a.nav-item,
body.creative-layout .offcanvas > ul > li > span.nav-item{
  font-size: 1.25rem;   /* ~20px Level 1 in offcanvas */
}
body.creative-layout .offcanvas > ul > li > ul > li > a.nav-item,
body.creative-layout .offcanvas > ul > li > ul > li > span.nav-item,
body.creative-layout .offcanvas > ul > li > ul > li > ul > li > a.nav-item,
body.creative-layout .offcanvas > ul > li > ul > li > ul > li > span.nav-item{
  font-size: 1.125rem;  /* ~18px Level 2/3 */
}

/* Mobile bump (tasteful) */
@media (max-width: 768px){
  body.creative-layout #header .navbar .nav-item{
    font-size: 1.375rem; /* ~22px */
  }
  body.creative-layout #header .navbar ul ul a.nav-item,
  body.creative-layout #header .navbar ul ul span.nav-item{
    font-size: 1.25rem;  /* ~20px */
  }
  body.creative-layout .offcanvas > ul > li > a.nav-item,
  body.creative-layout .offcanvas > ul > li > span.nav-item{
    font-size: 1.375rem; /* ~22px */
  }
  body.creative-layout .offcanvas > ul > li > ul > li > a.nav-item,
  body.creative-layout .offcanvas > ul > li > ul > li > span.nav-item,
  body.creative-layout .offcanvas > ul > li > ul > li > ul > li > a.nav-item,
  body.creative-layout .offcanvas > ul > li > ul > li > ul > li > span.nav-item{
    font-size: 1.25rem;  /* ~20px */
  }
}