/*
 * HEKATON — temporary, local-only homepage design preview.
 * Direction: Flamingo Estate x Citizens of Soil, adapted for HEKATON.
 * Warm parchment/stone paper, deep botanical olive, ink typography and a
 * single restrained terracotta accent. Editorial serif headings, generous
 * air, refined hairline frames instead of graphic drop-shadow boxes.
 *
 * Isolated layer: everything here is scoped to body[data-page="home"] so it
 * can be removed in one step to restore the shared design in main.css.
 * The restored product collection (#featured-products / .featured-grid /
 * .hp-card* / .section-header) is intentionally never targeted below.
 */

body[data-page="home"] {
  --hk-parchment: #f5efe2;   /* primary warm paper */
  --hk-stone: #ece1cb;       /* secondary stone panel, alternating rhythm */
  --hk-cream: #faf6ec;       /* near-white card/mat surface */
  --hk-ink: #211f18;         /* primary text on light */
  --hk-ink-soft: #4d4a3f;    /* secondary/body copy on light */
  --hk-olive: #303b26;       /* deep botanical olive, dark sections */
  --hk-olive-deep: #21281a;  /* darkest olive, marquee/footer */
  --hk-sand: #efe6d2;        /* light text on olive for secondary copy */
  --hk-clay: #b1603c;        /* restrained terracotta accent */
  --hk-clay-deep: #8c4a2e;   /* terracotta hover/deep */
  --hk-line: rgba(33, 31, 24, 0.14);
  --hk-line-invert: rgba(245, 239, 226, 0.22);
  background: var(--hk-parchment);
  color: var(--hk-ink);
}

body[data-page="home"] main {
  background: var(--hk-parchment);
}

/* ── Hero ── */
body[data-page="home"] .hero-editorial {
  background: var(--hk-parchment);
  border-bottom-color: var(--hk-line);
}

body[data-page="home"] .hero-editorial::after {
  background: var(--hk-parchment);
}

body[data-page="home"] .hero-editorial__eyebrow {
  color: var(--hk-clay-deep);
}

body[data-page="home"] .hero-editorial h1 {
  color: var(--hk-ink);
}

body[data-page="home"] .hero-editorial__subtitle {
  color: var(--hk-ink-soft);
}

body[data-page="home"] .hero-editorial__btn-primary {
  background: var(--hk-olive);
  color: var(--hk-cream);
}

body[data-page="home"] .hero-editorial__btn-primary:hover {
  background: var(--hk-olive-deep);
}

body[data-page="home"] .hero-editorial__btn-outline {
  color: var(--hk-ink) !important;
  border-color: rgba(33, 31, 24, 0.22) !important;
  background: rgba(250, 246, 236, 0.7) !important;
}

body[data-page="home"] .hero-editorial__btn-outline:hover {
  background: var(--hk-olive) !important;
  color: var(--hk-cream) !important;
  border-color: var(--hk-olive) !important;
}

body[data-page="home"] .hero-editorial__visual-stage {
  border-radius: 6px;
  box-shadow: 0 30px 60px rgba(33, 31, 24, 0.16);
}

body[data-page="home"] .hero-editorial__visual-stage::before {
  border-radius: 4px;
  border-color: rgba(250, 246, 236, 0.55);
}

/* ── Marquee ── */
body[data-page="home"] .hk-marquee-wrap {
  background: var(--hk-olive-deep);
  color: var(--hk-sand);
}

body[data-page="home"] .hk-marquee-item {
  color: var(--hk-sand);
}

body[data-page="home"] .hk-marquee-dot {
  color: var(--hk-clay);
}

/* ── Quote strip ── */
body[data-page="home"] .quote-strip {
  background: var(--hk-stone);
  border-top: 1px solid var(--hk-line);
  border-bottom: 1px solid var(--hk-line);
}

body[data-page="home"] .quote-strip-shell {
  padding: 64px 0;
}

body[data-page="home"] .quote-strip p {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
  color: var(--hk-ink);
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1.32;
}

