/* ═══════════════════════════════════════════════════════════
   Porodično pčelarstvo Vlatković — style.css
   Warm, natural, artisanal — pastel honey-yellow as the dominant colour,
   paired with brown; cream surfaces throughout.
   Mobile-first, no external dependencies
   ═══════════════════════════════════════════════════════════ */

/* ─── Custom properties ─────────────────────────────────── */
:root {
  /* Brand colours */
  --color-honey:       #F2C14E; /* lighter, more yellow — client asked for pastel-yellow as the dominant site colour */
  --color-honey-dark:  #D9A72E; /* hover/active state */
  --color-honey-light: #FBEBB5; /* pale wash for large surfaces */
  --color-brown:       #6B3A1E; /* paired secondary colour, per client's "pastel-yellow with brown" */
  --color-brown-dark:  #3D200F;
  --color-cream:       #FBF3E4;
  --color-white:       #FFFFFF;
  --color-text:        #3A2A1D;
  --color-text-muted:  #7A6555;

  /* Derived tones */
  --color-honey-bg:    #FBEFD8;
  --color-border:      #E4D5BC;
  --color-surface:     #FFFFFF;
  --color-error-bg:    #FBEAE5;
  --color-error-border: #C97A5A;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;

  /* Typography */
  --font-serif: Georgia, 'Times New Roman', Times, serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.25rem;

  /* Layout */
  --max-width: 1120px;
  --nav-height: 68px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(61, 32, 15, 0.08), 0 1px 2px rgba(61, 32, 15, 0.06);
  --shadow-md: 0 4px 12px rgba(61, 32, 15, 0.10), 0 2px 4px rgba(61, 32, 15, 0.06);
  --shadow-lg: 0 10px 32px rgba(61, 32, 15, 0.14), 0 4px 8px rgba(61, 32, 15, 0.08);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ─── Reset & base ───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-serif);
}

/* ─── Layout utilities ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.section {
  padding-block: var(--space-2xl);
}

.section--alt {
  background-color: var(--color-surface);
}

/* ─── Section typography ─────────────────────────────────── */
.section-label {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-honey-dark);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-brown);
  margin-bottom: var(--space-md);
}

.section-intro {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 640px;
  margin-bottom: var(--space-xl);
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  transition: background-color var(--transition-fast),
              color var(--transition-fast),
              border-color var(--transition-fast),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-honey);
  color: var(--color-brown-dark);
  border-color: var(--color-honey);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-honey-dark);
  border-color: var(--color-honey-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-brown-dark);
  border-color: rgba(61, 32, 15, 0.45);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-brown-dark);
  background-color: rgba(61, 32, 15, 0.08);
}

/* ─── Navigation ─────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background-color: var(--color-honey);
  background-image: linear-gradient(160deg, var(--color-honey) 0%, var(--color-honey-light) 100%);
  border-bottom: 3px solid var(--color-brown);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-brown-dark);
  letter-spacing: 0.01em;
  transition: opacity var(--transition-fast);
}

.nav__logo:hover {
  opacity: 0.9;
}

/* Client-supplied bee-only artwork (logo.jpeg, 505x315) — the bee sits in
   the upper-middle area, not centered in the frame, and is small relative
   to the surrounding whitespace (measured via script: bbox x 183-316 /
   y 104-186, centered at 49.4%/46.0%, only ~26% of the frame in each
   dimension). Plain object-fit: cover would show the bee tiny and
   off-centre, so this crops in on a 150x150px source window centered on
   the bee (with padding) via oversized absolute positioning — same
   CSS-only-crop approach as before, recomputed for this image's
   geometry. Reused for the footer logo slot. */
.nav__logo-mark {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 50%;
  position: relative;
  background-color: var(--color-white);
}

.nav__logo-mark img {
  position: absolute;
  width: 336.7%;
  height: 210%;
  max-width: none;
  top: -46.7%;
  left: -116.3%;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(61, 32, 15, 0.75);
  letter-spacing: 0.02em;
  transition: color var(--transition-fast);
  padding-block: 0.25rem;
  border-bottom: 2px solid transparent;
}

.nav__links a:hover,
.nav__links a:focus-visible,
.nav__links a.is-active {
  color: var(--color-brown-dark);
  border-bottom-color: var(--color-brown);
}

.nav__cta {
  background-color: var(--color-brown);
  color: var(--color-white) !important;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-sm);
  border-bottom: none !important;
  transition: background-color var(--transition-fast) !important;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background-color: var(--color-brown-dark) !important;
  border-bottom: none !important;
}

