/* Katedra — jezična škola, Trogir. Glavna stylesheet datoteka. */

:root{
  --bg: oklch(0.98 0.012 75);
  --bg-alt: oklch(0.955 0.015 75);
  --text: oklch(0.24 0.02 75);
  --text-muted: oklch(0.48 0.02 75);
  --text-muted-2: oklch(0.42 0.02 75);
  --border: oklch(0.9 0.014 75);
  --border-strong: oklch(0.85 0.014 75);
  --navy: oklch(0.3 0.08 250);
  --navy-light: oklch(0.4 0.09 250);
  --navy-text: oklch(0.9 0.02 250);
  --terracotta: oklch(0.58 0.13 40);
  --white: #ffffff;
  --font-serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Work Sans', Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-sans);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{max-width:100%;display:block;}
a{color:oklch(0.42 0.10 250);text-decoration:underline;}
a:hover{color:var(--terracotta);}
::selection{background:oklch(0.58 0.13 40 / 0.25);}
h1,h2,h3{font-family:var(--font-serif);margin:0;}
.container{max-width:1280px;margin:0 auto;padding:0 24px;}
.container-narrow{max-width:1000px;margin:0 auto;padding:0 24px;}
.container-text{max-width:760px;margin:0 auto;padding:0 24px;}

/* top info bar */
.topbar{
  background:var(--navy);
  color:var(--navy-text);
  font-size:12.5px;
  padding:8px 24px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.topbar-left{display:flex;gap:20px;flex-wrap:wrap;}

/* header / nav */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:oklch(0.98 0.012 75 / 0.97);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.site-header.static{position:static;}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  max-width:1280px;
  margin:0 auto;
  flex-wrap:wrap;
  gap:16px;
}
.brand{display:flex;flex-direction:column;text-decoration:none;}
.brand-name{
  font-family:var(--font-serif);
  font-size:26px;
  font-weight:600;
  color:var(--text);
  letter-spacing:0.5px;
}
.brand-tag{
  font-family:var(--font-sans);
  font-size:10.5px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--terracotta);
}
.main-nav{display:flex;gap:22px;flex-wrap:wrap;font-size:15px;}
.main-nav a{text-decoration:none;color:var(--text);}
.main-nav a.active{font-weight:600;border-bottom:2px solid var(--terracotta);padding-bottom:2px;}
.back-link{text-decoration:none;color:var(--navy-light);font-weight:600;font-size:14px;}

