/* ==========================================================================
   HDS Mobile Layer
   Heartland Digital Studio — Breakdance mobile remediation
   --------------------------------------------------------------------------
   Loaded last. Scoped to phone breakpoints except where noted.
   Modes are controlled by body classes set in the plugin settings:
     .hds-mode-safe        Layer 1 only
     .hds-mode-balanced    Layer 1 + 2
     .hds-mode-aggressive  Layer 1 + 2 + 3
   Per-element opt-outs (add as a custom class in Breakdance):
     .hds-keep-type        exclude from typography overrides
     .hds-keep-spacing     exclude from padding normalization
     .hds-keep-position    exclude from position flattening
     .hds-hide-phone       hide this element at phone
     .hds-show-phone       show only at phone
   ========================================================================== */


/* --------------------------------------------------------------------------
   TOKENS
   Values derived from the Pixels library distribution:
   padding median 54px / p90 100px, font-size median 18px / p90 40px.
   -------------------------------------------------------------------------- */

:root {
  /* Fluid type scale. Floors are phone-safe, ceilings match pack intent. */
  --hds-h1: clamp(2rem,    1.20rem + 3.40vw, 3.50rem);  /* 32px → 56px */
  --hds-h2: clamp(1.75rem, 1.15rem + 2.55vw, 2.75rem);  /* 28px → 44px */
  --hds-h3: clamp(1.375rem,1.00rem + 1.60vw, 2.00rem);  /* 22px → 32px */
  --hds-h4: clamp(1.25rem, 1.00rem + 1.05vw, 1.625rem); /* 20px → 26px */
  --hds-h5: clamp(1.125rem,0.98rem + 0.60vw, 1.375rem); /* 18px → 22px */
  --hds-h6: clamp(1rem,    0.93rem + 0.30vw, 1.125rem); /* 16px → 18px */
  --hds-body: clamp(1rem,  0.96rem + 0.17vw, 1.125rem); /* 16px → 18px */

  /* Phone vertical rhythm. Replaces the 54–400px desktop values. */
  --hds-sec-pad-lg: 3rem;    /* 48px */
  --hds-sec-pad-md: 2.5rem;  /* 40px */
  --hds-sec-pad-sm: 1.5rem;  /* 24px */
  --hds-gutter:     1.25rem; /* 20px side padding */
  --hds-gap:        1.25rem; /* 20px, down from 30px p75 */

  /* Tap targets — WCAG 2.5.5 target size */
  --hds-tap: 44px;
}


/* ==========================================================================
   LAYER 1 — SAFE
   Unambiguous correctness. No design judgment. Always on.
   ========================================================================== */

/* 1.1 Overflow guard.
   `clip` rather than `hidden` so position:sticky keeps working.
   This contains the symptom; use the debug tool to find the cause. */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* 1.2 Media never exceeds its container. */
img,
video,
svg,
iframe,
embed,
object,
canvas {
  max-width: 100%;
  height: auto;
}

/* 1.3 Long unbroken strings (URLs, emails) don't force horizontal scroll. */
.breakdance p,
.breakdance h1,
.breakdance h2,
.breakdance h3,
.breakdance h4,
.breakdance h5,
.breakdance h6,
.breakdance a,
.breakdance li {
  overflow-wrap: break-word;
}

/* 1.4 Tables and pre scroll inside themselves, not the page. */
.breakdance table,
.breakdance pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 767px) {

  /* 1.5 iOS auto-zooms any input under 16px on focus. This is the fix. */
  .breakdance input:not([type="checkbox"]):not([type="radio"]),
  .breakdance select,
  .breakdance textarea {
    font-size: 16px !important;
  }

  /* 1.6 Tap targets. */
  .breakdance input:not([type="checkbox"]):not([type="radio"]),
  .breakdance select,
  .breakdance button,
  .breakdance .breakdance-form-button,
  .breakdance .bde-button .button-atom {
    min-height: var(--hds-tap);
  }

  /* 1.7 background-attachment: fixed is broken on iOS. 85 instances found. */
  .breakdance [class*="bde-"],
  .breakdance section,
  .breakdance .section-container {
    background-attachment: scroll !important;
  }

  /* 1.8 Gap normalization. Library p75 is 30px, too wide when stacked. */
  .breakdance .bde-columns,
  .breakdance .bde-div,
  .breakdance .bde-section .section-container {
    row-gap: min(var(--hds-gap), 100%);
  }

  /* 1.9 Utility visibility classes. */
  .hds-hide-phone { display: none !important; }
}

@media (min-width: 768px) {
  .hds-show-phone { display: none !important; }
}