/* ─── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-honey);
  background-image: linear-gradient(160deg, var(--color-honey) 0%, var(--color-honey-light) 100%);
  color: var(--color-brown-dark);
  padding-block: var(--space-2xl);
  display: flex;
  align-items: center;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brown);
  margin-bottom: var(--space-sm);
}

.hero__headline {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-brown-dark);
  margin-bottom: var(--space-md);
  max-width: 680px;
}

.hero__sub {
  font-size: var(--text-lg);
  color: rgba(61, 32, 15, 0.82);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: var(--space-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ─── Flying bee animation (one-shot, on page load) ──────── */
/* Triggered by static/js/main.js adding .hero-bee--fly on DOMContentLoaded.
   Reduced-motion is handled by the site-wide rule at the bottom of this
   file, which zeroes animation-duration — no separate handling needed
   here, and the JS does not force playback via timers. */
.hero-bee {
  position: absolute;
  top: 20%;
  left: -10%;
  width: 34px;
  height: 34px;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.hero-bee--fly {
  animation: hero-bee-flight 3.2s ease-in-out forwards;
}

@keyframes hero-bee-flight {
  0%   { opacity: 0; transform: translate(0, 0) rotate(-6deg); }
  8%   { opacity: 1; }
  30%  { transform: translate(35vw, -22px) rotate(5deg); }
  55%  { transform: translate(65vw, 10px) rotate(-5deg); }
  80%  { transform: translate(95vw, -14px) rotate(4deg); }
  100% { opacity: 0; transform: translate(115vw, 0) rotate(0deg); }
}

/* ─── About ───────────────────────────────────────────────── */
.about__inner {
  display: grid;
  gap: var(--space-lg);
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 720px;
}

.about__body p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* ─── Teaser cards (home) ────────────────────────────────── */
.teaser__grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-lg);
}

.teaser-card__image {
  position: relative;
  overflow: hidden;
  /* Matches the product photos' native 1200x1600 ratio exactly, so the
     image fills the frame completely — no letterboxing, no background
     colour ever shows through. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-sm);
  background-color: var(--color-cream);
}

.teaser-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teaser-card__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-white);
  background-color: rgba(61, 32, 15, 0.45);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
}

.teaser-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: 0.35rem;
}

.teaser-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
}

.teaser__cta {
  text-align: center;
}

/* ─── Trust / awards ──────────────────────────────────────── */
.trust__quote {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--color-brown);
  max-width: 640px;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.trust__gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  /* Sized so each image lands close to the same width as a teaser-card
     product photo on this page (3 columns across the 1072px container
     content width -> ~341px each; 2 columns here need ~706px total). */
  max-width: 700px;
}

.trust__gallery-item {
  position: relative;
  overflow: hidden;
  /* Matches the award photos' native ~3:4 ratio — no cropping, no
     letterbox. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  background-color: var(--color-cream);
  box-shadow: var(--shadow-sm);
}

.trust__gallery-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.trust__gallery-item:hover img,
.trust__gallery-item:focus-within img {
  transform: scale(1.08);
}

/* ─── CTA band ────────────────────────────────────────────── */
.cta-band__inner {
  text-align: center;
}

.cta-band__inner .section-intro {
  margin-inline: auto;
}

/* Scoped to the intro paragraph specifically (not .cta-band__inner a) —
   the "Kontaktirajte nas" button below is also an <a> in this container,
   and a bare `a` selector here was overriding .btn--primary's text
   colour (higher specificity: .cta-band__inner .section-intro a still
   only matches the inline Instagram link, not the button). */
.cta-band__inner .section-intro a {
  color: var(--color-honey-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* ─── Page header (products / contact) ───────────────────── */
.page-header {
  padding-bottom: 0;
}

/* ─── Product cards (products page) ──────────────────────── */
.product-card {
  background-color: var(--color-cream);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.product-card__image {
  position: relative;
  overflow: hidden;
  /* Matches the product photos' native 1200x1600 ratio exactly, so the
     image fills the frame completely — no letterboxing, no background
     colour ever shows through. */
  aspect-ratio: 3 / 4;
  background-color: var(--color-cream);
}

.product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-card__body {
  padding: var(--space-md);
}

.product-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: 0.15rem;
}

.product-card__sr {
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-honey-dark);
  margin-bottom: var(--space-xs);
}

.product-card__desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.products__note {
  margin-top: var(--space-lg);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  text-align: center;
}

.products__note a {
  color: var(--color-honey-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* ─── Product carousels (category rows) ──────────────────── */
/* Each category is a horizontally scroll-snapping row. Scroll-snap +
   native touch/trackpad scroll works with no JS at all; the prev/next
   buttons are a progressive-enhancement layer added by static/js/main.js.
   No auto-rotating timer — auto-rotate is an accessibility anti-pattern. */
.carousel-category {
  margin-bottom: var(--space-2xl);
}

.carousel-category:last-child {
  margin-bottom: 0;
}

.carousel-category__title {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: var(--space-md);
}

.carousel {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.carousel__track {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--space-xs);
  padding-block: 0.25rem;
  -webkit-overflow-scrolling: touch;
}

.carousel__track .product-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

/* Real product copy runs much longer than the old placeholder text did —
   without a cap, flex's default align-items:stretch makes every card in a
   row match the height of the longest description, so one long product
   (e.g. Immunity Honey) was blowing every row out past 700px tall and
   pushing the arrow buttons far below the fold. Cap and let the rare long
   one scroll internally instead, so row height stays predictable. */
.carousel__track .product-card__desc {
  max-height: 9.9rem;
  overflow-y: auto;
}

.carousel__arrow {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-honey-dark);
  background-color: var(--color-surface);
  color: var(--color-brown);
  font-size: var(--text-xl);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
  background-color: var(--color-honey);
  color: var(--color-brown-dark);
}

/* ─── Contact page ────────────────────────────────────────── */
.contact__inner {
  max-width: 760px;
}

/* ─── Contact page: social/email icon row ────────────────── */
.contact-socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.contact-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-brown);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.contact-social:hover,
.contact-social:focus-visible {
  color: var(--color-honey-dark);
  transform: translateY(-2px);
}

.contact-social__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--color-honey-dark);
  background-color: var(--color-surface);
}

