/*
Theme Name: Eloria Health
Theme URI: https://eloriahealth.com
Author: Eloria Health Inc.
Description: A modern block theme for Eloria Health Inc. — scientific advisory for biotechnology and digital health innovation. Editorial typography and the brand palette (navy, science teal, off-white) taken as literals from the Eloria Health Design System. Built for the Site Editor: every section ships as an editable block pattern.
Version: 1.3.2
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eloriahealth
Tags: block-patterns, full-site-editing, one-column, two-columns, custom-colors, custom-logo, custom-menu, editor-style, featured-images, threaded-comments, wide-blocks, block-styles, style-variations
*/

/* ============================================================
   Design tokens
   The palette + fonts live in theme.json, so style variations
   re-skin everything below by swapping presets. These short
   aliases keep the component CSS readable.

   Every colour in that palette is a literal from the Eloria Health
   Design System (tokens/colors.css, light mode), which in turn takes
   its primitives from the v1.0 logo package. They are hexes, not
   oklch, on purpose: the brand ships exact values, and converting
   them would leave the site a shade off its own logo.
   ============================================================ */
:root {
  --bg: var(--wp--preset--color--bg);
  --surface: var(--wp--preset--color--surface);
  --surface-2: var(--wp--preset--color--surface-2);
  --ink: var(--wp--preset--color--ink);
  --ink-soft: var(--wp--preset--color--ink-soft);
  --ink-faint: var(--wp--preset--color--ink-faint);
  --line: var(--wp--preset--color--line);
  --line-strong: var(--wp--preset--color--line-strong);
  --accent: var(--wp--preset--color--accent);
  --accent-strong: var(--wp--preset--color--accent-strong);
  --accent-soft: var(--wp--preset--color--accent-soft);
  --accent-alt: var(--wp--preset--color--accent-alt);
  --on-accent: var(--wp--preset--color--on-accent);

  --font-display: var(--wp--preset--font-family--display);
  --font-body: var(--wp--preset--font-family--body);
  --font-mono: var(--wp--preset--font-family--mono);

  --gutter: clamp(24px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 112px);
  --radius-card: 20px;
}

/* ---------- base ---------- */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: hidden would create a scroll container and break the
     sticky founder column. */
  overflow-x: clip;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }

/* Editorial eyebrow — a mono kicker with a rule, used above section titles.
   Apply to any paragraph via the "Eyebrow" block style. */
.is-style-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 1.25rem;
}
.is-style-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  flex: none;
  background: var(--accent);
  transform: translateY(-0.32em);
}
.is-style-eyebrow.has-no-rule::before { display: none; }

/* Lede — the paragraph under a section title. Same size as body copy; the
   distinction is colour. No max-width: as a direct child of a constrained group
   WordPress would centre the narrower block, indenting it from the copy around
   it. In section heads the intro runs the full width of the band — see
   `.eh-section__head > .is-style-lede`. */
.is-style-lede {
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: -0.006em;
}

/* ============================================================
   HEADER / NAVIGATION
   ============================================================ */
/* Sticky has to live on the template-part wrapper, not on .eh-header: a sticky
   element only travels within its containing block, and .eh-header's parent is
   exactly its own height — so sticking it there let it scroll away. */
.wp-site-blocks > header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.admin-bar .wp-site-blocks > header { top: 32px; }

.eh-header {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
/* The frosted backdrop lives on a pseudo-element, not on .eh-header itself:
   `backdrop-filter` makes an element a containing block for fixed-position
   descendants, which trapped the mobile overlay menu inside the 76px header
   instead of letting it cover the viewport. */
.eh-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  transition: background 0.3s ease;
}
.eh-header > * {
  position: relative;
  z-index: 1;
}
.eh-header.is-scrolled { border-bottom-color: var(--line); }
.eh-header > .wp-block-group { min-height: 76px; }
/* The two lockups are sized on different axes: the horizontal one by height so
   it fits the 76px bar, the stacked one by width so it doesn't tower over the
   footer columns. Intrinsic width/height attributes are on the <img> so the SVGs
   reserve space before they load. */
.eh-logo { margin: 0; }
.eh-logo a { display: block; }
/* The height is the default for a lockup nobody has sized — the theme's own SVG.
   Sizing one in the editor writes an inline `width:…;height:auto` onto the img,
   which outranks this, and that is correct: the size of the logo is the editor's
   decision to make.

   The ceiling is a `max-width` rather than an !important height on purpose. It
   constrains a different property than the one the editor writes, so the two do
   not fight: any width set there still applies, right up to the cap, and the
   height follows the aspect ratio on its own. (A `max-height` cannot do this —
   against a definite inline width it clamps the height and leaves the width
   alone, which squashes the lockup.) The cap is only there so a 2400px original
   dropped in at full size cannot run away with the bar. */
