/* responsive.css — All responsive / mobile rules for the HAP theme.
 *
 * Breakpoint strategy (desktop-down):
 *   1024px — Tablet: multi-col grids → 2-col, sidebar stacks
 *    900px — Mobile menu: header collapses, nav drawer, touch targets
 *    768px — Phone: 2-col → 1-col, cards/team/footer stack
 *    480px — Small phone: overflow prevention, compact footer
 *    Landscape — Short viewport: reduced section padding, compact heroes
 *
 * Fluid scaling via clamp() tokens in tokens.css handles most intermediate
 * sizes without explicit breakpoints.
 */


/* ─── Tablet (1024px) ──────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /* Card grids: 3/4-col → 2-col */
  .section-cards__grid--cols-3,
  .section-cards__grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Blog preview: 3-col → 2-col */
  .section-blog-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Events: 3-col → 2-col */
  .section-events__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer: 3-col → company info full-width + 2-col bottom row */
  .site-footer__columns {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__col:first-child {
    grid-column: 1 / -1;
  }

  /* Posts sidebar: stack (sidebar too narrow at 25vw) */
  .section-posts__inner {
    grid-template-columns: 1fr;
  }

  /* Layout-with-sidebar: stack */
  .layout-with-sidebar {
    flex-direction: column;
  }
  .layout-with-sidebar__sidebar {
    width: 100%;
    position: static;
  }

  /* Badge row: tighten the huge gap */
  .section-badges__row {
    gap: var(--hap-space-lg);
  }

  /* Sub-menu: safety valve for edge-of-viewport overflow */
  .site-nav__list .sub-menu {
    min-width: min(220px, 50vw);
  }
}


/* ─── Mobile Menu + Touch Targets (900px) ──────────────────────────────── */