.contact-social__icon svg {
  width: 26px;
  height: 26px;
}

.contact-social__label {
  font-size: var(--text-sm);
  font-weight: 600;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.contact-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.contact-item__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  color: var(--color-honey-dark);
}

.contact-item__icon svg {
  width: 100%;
  height: 100%;
}

.contact-item__title {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: 0.2rem;
}

.contact-item__value {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: 0.2rem;
}

.contact-item__value a {
  color: var(--color-honey-dark);
  font-weight: 600;
}

.contact-item__value a:hover {
  text-decoration: underline;
}

.contact-item__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
}

/* ─── Contact form ────────────────────────────────────────── */
.contact-form {
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.contact-form__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-brown);
  margin-bottom: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: var(--space-md);
}

.form-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-field input,
.form-field textarea {
  font: inherit;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--color-honey);
  outline-offset: 1px;
  border-color: var(--color-honey-dark);
}

.form-field textarea {
  resize: vertical;
  min-height: 120px;
}

.form-notice {
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  margin-bottom: var(--space-md);
  font-size: var(--text-base);
}

.form-notice--success {
  background-color: var(--color-honey-light);
  color: var(--color-brown-dark);
  border: 1px solid var(--color-honey-dark);
}

.form-notice--error {
  background-color: var(--color-error-bg);
  color: var(--color-brown-dark);
  border: 1px solid var(--color-error-border);
}

/* ─── Footer ──────────────────────────────────────────────── */
.footer {
  background-color: var(--color-brown-dark);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--space-xl);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.footer .nav__logo {
  color: var(--color-white);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.55);
  margin-top: var(--space-xs);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.footer__links a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition-fast);
}

.footer__links a:hover,
.footer__links a:focus-visible {
  color: var(--color-honey-light);
}

.footer__copy {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.40);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: var(--space-md);
}

/* ─── Focus styles ───────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-honey);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Responsive: small phones (≤420px) ──────────────────── */
/* Nav fix: "Home / Products / Contact" plus the logo overflowed at
   320-375px widths. A snug flex layout with a small-screen breakpoint is
   enough here — no hamburger/off-canvas menu needed for 3 nav items. */
@media (max-width: 420px) {
  .nav .container {
    padding-inline: var(--space-xs);
  }

  .nav__logo {
    gap: 0.35rem;
  }

  .nav__logo-mark {
    width: 30px;
    height: 30px;
  }

  .nav__logo-text {
    font-size: 0.85rem;
  }

  .nav__links {
    gap: 0.6rem;
  }

  .nav__links a {
    font-size: 0.72rem;
  }

  .nav__cta {
    padding: 0.35rem 0.6rem;
  }
}

/* ─── Responsive: carousels on touch/narrow screens ──────── */
@media (max-width: 640px) {
  .carousel__arrow {
    display: none;
  }

  .carousel__track .product-card {
    flex-basis: 82%;
  }
}

/* ─── Responsive: tablet ─────────────────────────────────── */
@media (min-width: 640px) {
  .teaser__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .section-title {
    font-size: var(--text-4xl);
  }

  .hero__headline {
    font-size: var(--text-5xl);
  }
}

/* ─── Responsive: desktop ─────────────────────────────────── */
@media (min-width: 1024px) {
  .carousel__track .product-card {
    flex-basis: 280px;
  }

  .footer__inner {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .footer__copy {
    flex-basis: 100%;
  }
}

/* ─── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}