/* ==========================================================================
   Theme additions on top of the template CSS (which stays verbatim):
   small fixes and features the static template did not have.
   ========================================================================== */
@layer components {
  /* base.css gives every <img> a loading background; the footer logo's white
     filter turned it into a white box (the header logo already resets it). */
  .site-footer__logo img { background: none; }

  /* Two fields side by side: label, hint, input and error each share one row, so the
     inputs line up even when one hint wraps to two lines (checkout email / phone). */
  @supports (grid-template-rows: subgrid) {
    @container (min-width: 460px) {
      .form-row--2:has(> .field:nth-child(2):last-child) { grid-template-rows: repeat(4, auto); row-gap: 0; }
      .form-row--2:has(> .field:nth-child(2):last-child) > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
      .form-row--2:has(> .field:nth-child(2):last-child) > .field > * { grid-row: 3; }
      .form-row--2:has(> .field:nth-child(2):last-child) > .field > .field__label { grid-row: 1; margin-block-end: var(--space-2); }
      .form-row--2:has(> .field:nth-child(2):last-child) > .field > .field__hint { grid-row: 2; margin-block-end: var(--space-2); }
      .form-row--2:has(> .field:nth-child(2):last-child) > .field > :is(.field__error, .field__counter, .wpcf7-not-valid-tip) { grid-row: 4; margin-block-start: var(--space-2); }
    }
  }

  /* Coral buttons with white text (store's choice; the template had ink text) */
  .btn--primary,
  .single_add_to_cart_button,
  .checkout-button {
    --btn-fg: #fff;
    --btn-fg-hover: #fff;
  }

  /* Footer "Επικοινωνία": tighter rows. Phone/e-mail keep a 24px target (WCAG 2.5.8),
     32px on touch, instead of 32/44px that spread the column apart. */
  .footer-store { gap: var(--space-2); align-content: start; }
  .footer-store .footer-col__title { margin-block-end: var(--space-2); }
  .site-footer .footer-store__row a { min-height: 24px; }

  @media (pointer: coarse) {
    .site-footer .footer-store__row a { min-height: 32px; }
  }

  /* Mega menu for real-world menus (inc/menus.php):
     - depth-1 headings that are category links,
     - no photo card → the columns use the full width,
     - large menus flow newspaper-style into --mega-cols balanced columns,
       a group never splits; flat link lists flow across the columns. */
  a.mega__heading { display: block; color: var(--text); text-decoration: none; }
  a.mega__heading:hover { color: var(--coral-700); }
  .mega__inner--wide { grid-template-columns: minmax(0, 1fr); }
  .mega__inner--flow {
    max-height: calc(100svh - var(--header-h, 120px) - var(--space-4));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mega__main { display: grid; align-content: start; gap: var(--space-4); }
  .mega__cols--flow {
    display: block;
    columns: var(--mega-cols, 4);
    column-gap: var(--space-6);
  }
  .mega__cols--flow > .mega__col {
    break-inside: avoid;
    margin-block-end: var(--space-5);
  }
  .mega__cols--flow > .mega__col--links { break-inside: auto; }
  .mega__cols--flow .mega__list > li { break-inside: avoid; }
  .mega__col--links .mega__list > li > a { color: var(--text); }
  .mega__col--links .mega__list > li > a:hover { color: var(--coral-700); }
}

@layer components {
  /* cozy/category-tiles (room pages): text with links + square category tiles. */
  .cat-tiles__text {
    max-width: 72ch;
    margin-block: calc(-1 * var(--space-3)) var(--space-7);
    color: var(--text-soft);
    font-size: var(--fs-md);
    line-height: var(--lh-body);
  }
  .cat-tiles__text a { color: var(--text); text-decoration-color: var(--border-strong); text-underline-offset: 0.2em; }
  .cat-tiles__text a:hover { color: var(--coral-700); text-decoration-color: currentColor; }
  .cat-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
  }
  .cat-tiles .cat-tile__media { background: var(--surface-3); }
  .cat-tile__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    background: var(--surface-3) var(--texture-weave);
  }
  .cat-tiles__note { margin-block-start: var(--space-6); color: var(--text-muted); font-size: var(--fs-sm); }
  @media (min-width: 768px) {
    .cat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 1024px) {
    .cat-tiles { grid-template-columns: repeat(var(--cat-cols, 4), minmax(0, 1fr)); gap: var(--space-7) var(--space-5); }
  }
}

@layer pages {
  /* Home hero "Στη φωτογραφία": long product names are cut with "…" on one
     line; the price always stays visible (full name in the link's title). */
  .home-hero__tag { max-width: min(32rem, 100%); min-width: 0; }
  .home-hero__tag > span:not([class]) { min-width: 0; }
  .home-hero__tag-name { display: flex; min-width: 0; white-space: nowrap; }
  .home-hero__tag-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .home-hero__tag-price { flex: none; white-space: pre; }
}

/* --------------------------------------------------------------------------
   Contact Form 7 quote form (inc/cf7.php) in the theme's field style.
   Outside the layers on purpose: CF7's own stylesheet is unlayered and would
   otherwise win over any layered rule.
   -------------------------------------------------------------------------- */
.cozy-cf7-form .wpcf7-form-control-wrap { display: grid; gap: var(--space-2); }
.cozy-cf7-form .select-wrap::after { inset-block-start: 24px; } /* centred on the 48px select, not on select + error */

.cozy-cf7-form .wpcf7-not-valid-tip {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--coral-700);
}

.cozy-cf7-form .wpcf7-list-item { display: block; margin: 0; }
.cozy-cf7-form .wpcf7-acceptance .wpcf7-list-item { display: inline-block; }

.cozy-cf7-form .wpcf7-list-item > label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7em;
  min-height: 44px;
  padding-block: 0.6em;
  font-size: var(--fs-sm);
  line-height: 1.45;
  cursor: pointer;
}

.cozy-cf7-form .wpcf7-list-item input {
  appearance: none;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 0.05em 0 0;
  padding: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-color var(--dur-fast);
}

.cozy-cf7-form .wpcf7-list-item input::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--paper);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
  scale: 0;
  transition: scale var(--dur-fast) var(--ease-out);
}

.cozy-cf7-form .wpcf7-list-item input:checked { background: var(--ink); border-color: var(--ink); }
.cozy-cf7-form .wpcf7-list-item input:checked::after { scale: 1; }
.cozy-cf7-form .wpcf7-list-item input:hover:not(:checked) { border-color: var(--ink-soft); }
.cozy-cf7-form .wpcf7-list-item input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cozy-cf7-form .wpcf7-not-valid .wpcf7-list-item input { border-color: var(--coral-700); }

.cozy-cf7-form .form-actions .wpcf7-spinner { margin: 0; }

.wpcf7 form.cozy-cf7-form .wpcf7-response-output {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  font-size: var(--fs-sm);
}

.wpcf7 form.cozy-cf7-form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
  border-color: var(--coral-700);
  background: var(--coral-50);
  color: var(--coral-700);
}

/* Sent: the theme's success panel instead of the fields ("resetting" is CF7 clearing
   the fields right after sending) */
.cozy-cf7-form .cozy-cf7__success { display: none; }
.cozy-cf7-form:is(.sent, .resetting) .cozy-cf7,
.wpcf7 form.cozy-cf7-form:is(.sent, .resetting) .wpcf7-response-output { display: none; }
.cozy-cf7-form:is(.sent, .resetting) .cozy-cf7__success { display: grid; }