/* buttons */
.btn{
  display:inline-block;
  text-decoration:none;
  border-radius:2px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  font-family:var(--font-sans);
  border:none;
  padding:14px 26px;
}
.btn-primary{background:var(--navy-light);color:#fff;}
.btn-primary:hover{background:oklch(0.36 0.09 250);color:#fff;}
.btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--text);padding:12.5px 26px;}
.btn-outline:hover{background:var(--text);color:var(--bg);}
.btn-terracotta{background:var(--terracotta);color:#fff;}
.btn-dark{background:var(--text);color:#fff;}
.btn-white{background:#fff;color:var(--navy-light);font-weight:700;}
.btn-sm{padding:10px 18px;font-size:14px;border-radius:2px;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.header-cta{text-decoration:none;background:var(--navy-light);color:#fff;padding:10px 18px;border-radius:2px;font-size:14px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-sans);position:relative;}

/* hero */
.hero{
  max-width:1280px;margin:0 auto;padding:80px 24px 60px;
  display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center;
}
.eyebrow{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--terracotta);font-weight:600;margin-bottom:18px;}
.hero h1{font-size:52px;line-height:1.12;font-weight:600;margin:0 0 22px;}
.hero p{font-size:18px;line-height:1.6;color:var(--text-muted-2);max-width:520px;margin:0 0 32px;}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;}
.hero-photo{
  aspect-ratio:4/3;border-radius:4px;overflow:hidden;border:1px solid oklch(0.88 0.02 40);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;}

.page-hero{max-width:1000px;margin:0 auto;padding:64px 24px 30px;text-align:center;}
.page-hero h1{font-size:44px;font-weight:600;margin:0 0 18px;}
.page-hero p{font-size:17px;line-height:1.65;color:var(--text-muted-2);}
.page-hero .eyebrow{margin-bottom:14px;}

/* stats */
.stats{background:var(--navy);padding:28px 24px;}
.stats-grid{
  max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:24px;text-align:center;color:#fff;
}
.stat-num{font-family:var(--font-serif);font-size:34px;font-weight:600;}
.stat-label{font-size:13px;color:oklch(0.85 0.02 250);letter-spacing:0.5px;}

/* sections */
.section{max-width:1280px;margin:0 auto;padding:80px 24px;}
.section-alt{background:var(--bg-alt);padding:80px 24px;}
.section-header{text-align:center;margin-bottom:48px;}
.section-header h2{font-size:36px;font-weight:600;}
.section-header-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:40px;flex-wrap:wrap;gap:12px;}
.section-header-row h2{font-size:32px;font-weight:600;}
.link-arrow{text-decoration:none;color:var(--navy-light);font-weight:600;font-size:14px;}

/* card grids */
.grid{display:grid;gap:24px;}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.grid-2{grid-template-columns:1fr 1fr;gap:56px;}
.card{
  text-decoration:none;color:inherit;background:#fff;border:1px solid var(--border);
  border-radius:4px;padding:28px;display:block;
}
.card h3{font-size:20px;font-weight:600;margin-bottom:8px;}
.card p{font-size:14.5px;color:var(--text-muted);line-height:1.55;margin:0;}
.card-featured{border:2px solid var(--terracotta);position:relative;}
.card-badge{position:absolute;top:-12px;right:20px;background:var(--terracotta);color:#fff;font-size:11px;padding:4px 10px;border-radius:2px;font-weight:600;}

/* why-us numbered grid */
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:32px;}
.reason-num{font-family:var(--font-serif);font-size:22px;color:var(--navy-light);margin-bottom:6px;}
.reason-title{font-weight:600;margin-bottom:6px;}
.reason-text{font-size:14px;color:var(--text-muted);line-height:1.55;}

/* testimonials */
.testimonial{background:#fff;border:1px solid var(--border);border-radius:4px;padding:28px;}
.stars{color:var(--terracotta);font-size:15px;margin-bottom:14px;}
.testimonial p{font-size:15px;line-height:1.6;color:oklch(0.3 0.02 75);margin:0 0 16px;font-style:italic;}
.testimonial .who{font-weight:600;font-size:14px;}
.testimonial .role{font-size:12.5px;color:var(--text-muted);}

/* blog cards */
.blog-card{text-decoration:none;color:inherit;background:#fff;border-radius:4px;overflow:hidden;border:1px solid var(--border);}
.blog-card-img{height:170px;overflow:hidden;}
.blog-card-img img{width:100%;height:100%;object-fit:cover;}
.blog-card-body{padding:20px;}
.blog-tag{font-size:12px;color:var(--terracotta);margin-bottom:6px;}
.blog-title{font-weight:600;margin-bottom:6px;font-family:var(--font-serif);}
.blog-excerpt{font-size:13.5px;color:var(--text-muted);line-height:1.55;}

/* CTA banner */
.cta-banner{
  max-width:1280px;margin:56px auto;padding:0 24px;
}
.cta-banner-inner{
  background:var(--navy-light);border-radius:6px;padding:48px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;color:#fff;
}
.cta-banner-inner h3{font-size:28px;font-weight:600;margin:0 0 8px;}
.cta-banner-inner p{margin:0;color:oklch(0.9 0.02 250);font-size:15px;max-width:480px;}

/* footer */
.site-footer{background:var(--navy);color:oklch(0.9 0.02 250);padding:56px 24px 24px;}
.footer-grid{
  max-width:1280px;margin:0 auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;
}
.footer-grid.simple{padding:40px 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:13px;max-width:1280px;margin:0 auto;}
.footer-brand{font-family:var(--font-serif);font-size:22px;font-weight:600;color:#fff;margin-bottom:10px;}
.footer-desc{font-size:13.5px;line-height:1.6;color:oklch(0.8 0.02 250);}
.footer-col-title{font-weight:600;color:#fff;margin-bottom:14px;font-size:14px;}
.footer-links{display:flex;flex-direction:column;gap:9px;font-size:13.5px;}
.footer-links a{color:oklch(0.8 0.02 250);text-decoration:none;}
.footer-links a:hover{color:#fff;}
.footer-contact{font-size:13.5px;line-height:1.7;color:oklch(0.8 0.02 250);}
.footer-legal-row{
  max-width:1280px;margin:40px auto 0;padding-top:20px;border-top:1px solid oklch(0.4 0.08 250);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:oklch(0.72 0.02 250);
}
.footer-legal-row a{color:oklch(0.85 0.02 250);}
.footer-legal-links{display:flex;gap:18px;flex-wrap:wrap;}
.footer-legal-links a{color:oklch(0.85 0.02 250);text-decoration:none;}
.footer-legal-links a:hover{color:#fff;}

/* cookie banner */
.cookie-banner{
  position:fixed;bottom:0;left:0;right:0;background:var(--text);color:#fff;
  padding:16px 24px;display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;z-index:100;font-size:13.5px;box-shadow:0 -4px 20px oklch(0 0 0 / 0.2);
}
.cookie-banner p{max-width:640px;margin:0;}
.cookie-banner a{color:#fff;}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap;}
.cookie-btn-outline{text-decoration:none;color:#fff;padding:10px 16px;border:1px solid oklch(0.5 0.02 75);border-radius:2px;font-size:13px;background:none;cursor:pointer;font-family:var(--font-sans);}
.hidden{display:none !important;}

/* forms */
.form-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:32px;display:flex;flex-direction:column;gap:14px;}
.form-card.centered{padding:40px;text-align:center;align-items:center;}
input[type=text],input[type=email],input[type=tel],select,textarea{
  padding:13px;border:1px solid var(--border-strong);border-radius:2px;
  font-family:var(--font-sans);font-size:14.5px;color:var(--text);width:100%;
}
input::placeholder,textarea::placeholder{color:oklch(0.6 0.015 75);}
.form-note{font-size:12.5px;color:var(--text-muted);line-height:1.5;}
.form-success-icon{font-size:36px;margin-bottom:12px;}
.form-title{font-family:var(--font-serif);font-size:22px;font-weight:600;margin-bottom:8px;}
.form-success-text{font-size:14.5px;color:var(--text-muted);}
.field-error{color:var(--terracotta);font-size:12.5px;display:none;}

/* contact info + map placeholder */
.info-box{background:#fff;border:1px solid var(--border);border-radius:4px;padding:32px;margin-bottom:24px;}
.info-box-title{font-family:var(--font-serif);font-size:20px;font-weight:600;margin-bottom:16px;}
.info-box-body{font-size:14.5px;line-height:2;color:oklch(0.35 0.02 75);}
.location-photo{aspect-ratio:16/10;border-radius:4px;overflow:hidden;border:1px solid oklch(0.88 0.02 40);position:relative;}
.location-photo img{width:100%;height:100%;object-fit:cover;}
.location-caption{
  position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,oklch(0.1 0.02 250 / 0.75));
  color:#fff;padding:26px 16px 12px;font-size:13px;
}

/* legal pages */
.legal-body{font-size:15px;line-height:1.85;color:oklch(0.3 0.02 75);}
.legal-body h3{font-family:var(--font-serif);font-size:20px;margin:28px 0 10px;}
.legal-body p{margin:0 0 14px;}
.legal-date{font-size:13.5px;color:var(--text-muted);margin:0 0 30px;}
.legal-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:14px;}
.legal-table th,.legal-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);}

/* team */
.team-card{background:#fff;border-radius:4px;border:1px solid var(--border);overflow:hidden;}
.team-photo{height:200px;overflow:hidden;}
.team-photo img{width:100%;height:100%;object-fit:cover;}
.team-body{padding:18px;}
.team-name{font-weight:600;}
.team-role{font-size:13px;color:var(--terracotta);margin-bottom:8px;}
.team-desc{font-size:13px;color:var(--text-muted);line-height:1.5;}

/* timeline */
.timeline-item{border-left:3px solid var(--terracotta);padding-left:18px;}
.timeline-year{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--navy-light);}
.timeline-text{font-size:14px;color:var(--text-muted-2);line-height:1.5;}

/* pricing / shop */
.product-card{background:#fff;border:1px solid var(--border);border-radius:4px;padding:26px;display:flex;flex-direction:column;}
.product-cat{font-size:11.5px;letter-spacing:1px;text-transform:uppercase;color:var(--terracotta);font-weight:600;margin-bottom:8px;}
.product-name{font-family:var(--font-serif);font-size:19px;font-weight:600;margin-bottom:8px;}
.product-desc{font-size:13.5px;color:var(--text-muted);line-height:1.55;margin-bottom:18px;flex:1;}
.product-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.product-price{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--navy-light);}
.add-btn{background:var(--text);color:#fff;border:none;padding:10px 16px;border-radius:2px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:var(--font-sans);}
.add-btn:hover{background:var(--navy-light);}

.pricing-note{background:var(--bg-alt);padding:50px 24px;}
.pricing-note-inner{max-width:900px;margin:0 auto;text-align:center;font-size:13.5px;color:oklch(0.45 0.02 75);line-height:1.7;}

/* cart badge / drawer */
.cart-badge{
  position:absolute;top:-8px;right:-8px;background:var(--terracotta);color:#fff;font-size:11px;
  width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;
}
.overlay{position:fixed;inset:0;background:oklch(0 0 0 / 0.4);z-index:200;border:none;padding:0;width:100%;cursor:default;}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:#fff;z-index:201;
  box-shadow:-8px 0 30px oklch(0 0 0 / 0.15);display:flex;flex-direction:column;font-family:var(--font-sans);
  transform:translateX(100%);transition:transform .25s ease;
}
.drawer.open{transform:translateX(0);}
.drawer-header{padding:22px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;}
.drawer-title{font-family:var(--font-serif);font-size:20px;font-weight:600;}
.drawer-close{background:none;border:none;font-size:22px;cursor:pointer;color:var(--text-muted-2);}
.drawer-body{flex:1;overflow:auto;padding:16px 24px;}
.drawer-footer{padding:20px 24px;border-top:1px solid var(--border);}
.drawer-total{display:flex;justify-content:space-between;font-weight:700;font-size:17px;margin-bottom:14px;}
.cart-empty{padding:60px 0;text-align:center;color:oklch(0.55 0.02 75);font-size:14.5px;}
.cart-item{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--border);gap:10px;}
.cart-item-name{font-weight:600;font-size:14.5px;}
.cart-item-unit{font-size:13px;color:var(--text-muted);margin-top:4px;}
.qty-row{display:flex;align-items:center;gap:10px;margin-top:8px;}
.qty-btn{width:26px;height:26px;border:1px solid var(--border-strong);background:#fff;border-radius:2px;cursor:pointer;}
.remove-btn{margin-left:8px;font-size:12px;color:var(--terracotta);background:none;border:none;text-decoration:underline;cursor:pointer;}
.cart-item-total{font-weight:600;white-space:nowrap;}
.checkout-form{display:flex;flex-direction:column;gap:14px;}
.checkout-back{background:none;border:none;color:oklch(0.45 0.02 75);text-decoration:underline;font-size:13px;cursor:pointer;padding:4px;}
.checkout-total{display:flex;justify-content:space-between;font-weight:700;font-size:17px;padding-top:10px;border-top:1px solid var(--border);}
.order-number{font-size:14px;color:var(--text-muted);line-height:1.6;}

/* mobile nav toggle */
.nav-toggle{display:none;}
@media (max-width: 900px){
  .hero{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;gap:32px;}
  .main-nav{width:100%;order:3;justify-content:flex-start;}
}