@media (max-width: 900px) {
  /* ── Header collapses at 900px instead of 768px ── */
  .site-header__toggle {
    display: flex;
    width: 44px;
    height: 44px;
  }

  /* Narrower bars, 44px touch target preserved */
  .site-header__toggle span {
    width: 70%;
    margin-left: auto;
  }

  /* Right-align search + hamburger */
  .site-header__actions {
    margin-left: auto;
  }

  .site-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75vw;
    max-width: 400px;
    height: 100vh;
    height: -webkit-fill-available;
    height: 100dvh;
    background: var(--hap-white);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--hap-space-2xl) var(--hap-space-md);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    transition: right var(--hap-transition);
    z-index: 200;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav.is-open {
    right: 0;
  }

  /* Close button (X) shown on drawer */
  .site-nav__close {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hap-space-sm);
  }

  /* Top-level nav: bolder, larger */
  .site-nav__list > li > a {
    font-size: var(--hap-text-lg);
    font-weight: var(--hap-weight-bold);
  }

  /* Sub-menu in-flow rules (always apply on mobile).
     Visibility is now controlled by `.is-open` accordion state below —
     `display: block` is removed here so submenus are hidden by default. */
  .site-nav__list .sub-menu {
    position: static;
    box-shadow: none;
    min-width: 0;
    padding-left: var(--hap-space-sm);
    border-radius: 0;
  }

  /* ── Drawer containment: prevent horizontal scroll from long titles ── */
  .site-nav { overflow-x: hidden; }
  .site-nav__list,
  .site-nav__list > li,
  .site-nav__list .sub-menu { width: 100%; }
  /* Both selectors needed: components.css's `.site-nav__list .sub-menu a`
     (specificity 0,2,1) sets nowrap on submenu links, which beats a plain
     `.site-nav__list a` rule (0,1,1). Match the higher-specificity one
     explicitly so L2/L3 titles wrap instead of getting truncated. */
  .site-nav__list a,
  .site-nav__list .sub-menu a {
    white-space: normal;
    overflow-wrap: break-word;
  }

  /* Recursive expansion: any parent <li> at any depth, when .is-open,
     shows its DIRECT submenu child (child combinator scopes per-level). */
  .site-nav__list .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }

  /* Reset the desktop L2 flyout caret (›) and flex layout from
     components.css so the new <button> caret is the only indicator
     and the link doesn't stretch with space-between. */
  .site-nav__list .sub-menu .menu-item-has-children > a {
    display: block;
  }
  .site-nav__list .sub-menu .menu-item-has-children > a::after {
    content: none;
  }

  /* Each parent <li> at any depth provides a positioning context for the
     absolute caret button. The submenu stays in normal flow below the link. */
  .site-nav__list li.menu-item-has-children {
    position: relative;
  }
  /* Reserve right-edge space so long titles wrap before they hit the caret. */
  .site-nav__list li.menu-item-has-children > a {
    padding-right: 44px;
  }

  /* Caret button shown on mobile (default is display:none, see below).
     Positioned absolutely at the top-right of its parent <li>, which has
     `position: relative` above. inline-flex still centers the inner glyph. */
  .submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    /* Top-align the icon against the <li> top instead of centering it in
       the 44px box. Combined with matching line-height on the icon below,
       the icon's line-box becomes identical to the link's first line-box
       so the glyphs share a baseline naturally — no calc/magic numbers. */
    align-items: flex-start;
    justify-content: center;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
  }
  .submenu-toggle__icon {
    display: block;
    font-size: var(--hap-text-lg);
    /* Match link line-height (body inherits 1.6) so icon's line-box equals
       the link's first line-box. */
    line-height: 1.6;
    /* ⌄ U+2304 renders in the lower ~70% of its em-box (descender area)
       while letter glyphs center around the x-height — pull the icon up
       roughly 30% of font-size to align the visible glyphs. */
    margin-top: calc(var(--hap-text-lg) * -0.3);
    transition: transform 200ms ease;
  }
  .site-nav__list .menu-item-has-children.is-open > .submenu-toggle .submenu-toggle__icon {
    transform: rotate(-90deg);
  }

  /* Sub-menu carets sit on links that (a) have 0.5rem top padding and
     (b) render at text-base instead of text-lg. The button is positioned
     against the <li>, so it must shift down by the link's top padding,
     and the icon's font-size + margin compensation must re-derive from
     text-base. Without this, the caret floats ~12px above the link. */
  .site-nav__list .sub-menu .submenu-toggle {
    top: 0.5rem;
  }
  .site-nav__list .sub-menu .submenu-toggle__icon {
    font-size: var(--hap-text-base);
    margin-top: calc(var(--hap-text-base) * -0.3);
  }

  /* Sub-menu items: lighter weight */
  .site-nav__list .sub-menu a {
    font-weight: var(--hap-weight-regular);
    font-size: var(--hap-text-base);
  }

  .site-header__actions .btn {
    display: none;
  }

  /* ── Mobile drawer CTAs (duplicated from header actions) ── */
  .site-nav__cta {
    display: flex;
    flex-direction: column;
    gap: var(--hap-space-sm);
    margin-top: auto;
    padding-top: var(--hap-space-lg);
    width: 100%;
  }

  .site-nav__cta .btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    display: inline-flex;
  }

  /* ── Search overlay: same top dropdown on mobile, full-width form ── */
  .search-overlay__form {
    max-width: 100%;
  }

  .search-overlay__close {
    position: static;
    margin-left: var(--hap-space-xs);
  }

  /* ── Body scroll lock when drawer is open ── */
  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }

  /* ── Two-col sections stack ── */
  .section-two-col__inner {
    grid-template-columns: 1fr;
  }
  .section-two-col__image {
    order: -1;
  }

  /* ── Form grids stack ── */
  .section-form__grid {
    grid-template-columns: 1fr;
  }
  .section-form__field--half {
    grid-column: span 1;
  }
  .form-placeholder {
    grid-template-columns: 1fr;
  }

  /* ── Signup form stacks ── */
  .section-dark--signup .section-dark__form {
    flex-direction: column;
  }

  /* ── Touch targets (44px minimum) ── */
  .site-header__search {
    width: 44px;
    height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .site-nav__list .sub-menu a {
    padding: 0.75rem var(--hap-space-sm);
    min-height: 44px;
  }

  .sidebar-nav__link {
    min-height: 44px;
  }

  .sidebar-categories__link {
    min-height: 44px;
  }

  .sidebar-recent__list li {
    min-height: 44px;
  }

  .blog-signup__input {
    padding: 0.75rem 1rem;
  }

  .section-dark--signup .section-dark__input {
    padding: 0.75rem 1rem;
  }

  .form-placeholder__field {
    padding: 0.875rem 1rem;
  }

  .section-form__field input,
  .section-form__field select,
  .section-form__field textarea {
    padding: 0.875rem 1rem;
  }

  /* ── Prevent clamp() floor overflow on narrow viewports ── */
  .section-hero__subtitle {
    max-width: 100%;
  }
}

