/*
 * density.css — visual density overrides
 * Loaded AFTER oxpins.css and all @stack('css') pushes so these rules win.
 * Two breakpoint blocks:
 *   - (min-width: 1200px)            : desktop
 *   - (min-width: 992px) and (max-width: 1199px) : small desktop / large tablet
 * Mobile (≤991px) is intentionally untouched.
 */

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP  ≥ 1200px
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {

  /* ── Header top bar ──────────────────────────────────────────── */
  .main-menu-two__right-top {
    padding-top: 6px;
    padding-bottom: 12px;
  }

  .main-menu-two__volunteers-icon {
    height: 36px;
    width: 36px;
  }

  /* ── Nav bar ─────────────────────────────────────────────────── */
  .main-menu .main-menu__list > li {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  /* Prevent nav labels from wrapping at desktop widths */
  .main-menu .main-menu__list > li > a {
    white-space: nowrap;
  }

  /* Donate Now stays on one line */
  .las-donate-btn,
  .main-menu-two__btn {
    white-space: nowrap;
  }

  /* Controls row: flex alignment (global rule in GLOBAL section below
     also covers 992-1199px; this block retains the canonical definition). */
  .las-search-btn {
    margin-right: 4px;
  }

  /* Auth avatar wrapper: desktop spacing only — keeps the avatar from
     abutting the search icon at ≥1200px. Global styles handle all other
     widths. */
  .las-account-menu--authenticated {
    margin-left: 14px;
  }

  /* ── Homepage hero — allow next section to peek at 1440×900 ──── */
  /* Base: 185/190px (no oxpins ≥1200px override for container).
     Title base in oxpins ≥1200px: 75px / 80px → compressed here. */
  .main-slider-two .container {
    padding-top: 90px;
    padding-bottom: 100px;
  }

  .main-slider-two__title {
    font-size: clamp(50px, 4.25vw, 68px);
    line-height: 1.05;
  }

  /* ── Section titles (used site-wide) ─────────────────────────── */
  .section-title__title {
    font-size: clamp(28px, 3.5vw, 42px);
  }

  /* ── Inner page banner ───────────────────────────────────────── */
  .page-header {
    padding: 65px 0 60px;
  }

  .page-header__inner h2 {
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.3;
  }

  /* ── Content sections ────────────────────────────────────────── */
  .about-one {
    padding: 80px 0 80px;
  }

  .become-volunteer-one {
    padding: 70px 0 75px;
  }

  .events-one {
    padding: 80px 0 80px;
  }

  .news-one {
    padding: 80px 0 60px;
  }

  .team-one {
    padding: 80px 0 60px;
  }

  .testimonial-one {
    padding: 80px 0 90px;
  }

  /* ── Newsroom page ───────────────────────────────────────────── */
  .news-sidebar {
    padding: 50px 0 70px;
  }

  .sidebar__search-form input[type="search"] {
    height: 52px;
  }

  /* ── Footer (.site-footer__top has padding: 100px 0 98px in oxpins.css) ── */
  .site-footer__top {
    padding-top: 65px;
    padding-bottom: 65px;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   NARROW DESKTOP  1200px – 1588px
   All 4 top-bar items visible: phone, email, address, volunteers.
   Compact mode: tighten the 90px gap between blocks and the 80px
   gaps between address items so everything fits from 1200px up.
   Nav li margin reduced 45px → 44px to absorb the 5.8px overflow
   at 1536px CSS viewport (1920px physical × 125% Windows DPI).
   ═══════════════════════════════════════════════════════════════════ */
@media only screen and (min-width: 1200px) and (max-width: 1588px) {

  /* ── Top bar: compact spacing so volunteers + all address items fit ── */

  /* Compact volunteers icon (was 36px from the global ≥1200px block above) */
  .main-menu-two__volunteers-icon {
    height: 28px;
    width: 28px;
  }

  /* Reduce gap between volunteers block and address block (oxpins default: 90px) */
  .main-menu-two__right-top-right {
    margin-left: 20px;
  }

  /* Reduce gaps between address list items (oxpins default: 80px).
     The ::before separator sits at right:-40px so it is hidden here to
     prevent it bleeding into the adjacent item at the tighter spacing. */
  .main-menu-two__right-top-address-list li + li {
    margin-left: 30px;
  }
  .main-menu-two__right-top-address-list li:before {
    display: none;
  }

  /* ── Nav bar ─────────────────────────────────────────────────────── */

  /* Force the right section to stay within available width (viewport - logo).
     No overflow:hidden — that would clip position:absolute nav dropdowns
     whose containing block (li.dropdown, position:relative) is a descendant. */
  .main-menu-two__right {
    flex: 1 1 0;
    min-width: 0;
  }

  .main-menu-two__right-bottom {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Allows the nav box to shrink so the controls (Donate Now etc.) are not clipped */
  .main-menu-two__main-menu-box {
    min-width: 0;
  }

  /* 45px → 44px: eliminates the 5.8px nav content overflow at 1536px.
     Result: Contact right≈1017px, navBox ends≈1018px — 1px clearance
     before the controls box. */
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li {
    margin-left: 44px;
  }

}

/* Extra nav compression at the narrowest desktop widths */
@media only screen and (min-width: 1200px) and (max-width: 1440px) {
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li {
    margin-left: 25px;
  }
}

/* Prevent Contact/Search overlap at narrow desktop (1200–1365 px).
   6 gaps × 3 px = 18 px nav width reduction → Contact moves ~18 px left,
   creating the required 12–16 px clearance before the search icon. */
@media only screen and (min-width: 1200px) and (max-width: 1365px) {
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li {
    margin-left: 22px;
  }
}

/* Keep right section flex-stretching at wide desktop (≥1589 px).
   Without the compact block, .main-menu-two__right reverts to display:block
   (oxpins default) and becomes content-sized. In that state the section
   shrinks when nav shrinks, so reducing li+li margins does nothing for
   the Contact→Search gap. Re-applying flex:1 1 0 makes the right section
   fill the remaining viewport width (logo → viewport edge), giving the
   nav box room to sit away from the controls. */
@media only screen and (min-width: 1589px) {
  .main-menu-two__right {
    flex: 1 1 0;
    min-width: 0;
  }
  .main-menu-two__main-menu-box {
    min-width: 0;
  }
}

/* Contact→Search gap fix at 1441–1588 px (Sprint 9-A.1).
   At 1536 px with margin-left: 44 px, cText_S (Contact text right → Search
   icon left) measured 1 px — below the 12 px minimum. Reducing to 40 px
   saves 6 × 4 = 24 px of nav width, raising cText_S to ≥ 12 px across the
   full 1441–1588 px window. The 1200–1440 px sub-rules below are unaffected
   (they appear earlier in the file and have lower cascade priority here). */
@media only screen and (min-width: 1441px) and (max-width: 1588px) {
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li {
    margin-left: 40px;
  }
}

/* Contact→Search fix at exactly 1200 px (Sprint 9-A.1).
   In authenticated state the avatar button is narrower than the guest button
   (~44 px vs ~130 px), so the nav box gets ~73 px more room and the Contact
   text shifts right, closing the C→S gap to -58 px. Reducing li+li margins
   from 22 px to 10 px frees 6 × 12 = 72 px of nav width, restoring
   auth C→S ≈ +14 px (≥ 12 px minimum). Guest C→S rises to ~89 px.
   Covers 1200–1269 px; 1270 px+ already passes at 22 px. */
@media only screen and (min-width: 1200px) and (max-width: 1269px) {
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li {
    margin-left: 10px;
  }
}

/* Contact→Search fix at ≥ 1589 px (Sprint 9-A.1).
   Without a margin override, oxpins.css defaults to 45 px. At 1589 px auth,
   cText_S was −41 px. Reducing to 34 px saves 6 × 11 = 66 px of nav width,
   raising auth C→S to ≈ +25 px across 1589–1920 px+.
   Guest C→S rises from 32 px → 98 px at 1589 px (comfortable). */
@media only screen and (min-width: 1589px) {
  .main-menu .main-menu__list > li + li,
  .stricky-header .main-menu__list > li + li {
    margin-left: 34px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   SMALL DESKTOP / LARGE TABLET  992px – 1199px
   At this range: header switches to mobile hamburger (top bar hidden).
   Section paddings and page-header have NO responsive override in
   oxpins.css — they stay at their full desktop values (120px / 141px).
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) and (max-width: 1199px) {

  /* ── Homepage hero
     Base: padding-top: 185px; padding-bottom: 190px (no tablet override) ── */
  .main-slider-two .container {
    padding-top: 145px;
    padding-bottom: 150px;
  }

  /* ── Section titles
     Base: 50px (no tablet override for the generic selector) ── */
  .section-title__title {
    font-size: 36px;
  }

  /* ── Inner page banner
     Base: padding: 141px 0 132px (no tablet override) ── */
  .page-header {
    padding: 100px 0 90px;
  }

  .page-header__inner h2 {
    font-size: 32px;
    line-height: 1.3;
  }

  /* ── Content sections
     .events-one and .testimonial-one are explicitly set to 120px in
     oxpins.css 992-1199 block — these rules override that since
     density.css loads last.
     Others (.about-one, .news-one, .team-one) stay at base 120px. ── */
  .about-one {
    padding: 90px 0 90px;
  }

  .become-volunteer-one {
    padding: 80px 0 85px;
  }

  .events-one {
    padding: 90px 0 90px;
  }

  .news-one {
    padding: 90px 0 70px;
  }

  .team-one {
    padding: 90px 0 70px;
  }

  .testimonial-one {
    padding: 90px 0 100px;
  }

  /* ── Newsroom page
     Base: padding: 120px 0 120px (no tablet override) ── */
  .news-sidebar {
    padding: 90px 0 90px;
  }

  .sidebar__search-form input[type="search"] {
    height: 58px;
  }

  /* ── Footer (.site-footer__top: 100px 0 98px, no tablet override) ── */
  .site-footer__top {
    padding-top: 75px;
    padding-bottom: 75px;
  }

}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL — not scoped to a breakpoint
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header controls flex row — active at any desktop/tablet width ── */
/* At ≥1200px the media block retains .las-search-btn spacing.
   The flex rule applies from 992px up (where the controls bar is shown). */
.las-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* ── Guest Account dropdown — GLOBAL (visible at ≥992px nav widths) ── */
.las-account-dropdown {
  position: relative;
  display: inline-block;
}

.las-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--oxpins-primary);
  border: 1px solid var(--oxpins-primary);
  border-radius: 22px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, border-color .2s, box-shadow .2s;
  font-family: inherit;
}

.las-account-btn:hover {
  background: #2d4a33;
  border-color: #2d4a33;
  color: #fff;
  box-shadow: 0 2px 8px rgba(55,89,62,.35);
}

.las-account-btn:focus-visible {
  outline: 3px solid var(--oxpins-base);
  outline-offset: 2px;
}

.las-account-btn[aria-expanded="true"] {
  background: #2d4a33;
  border-color: rgba(255,255,255,.4);
  box-shadow: 0 2px 8px rgba(55,89,62,.35);
}

.las-account-btn[aria-expanded="true"] .las-chevron {
  transform: rotate(180deg);
}

.las-chevron {
  font-size: 9px;
  opacity: .85;
  transition: transform .2s;
}

/* Panel hidden by default at ALL widths — JS adds .is-open on click */
.las-account-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
  padding: 20px;
  z-index: 9999;
}

.las-account-menu.is-open {
  display: block;
}

.las-account-menu__desc {
  font-size: 13px;
  color: #666;
  margin-bottom: 14px;
  line-height: 1.5;
}

.las-account-menu__login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--oxpins-primary);
  border-radius: 8px;
  text-decoration: none;
  margin-bottom: 8px;
  transition: opacity .2s;
}