.eh-header .eh-logo img {
  /* Tops out where the site already sits: the lockup uploaded to the media
     library was set to 237px wide, which is 94px tall, and this renders the
     theme's own SVG of the same artwork at the same size. Clearing the header's
     stored customization therefore changes the file being served and nothing
     that can be seen. Change the 94px to resize it — here rather than in the
     Site Editor, because saving the header there snapshots the whole part into
     the database again and the pattern stops being what the site shows. */
  height: clamp(52px, 6.5vw, 94px);
  width: auto;
  max-width: min(320px, 34vw);
}

.eh-header .wp-block-navigation-item__content {
  padding: 9px 14px;
  border-radius: 9px;
  color: var(--ink-soft);
  transition: color 0.18s ease, background 0.18s ease;
}
.eh-header .wp-block-navigation-item__content:hover,
.eh-header .wp-block-navigation-item__content:focus {
  color: var(--ink);
  background: var(--surface-2);
  text-decoration: none;
}
.eh-header .wp-block-navigation .wp-block-navigation__submenu-icon { opacity: 0.55; }

/* dropdown.
   Core sizes the open submenu with
   `.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"]
   ~ .wp-block-navigation__submenu-container { min-width: 200px }` — four classes
   and an attribute — so the width has to be set through an equally specific
   selector or the labels hyphenate at 200px. */
.eh-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
.eh-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
.eh-header .wp-block-navigation__submenu-container {
  /* wide enough for the two-line descriptions without hyphenating the labels */
  min-width: 340px;
  width: auto;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px -22px rgb(0 0 0 / 0.4), 0 4px 12px -8px rgb(0 0 0 / 0.25);
}
.eh-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100%;
}
/* Core lays submenu links out as a flex row so an icon can sit beside the label,
   which puts the label and the description side by side, where they collide. The
   long selector mirrors core's own — its rule is
   `.wp-block-navigation .has-child .wp-block-navigation__submenu-container >
   .wp-block-navigation-item > .wp-block-navigation-item__content` — so this wins
   on specificity rather than with !important. */
.eh-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content,
.eh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border-radius: 9px;
  color: var(--ink);
}
.eh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
  display: block;
  font-weight: 600;
  white-space: normal;
}
.eh-header .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-faint);
  margin-top: 3px;
  white-space: normal;
}

/* ============================================================
   SECTION SCAFFOLDING
   ============================================================ */
.eh-section { padding-block: var(--section-y); }
.eh-section--tint { background: var(--surface-2); }
/* Anchor targets must clear the sticky header, or a "#about" jump parks the
   heading underneath it. */
.eh-section[id],
.eh-hero[id],
.eh-svc[id] { scroll-margin-top: 96px; }
.admin-bar .eh-section[id],
.admin-bar .eh-hero[id],
.admin-bar .eh-svc[id] { scroll-margin-top: 128px; }
/* The measure lives on the children, not the wrapper: WordPress centres every
   direct child of a constrained group with `margin-inline: auto !important`, so
   a narrow wrapper would centre the whole heading block instead of keeping it
   flush left. Children of this flow group get no auto margins. */
.eh-section__head { margin-bottom: clamp(40px, 5vw, 64px); }
.eh-section__head > * { max-width: 60ch; }
/* The section intro is the exception: it reads as a full-width statement across
   the band rather than a column of copy, so it takes the wide measure. */
.eh-section__head > .is-style-lede { max-width: none; }

/* Type scale.
   Body copy is one size — the hero's, 19px — set once on the document in
   theme.json so anything new inherits it. Cards, pillars, the founder bio and
   post content all read at that size; none of them restate it. The only
   exceptions are things that are not body copy: mono kickers at 12px, UI chrome
   (navigation, buttons) at 16px, and small print in the footer at 14px.
   The lede is the same size as body and separates itself by colour instead. */
.eh-founder__body p,
.eh-prose p,
.eh-prose li,
.eh-svc__body p,
.eh-svc__list li,
.eh-pillars p {
  line-height: 1.6;
}

/* Now identical in size to body copy; the style still carries the muted colour
   and the reading measure for section intros. */
.is-style-lede { font-size: var(--wp--preset--font-size--large); }

/* ============================================================
   HERO
   ============================================================ */
.eh-hero { padding-block: clamp(56px, 8vw, 104px) clamp(56px, 7vw, 96px); }
.eh-hero .wp-block-columns { align-items: center; gap: clamp(40px, 6vw, 84px); }
.eh-hero h1 { max-width: 20ch; }
.eh-hero__lede { max-width: 52ch; }
.eh-hero .wp-block-buttons { gap: 14px; margin-top: 0.5rem; }

/* Lead visual — the photograph, or the generated SVG artwork if it is restored.
   Both get the same portrait card treatment. */
.eh-hero__media { margin: 0; }
.eh-hero__media img,
.hero__art {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  overflow: hidden;
}

