/* Aletta Nutrition - Complete Additional CSS */

/* -------------------------------------------------------
   Global variables
------------------------------------------------------- */

:root {
  --aletta-dark: #17372f;
  --aletta-green: #557565;
  --aletta-soft-green: #e2eee8;
  --aletta-cream: #fbf8f2;
  --aletta-text: #425b54;
  --aletta-muted: #60716b;
  --aletta-white: #ffffff;
  --aletta-radius: 28px;
  --aletta-shadow: 0 18px 55px rgba(23, 55, 47, 0.08);
  --aletta-shadow-strong: 0 24px 70px rgba(23, 55, 47, 0.12);

  --aletta-banner-width: 1500px;
  --aletta-section-width: 1500px;
  --aletta-section-gap: 42px;
  --aletta-section-gap-small: 28px;
}

/* -------------------------------------------------------
   Global page reset
------------------------------------------------------- */

html,
body,
.site,
#page,
.site-content {
  background: #ffffff !important;
  overflow-x: hidden !important;
}

body {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
}

/* Remove general top spacing from Astra and WordPress wrappers. */
.site-content,
#content,
.ast-container,
.entry-content {
  margin-top: 0 !important;
}

.site-main,
#primary,
article.page,
.hentry,
.entry-content {
  padding-top: 0 !important;
}

