/* Own rules for the revmas.gr homepage (spec 002, Phase 1a parity).
   The page look comes from the kept, generated stylesheet; this file only adds what the
   static markup needs once the framework is gone. Release 1a-H appends hero.css here. */

/* The guide replaces the landing <main>; the hidden one must never take space. */
body > main[hidden] { display: none !important; }

/* Release 1a-H (spec 007): the new silent hero loop without a popup, and the
   «Τι κάνει για σένα ο Mr Revmas» explainer. Own rules only (no new utility classes: the
   kept stylesheet is a purged build), with the site's tokens and the page's Manrope. */

/* The frame is no longer a button: no pointer and no pill. 4:5 at every width, because the
   new picture is 3:4 between black bars: a taller frame shows the bars, and today's mobile
   16:10 would cut the hood and the boots. Two classes beat the mobile `.video-poster` rule. */
.video-poster.hero-media {
  cursor: default;
  aspect-ratio: 4 / 5;
}

/* Desktop: top-aligned columns, so the video does not move when the explainer opens. */
@media (width > 740px) {
  .hero-grid {
    align-items: start;
  }
}

.hero-explainer {
  margin-top: 18px;
  max-width: 560px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--foreground);
}

.hero-explainer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.hero-explainer > summary::-webkit-details-marker {
  display: none;
}

.hero-explainer > summary::marker {
  content: "";
}

.hero-explainer > summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.hero-explainer-label {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-explainer-bolt {
  flex: none;
  color: var(--primary);
}

.hero-explainer-chevron {
  flex: none;
  transition: transform 0.2s;
}

.hero-explainer[open] .hero-explainer-chevron {
  transform: rotate(180deg);
}

.hero-explainer-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 22px 22px;
  border-top: 1px solid var(--border);
}

.hero-explainer-body h2 {
  margin: 14px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: normal;
  color: var(--foreground);
}

.hero-explainer-body p,
.hero-explainer-list li {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.hero-explainer-body strong {
  font-weight: 700;
  color: var(--foreground);
}

.hero-explainer-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-explainer-list li {
  display: flex;
  gap: 12px;
}

.hero-explainer-list svg {
  flex: none;
  margin-top: 3px;
  color: #2e8b57; /* the green of .savings-amount */
}

.hero-explainer-body .hero-explainer-note {
  padding: 12px 14px;
  border-radius: calc(var(--radius) - 2px);
  /* sRGB mix: an oklch mix with the achromatic card colour would take its hue 0 and turn pink.
     The plain colour first is the same mix precomputed, for browsers without color-mix(). */
  background: #f0f7f3;
  background: color-mix(in srgb, #2e8b57 7%, var(--card));
  font-size: 15px;
  color: var(--foreground);
}

/* Release 1a-N (spec 009): sticky header, menu and main button of the landing page.
   Own rules only (no new utility classes: the kept stylesheet is a purged build), with the
   site's tokens. The guide renders its own header without these classes, so it does not change.

   Widths: 1024 px and up, links in the header. Below that, a burger opens them in a panel.
   740 px and below, the main button moves from the header to the bottom bar. */

/* A menu jump must not hide the section's title under the sticky header. */
html {
  scroll-padding-top: 73px;
}

.site-header.site-header-nav {
  position: sticky;
  top: 0;
  z-index: 40; /* above the bottom bar (30), below the dialogs (50) */
  background: var(--background); /* opaque: the dark bands and videos scroll underneath */
}

.site-header-nav .brand-mark,
.site-header-nav .shell > .flex,
.nav-block,
.nav-cta {
  flex: none;
}

.site-header-nav .shell > .flex {
  margin-left: auto;
}

.nav-block {
  margin-left: 20px;
}

.nav-toggle {
  display: none;
}

.site-nav-list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-list a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.site-nav-list a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-nav-list a:focus-visible,
.nav-toggle:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.nav-cta {
  min-height: 44px;
  font-weight: 800;
}

@media (width < 1160px) {
  .nav-block {
    order: 3;
    margin-left: 0;
  }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: var(--foreground);
    cursor: pointer;
  }

  .nav-toggle .nav-icon-close,
  .nav-toggle[aria-expanded="true"] .nav-icon-menu {
    display: none;
  }

  .nav-toggle[aria-expanded="true"] .nav-icon-close {
    display: block;
  }

  /* The panel hangs below the header and does not push the page. */
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-bottom: 1px solid var(--border);
    background: var(--background);
    box-shadow: 0 12px 32px oklch(20% 0.02 60 / 0.18);
  }

  .site-header-nav.nav-open .site-nav {
    display: block;
  }

  .site-nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(1120px, 100% - 40px); /* same as .shell, so the links line up with the logo */
    margin-inline: auto;
    padding-block: 6px;
  }

  .site-nav-list li + li {
    border-top: 1px solid var(--border);
  }

  .site-nav-list a {
    display: flex;
    font-size: 1rem;
  }
}