/* ── Shared editorial section rhythm ── */
body[data-page="home"] .editorial-section,
body[data-page="home"] .vision-section {
  padding: clamp(84px, 9vw, 140px) 0;
  border-top: 0;
}

body[data-page="home"] .editorial-split {
  gap: clamp(48px, 7vw, 116px);
  align-items: center;
}

/* Copy sits directly on the section surface — no boxed card, no offset shadow. */
body[data-page="home"] .editorial-copy {
  position: relative;
  max-width: 560px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body[data-page="home"] .editorial-copy::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--hk-clay);
}

body[data-page="home"] .section-kicker {
  color: var(--hk-clay-deep);
  font-size: 12px;
  letter-spacing: 0.2em;
  font-weight: 700;
}

body[data-page="home"] .editorial-copy h2 {
  margin: 10px 0 26px;
  color: var(--hk-ink);
  font-size: clamp(32px, 3.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
}

body[data-page="home"] .editorial-copy p {
  color: var(--hk-ink-soft);
  font-size: 16px;
  line-height: 1.82;
}

/* Split-heading reveal spans always inherit their parent's color, never the
   product collection's heading — kept explicit and readable in every panel. */
body[data-page="home"] .editorial-section .hk-split-h2 .word-inner,
body[data-page="home"] .vision-section .hk-split-h2 .word-inner,
body[data-page="home"] .certifications-section .hk-split-h2 .word-inner,
body[data-page="home"] .flegra-section .hk-split-h2 .word-inner,
body[data-page="home"] .contact-section .hk-split-h2 .word-inner {
  color: inherit;
  -webkit-text-fill-color: currentColor;
}

/* ── Image frame treatment (refined "mounted photograph" look) ── */
body[data-page="home"] .editorial-visual {
  position: relative;
  margin: 0;
  overflow: visible;
}

body[data-page="home"] .editorial-visual::before {
  content: "";
  position: absolute;
  inset: 16px -14px -14px 16px;
  border: 1px solid rgba(177, 96, 60, 0.28);
  z-index: 0;
  pointer-events: none;
}

body[data-page="home"] .editorial-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: min(62vh, 600px);
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 28px 60px rgba(24, 22, 16, 0.14);
  filter: saturate(0.92) contrast(1.03);
}

/* ── About ── */
body[data-page="home"] #sxetika {
  background: var(--hk-parchment);
}

body[data-page="home"] #sxetika .about-photo-mask {
  border-radius: 6px;
  box-shadow: 0 28px 60px rgba(24, 22, 16, 0.14);
}

body[data-page="home"] #sxetika .about-photo-mask img {
  border-radius: 6px;
}

body[data-page="home"] #sxetika .editorial-facts {
  border-top: 1px solid var(--hk-line);
  border-bottom: 1px solid var(--hk-line);
  padding: 22px 0;
}

body[data-page="home"] .editorial-facts strong {
  color: var(--hk-ink);
}

body[data-page="home"] .editorial-facts span {
  color: var(--hk-ink-soft);
}

/* ── Vision (deep botanical olive) ── */
body[data-page="home"] .vision-section {
  background: var(--hk-olive);
}

body[data-page="home"] .vision-section .editorial-copy h2,
body[data-page="home"] .vision-section .editorial-copy p {
  color: var(--hk-sand);
}

body[data-page="home"] .vision-section .editorial-copy p {
  color: rgba(239, 230, 210, 0.86);
}

body[data-page="home"] .vision-section .section-kicker {
  color: #d79a6d;
}

body[data-page="home"] .vision-section .editorial-copy::before {
  background: #d79a6d;
}

body[data-page="home"] .vision-section .editorial-visual::before {
  border-color: rgba(245, 239, 226, 0.28);
}

/* ── Quality (Η ποιότητα) — stone alternate ── */
body[data-page="home"] #quality-preview {
  background: var(--hk-stone);
}

/* ── Olive oil (Το ελαιόλαδο) — parchment, long-form copy ── */
body[data-page="home"] #elaiolado-preview {
  background: var(--hk-parchment);
}

body[data-page="home"] #elaiolado-preview .editorial-copy {
  max-width: 620px;
}