/* Stronger Astra page-builder top spacing removal */
.ast-page-builder-template .site-content,
.ast-page-builder-template .site-content > .ast-container,
.ast-page-builder-template #primary,
.ast-page-builder-template .site-main,
.ast-page-builder-template article,
.ast-page-builder-template .entry-content,
.ast-plain-container .site-content,
.ast-plain-container .site-content #primary,
.ast-separate-container .site-content,
.ast-separate-container .ast-article-single {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* -------------------------------------------------------
   WordPress block-editor page shell
   Applied only when an Aletta layout is stored as blocks.
------------------------------------------------------- */

.aletta-block-editor-page .site-content,
.aletta-block-editor-page .site-content > .ast-container,
.aletta-block-editor-page #primary,
.aletta-block-editor-page .site-main,
.aletta-block-editor-page article.page,
.aletta-block-editor-page article.type-page,
.aletta-block-editor-page article.ast-article-single,
.aletta-block-editor-page .entry-content {
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.aletta-block-editor-page article.type-page,
.aletta-block-editor-page article.ast-article-single {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.aletta-block-editor-page .site-content > .ast-container {
  display: block !important;
}

.aletta-block-editor-page #secondary,
.aletta-block-editor-page article.page > .entry-header,
.aletta-block-editor-page article.type-page > .entry-header,
.aletta-block-editor-page article.ast-article-single > .entry-header {
  display: none !important;
}

.aletta-block-editor-page .entry-content {
  display: block !important;
}

.aletta-block-editor-page .entry-content > :first-child {
  margin-top: 0 !important;
}

/* Keep functional Gutenberg wrappers neutral so page CSS remains authoritative. */
.aletta-block-editor-page .aletta-contact__form.wp-block-group,
.aletta-block-editor-page .aletta-booking-page__calendar.wp-block-group {
  margin-block-start: 0;
}

/* -------------------------------------------------------
   Shared typography
------------------------------------------------------- */

.aletta-hero,
.aletta-about,
.aletta-support,
.aletta-process,
.aletta-final-cta,
.aletta-about-page-hero,
.aletta-about-story,
.aletta-about-philosophy,
.aletta-about-expertise,
.aletta-about-cta,
.aletta-services-hero,
.aletta-services-intro,
.aletta-services-list,
.aletta-services-process,
.aletta-services-note,
.aletta-services-cta,
.aletta-contact-hero,
.aletta-contact,
.aletta-legal-hero,
.aletta-legal {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  color: #17372f;
}

.aletta-hero h1,
.aletta-about h2,
.aletta-support h2,
.aletta-process h2,
.aletta-final-cta h2,
.aletta-about-page-hero h1,
.aletta-about-story h2,
.aletta-about-philosophy h2,
.aletta-about-expertise h2,
.aletta-about-cta h2,
.aletta-services-hero h1,
.aletta-services-intro h2,
.aletta-services-list h2,
.aletta-services-process h2,
.aletta-services-note h2,
.aletta-services-cta h2,
.aletta-contact-hero h1,
.aletta-contact h2,
.aletta-legal-hero h1,
.aletta-legal h2 {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 650;
  letter-spacing: -0.045em;
}

.aletta-hero p,
.aletta-about p,
.aletta-support p,
.aletta-process p,
.aletta-final-cta p,
.aletta-about-page-hero p,
.aletta-about-story p,
.aletta-about-philosophy p,
.aletta-about-expertise p,
.aletta-about-cta p,
.aletta-services-hero p,
.aletta-services-intro p,
.aletta-services-list p,
.aletta-services-process p,
.aletta-services-note p,
.aletta-services-cta p,
.aletta-contact-hero p,
.aletta-contact p,
.aletta-legal-hero p,
.aletta-legal p {
  font-weight: 400;
}

.aletta-hero__eyebrow,
.aletta-about__eyebrow,
.aletta-support__eyebrow,
.aletta-process__eyebrow,
.aletta-final-cta__eyebrow,
.aletta-about-page-hero__eyebrow,
.aletta-about-story__eyebrow,
.aletta-about-philosophy__eyebrow,
.aletta-about-expertise__eyebrow,
.aletta-about-cta__eyebrow,
.aletta-services-hero__eyebrow,
.aletta-services-intro__eyebrow,
.aletta-services-list__eyebrow,
.aletta-services-process__eyebrow,
.aletta-services-note__eyebrow,
.aletta-services-cta__eyebrow,
.aletta-contact-hero__eyebrow,
.aletta-contact__eyebrow,
.aletta-legal-hero__eyebrow,
.aletta-legal__updated {
  font-size: 12.5px;
  letter-spacing: 0.13em;
}

/* -------------------------------------------------------
   Full-width behavior below 1500px
------------------------------------------------------- */

@media (max-width: 1500px) {
  .aletta-hero,
  .aletta-contact-hero,
  .aletta-about-page-hero,
  .aletta-services-hero,
  .aletta-legal-hero {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .aletta-about,
  .aletta-process,
  .aletta-contact,
  .aletta-about-story,
  .aletta-about-philosophy,
  .aletta-about-expertise,
  .aletta-services-intro,
  .aletta-services-list,
  .aletta-services-process,
  .aletta-services-note,
  .aletta-legal {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(22px, 4vw, 70px) !important;
    padding-right: clamp(22px, 4vw, 70px) !important;
  }

  .aletta-final-cta,
  .aletta-about-cta,
  .aletta-services-cta {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(22px, 4vw, 70px) !important;
    padding-right: clamp(22px, 4vw, 70px) !important;
  }

  .aletta-final-cta__inner,
  .aletta-about-cta__inner,
  .aletta-services-cta__inner,
  .aletta-contact__content,
  .aletta-contact__form-card,
  .aletta-about-story__main,
  .aletta-about-philosophy__content,
  .aletta-services-intro__content,
  .aletta-services-note__content,
  .aletta-legal__content {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* -------------------------------------------------------
   Centered layout above 1500px
------------------------------------------------------- */

@media (min-width: 1501px) {
  .aletta-hero,
  .aletta-contact-hero,
  .aletta-about-page-hero,
  .aletta-services-hero,
  .aletta-legal-hero {
    box-sizing: border-box !important;
    width: var(--aletta-banner-width) !important;
    max-width: var(--aletta-banner-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .aletta-about,
  .aletta-process,
  .aletta-contact,
  .aletta-about-story,
  .aletta-about-philosophy,
  .aletta-about-expertise,
  .aletta-services-intro,
  .aletta-services-list,
  .aletta-services-process,
  .aletta-services-note,
  .aletta-legal {
    box-sizing: border-box !important;
    max-width: var(--aletta-section-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .aletta-final-cta__inner,
  .aletta-about-cta__inner,
  .aletta-services-cta__inner,
  .aletta-services-note__content,
  .aletta-services-intro__content,
  .aletta-about-philosophy__content,
  .aletta-about-story__main,
  .aletta-legal__content {
    max-width: var(--aletta-section-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* -------------------------------------------------------
   Section spacing
------------------------------------------------------- */

.entry-content > .aletta-hero:first-child,
.entry-content > .aletta-contact-hero:first-child,
.entry-content > .aletta-about-page-hero:first-child,
.entry-content > .aletta-services-hero:first-child,
.entry-content > .aletta-legal-hero:first-child {
  margin-top: 0 !important;
}

.aletta-hero,
.aletta-contact-hero,
.aletta-about-page-hero,
.aletta-services-hero,
.aletta-legal-hero {
  margin-top: 0 !important;
  margin-bottom: 42px !important;
}

.aletta-about,
.aletta-support,
.aletta-process,
.aletta-final-cta,
.aletta-about-story,
.aletta-about-philosophy,
.aletta-about-expertise,
.aletta-about-cta,
.aletta-services-intro,
.aletta-services-list,
.aletta-services-process,
.aletta-services-note,
.aletta-services-cta,
.aletta-contact,
.aletta-legal {
  margin-top: 42px !important;
  margin-bottom: 42px !important;
}

.aletta-final-cta,
.aletta-about-cta,
.aletta-services-cta {
  margin-top: 36px !important;
  margin-bottom: 64px !important;
}

/* -------------------------------------------------------
   Cards and buttons
------------------------------------------------------- */

.aletta-support__card,
.aletta-process__step,
.aletta-about__highlights div,
.aletta-service-card,
.aletta-about-expertise__grid div,
.aletta-services-process__steps div,
.aletta-about-story__side div,
.aletta-contact__detail {
  border: 1px solid rgba(23, 55, 47, 0.05);
  box-shadow: var(--aletta-shadow);
}

.aletta-support__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--aletta-shadow-strong);
}

.aletta-support__card h3,
.aletta-process__step h3,
.aletta-service-card h3,
.aletta-about-expertise__grid h3,
.aletta-services-process__steps h3 {
  letter-spacing: -0.025em;
  font-weight: 650;
}

.aletta-hero__button,
.aletta-final-cta__button,
.aletta-about-cta__button,
.aletta-services-cta__button {
  padding: 15px 32px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------

/* -------------------------------------------------------
   Scroll to top
------------------------------------------------------- */

.aletta-scroll-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 99999;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: 1px solid rgba(23, 55, 47, 0.10) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: #17372f !important;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(23, 55, 47, 0.16) !important;
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.aletta-scroll-top:hover {
  transform: translateY(-3px) !important;
  background: #17372f !important;
  color: #ffffff !important;
  box-shadow: 0 18px 42px rgba(23, 55, 47, 0.22) !important;
}

.aletta-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* -------------------------------------------------------
   Mobile section spacing
------------------------------------------------------- */

@media (max-width: 700px) {
  :root {
    --aletta-banner-width: 100%;
    --aletta-section-width: 100%;
    --aletta-section-gap: 42px;
    --aletta-section-gap-small: 28px;
  }

  .aletta-hero,
  .aletta-contact-hero,
  .aletta-about-page-hero,
  .aletta-services-hero,
  .aletta-legal-hero,
  .aletta-about,
  .aletta-support,
  .aletta-process,
  .aletta-final-cta__inner,
  .aletta-contact__content,
  .aletta-contact__form-card,
  .aletta-services-intro__content,
  .aletta-services-note__content,
  .aletta-about-story__main,
  .aletta-about-philosophy__content,
  .aletta-legal__content {
    box-sizing: border-box !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    border-radius: 24px !important;
  }

  .aletta-hero {
    padding-left: 22px !important;
    padding-right: 22px !important;
    margin-bottom: 30px !important;
  }

  .aletta-about {
    margin-top: 30px !important;
    margin-bottom: 36px !important;
  }

  .aletta-support {
    margin-top: 36px !important;
    margin-bottom: 32px !important;
  }

  .aletta-process {
    margin-top: 32px !important;
    margin-bottom: 36px !important;
  }

  .aletta-final-cta {
    margin-top: 30px !important;
    margin-bottom: 56px !important;
  }

  .aletta-about-story,
  .aletta-about-philosophy,
  .aletta-about-expertise,
  .aletta-about-cta,
  .aletta-services-intro,
  .aletta-services-list,
  .aletta-services-process,
  .aletta-services-note,
  .aletta-services-cta,
  .aletta-contact,
  .aletta-legal {
    margin-top: 34px !important;
    margin-bottom: 34px !important;
  }
}


/* =======================================================
   ACCESSIBILITY AND INTERACTION FINAL PASS
======================================================= */

.aletta-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#aletta-about,
#services,
#contact,
.aletta-booking-page {
  scroll-margin-top: 110px;
}

:where(
  .aletta-custom-header,
  .aletta-custom-footer,
  .aletta-hero,
  .aletta-about,
  .aletta-support,
  .aletta-process,
  .aletta-final-cta,
  .aletta-about-page-hero,
  .aletta-about-story,
  .aletta-about-philosophy,
  .aletta-about-expertise,
  .aletta-about-cta,
  .aletta-services-hero,
  .aletta-services-intro,
  .aletta-services-list,
  .aletta-services-process,
  .aletta-services-note,
  .aletta-services-cta,
  .aletta-contact,
  .aletta-booking-page,
  .woocommerce
) :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #8eb6a2 !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 2px #ffffff !important;
}

.aletta-custom-header__menu-button:focus-visible,
.aletta-custom-header__cart:focus-visible,
.aletta-scroll-top:focus-visible {
  outline: 3px solid #8eb6a2 !important;
  outline-offset: 4px !important;
}

.aletta-contact__form-card input:focus,
.aletta-contact__form-card select:focus,
.aletta-contact__form-card textarea:focus,
.woocommerce form .form-row input:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
  border-color: #557565 !important;
  box-shadow: 0 0 0 3px rgba(85, 117, 101, 0.18) !important;
}

/* =======================================================
   LAYOUT CONSISTENCY PASS (v1.3.2)
   Keep the white page canvas, align every content section,
   and centre page-banner content with equal vertical space.
======================================================= */

:root {
  --aletta-content-width: 1420px;
  --aletta-content-gutter: clamp(22px, 4vw, 70px);
  --aletta-hero-padding-block: 88px;
}

/* Page canvas: white is the base; cream belongs to the content surfaces. */
html,
body,
.site,
#page,
.site-content,
.site-main,
main {
  background-color: #ffffff !important;
}

/* Page banners use exactly the same top and bottom padding. */
.aletta-hero,
.aletta-about-page-hero,
.aletta-services-hero,
.aletta-contact-hero,
.aletta-legal-hero,
.aletta-booking-hero {
  padding-top: var(--aletta-hero-padding-block) !important;
  padding-bottom: var(--aletta-hero-padding-block) !important;
}

/* Shared outer boundary for every non-banner Aletta section. */
.aletta-about,
.aletta-support,
.aletta-process,
.aletta-final-cta,
.aletta-about-story,
.aletta-about-philosophy,
.aletta-about-expertise,
.aletta-about-cta,
.aletta-services-intro,
.aletta-services-list,
.aletta-services-process,
.aletta-services-note,
.aletta-services-cta,
.aletta-contact,
.aletta-legal,
.aletta-booking-page,
.aletta-booking-confirmation {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--aletta-content-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--aletta-content-gutter) !important;
  padding-right: var(--aletta-content-gutter) !important;
}

@media (max-width: 1500px) {
  .aletta-about,
  .aletta-support,
  .aletta-process,
  .aletta-final-cta,
  .aletta-about-story,
  .aletta-about-philosophy,
  .aletta-about-expertise,
  .aletta-about-cta,
  .aletta-services-intro,
  .aletta-services-list,
  .aletta-services-process,
  .aletta-services-note,
  .aletta-services-cta,
  .aletta-contact,
  .aletta-legal,
  .aletta-booking-page,
  .aletta-booking-confirmation {
    max-width: 100% !important;
  }
}

@media (max-width: 700px) {
  :root {
    --aletta-hero-padding-block: 64px;
  }
}

@media (max-width: 700px) {
  #aletta-about,
  #services,
  #contact,
  .aletta-booking-page {
    scroll-margin-top: 90px;
  }

  .aletta-custom-footer__links a,
  .aletta-custom-footer__legal a {
    min-height: 44px;
    align-items: center;
  }
}