html {
  overflow-x: hidden; /* Prevent horizontal scrollbars from rogue elements */
  /* overflow-y will default to 'auto' or 'visible', which is what we want. */
  /* Do not set overflow-y: hidden here unless specifically intended for other reasons. */
}

:root {
  /* Micro/Caption Text */
  --font-size-caption: 0.75rem; /* 12px */
  --font-size-caption-large: 0.9rem; /* 14.4px */
  --font-size-label: 0.95rem; /* 15.2px */

  /* Body/Small Text */
  --font-size-body-xs: 0.875rem; /* 14px */
  --font-size-body-sm: 0.9375rem; /* 15px */
  --font-size-body-md: 1rem; /* 16px */
  --font-size-body-lg: 1.1rem; /* 17.6px */
  --font-size-body-xl: 1.2rem; /* 19.2px */

  /* Headings / Larger Text */
  --font-size-heading-xs: 1.0625rem; /* 17px */
  --font-size-heading-sm: 1.125rem; /* 18px */
  --font-size-heading-md: 1.25rem; /* 20px */
  --font-size-heading-lg: 1.5rem; /* 24px */
  --font-size-heading-xl: 1.75rem; /* 28px */
  --font-size-heading-xxl: 1.8rem; /* 28.8px */
  --font-size-heading-xxxl: 2rem; /* 32px */

  /* Display / Very Large Text */
  --font-size-display-xs: 2.25rem; /* 36px */
  --font-size-display-sm: 2.375rem; /* 38px */
  --font-size-display-md: 3rem; /* 48px */
  --font-size-display-lg: 3.5rem; /* 56px */
  --font-size-display-xl: 4.5rem; /* 72px */

  /* Special Cases: Stats Card */
  --font-size-stats-plus-lg: 4rem; /* 64px */
  --font-size-stats-plus-sm: 2.5rem; /* 40px */
  --font-size-stats-number-sm: 5rem; /* 80px */
  --font-size-stats-number-md: 6rem; /* 96px */
  --font-size-stats-number-lg: 10rem; /* 160px */

  /* New Clip-Path Variables */
  --maeveport-clip-path-notch-depth: 8.9em;
  --maeveport-clip-path-notch-flat-end: 25%;
  --maeveport-clip-path-notch-bottom-coord: 41%;

  /* New Angled Clip-Path Variables */
  --maeveport-clip-path-atl-height: 8em;
  --maeveport-clip-path-atl-start-offset: 13em;
  --maeveport-clip-path-atl-width: 15em;
}

/* WordPress spacing resets and overrides - to be reviewed/removed after theme.json */
/*
.has-global-padding {
  --wp--style--global--content-size: auto;
  --wp--style--global--wide-size: auto;
}

.has-global-padding.is-layout-constrained > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.has-global-padding.is-layout-constrained .wp-block-template-part > * {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.wp-block-group-is-layout-constrained {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100vw !important;
  --wp--style--global--content-size: 100vw !important;
  --wp--style--global--wide-size: 100vw !important;
}

.has-global-padding,
.is-layout-constrained {
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: 100vw !important;
  --wp--style--global--content-size: 100vw !important;
  --wp--style--global--wide-size: 100vw !important;
}
*/

/* Reset editor spacing inconsistencies */
.editor-styles-wrapper .wp-block {
  max-width: 100% !important;
}

/* Global styles */
body {
  font-family: 'Open Sans', sans-serif;
}

.maeveport-background-color-white {
  background-color: white !important;
}
.maeveport-background-color-black {
  background-color: black !important;
}
/* Optional: your custom global styles here */