.las-account-menu__login:hover {
  opacity: .88;
  color: #fff;
  text-decoration: none;
}

.las-account-menu__register {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--oxpins-primary);
  border: 2px solid var(--oxpins-primary);
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.las-account-menu__register:hover {
  background: var(--oxpins-primary);
  color: #fff;
  text-decoration: none;
}

/* ── Authenticated account controls — GLOBAL ── */
.las-user-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 2px 4px;
}

.las-user-btn.dropdown-toggle::after {
  display: none;
}

.las-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--oxpins-base);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 2px var(--oxpins-base);
}

/* User dropdown menu */
.las-user-menu {
  min-width: 260px;
  padding: 0;
  border: 0;
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  border-radius: 12px;
  overflow: hidden;
}

.las-user-menu__header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  background: #f8f9fa;
  border-bottom: 1px solid #eee;
}

.las-user-menu__header-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--oxpins-base);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.las-user-menu__header-info {
  flex: 1;
  min-width: 0;
}

.las-user-menu__name {
  font-weight: 700;
  font-size: 14px;
  color: var(--oxpins-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.las-user-menu__email {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.las-user-menu__status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 5px;
}

.las-user-menu__status--ok {
  color: #16a34a;
}

.las-user-menu__status--warn {
  color: #e67e22;
}

.las-user-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 14px;
  color: var(--oxpins-black);
  transition: background .15s;
}

.las-user-menu .dropdown-item:hover {
  background: #f5f5f5;
  color: var(--oxpins-base);
}

.las-menu-icon {
  width: 16px;
  text-align: center;
  color: #aaa;
  flex-shrink: 0;
}

.las-menu-icon--blue {
  color: var(--oxpins-base);
}

.las-user-menu__divider {
  border-top: 1px solid #eee;
  margin-top: 4px;
  padding-top: 4px;
}

.las-logout-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}