/* ============================================================
   ABOUT / FOUNDER
   ============================================================ */
.eh-founder { align-items: flex-start; gap: clamp(36px, 5vw, 72px); }
.eh-founder__aside { position: sticky; top: 104px; }
.admin-bar .eh-founder__aside { top: 136px; }
.eh-founder__aside .wp-block-image { margin-bottom: 22px; }
.eh-founder__aside .wp-block-image img {
  width: 100%;
  /* the source portrait is 599px wide — don't upscale past its sharp size */
  max-width: 440px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* The source has 79px of headroom above her hair; a centred 4:5 crop eats
     almost all of it and the border lands on her head. Biasing the crop window
     upwards keeps ~25px of air between the top edge and her hair. */
  object-position: center 30%;
  border-radius: var(--radius-card);
}
.eh-founder__role {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.eh-founder__body > p { color: var(--ink-soft); }
.eh-founder__body > h3 {
  margin-top: 1.5rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}
.eh-founder__body > h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ============================================================
   SERVICE CARDS
   ============================================================ */
.eh-services .wp-block-columns { gap: 24px; }
.eh-svc {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.eh-svc:hover { border-color: var(--accent); transform: translateY(-3px); }
.eh-svc > .wp-block-image { margin: 0; }
.eh-svc > .wp-block-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.eh-svc__body { padding: 32px; }
.eh-svc__body > * + * { margin-top: 16px; }
.eh-svc__body p { color: var(--ink-soft); }
/* Element + class: `.eh-svc__body p` above would otherwise win on specificity
   and render this mono kicker at body size. */
p.eh-svc__label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

/* "Areas of support" bullets */
.eh-svc__list { list-style: none; padding: 0; margin: 0; }
.eh-svc__list li {
  position: relative;
  padding-left: 18px;
  color: var(--ink-soft);
}
.eh-svc__list li + li { margin-top: 16px; }
.eh-svc__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent);
}
.eh-svc__list strong { color: var(--ink); font-weight: 600; }
:root {
  --eh-arrow: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="black" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 8h9M8.5 4l4 4-4 4"/></svg>');
}

/* ============================================================
   APPROACH PILLARS
   ============================================================ */
.eh-pillars .wp-block-column > * + * { margin-top: 14px; }
.eh-pillar__mark {
  width: 68px;
  height: 68px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
}
/* The glyphs are line drawings, so they need to fill more of the chip than a
   filled icon would to read at all — the helix in particular is only a third of
   its viewBox wide. */
.eh-pillar__mark svg { width: 40px; height: 40px; }
.eh-pillars p { color: var(--ink-soft); }

/* ============================================================
   CTA BAND
   ============================================================ */
.eh-cta {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 26px;
  padding: clamp(48px, 6vw, 80px);
  text-align: center;
}
.eh-cta > * + * { margin-top: 24px; }
.eh-cta h2 {
  color: var(--on-accent);
  font-size: clamp(2rem, 3.6vw, 3rem);
  max-width: 20ch;
  margin-inline: auto;
}
/* Classed, not `.eh-cta p` — an element-level rule here outranks the single-class
   .is-style-eyebrow selector and silently resized the kicker. */
.eh-cta__body {
  color: color-mix(in oklab, var(--on-accent) 86%, transparent);
  max-width: 60ch;
  margin-inline: auto;
  font-size: var(--wp--preset--font-size--large);
  line-height: 1.55;
}
.eh-cta .is-style-eyebrow { justify-content: center; color: inherit; }
.eh-cta .is-style-eyebrow::before { background: color-mix(in oklab, var(--on-accent) 70%, transparent); }
.eh-cta .wp-block-buttons { justify-content: center; }
.eh-cta .wp-block-button__link {
  background: var(--on-accent);
  border-color: var(--on-accent);
  color: var(--accent-strong);
}
.eh-cta .wp-block-button__link:hover {
  background: color-mix(in oklab, var(--on-accent) 88%, white);
  color: var(--accent-strong);
}

/* the booking panel, on the Discovery call page */
.eh-booking-mount { text-align: center; }

/* ============================================================
   FOOTER
   ============================================================ */
/* Dark navy footer.
   Rather than restyling each child, this re-points the token aliases to the
   design system's dark-mode roles for this one section — every descendant
   already reads them, so the whole block flips and nothing else on the page is
   affected. Values are the brand primitives from the v1.0 logo package
   (Eloria Health Design System → tokens/colors.css, [data-mode="dark"]).
   No border-top: the colour change is the delineation. */
