/* ==========================================================
   calcme.gr — Homepage-only styles (index.html)
   ========================================================== */

:root {
  --hm-gutter: 1.5rem;
}

@media (min-width: 768px) {
  :root {
    --hm-gutter: 2rem; /* ίδιο με το padding του .container */
  }
}

/* Ασφάλεια: το [hidden] κερδίζει πάντα μέσα στην κύρια περιοχή */
.hm-main [hidden],
.hm-hero [hidden] {
  display: none !important;
}

/* ---------- Hero (συμπαγές) ---------- */
.hm-hero .hero-inner {
  padding-top: 2rem;
}

@media (min-width: 768px) {
  .hm-hero .hero-inner {
    padding-top: 3rem;
  }
}

.hm-hero .hero-title {
  font-size: 1.75rem;
  line-height: 1.12;
}

@media (min-width: 640px) {
  .hm-hero .hero-title {
    font-size: 2.25rem;
  }
}

@media (min-width: 1024px) {
  .hm-hero .hero-title {
    font-size: 2.5rem;
  }

  /* Λίγο πιο πλατύ hero ώστε ο τίτλος να μη σπάει σε 3 γραμμές */
  .hm-hero .hero-inner {
    max-width: 56rem;
  }
}

.hm-hero .hero-subtitle {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .hm-hero .hero-subtitle {
    font-size: 1rem;
  }
}

.hm-hero .search-wrap {
  margin-top: 1.25rem;
}

/* Υπόδειξη συντόμευσης "/" (μόνο σε συσκευές με ποντίκι) */
.hm-kbd {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-muted);
  border: 1px solid var(--color-hair);
  border-radius: 0.375rem;
  padding: 0.25rem 0.4375rem;
  background: var(--color-canvas);
}

@media (hover: none) {
  .hm-kbd {
    display: none;
  }
}

.search-bar:has(.search-input:not(:placeholder-shown)) .hm-kbd {
  display: none;
}

/* ---------- Γρήγορη πρόσβαση ---------- */
.hm-quick {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hm-quick-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hm-quick-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.625rem;
  overflow-x: auto;
  width: calc(100% + 2 * var(--hm-gutter));
  margin-left: calc(-1 * var(--hm-gutter));
  margin-right: calc(-1 * var(--hm-gutter));
  padding: 0.25rem var(--hm-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hm-gutter), #000 calc(100% - var(--hm-gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--hm-gutter), #000 calc(100% - var(--hm-gutter)), transparent 100%);
}

.hm-quick-row::-webkit-scrollbar {
  display: none;
}

.hm-quick-row > :first-child {
  margin-left: auto;
}

.hm-quick-row > :last-child {
  margin-right: auto;
}

@media (min-width: 768px) {
  .hm-quick-row {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding: 0.25rem 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hm-quick-row > :first-child,
  .hm-quick-row > :last-child {
    margin-left: 0;
    margin-right: 0;
  }
}

.hm-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  padding: 0.625rem 1.125rem;
  border: 1px solid var(--color-hair);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.hm-pill svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--color-accent);
}

.hm-pill:hover {
  background-color: var(--color-accent-soft);
  color: var(--color-accent-deep);
  border-color: var(--color-accent);
}

.hm-pill:focus-visible,
.hm-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- Κύρια περιοχή & sticky chips ---------- */
.hm-main {
  margin-top: 1.5rem;
}

.hm-chipbar {
  position: sticky;
  top: 4rem; /* ύψος του .site-header */
  z-index: 30;
  background-color: rgba(250, 250, 250, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-hair);
  border-bottom: 1px solid var(--color-hair);
}

.hm-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  overflow-x: auto;
  width: calc(100% + 2 * var(--hm-gutter));
  margin-left: calc(-1 * var(--hm-gutter));
  margin-right: calc(-1 * var(--hm-gutter));
  padding: 0.625rem var(--hm-gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--hm-gutter), #000 calc(100% - var(--hm-gutter)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--hm-gutter), #000 calc(100% - var(--hm-gutter)), transparent 100%);
}

.hm-chips::-webkit-scrollbar {
  display: none;
}

.hm-chips > :first-child {
  margin-left: auto;
}

.hm-chips > :last-child {
  margin-right: auto;
}

/* Τα χρώματα και η active κατάσταση έρχονται από τα υπάρχοντα .tab-btn */
.hm-chips .tab-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.hm-chip-count {
  font-size: 0.75rem;
  font-weight: 600;
  opacity: 0.6;
}