.las-verify-link {
  color: #e67e22;
}

.las-verify-link:hover {
  color: #d35400;
  background: #fff3e0;
}

/* Guest banner with real buttons */
.lms-guest-banner {
  background: #fff8e1;
  border-bottom: 2px solid #ffe082;
  padding: 16px 0;
}

.lms-guest-banner__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.lms-guest-banner__text {
  font-size: 14px;
  color: #5d4037;
}

.lms-guest-banner__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  background: var(--oxpins-primary);
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity .2s;
}

.lms-guest-banner__login:hover {
  opacity: .88;
  color: #fff;
  text-decoration: none;
}

.lms-guest-banner__register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--oxpins-primary);
  border: 2px solid var(--oxpins-primary);
  border-radius: 8px;
  text-decoration: none;
  background: transparent;
  transition: background .2s, color .2s;
}

.lms-guest-banner__register:hover {
  background: var(--oxpins-primary);
  color: #fff;
  text-decoration: none;
}

/* ── Catalogue grid: CSS Grid replaces Bootstrap flex for cross-row equal heights ── */

/* Desktop 3-col, tablet 2-col, mobile 1-col */
.lms-catalogue-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .lms-catalogue-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .lms-catalogue-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Neutralise Bootstrap col padding/width overrides inside grid */
.lms-catalogue-grid > .lms-course-card-col {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: auto !important;
  max-width: none !important;
}