.eh-footer {
  --bg: #071b43;            /* eloria-navy */
  --surface: #0b234e;       /* midnight navy */
  --surface-2: #09295a;     /* orbit navy */
  --ink: #f7faf9;           /* off-white */
  --ink-soft: #c2d0d6;
  --ink-faint: #8c9dad;
  --line: #17325f;
  --line-strong: #24406e;
  /* Eucalyptus, not science teal: the light-mode accent is too dark to read
     against navy. */
  --accent: #6d9789;
  --accent-strong: #8ab0a3;
  --accent-soft: #12335a;
  --on-accent: #071b43;

  background: var(--bg);
  color: var(--ink);
  padding-block: 72px 44px;
}
.eh-footer .eh-logo img {
  width: clamp(104px, 11vw, 132px);
  height: auto;
}
.eh-footer__tagline { color: var(--ink-soft); font-size: 0.875rem; max-width: 32ch; }
/* "Stay connected": icon-led rows for LinkedIn, email and where we are. The
   circular chips are the same treatment as the approach pillars, so the two
   ends of the page rhyme. */
.eh-connect {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.eh-connect li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.eh-connect a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
  transition: color 0.18s ease;
}
.eh-connect a:hover { color: var(--accent-strong); }
.eh-connect__icon {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent-strong);
  border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.eh-connect__icon svg { width: 16px; height: 16px; }
/* A filled glyph carries more ink than a 1.4-weight outline at the same box, so
   the brand mark sits a little smaller to look the same size beside the others. */
.eh-connect__icon--solid svg { width: 14px; height: 14px; }
.eh-connect a:hover .eh-connect__icon {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.eh-footer h2, .eh-footer h3, .eh-footer .wp-block-heading {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  margin-bottom: 16px;
}
.eh-footer .wp-block-navigation__container {
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}
.eh-footer .wp-block-navigation-item__content {
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.eh-footer .wp-block-navigation-item__content:hover { color: var(--accent-strong); }
.eh-footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  color: var(--ink-faint);
}
.eh-footer__bottom p {
  font-size: 0.8125rem;
}

/* ============================================================
   EDITORIAL CONTENT (posts / pages)
   ============================================================ */
/* Wide banner image for a page — same card treatment as the hero and cards. */
.eh-banner { margin: 0 0 clamp(28px, 4vw, 44px); }
.eh-banner img {
  display: block;
  width: 100%;
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
}
.eh-prose > * + * { margin-top: 1.4rem; }
.eh-prose p, .eh-prose li { color: var(--ink-soft); }
.eh-prose h2, .eh-prose h3 { margin-top: 2.4rem; }
.eh-prose blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--ink);
}
.eh-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.eh-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px;
  background: var(--surface);
  transition: border-color 0.25s ease;
}
.eh-card:hover { border-color: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 940px) {
  .eh-founder__aside { position: static; }
  /* 360 rather than 320: below that the 30% crop bias no longer clears her hair.
     Through min() rather than flat, because the editor writes an inline width on
     the portrait and 360px plus the page padding is wider than a 375px phone —
     which is where the whole page picked up a horizontal scroll. */
  .eh-founder__aside .wp-block-image img { max-width: min(360px, 100%); }
  .eh-hero__media img,
  .hero__art { aspect-ratio: 16 / 11; }
}
@media (max-width: 781px) {
  /* core stacks columns here; keep the card rhythm intact */
  .eh-svc__body { padding: 26px; }
  .eh-cta h2 { max-width: none; }
}
/* 600px is where core swaps the navigation for the menu button, so it is also
   where the bar stops being three comfortable things and becomes three tight
   ones: lockup, menu button, "Get in touch". The row cannot wrap — it is one
   flex line by design, since a header that reflows into two rows on a phone
   pushes the page down every time it sticks. Shrinking the lockup is what buys
   the button its room. */
@media (max-width: 600px) {
  .eh-header > .wp-block-group { min-height: 64px; gap: 12px; }
  /* A ceiling, not a size: a lockup set smaller than this in the editor stays
     smaller. Relative as well as absolute, because the room left over is what
     matters — 26vw is 83px on a 320px screen and 97px on a 375px one, which in
     both cases clears the menu button, "Get in touch" and both gutters.

     `height: auto` is load-bearing. Width has to be the dimension in charge for
     max-width to take the height down with it; leave the height definite, as
     the desktop rule sets it, and the cap squeezes the width alone and squashes
     the lockup — 83 x 52 where 83 x 33 was wanted. */
  .eh-header .eh-logo img {
    height: auto;
    max-width: min(110px, 26vw);
  }
  .eh-header .wp-element-button {
    padding-inline: 16px;
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  /* The 340px set earlier is for the desktop hover panel. Inside the mobile
     overlay the same element is simply wider than the phone it is on, and takes
     the page with it. Same selector list, or the specificity there wins. */
  .eh-header .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
  .eh-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container,
  .eh-header .wp-block-navigation__submenu-container {
    min-width: 0;
    width: 100%;
    box-shadow: none;
  }
}

/* ============================================================
   MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}