@media (width <= 740px) {
  html {
    scroll-padding-top: 65px;
  }

  .site-nav-list {
    width: min(100% - 28px, 560px); /* same as .shell at this width */
  }

  .nav-cta {
    display: none;
  }

  /* The sprint's text is longer than the old one: it takes two lines, and the button a bigger share. */
  .mobile-actions {
    grid-template-columns: 1.7fr 0.7fr 0.9fr;
  }

  .mobile-actions button {
    height: auto;
    padding: 4px 10px;
    line-height: 1.15;
    text-align: center;
    text-wrap: balance;
    white-space: normal;
  }
}

/* Narrow phones: tighter gaps first, then «Κλήση» instead of the number, as the guide's header does. */
@media (width < 375px) {
  .site-header-nav .shell,
  .site-header-nav .shell > .flex {
    gap: 8px;
  }
}

@media (width < 360px) {
  .site-header-nav .contact-link:not(.whatsapp) span:first-of-type {
    display: none;
  }

  .site-header-nav .contact-link:not(.whatsapp) span:last-of-type {
    display: inline;
  }

  /* Keeps the button at two lines, so the bar does not take more of a small screen. */
  .mobile-actions {
    grid-template-columns: 1.9fr 0.7fr 0.9fr;
  }

  .mobile-actions button {
    padding-inline: 6px;
    font-size: 0.78rem;
  }
}

/* «Καλέστε με» form (spec 014). Only spacing and text size: colours and controls come from the page's own classes. */
.callback-form { display: grid; gap: .5rem; min-width: 0; }
.callback-form .error-text { margin: 0; }
.callback-submit { width: 100%; margin-top: .5rem; }
.callback-note { margin: .25rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--foreground); overflow-wrap: anywhere; }
.callback-note a { text-decoration: underline; }
.callback-done { margin: 0; line-height: 1.5; color: var(--foreground); }

/* Release 2a (spec 016): «Οδηγοί», «Καλέστε με», #methodologia, #epikoinonia, the footer of 3 groups. Own rules with the site's
   tokens; the kept stylesheet is a purged build. Breakpoints as nav.css: below 1160 px the links are in the burger panel. */