/* Card stretches to fill grid cell */
.lms-course-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Content area grows to fill remaining space */
.lms-course-card .causes-one__content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title zone: fixed 3 lines — never causes row-height variance across rows */
.lms-course-card .lms-card-title {
  min-height: 81px;
  max-height: 81px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Description zone: fixed 3 lines, PHP-truncated at 120 chars so never overflows */
.lms-course-card .lms-card-desc {
  min-height: 72px;
  max-height: 72px;
  overflow: hidden;
  flex: 0 0 auto;
}

/* Spacer: pushes CTA to card bottom regardless of desc length */
.lms-course-card .causes-one__content::after {
  content: '';
  flex: 1;
}

/* CTA always at card bottom */
.lms-course-card .causes-one__btn-box {
  margin-top: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   FRENCH / CREOLE LOCALE — nav compression
   French items are ~120 px wider than English in total ("Éducation à la santé",
   "Actualités & Événements" etc). Two levers are used simultaneously:
   1. font-size 13 px (vs 14 px English) saves ~7 % of total nav text width
   2. reduced margin-left between items covers the remaining gap
   Selector html[lang="fr"] is emitted by main.blade.php via app()->getLocale().
   html[lang="ht"] (Creole) gets the same treatment — similar word lengths.
   ═══════════════════════════════════════════════════════════════════ */

/* Spanish nav font compression — ES items are longer than EN */
@media only screen and (min-width: 1200px) {
  html[lang="es"] .main-menu .main-menu__list > li > a,
  html[lang="es"] .stricky-header .main-menu__list > li > a {
    font-size: 12.5px;
  }
}

/* Flat 14.5 px gap for FR/HT across all desktop widths */
@media only screen and (min-width: 1200px) {
  html[lang="fr"] .main-menu .main-menu__list > li + li,
  html[lang="fr"] .stricky-header .main-menu__list > li + li,
  html[lang="ht"] .main-menu .main-menu__list > li + li,
  html[lang="ht"] .stricky-header .main-menu__list > li + li {
    margin-left: 14.5px;
  }
}