@media (min-width: 768px) {
  .hm-chips {
    flex-wrap: wrap;
    justify-content: center;
    overflow: visible;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .hm-chips > :first-child,
  .hm-chips > :last-child {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- Ενότητες & compact κάρτες ---------- */
.hm-section {
  margin-top: 2rem;
  scroll-margin-top: 10.5rem;
  animation: hm-fade 0.22s ease;
}

@keyframes hm-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hm-section { animation: none; }
}

.hm-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.875rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.hm-count {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-muted);
  background-color: var(--color-white);
  border: 1px solid var(--color-hair);
  border-radius: var(--radius-full);
  padding: 0.125rem 0.5rem;
}

.hm-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .hm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hm-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.hm-card {
  --hm-accent: var(--color-accent);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: 0.875rem 1rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-hair);
  border-left: 3px solid var(--hm-accent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hm-card[data-category="ergasiaka"]      { --hm-accent: #3b82f6; }
.hm-card[data-category="epaggelmatika"]  { --hm-accent: #10b981; }
.hm-card[data-category="akinita-daneia"] { --hm-accent: #f97316; }
.hm-card[data-category="ygeia-euexia"]   { --hm-accent: #ec4899; }
.hm-card[data-category="apla-ergaleia"]  { --hm-accent: #8b5cf6; }
.hm-card[data-category="proypologismos-kosti"] { --hm-accent: #a16207; }

.hm-card:hover {
  border-color: var(--hm-accent);
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--hm-accent) 45%, transparent);
}

.hm-card-icon {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
  background-color: var(--color-accent-soft);
  background-color: color-mix(in srgb, var(--hm-accent) 12%, white);
  color: var(--hm-accent);
}

.hm-card-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.hm-card-body {
  min-width: 0;
}

.hm-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

.hm-card-desc {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Προαιρετικό tag, π.χ. <span class="hm-tag">Νέο</span> μέσα στον τίτλο */
.hm-tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--radius-full);
  background-color: var(--color-ink);
  color: var(--color-canvas);
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Αποτελέσματα αναζήτησης ---------- */
.hm-results {
  margin-top: 1.5rem;
}

.hm-results-count {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--color-muted);
}

/* ---------- Empty state ---------- */
.hm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.5rem 0 1rem;
}

.hm-empty-icon {
  font-size: 1.875rem;
}

.hm-empty-title {
  margin: 0.75rem 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-ink);
}

.hm-empty-sub {
  margin: 0.25rem 0 1rem;
  font-size: 0.875rem;
  color: var(--color-muted);
}

.hm-empty .hm-quick-row {
  justify-content: center;
}

/* ---------- Ζώνες διαφήμισης ---------- */
.hm-adzone {
  /* το .dual-ad-wrap δίνει margin/width· εδώ μόνο ετικέτα και ύψη */
  text-align: center;
}

.hm-adzone > .ad-label,
.hm-adzone .hm-zone-label {
  display: block;
  margin-bottom: 0.5rem;
}

.hm-adzone .ad-banner {
  margin: 0 auto;
  max-width: 728px;
}

/* Στο κινητό: το placeholder AdSense της ζώνης 2 κρύβεται (μπαίνει το 2ο banner) */
@media (max-width: 679px) {
  .hm-adzone .hm-desktop-only {
    display: none;
  }
}

/* Στο desktop: η ετικέτα της ζώνης 2 περιττεύει (το placeholder έχει δική του) */
@media (min-width: 680px) {
  #adZone2 .hm-zone-label {
    display: none;
  }
}

/* ---------- Σειρά banners και ζώνη 3 ---------- */
/* Η σειρά στη γραμμή καθορίζεται εδώ, ανεξάρτητα από το πού τα βάζει το JS */
#affBannerA { order: 1; }
#affBannerB { order: 2; }
#affBannerC { order: 3; }

/* Ασφάλεια: αν δεν χωράνε, αλλάζουν γραμμή αντί να βγαίνουν εκτός οθόνης */
.hm-adzone .aff-dual-banners {
  flex-wrap: wrap;
}

/* Στο desktop τα 3 banners είναι στη ζώνη 1, άρα η ζώνη 3 δεν χρειάζεται */
@media (min-width: 1060px) {
  #adZone3 {
    display: none;
  }
}


/* ==========================================================
   v4 — Πιο συμπαγές hero, εικονίδια κατηγοριών, scroll effects
   ========================================================== */

/* ---------- Χρώμα ανά κατηγορία και στις ενότητες ---------- */
.hm-section[data-section="ergasiaka"]      { --hm-accent: #3b82f6; }
.hm-section[data-section="epaggelmatika"]  { --hm-accent: #10b981; }
.hm-section[data-section="akinita-daneia"] { --hm-accent: #f97316; }
.hm-section[data-section="ygeia-euexia"]   { --hm-accent: #ec4899; }
.hm-section[data-section="apla-ergaleia"]  { --hm-accent: #8b5cf6; }

/* Εικονίδιο τίτλου ενότητας (αντί για emoji) */
.hm-sec-icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--hm-accent, var(--color-accent)) 12%, white);
  color: var(--hm-accent, var(--color-accent));
}
.hm-sec-icon svg { width: 1rem; height: 1rem; }

/* Τελεία κατηγορίας στα chips (αντί για emoji) */
.hm-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.85;
  flex: 0 0 auto;
}
.tab-btn.active .hm-dot { opacity: 1; }

/* ---------- Πιο συμπαγές hero (πρώτη κάρτα πιο ψηλά) ---------- */
@media (max-width: 639px) {
  .hm-hero .hero-inner { padding-top: 1.25rem; }
  .hm-hero .hero-title { font-size: 1.625rem; }
  .hm-hero .hero-title br { display: none; }
  .hm-hero .hero-subtitle { margin-top: 0.5rem; font-size: 0.875rem; }
  .hm-hero .search-wrap { margin-top: 1rem; }
  .hm-quick { margin-top: 0.75rem; }
  .hm-quick-label { display: none; }
  .hm-pill { padding: 0.5rem 0.875rem; font-size: 0.875rem; }
  .hm-main { margin-top: 1rem; }
  .hm-section { margin-top: 1.5rem; }
}

@media (min-width: 768px) {
  .hm-hero .hero-inner { padding-top: 2.5rem; }
  .hm-main { margin-top: 1.25rem; }
}

/* Το hero «σβήνει» με JS (opacity/transform)· εδώ μόνο hint απόδοσης */
.hm-hero .hero-inner { will-change: opacity, transform; transform-origin: 50% 0; }

/* ---------- Header: σκιά, μπάρα προόδου, συμπαγής αναζήτηση ---------- */
.hm-header {
  --hm-p: 0;
  --hm-cur: var(--color-accent);
  transition: box-shadow 0.25s ease;
}
.hm-header.is-scrolled {
  box-shadow: 0 10px 24px -18px rgba(24, 24, 27, 0.35);
}

/* Όταν κολλάνε τα chips κάτω από το header, η γραμμή του header περιττεύει */
.hm-header { border-bottom-color: transparent; }

.hm-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  z-index: 1;
}
.hm-progress span {
  display: block;
  height: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--hm-p));
  background-color: var(--hm-cur);
  border-radius: 0 2px 2px 0;
  transition: background-color 0.35s ease;
}