/* ==========================================================================
   LAYER 2 — BALANCED
   Typography and vertical rhythm. Flattens per-section type variation at
   phone in exchange for guaranteed readability. This is a deliberate trade:
   at 375px a consistent scale reads better than the desktop hierarchy.
   ========================================================================== */

@media (max-width: 767px) {

  .hds-mode-balanced .breakdance h1:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance h1:not(.hds-keep-type),
  .hds-mode-balanced .breakdance .bde-heading h1:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance .bde-heading h1:not(.hds-keep-type) {
    font-size: var(--hds-h1) !important;
    line-height: 1.15 !important;
    text-wrap: balance;
  }

  .hds-mode-balanced .breakdance h2:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance h2:not(.hds-keep-type),
  .hds-mode-balanced .breakdance .bde-heading h2:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance .bde-heading h2:not(.hds-keep-type) {
    font-size: var(--hds-h2) !important;
    line-height: 1.2 !important;
    text-wrap: balance;
  }

  .hds-mode-balanced .breakdance h3:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance h3:not(.hds-keep-type) {
    font-size: var(--hds-h3) !important;
    line-height: 1.25 !important;
  }

  .hds-mode-balanced .breakdance h4:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance h4:not(.hds-keep-type) {
    font-size: var(--hds-h4) !important;
    line-height: 1.3 !important;
  }

  .hds-mode-balanced .breakdance h5:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance h5:not(.hds-keep-type) {
    font-size: var(--hds-h5) !important;
  }

  .hds-mode-balanced .breakdance h6:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance h6:not(.hds-keep-type) {
    font-size: var(--hds-h6) !important;
  }

  /* Body copy floor. 10% of library base sizes are under 15px. */
  .hds-mode-balanced .breakdance .bde-text:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance .bde-text:not(.hds-keep-type),
  .hds-mode-balanced .breakdance p:not(.hds-keep-type),
  .hds-mode-aggressive .breakdance p:not(.hds-keep-type) {
    font-size: var(--hds-body) !important;
    line-height: 1.6 !important;
  }

  /* Vertical rhythm. Replaces desktop values up to 400px. */
  .hds-mode-balanced .breakdance .bde-section:not(.hds-keep-spacing) > .section-container,
  .hds-mode-aggressive .breakdance .bde-section:not(.hds-keep-spacing) > .section-container {
    padding-top: var(--hds-sec-pad-lg) !important;
    padding-bottom: var(--hds-sec-pad-lg) !important;
    padding-left: var(--hds-gutter) !important;
    padding-right: var(--hds-gutter) !important;
  }

  /* Nested containers get the smaller step so rhythm doesn't compound. */
  .hds-mode-balanced .breakdance .bde-div:not(.hds-keep-spacing),
  .hds-mode-aggressive .breakdance .bde-div:not(.hds-keep-spacing) {
    padding-left: min(var(--hds-gutter), 100%);
    padding-right: min(var(--hds-gutter), 100%);
  }

  /* Buttons go full width when stacked — biggest tap target you can give. */
  .hds-mode-balanced .breakdance .bde-button:not(.hds-keep-spacing) .button-atom,
  .hds-mode-aggressive .breakdance .bde-button:not(.hds-keep-spacing) .button-atom {
    width: 100%;
    justify-content: center;
  }
}


/* ==========================================================================
   LAYER 3 — AGGRESSIVE
   Flattens absolute positioning and negative margins at phone.
   6,035 abs/fixed elements and 2,094 negative margins in the library.
   Test before shipping — this is the layer most likely to change a design.
   ========================================================================== */

@media (max-width: 767px) {

  .hds-mode-aggressive .breakdance [class*="bde-"]:not(.hds-keep-position) {
    position: static !important;
  }

  /* Sticky headers and anything you explicitly opt out stay put. */
  .hds-mode-aggressive .breakdance .bde-header,
  .hds-mode-aggressive .breakdance .bde-header-builder,
  .hds-mode-aggressive .breakdance .breakdance-popup,
  .hds-mode-aggressive .breakdance .hds-keep-position,
  .hds-mode-aggressive .breakdance .hds-call-bar {
    position: revert !important;
  }

  .hds-mode-aggressive .breakdance [class*="bde-"]:not(.hds-keep-position) {
    margin-left: max(0px, var(--hds-reset-ml, 0px)) !important;
    margin-right: max(0px, var(--hds-reset-mr, 0px)) !important;
  }

  /* Transforms that shift horizontally are the other overflow source. */
  .hds-mode-aggressive .breakdance [class*="bde-"]:not(.hds-keep-position) {
    transform: none !important;
  }
}


/* ==========================================================================
   CONVERSION — STICKY CALL BAR
   Phone only. Add markup via a Breakdance Global Block or the plugin's
   auto-inject option.
   ========================================================================== */