/* Hide drawer CTAs on desktop */
.site-nav__cta {
  display: none;
}

/* Hide mobile submenu toggle button on desktop (JS injects at all widths). */
@media (min-width: 901px) {
  .submenu-toggle {
    display: none;
  }
}


/* ─── Phone (768px) ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Cards: 2-col → 1-col */
  .section-cards__grid--cols-2,
  .section-cards__grid--cols-3,
  .section-cards__grid--cols-4 {
    grid-template-columns: 1fr;
  }

  /* Blog preview: 2-col → 1-col */
  .section-blog-preview__grid {
    grid-template-columns: 1fr;
  }

  /* Post cards stack on mobile */
  .post-card {
    flex-direction: column;
  }

  .post-card__image {
    width: 100%;
  }

  .post-card__image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
  }

  /* Events: 2-col → 1-col */
  .section-events__grid {
    grid-template-columns: 1fr;
  }

  /* Team cards stack */
  .team-card {
    flex-direction: column;
  }

  .team-card__photo {
    width: 100%;
    max-width: 280px;
    height: auto;
    aspect-ratio: 200 / 267;
  }

  /* Footer: 2-col → 1-col */
  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: var(--hap-space-lg);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hap-space-xs);
  }

  /* Mobile body + CTA text size */
  .section-content__body,
  .section-dark__body,
  .section-two-col__body {
    font-size: var(--hap-text-base);
    line-height: var(--hap-leading-relaxed);
  }

  .btn {
    font-size: var(--hap-text-base);
  }

  /* Full-width email inputs on mobile */
  .section-dark--signup .section-dark__input,
  .blog-signup__input {
    width: 100%;
  }

  /* CTA buttons: centered and full-width on mobile */
  .section-content .btn,
  .section-two-col__text .btn,
  .section-dark .btn,
  .entry-content .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* Footer text size on mobile */
  .site-footer__address,
  .site-footer__contact,
  .site-footer__menu a,
  .site-footer__copy,
  .site-footer__legal a {
    font-size: var(--hap-text-base);
  }
}


/* ─── Small Phone (480px) ──────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Allow button text to wrap on very narrow screens */
  .btn {
    white-space: normal;
    text-align: center;
  }

  /* Footer legal: stack vertically */
  .site-footer__bottom {
    gap: var(--hap-space-xs);
  }

  /* Tighten footer column gap */
  .site-footer__columns {
    gap: var(--hap-space-md);
  }

  .site-footer {
    padding-top: var(--hap-space-lg);
  }

  .site-footer__heading {
    font-size: var(--hap-text-base);
    margin-bottom: var(--hap-space-sm);
  }

  /* Badge row: reduce gap further */
  .section-badges__row {
    gap: var(--hap-space-md);
  }

  /* Blog/events headers: stack title + "View All" */
  .section-blog-preview__header,
  .section-events__header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hap-space-xs);
  }
}


/* ─── Page-Specific Overrides ─────────────────────────────────────────── */

/* Contact Us — tighter hero→form + body→form spacing */
.page-contact-us .section-form {
  padding-top: var(--hap-space-xl);
}

/* RCM page — reduce section spacing */
.page-revenue-cycle-management .section-content {
  padding: var(--hap-space-lg) 0;
}


/* ─── Landscape Phones ─────────────────────────────────────────────────── */

@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --hap-section-pad: clamp(32px, 5vh, 64px);
  }

  .section-hero {
    min-height: 50vh;
  }

  .site-nav {
    width: min(320px, 50vw);
  }
}


/* ─── Hero mobile object-position override ─────────────────────────────── */
/* At narrow viewports, cover-scaling flips cropping axis from vertical (desktop)
   to horizontal (mobile). Pages can supply `bg_position_mobile` to tune the
   mobile crop; pages without it fall through to the desktop `--obj-pos`. */

@media (max-width: 48rem) {
  .section-hero__bg {
    object-position: var(--obj-pos-mobile, var(--obj-pos, center));
  }
}