/* Utility: Standard horizontal padding for all main sections */
.maeveport-section {
  padding-left: 4rem;
  padding-right: 4rem;
  max-width: 100vw;
  box-sizing: border-box;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  /* Corresponds to lg Tailwind, also iPad Pro landscape for padding */
  .maeveport-section {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 1023px) {
  /* Corresponds to md Tailwind for padding, iPad Pro portrait */
  .maeveport-section {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* ------------- Responsive Typography Overrides ------------- */

/* Small Desktops / Large Tablets (e.g., iPad Pro Landscape) */
/* 992px to 1299.98px */
@media (min-width: 992px) and (max-width: 1299.98px) {
  :root {
    /* Caption */
    /* --font-size-caption: 0.75rem; (12px) - likely stays same */
    /* --font-size-caption-large: 0.9rem; (14.4px) - likely stays same */
    /* --font-size-label: 0.95rem; (15.2px) - likely stays same */

    /* Body */
    /* --font-size-body-xs: 0.875rem; */
    --font-size-body-sm: 0.9375rem; /* 15px */
    --font-size-body-md: 1rem; /* 16px */
    --font-size-body-lg: 1.05rem; /* ~17px */
    --font-size-body-xl: 1.1rem; /* ~18px */

    /* Headings */
    /* --font-size-heading-xs: 1.0625rem; */
    --font-size-heading-sm: 1.125rem; /* 18px */
    --font-size-heading-md: 1.125rem; /* Corrected to 18px as per last request */
    --font-size-heading-lg: 1.25rem; /* 20px (hero line 1 for this, scroll text link) */
    --font-size-heading-xl: 1.5rem; /* 24px (stats label) */
    --font-size-heading-xxl: 1.75rem; /* 28px */
    --font-size-heading-xxxl: 1.8rem; /* ~29px (stats headline) */

    /* Display */
    --font-size-display-xs: 2rem; /* 32px (mega menu title) */
    --font-size-display-sm: 2.375rem; /* 38px (webring heading, was 2.625rem) */
    --font-size-display-md: 2.375rem; /* Corrected from 2.5rem - this was from the "reduce font size more" step */
    --font-size-display-lg: 3.5rem; /* 56px (hero line 2/3) */
    /* --font-size-display-xl: 4.5rem; - Stays for larger desktops */

    /* Stats Card */
    /* --font-size-stats-plus-lg: 4rem; - Stays for larger desktops */
    /* --font-size-stats-plus-sm: 2.5rem; - For mobile */
    /* --font-size-stats-number-sm: 5rem; - For mobile */
    /* --font-size-stats-number-md: 6rem; - For mobile */
    /* --font-size-stats-number-lg: 10rem; - Stays for larger desktops */

    /* Clip-Path Overrides for Tablet/Small Desktop */
    /* Variables retain desktop values (8.9em, 25%, 41%) as per experts section */

    /* Angled Clip-Path Overrides for iPad Pro */
    --maeveport-clip-path-atl-height: 8.9em;
    --maeveport-clip-path-atl-start-offset: 14.5vw;
    --maeveport-clip-path-atl-width: 16.8vw;
  }
}

/* Tablets (e.g., iPad Portrait) */
/* 768px to 991.98px */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root {
    /* Caption */
    /* --font-size-caption: 0.75rem; */
    /* --font-size-caption-large: 0.9rem; */
    /* --font-size-label: 0.95rem; */

    /* Body */
    /* --font-size-body-xs: 0.875rem; */
    --font-size-body-sm: 0.9375rem; /* 15px */
    --font-size-body-md: 0.9375rem; /* 15px (webring text was this) */
    --font-size-body-lg: 1rem; /* 16px */
    --font-size-body-xl: 1.1rem; /* 17.6px (stats desc) */

    /* Headings */
    /* --font-size-heading-xs: 1.0625rem; */
    --font-size-heading-sm: 1.1rem; /* 17.6px (hero line 1) */
    --font-size-heading-md: 1.125rem; /* 18px (webring card title) */
    --font-size-heading-lg: 1.5rem; /* 24px (stats label) */
    /* --font-size-heading-xl: 1.75rem; */
    --font-size-heading-xxl: 1.8rem; /* 28.8px (stats headline) */
    --font-size-heading-xxxl: 2rem; /* 32px (scroll text line) */

    /* Display */
    --font-size-display-xs: 2.25rem; /* 36px (webring heading) */
    --font-size-display-md: 2.25rem; /* Added: 36px - To ensure webring heading scales down */
    --font-size-display-lg: 3.5rem; /* 56px (hero line 2/3) */
    /* --font-size-display-xl: 4.5rem; */

    /* Stats Card - values remain large for tablet as per current design */
    /* --font-size-stats-plus-lg: 4rem; */
    /* --font-size-stats-plus-sm: 2.5rem; */
    /* --font-size-stats-number-sm: 5rem; */
    /* --font-size-stats-number-md: 6rem; */
    /* --font-size-stats-number-lg: 10rem; */

    /* Clip-Path Overrides for Tablet */
    --maeveport-clip-path-notch-depth: 6.8em;
    /* flat-end and bottom-coord retain desktop values (25%, 41%) */

    /* Angled Clip-Path Overrides for Tablet */
    --maeveport-clip-path-atl-height: 6.8em;
    --maeveport-clip-path-atl-start-offset: 14.5vw;
    --maeveport-clip-path-atl-width: 16.8vw;
  }

  .maeveport-clip-path-diagonal-notch {
    margin-top: -4em; /* Tablet margin-top */
  }
}

/* Mobile Landscape / Small Tablets */
/* 576px to 767.98px */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root {
    /* Caption */
    /* --font-size-caption: 0.75rem; */
    --font-size-caption-large: 0.875rem; /* 14px */
    /* --font-size-label: 0.95rem; */

    /* Body */
    --font-size-body-xs: 0.875rem; /* 14px (webring text) */
    --font-size-body-sm: 0.875rem; /* 14px */
    --font-size-body-md: 1rem; /* 16px (hero line 1, scroll text link) */
    /* --font-size-body-lg: 1.1rem; */
    /* --font-size-body-xl: 1.2rem; */

    /* Headings */
    --font-size-heading-xs: 1.0625rem; /* 17px (webring card title) */
    /* --font-size-heading-sm: 1.125rem; */
    /* --font-size-heading-md: 1.25rem; */
    /* --font-size-heading-lg: 1.5rem; */
    --font-size-heading-xl: 1.75rem; /* 28px (webring heading, scroll text line) */
    /* --font-size-heading-xxl: 1.8rem; */
    --font-size-heading-xxxl: 2rem; /* 32px (hero line 2/3) */

    /* Display */
    /* --font-size-display-xs: 2.25rem; */
    /* --font-size-display-sm: 2.375rem; */
    /* --font-size-display-md: 3rem; */
    /* --font-size-display-lg: 3.5rem; */
    /* --font-size-display-xl: 4.5rem; */

    /* Stats Card */
    /* --font-size-stats-plus-lg: 4rem; */
    --font-size-stats-plus-sm: 2.5rem; /* 40px */
    /* --font-size-stats-number-sm: 5rem; */
    --font-size-stats-number-md: 6rem; /* 96px */
    /* --font-size-stats-number-lg: 10rem; */

    /* Clip-Path Overrides for Mobile */
    --maeveport-clip-path-notch-depth: 4.375em;
    --maeveport-clip-path-notch-flat-end: 256px;
    --maeveport-clip-path-notch-bottom-coord: 326px;

    /* Angled Clip-Path Overrides for Mobile */
    --maeveport-clip-path-atl-height: 4.375em;
    --maeveport-clip-path-atl-start-offset: 7vw;
    --maeveport-clip-path-atl-width: 17vw;
  }

  .maeveport-clip-path-diagonal-notch {
    margin-top: -2.5em; /* Mobile margin-top */
  }
}

/* Mobile Portrait */
/* Up to 575.98px */
@media (max-width: 575.98px) {
  :root {
    /* Caption */
    /* --font-size-caption: 0.75rem; */
    --font-size-caption-large: 0.85rem; /* ~13.6px */
    /* --font-size-label: 0.95rem; */

    /* Body */
    --font-size-body-xs: 0.875rem; /* 14px (webring text) */
    --font-size-body-sm: 0.875rem; /* 14px */
    --font-size-body-md: 0.9rem; /* 14.4px (hero line 1) */
    /* --font-size-body-lg: 1.1rem; */
    --font-size-body-xl: 1rem; /* 16px (scroll text link) */

    /* Headings */
    --font-size-heading-xs: 1.0625rem; /* 17px (webring card title) */
    /* --font-size-heading-sm: 1.125rem; */
    /* --font-size-heading-md: 1.25rem; */
    /* --font-size-heading-lg: 1.5rem; */
    --font-size-heading-xl: 1.75rem; /* 28px (webring heading, scroll text line) */
    /* --font-size-heading-xxl: 1.8rem; */
    --font-size-heading-xxxl: 1.8rem; /* ~29px (hero line 2/3) */

    /* Display */
    /* --font-size-display-xs: 2.25rem; */
    /* --font-size-display-sm: 2.375rem; */
    /* --font-size-display-md: 3rem; */
    /* --font-size-display-lg: 3.5rem; */
    /* --font-size-display-xl: 4.5rem; */

    /* Stats Card */
    /* --font-size-stats-plus-lg: 4rem; */
    --font-size-stats-plus-sm: 2.5rem; /* 40px */
    --font-size-stats-number-sm: 5rem; /* 80px */
    /* --font-size-stats-number-md: 6rem; */
    /* --font-size-stats-number-lg: 10rem; */

    /* Clip-Path Overrides for Mobile */
    --maeveport-clip-path-notch-depth: 4.375em;
    --maeveport-clip-path-notch-flat-end: 256px;
    --maeveport-clip-path-notch-bottom-coord: 326px;

    /* Angled Clip-Path Overrides for Mobile */
    --maeveport-clip-path-atl-height: 4.375em;
    --maeveport-clip-path-atl-start-offset: 7vw;
    --maeveport-clip-path-atl-width: 17vw;
  }

  .maeveport-clip-path-diagonal-notch {
    margin-top: -2.5em; /* Mobile margin-top */
  }
}

/* GSAP ScrollSmoother Styles */
body.maeveport-smooth-scroll-active {
  overflow: hidden !important; /* Prevent double scrollbars */
}

#smooth-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#smooth-content {
  overflow: visible;
  width: 100%;
  /* Using will-change can sometimes improve performance for transform-based animations,
       but it should be used judiciously. Add it if scrolling feels laggy on some devices.
       Consider adding it via JS just before intensive scroll periods and removing after. */
  /* will-change: transform; */
}

