/* Harmony Canine Behavior Academy — shared styles.
   Layout lives in inline styles on each element; this file carries the
   responsive layer, the navigation states, hover states and small resets. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0c1729; }
a { color: #a8843b; text-decoration: none; }
a:hover { color: #c7a24e; }
@keyframes hcaFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hcaFloat { 0%, 100% { transform: translateY(-10px); } 50% { transform: translateY(10px); } }
@keyframes hcaGlow { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* ── Mobile layer. Desktop rendering is untouched above 900px. ───────── */
@media (max-width: 900px) {
  /* Multi-column layouts collapse; 3–6-up card grids go two-up. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="repeat(3,1fr)"], [style*="repeat(4,1fr)"],
  [style*="repeat(5,1fr)"], [style*="repeat(6,1fr)"],
  [style*="repeat(3, 1fr)"], [style*="repeat(4, 1fr)"],
  [style*="repeat(5, 1fr)"], [style*="repeat(6, 1fr)"] { grid-template-columns: repeat(2,1fr) !important; }

  /* Large desktop gutters between columns are too much once stacked. */
  [style*="gap: 72px"], [style*="gap: 56px"], [style*="gap: 52px"],
  [style*="gap: 44px"], [style*="gap: 40px"] { gap: 28px !important; }

  /* Page gutters. */
  [style*="max-width: 1240px"], [style*="max-width: 1180px"], [style*="max-width: 1160px"],
  [style*="max-width: 1000px"], [style*="max-width: 980px"], [style*="max-width: 900px"] {
    padding-left: 18px !important; padding-right: 18px !important;
  }

  /* Split heroes: the photo goes full-bleed behind the copy and the
     left-to-right navy fade becomes a top-down scrim. */
  [style*="min-width: 520px"], [style*="min-width: 480px"], [style*="min-width: 420px"] {
    left: 0 !important; width: 100% !important; min-width: 0 !important;
  }
  [style*="mask-image: linear-gradient(90deg"] {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 30%, #000 60%) !important;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 30%, #000 60%) !important;
  }
  [style*="background: linear-gradient(90deg, #00162b"],
  [style*="background: linear-gradient(90deg, rgb(0, 22, 43)"] {
    background: linear-gradient(180deg, rgba(0,22,43,.94) 0%, rgba(0,22,43,.86) 42%, rgba(0,22,43,.55) 100%) !important;
  }
  [style*="max-width: min("] { max-width: 100% !important; }

  /* Buttons and chips wrap rather than overflow. */
  [style*="white-space: nowrap"] { white-space: normal !important; line-height: 1.25 !important; height: auto !important; }
  header nav > a[data-apply] { white-space: nowrap !important; }
}

/* Five- and four-up card grids need to break well before tablet width —
   long single words ("Rehabilitation") clip in a ~157px card. */
@media (max-width: 1150px) {
  [style*="repeat(5,1fr)"], [style*="repeat(5, 1fr)"],
  [style*="repeat(4,1fr)"], [style*="repeat(4, 1fr)"] { grid-template-columns: repeat(3,1fr) !important; }
}
header nav > a[data-apply] { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1150px) {
  header nav a { padding-left: 8px !important; padding-right: 8px !important; letter-spacing: 1px !important; }
}
[style*="repeat(5,1fr)"] h3, [style*="repeat(5, 1fr)"] h3,
[style*="repeat(4,1fr)"] h3, [style*="repeat(4, 1fr)"] h3 { overflow-wrap: anywhere; }

@media (max-width: 760px) {
  /* Display type steps down — mobile viewports can't carry 46–54px. */
  [style*="font-size: 54px"], [style*="font-size: 52px"],
  [style*="font-size: 46px"] { font-size: 30px !important; }
  [style*="font-size: 42px"], [style*="font-size: 40px"],
  [style*="font-size: 38px"] { font-size: 26px !important; }
  [style*="font-size: 34px"], [style*="font-size: 32px"],
  [style*="font-size: 30px"] { font-size: 23px !important; }
  [style*="font-size: 28px"], [style*="font-size: 26px"],
  [style*="font-size: 24px"] { font-size: 20px !important; }
  [style*="font-size: 22px"], [style*="font-size: 21px"] { font-size: 18px !important; }
  [style*="font-size: 60px"], [style*="font-size: 56px"] { font-size: 34px !important; }

  /* Tall desktop section padding. */
  [style*="padding: 92px"], [style*="padding: 88px"], [style*="padding: 84px"],
  [style*="padding: 76px"], [style*="padding: 72px"], [style*="padding: 66px"] {
    padding-top: 44px !important; padding-bottom: 48px !important;
  }
}