/* A longer panel scrolls on its own: 9 links and a heading do not fit a small phone. */
@media (width < 1160px) {
  .site-nav {
    max-height: calc(100dvh - 73px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ---- «Οδηγοί» ---- */
.nav-guides {
  position: relative;
}

.nav-guides-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.nav-guides-btn:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nav-guides-btn:focus-visible,
.nav-callback:focus-visible,
footer a:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.nav-guides-btn svg {
  width: 16px;
  height: 16px;
  transition: transform 0.15s;
}

.nav-guides.is-open .nav-guides-btn svg {
  transform: rotate(180deg);
}

.nav-guides-heading {
  display: none;
}

.nav-guides-list {
  display: none;
  position: absolute;
  top: 100%;
  left: -14px;
  z-index: 1;
  min-width: 230px;
  margin: 0;
  padding: 6px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: 0 12px 32px oklch(20% 0.02 60 / 0.18);
  list-style: none;
}

.nav-guides.is-open .nav-guides-list {
  display: block;
}

.nav-guides-list li + li {
  border-top: 1px solid var(--border);
}

.nav-guides-list a {
  display: flex;
}

/* The secondary button in the header row. Its link in the panel is .nav-callback-item. */
.nav-callback {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--foreground);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.nav-callback:hover {
  background: var(--secondary);
}

@media (width >= 1160px) {
  .nav-callback {
    display: inline-flex;
  }

  .nav-callback-item {
    display: none;
  }

  .nav-block {
    margin-left: 14px;
  }

  .site-nav-list {
    gap: 18px;
  }
}

/* In the burger the group's links are open under a heading: no second tap. */
@media (width < 1160px) {
  .nav-guides-btn {
    display: none;
  }

  .nav-guides-heading {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    font-weight: 800;
  }

  .nav-guides-list {
    display: block;
    position: static;
    min-width: 0;
    padding: 0 0 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---- #methodologia ---- */
.methodology {
  padding-block: 4.5rem;
}

.methodology h2 {
  margin: 0.35rem 0 1.25rem;
  color: var(--foreground);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.methodology p {
  margin: 0 0 1rem;
  color: var(--muted-foreground);
  line-height: 1.65;
}

.methodology p:last-child {
  margin-bottom: 0;
}

/* ---- #epikoinonia: the section's look stays; the actions may wrap ---- */
.direct-actions {
  flex-wrap: wrap;
}

.direct-callback {
  min-height: 44px;
  font-weight: 800;
  text-decoration: none;
}

/* ---- Footer ---- */
.footer-main {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(auto-fit, minmax(170px, 1fr));
  gap: 30px;
}

.footer-about {
  margin: 14px 0;
  color: var(--muted-foreground);
  font-size: 0.87rem;
  line-height: 1.55;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted-foreground);
  font-size: 0.87rem;
}

footer a {
  color: var(--foreground);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* On a touch screen :hover stays on the last link tapped, so it would look selected (owner, footer-8). */
@media (hover: none) {
  footer a:hover,
  .site-nav-list a:hover,
  .nav-guides-btn:hover {
    text-decoration: none;
  }
}

.footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* The two buttons keep their own colours, against the footer's link rule above. */
.footer-actions .footer-cta,
.footer-actions .footer-cta:hover {
  min-height: 44px;
  color: var(--primary-foreground);
  font-weight: 800;
  text-decoration: none;
}

.footer-actions .nav-callback {
  display: inline-flex;
}

.footer-group h2 {
  margin: 0 0 12px;
  color: var(--foreground);
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
}

.footer-group ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  font-size: 0.87rem;
  list-style: none;
}

.footer-legal {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.8rem;
  line-height: 1.6;
}

.footer-legal p {
  margin: 0;
}

@media (width <= 740px) {
  .footer-main {
    grid-template-columns: 1fr;
  }
}

/* Release 2a (spec 016): while a number counts up, its real text stays in place, unseen, and holds the layout, so nothing can shift.
   The moving digits are drawn over it. They are not text of the page, and the empty text after the slash keeps them from screen readers;
   the first line of `content` is for a browser that does not know that form. Both go away with the class, so the last frame is today's text. */
.count-up-running {
  position: relative;
  -webkit-text-fill-color: transparent;
}

.count-up-running::after {
  content: attr(data-count-up);
  content: attr(data-count-up) / "";
  position: absolute;
  inset: 0;
  -webkit-text-fill-color: currentcolor;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Release 2b (spec 016; owner 54): the cookie message. Above the bottom bar and the header, below the dialogs (nav.css: 30, 40, 50).
   The bar and the message never share the bottom of a phone (spec 006 §8). */
body.consent-open .mobile-actions {
  display: none !important;
}

.cookie-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 45;
  width: min(560px, 100% - 32px);
  max-height: min(84dvh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: 0 12px 32px oklch(20% 0.02 60 / 0.25);
  color: var(--foreground);
  font-size: 0.875rem;
  line-height: 1.5;
}

.cookie-panel h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.cookie-panel h2:focus {
  outline: none;
}

.cookie-panel p {
  margin: 0 0 8px;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Accepting and refusing look the same (54, ΑΠΔΠΧ): one class for every button. */
.cookie-btn {
  flex: 1 1 150px;
  min-height: 44px;
  padding: 6px 12px;
  border: 1px solid var(--foreground);
  border-radius: calc(var(--radius) - 2px);
  background: var(--background);
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 800;
  cursor: pointer;
}

.cookie-btn:hover {
  background: var(--secondary);
}

.cookie-btn:focus-visible,
.cookie-panel a:focus-visible,
.cookie-row input:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.cookie-link {
  margin: 10px 0 0 !important;
}

.cookie-panel a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-row {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.cookie-row label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  cursor: pointer;
}

.cookie-row label span {
  color: var(--muted-foreground);
}

.cookie-row input {
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.cookie-row input:disabled {
  cursor: not-allowed;
}

.cookie-row p {
  margin: 6px 0 0;
  color: var(--muted-foreground);
}

@media (width <= 740px) {
  .cookie-panel {
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
    max-height: 80dvh;
    padding: 16px;
  }
}

/* Release 2c (owner, 2/11/2026: «Μήνυμα cookies -> Στο κινητό: μικρότερο»). The same words on less of a phone's screen.
   Only the first layer: it is the one panel that holds the «Ρυθμίσεις cookies» button. The settings layer and every width over 740 px keep consent.css as it is.
   A browser with no :has() drops these rules and shows the message as release 2b did.
   This is a module of its own because an edit in consent.css would move the hash of the banner build, which is live and is the rollback. */
@media (width <= 740px) {
  /* The panel is the one scroller, so touch and arrow keys move the text. The floor of 200 px is for a phone on its side, where 45 % leaves no text. */
  .cookie-panel:has([data-consent="settings"]) {
    display: flex;
    flex-direction: column;
    max-height: min(100dvh - 20px, max(45dvh, 200px));
    padding: 12px 16px 0;
  }

  /* The link comes before the buttons on the screen. Its bottom margin is the room for the fade, so at the end of the text the fade lies on nothing. */
  .cookie-panel:has([data-consent="settings"]) .cookie-link {
    order: 1;
    margin: 0 0 24px !important;
  }

  /* A focused Policy link stops above the buttons and the fade, not under them. On the link alone: a scroll-padding on the panel would move the text when a button takes the focus. */
  .cookie-panel:has([data-consent="settings"]) .cookie-link a {
    scroll-margin-bottom: 150px;
  }

  .cookie-panel:has([data-consent="settings"]) .cookie-actions {
    order: 2;
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: 0;
    padding: 8px 0 12px;
    background: var(--background);
  }

  /* Two buttons side by side down to 320 px, all three in a row on a phone on its side. One class for all three (54). */
  .cookie-panel:has([data-consent="settings"]) .cookie-btn {
    flex: 1 1 120px;
    padding: 4px 8px;
    line-height: 1.2;
  }

  /* The sign that more text follows, for every browser: the text fades out above the buttons. Nothing is there to fade once the text has ended. */
  .cookie-panel:has([data-consent="settings"]) .cookie-actions::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: 24px;
    background: linear-gradient(to bottom, transparent, var(--background));
    pointer-events: none;
  }

  /* An arrow as well, where the browser can tie it to the scrolling. Anywhere else, or with nothing to scroll, the animation has no effect or ends at once, and the arrow stays hidden. */
  .cookie-panel:has([data-consent="settings"]) .cookie-actions::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 6px);
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--foreground);
    border-bottom: 2px solid var(--foreground);
    transform: rotate(45deg);
    opacity: 0;
    pointer-events: none;
    animation: consent-more-text linear both;
    animation-timeline: scroll(nearest block);
  }

  @keyframes consent-more-text {
    0%, 85% { opacity: 1; }
    100% { opacity: 0; }
  }
}