.hds-call-bar { display: none; }

@media (max-width: 767px) {
  .hds-call-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1px;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 9999;
    background: var(--hds-call-bar-bg, #111);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -2px 12px rgb(0 0 0 / 0.18);
  }

  .hds-call-bar a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--hds-tap);
    padding: 0.875rem 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    color: var(--hds-call-bar-fg, #fff);
    background: var(--hds-call-bar-bg, #111);
  }

  .hds-call-bar a.is-primary {
    background: var(--hds-call-bar-accent, #c8102e);
  }

  /* Stop the bar covering the last of the page content. */
  body.hds-has-call-bar {
    padding-bottom: calc(var(--hds-tap) + 1.5rem + env(safe-area-inset-bottom));
  }
}


/* ==========================================================================
   DEBUG — append ?hds-debug=1 to any URL
   ========================================================================== */

.hds-debug-overflow * {
  outline: 1px solid rgb(255 0 0 / 0.35) !important;
}

.hds-debug-overflow .hds-overflow-culprit {
  outline: 3px solid #ff0 !important;
  background: rgb(255 0 0 / 0.15) !important;
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .breakdance *,
  .breakdance *::before,
  .breakdance *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   v1.1 ADDITIONS
   ========================================================================== */


/* --------------------------------------------------------------------------
   HOVER REVEAL SHIM
   Touch devices have no hover state, so any card that reveals content on
   hover shows nothing. `(hover: none)` targets the device capability rather
   than a screen width, so it also catches touch laptops and tablets.

   Usage: add the class `hds-reveal` to the CARD (the element that carries
   the :hover), not to the hidden child. Everything inside is forced visible.
   -------------------------------------------------------------------------- */

@media (hover: none) {

  .breakdance .hds-reveal,
  .breakdance .hds-reveal * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    max-height: none !important;
    clip-path: none !important;
    filter: none !important;
    pointer-events: auto !important;
  }

  /* Overlays that fade in on hover. */
  .breakdance .hds-reveal::before,
  .breakdance .hds-reveal::after,
  .breakdance .hds-reveal > *::before,
  .breakdance .hds-reveal > *::after {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Children collapsed to zero height on hover-out. */
  .breakdance .hds-reveal [style*="height: 0"],
  .breakdance .hds-reveal [style*="height:0"] {
    height: auto !important;
  }

  /* Kill the transition so nothing animates into place on load. */
  .breakdance .hds-reveal,
  .breakdance .hds-reveal * {
    transition: none !important;
  }

  /* Opt out of the shim on a specific child. */
  .breakdance .hds-reveal .hds-keep-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}


/* --------------------------------------------------------------------------
   CARD OVERFLOW
   Fixed card heights from desktop clip content once type wraps at phone.
   Add `hds-card-auto` to the card wrapper.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {

  .breakdance .hds-card-auto,
  .breakdance .hds-card-auto > *,
  .breakdance .hds-card-auto .bde-div,
  .breakdance .hds-card-auto .bde-image {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
  }

  /* Card titles need a tighter ceiling than page headings. */
  .breakdance .hds-card-auto h1,
  .breakdance .hds-card-auto h2,
  .breakdance .hds-card-auto h3,
  .breakdance .hds-card-auto h4,
  .breakdance .hds-card-title {
    font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem) !important; /* 18px → 24px */
    line-height: 1.25 !important;
    text-wrap: balance;
    hyphens: auto;
  }

  /* Eyebrow / kicker text above a card title. */
  .breakdance .hds-card-eyebrow {
    font-size: 0.8125rem !important; /* 13px */
    line-height: 1.3 !important;
    letter-spacing: 0.02em;
  }
}

/* Truncate rather than overflow, where truncation is acceptable. */
.hds-clamp-2,
.hds-clamp-3,
.hds-clamp-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hds-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.hds-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.hds-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }


/* --------------------------------------------------------------------------
   EMOJI FALLBACK
   Custom webfonts carry no emoji glyphs. If the font stack has no emoji
   fallback, the character renders as a blank box or tofu.
   Wrap the emoji in a span with class `hds-emoji`.
   -------------------------------------------------------------------------- */

.hds-emoji,
.breakdance .hds-emoji {
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji",
    "Android Emoji",
    "EmojiSymbols",
    sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1;
  display: inline-block;
  vertical-align: -0.1em;
}

/* WordPress converts emoji to <img class="emoji">. Keep them inline-sized. */
.breakdance img.emoji,
.breakdance img.wp-smiley {
  display: inline-block !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 0.07em !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  vertical-align: -0.1em !important;
  background: none !important;
  max-width: 1em !important;
}