.hdr-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 1 20rem;
  min-width: 0;
  margin-left: 1rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-hair);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
  /* κρυφό μέχρι να φύγει η αναζήτηση του hero */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s, border-color 0.2s ease;
}
.hm-header.show-search .hdr-search {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s, border-color 0.2s ease;
}
.hdr-search:focus-within {
  border-color: var(--color-accent);
}
.hdr-search-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  color: var(--color-muted);
}
.hdr-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 0.875rem;
  color: var(--color-ink);
}
.hdr-search-input::placeholder { color: var(--color-muted); }
.hdr-search:has(.hdr-search-input:not(:placeholder-shown)) .hm-kbd { display: none; }

@media (max-width: 639px) {
  /* στο κινητό το logo «μαζεύεται» για να χωρέσει η αναζήτηση */
  .hm-header .logo { transition: font-size 0.22s ease; }
  .hm-header .logo .dot { transition: font-size 0.22s ease; }
  .hm-header.show-search .logo { font-size: 1.5rem; }
  .hm-header.show-search .logo .dot { font-size: 2.25rem; }
  .hdr-search { margin-left: 0.75rem; height: 2.25rem; flex-basis: auto; flex-grow: 1; }
  .hdr-search-input { font-size: 1rem; } /* 16px: χωρίς zoom στο iOS */
}

/* ---------- Scrollspy: το chip της ενότητας που βλέπεις ---------- */
.hm-chips .tab-btn {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.hm-chips .tab-btn.is-spy {
  box-shadow: 0 0 0 1.5px currentColor, 0 6px 14px -8px currentColor;
  transform: translateY(-1px);
  font-weight: 600;
}

/* ---------- Reveal καρτών (μόνο όταν το JS βάλει .rv) ---------- */
.hm-card.rv {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
.hm-card.rv.in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--rv-d, 0ms),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) var(--rv-d, 0ms),
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Μικρό «σήκωμα» στο hover (μόνο με ποντίκι) */
@media (hover: hover) {
  .hm-card { transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
  .hm-card:hover { transform: translateY(-2px); }
  .hm-card.rv.in:hover { transform: translateY(-2px); }
}

/* ---------- Μειωμένη κίνηση: τίποτα δεν κινείται ---------- */
@media (prefers-reduced-motion: reduce) {
  .hm-card.rv { opacity: 1; transform: none; }
  .hm-card:hover,
  .hm-chips .tab-btn.is-spy { transform: none; }
  .hdr-search,
  .hm-header.show-search .hdr-search { transform: none; transition: opacity 0.01s, visibility 0s; }
  .hm-progress span { transition: none; }
}

@media print {
  .hm-card.rv { opacity: 1 !important; transform: none !important; }
  .hdr-search, .hm-progress { display: none !important; }
}