/* Etalno – responsive overrides & WordPress integration */
/* All layout is handled via inline styles in templates.
   This file: WP admin bar, mobile overrides (need !important), utility resets. */

/* Body text size — excludes display paragraphs that use Cormorant Garamond with clamp() */
p:not([style*="Cormorant"]) { font-size: 20px !important; line-height: 1.85 !important; }

/* WordPress admin bar */
.admin-bar #et-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar #et-header { top: 46px; }
}

/* ─────────────────────────────────────────────
   MOBILE – max-width 768px
───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Hero */
  section#top {
    align-items: flex-end !important;
  }
  section#top > div:last-of-type {
    padding-bottom: clamp(48px,10vh,80px) !important;
  }
  section#top h1 {
    font-size: clamp(42px,12vw,64px) !important;
  }
  section#top > div:last-of-type > div {
    max-width: 100% !important;
  }

  /* Hero CTA buttons – stack vertically */
  section#top .et-hero-cta-primary,
  section#top .et-hero-cta-secondary {
    width: 100%;
    justify-content: center !important;
  }

  /* Manifesto */
  section[style*="background:#F4EEE4"] p[style*="Cormorant Garamond"] {
    font-size: clamp(20px,5vw,28px) !important;
  }

  /* Brand Story – stack */
  section#story > div {
    flex-direction: column !important;
  }
  section#story > div > div:first-child { order: 2; }
  section#story > div > div:last-child  { order: 1; }

  /* Glomato – stack, image first */
  section#glomato > div > div {
    flex-direction: column !important;
  }
  section#glomato [style*="order:2"] { order: 2 !important; }
  section#glomato [style*="order:1"] { order: 1 !important; }
  section#glomato [style*="flex:1 1 420px"] { min-width: 0 !important; width: 100% !important; }

  /* Specs row */
  section#glomato [style*="flex:1 1 33%"] {
    flex: 1 1 45% !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(237,230,218,0.12) !important;
  }

  /* Why the Tomato cards */
  section#tomato [style*="flex:1 1 280px"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  /* Craftsmanship – stack figures */
  section#craft figure {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  section#craft > div > div:first-child {
    flex-direction: column !important;
  }

  /* Future Creations – stack */
  section#future > div > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    min-height: 280px !important;
  }

  /* Founding form – stack input + button */
  section#founders form > div {
    flex-direction: column !important;
  }
  section#founders form input[type="email"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  section#founders form button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Footer columns – 2-col then 1-col */
  footer > div > div:first-child > div:last-child {
    flex-direction: column !important;
  }
}

/* ─────────────────────────────────────────────
   MOBILE SMALL – max-width 480px
───────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Footer – full single column */
  footer > div > div:first-child {
    flex-direction: column !important;
  }
  footer > div > div:first-child > div:first-child {
    max-width: 100% !important;
  }

  /* Founding benefits – stack */
  section#founders [style*="display:flex;flex-wrap:wrap;justify-content:center"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 280px;
    margin: 0 auto 46px !important;
  }

  /* Glomato specs – single column */
  section#glomato [style*="flex:1 1 33%"] {
    flex: 1 1 100% !important;
  }
}

/* Remove WordPress default content margins */
.wp-site-blocks { margin: 0; padding: 0; }