/* Add further overrides for smaller mobile if needed, 
   e.g., @media (max-width: 767.98px) for mobile phones */

/* Panel Stack Container for layered background/foreground components */
.maeveport-panel-stack-container {
  position: relative;
  margin-top: 5rem; /* Add space above this container */
  /* Add any other necessary styling like padding or margins here if needed */
}

/* Heading Pattern for Reusable Blocks */
.maeveport-heading-pattern {
  font-size: var(--font-size-heading-xxxl);
  font-weight: 400;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 2rem;
  max-width: 60ch;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) and (max-width: 1299.98px) {
  .maeveport-heading-pattern {
    font-size: var(--font-size-heading-xxl);
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .maeveport-heading-pattern {
    font-size: var(--font-size-heading-xl);
  }
}

@media (max-width: 767.98px) {
  .maeveport-heading-pattern {
    font-size: var(--font-size-heading-lg);
    margin-bottom: 1.5rem;
    max-width: 90vw;
  }
}

/* New Clip-Path Class for Reusability */
.maeveport-clip-path-diagonal-notch {
  position: relative;
  overflow: hidden;
  will-change: clip-path;
  box-sizing: border-box;
  clip-path: polygon(
    0 0,
    var(--maeveport-clip-path-notch-flat-end) 0,
    var(--maeveport-clip-path-notch-bottom-coord)
      var(--maeveport-clip-path-notch-depth),
    100% var(--maeveport-clip-path-notch-depth),
    100% 100%,
    0 100%
  );
  padding-top: var(--maeveport-clip-path-notch-depth);
  margin-top: -6em; /* Default desktop margin-top */
}

/* New Angled Top-Left Clip-Path Class */
.maeveport-clip-path-angled-top-left {
  position: relative;
  overflow: hidden;
  will-change: clip-path;
  box-sizing: border-box;
  clip-path: polygon(
    0 var(--maeveport-clip-path-atl-height),
    calc(50% + var(--maeveport-clip-path-atl-start-offset))
      var(--maeveport-clip-path-atl-height),
    calc(
        50% + var(--maeveport-clip-path-atl-start-offset) +
          var(--maeveport-clip-path-atl-width)
      )
      0,
    100% 0,
    100% 100%,
    0 100%
  );
  padding-top: var(--maeveport-clip-path-atl-height);
}