@media (max-width: 560px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Current-page marker (desktop): gold text + underline. */
header nav > a[aria-current]:not([data-apply]),
header nav > div > a[aria-current] { color: #e8c877 !important; box-shadow: inset 0 -2px 0 #b8923d; border-radius: 0 !important; }
header nav > div > div a[aria-current] { background: rgba(184,146,61,.14); }

/* ── Mobile navigation: hamburger + full-width panel. ────────────────── */
@media (max-width: 900px) {
  header > div { row-gap: 0 !important; }
  header [data-navtoggle] { display: inline-flex !important; }
  header nav { display: none !important; }

  header[data-nav-open] nav {
    display: flex !important; order: 3; width: 100%;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0 !important; margin-top: 10px; padding-top: 6px;
    border-top: 1px solid rgba(184,146,61,.3);
    max-height: calc(100vh - 90px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  header[data-nav-open] nav > a,
  header[data-nav-open] nav > div > a {
    display: flex !important; align-items: center; width: 100%;
    min-height: 50px; padding: 13px 2px !important;
    font-size: 14.5px !important; border-radius: 0 !important;
    border-bottom: 1px solid rgba(184,146,61,.16);
  }
  header[data-nav-open] nav > div { width: 100%; display: flex; flex-wrap: wrap; align-items: stretch; }
  header[data-nav-open] nav > div > a { flex: 1 1 0; width: auto !important; }
  header[data-nav-open] nav > div > a > svg { display: none; }
  header[data-nav-open] [data-subtoggle] {
    display: inline-flex !important; width: 56px; min-height: 50px; align-items: center; justify-content: center;
    border-bottom: 1px solid rgba(184,146,61,.16); border-left: 1px solid rgba(184,146,61,.16);
  }
  header [data-subtoggle][data-open] svg { transform: rotate(180deg); }
  header[data-nav-open] nav a[aria-current] {
    background: rgba(184,146,61,.16) !important; color: #f0d58c !important; box-shadow: none !important;
  }
  header[data-nav-open] nav > div > div a[aria-current] { background: rgba(184,146,61,.22) !important; }
  /* The hover dropdown becomes an inline sub-list inside the panel. */
  header[data-nav-open] nav > div > div {
    position: static !important; width: 100% !important;
    background: rgba(0,0,0,.18) !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    padding: 4px 0 8px !important; animation: none !important;
  }
  header[data-nav-open] nav > div > div a { min-height: 46px; }
  header[data-nav-open] [data-wrap] { max-width: none !important; white-space: normal !important; text-align: left !important; }
  header[data-nav-open] [data-wrap] br { display: none; }
  /* Apply Today is the last item in the nav — full-width button at the foot. */
  header[data-nav-open] nav > a[data-apply] {
    justify-content: center; width: 100%; border-bottom: 0 !important;
    margin: 14px 0 12px !important; padding: 17px !important;
    border-radius: 4px !important; font-size: 14px !important;
  }
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 96px; }

/* FAQ accordions (<details>). */
details > summary::-webkit-details-marker { display: none; }
[data-faq-mark]::before { content: "+"; }
details[open] [data-faq-mark]::before { content: "\2013"; }

/* Programs dropdown: hover/focus on desktop (240ms close delay), chevron on mobile. */
header nav [data-progs] > [data-dropdown] { visibility: hidden; opacity: 0; transition: visibility 0s linear .24s, opacity .12s ease .24s; }
@media (min-width: 901px) {
  header nav [data-progs]:hover > [data-dropdown],
  header nav [data-progs]:focus-within > [data-dropdown] { visibility: visible; opacity: 1; transition-delay: 0s; animation: hcaFade .18s ease; }
}
@media (max-width: 900px) {
  header nav [data-progs] > [data-dropdown] { display: none; visibility: visible; opacity: 1; transition: none; }
  header[data-nav-open] nav [data-progs][data-sub-open] > [data-dropdown] { display: block; }
}

/* Hover states. */
.hv1:hover { filter: brightness(1.08) !important; transform: translateY(-1px) !important; }
.hv2:hover { border-color: #b8923d !important; color: #f0e4c6 !important; }
.hv3:hover { border-color: #b8923d !important; background: rgba(184,146,61,.1) !important; }
.hv4:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 40px rgba(20,36,61,.16) !important; border-color: #c2ab73 !important; }
.hv5:hover { border-color: #b8923d !important; background: rgba(184,146,61,.12) !important; }
.hv6:hover { color: #c7a24e !important; }
.hv7:hover { filter: brightness(1.14) !important; transform: translateY(-1px) !important; }
.hv8:hover { background: #0f1e37 !important; color: #f0e4c6 !important; }