/* ── Certifications ── */
body[data-page="home"] .certifications-section {
  background: var(--hk-stone);
}

body[data-page="home"] .certifications-section .cert-badge {
  color: var(--hk-clay-deep);
  border-color: rgba(177, 96, 60, 0.4);
  background: rgba(177, 96, 60, 0.1);
}

body[data-page="home"] .certifications-section .cert-highlights span {
  color: var(--hk-ink-soft);
  border-left-color: var(--hk-clay);
  background: rgba(250, 246, 236, 0.65);
}

body[data-page="home"] .certifications-section .cert-btn {
  border-color: rgba(177, 96, 60, 0.45);
  background: var(--hk-cream);
  color: var(--hk-clay-deep);
}

body[data-page="home"] .certifications-visual {
  padding: clamp(22px, 4vw, 46px);
  background: var(--hk-olive);
}

body[data-page="home"] .certifications-visual::after {
  border-color: rgba(245, 239, 226, 0.3);
}

body[data-page="home"] .certifications-visual img {
  border-radius: 2px;
  box-shadow: none;
}

/* ── Big numbers band (dark) ── */
body[data-page="home"] .hk-numbers {
  background: var(--hk-olive-deep);
  border-top: 1px solid var(--hk-line-invert);
  border-bottom: 1px solid var(--hk-line-invert);
}

body[data-page="home"] .hk-number-item {
  border-right: 1px solid var(--hk-line-invert);
}

body[data-page="home"] .hk-number-val,
body[data-page="home"] .hk-number-label {
  color: var(--hk-sand);
}

body[data-page="home"] .hk-number-unit {
  color: var(--hk-clay);
}

body[data-page="home"] .hk-number-label {
  color: rgba(239, 230, 210, 0.7);
}

/* ── Flegra Terra — the single restrained terracotta accent moment ── */
body[data-page="home"] .flegra-section {
  background: var(--hk-parchment);
}

body[data-page="home"] .flegra-section .editorial-copy {
  padding-left: 26px;
  border-left: 2px solid var(--hk-clay);
}

body[data-page="home"] .flegra-section .editorial-copy::before {
  display: none;
}

body[data-page="home"] .flegra-section .section-kicker {
  color: var(--hk-clay-deep);
}

body[data-page="home"] .flegra-section .editorial-visual::before {
  border-color: rgba(177, 96, 60, 0.4);
}

/* ── Contact ── */
body[data-page="home"] .contact-section {
  background: var(--hk-stone);
}

body[data-page="home"] .contact-card-editorial {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 64px);
  border: 1px solid var(--hk-line);
  border-radius: 10px;
  background: var(--hk-cream);
  box-shadow: 0 26px 60px rgba(24, 22, 16, 0.1);
}

/* ── Footer — warm ink instead of neutral gray ── */
body[data-page="home"] .homepage-footer {
  background: var(--hk-olive-deep);
}

body[data-page="home"] .homepage-footer-top,
body[data-page="home"] .homepage-footer-bottom {
  border-color: rgba(245, 239, 226, 0.14);
}

/* ── Responsive: tablet ── */
@media (max-width: 900px) {
  body[data-page="home"] .editorial-visual img {
    height: 440px;
  }

  body[data-page="home"] #sxetika .about-photo-mask {
    width: 100%;
  }
}

/* ── Responsive: mobile ── */
@media (max-width: 560px) {
  body[data-page="home"] .editorial-section,
  body[data-page="home"] .vision-section {
    padding: 64px 0;
  }

  body[data-page="home"] .quote-strip-shell {
    padding: 44px 0;
  }

  body[data-page="home"] .editorial-copy h2 {
    font-size: clamp(28px, 9vw, 40px);
  }

  body[data-page="home"] .editorial-visual::before {
    inset: 10px -8px -8px 10px;
  }

  body[data-page="home"] .editorial-visual img {
    height: 320px;
  }

  body[data-page="home"] .flegra-section .editorial-copy {
    padding-left: 18px;
  }

  body[data-page="home"] .contact-card-editorial {
    margin: 0 10px;
    padding: 30px 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .hk-marquee-track {
    animation: none;
  }
}