/* ============================================================
   MySingingRiver 2026 — Locations Archive (v4, one-box filter + split-shift hours display)
   Self-contained stylesheet for the Locations 2026 templates.
   Upload location: wp-content/themes/srhs/locations-2026.css
   Loaded automatically via wp_enqueue_style by
   template-locations-cards.php / template-locations-rows.php.
   Brand tokens are DEFINED here (scoped to .loc-2026) so the
   archive no longer depends on the theme stylesheet for them.
   ============================================================ */

/* ---- brand tokens (scoped to the archive — cannot leak into the theme) ---- */
.loc-2026 {
  --primary: #1b449c;
  --secondary: #009ada;
  --tertiary: #00bbd3;
  --grad-start: #1EA0D8;
  --grad-end: #175099;
  --orange: #F58025;
  --orange-hover: #f8ab6e;
  --gray-dark: #053C64;
  --gray: #B3CEF6;
  --gray-light: #E6EFFC;
}

/* ---- component rules ---- */

  /* ============ layout: filter rail + results ============ */
  .loc-layout {
    max-width: 1440px; margin: 0 auto; padding: 2rem 4vw 1rem;
    display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: start;
  }
  @media (min-width: 1024px) {
    .loc-layout { grid-template-columns: 280px minmax(0, 1fr); gap: 2.25rem; }
    .filters { position: sticky; top: 24px; }
  }

  /* ============ filter rail (UCSF-style expandable panels) ============ */
  .filters__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .85rem; }
  .filters__head h2 {
    font-family: "prometo","Segoe UI",Arial,sans-serif; font-weight: 700;
    font-size: 1.15rem; color: var(--gray-dark);
  }
  .filters__clear {
    display: none; border: none; background: none; cursor: pointer; padding: .5rem 0;
    font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--primary);
    text-decoration: underline; text-underline-offset: 3px; min-height: 44px;
  }
  .filters__clear:hover { color: var(--secondary); }
  .filters.is-filtered .filters__clear { display: inline; }

  .fpanel {
    border: 1px solid var(--gray); border-radius: 12px; background: #fff;
    margin-bottom: .75rem; overflow: hidden;
  }
  .fpanel summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between;
    align-items: center; gap: .75rem; padding: .8rem 1rem; min-height: 54px;
    font-family: "prometo","Segoe UI",Arial,sans-serif; font-weight: 700;
    font-size: .98rem; color: var(--primary); transition: background .15s;
  }
  .fpanel summary::-webkit-details-marker { display: none; }
  .fpanel summary:hover { background: var(--gray-light); }
  .fpanel summary:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
  .fpanel summary .chev {
    width: 1rem; height: 1rem; flex: none; stroke: var(--primary); fill: none;
    stroke-width: 3; transition: transform .2s;
  }
  .fpanel[open] summary .chev { transform: rotate(180deg); }
  .fpanel__head {
    margin: 0; padding: .8rem 1rem; min-height: 54px; display: flex; align-items: center;
    font-family: "prometo","Segoe UI",Arial,sans-serif; font-weight: 700;
    font-size: .98rem; color: var(--primary);
  }
  .fpanel__body { padding: .25rem 1rem 1rem; border-top: 1px solid var(--gray-light); }
  .fpanel__hint { font-size: .85rem; color: var(--gray-dark); opacity: .8; margin: .6rem 0 0; }

  /* One-box filter: location types, divider, then specialty sub-filters
     with a "More specialties" toggle — all in a single bordered box. */
  .fpanel--onebox .fpanel__body { border-top: none; padding-top: .75rem; }
  .fpanel__divider {
    margin: .85rem 0 .35rem; padding-top: .85rem; border-top: 1px solid var(--gray-light);
    font-family: "prometo","Segoe UI",Arial,sans-serif; font-weight: 700;
    font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--primary);
  }
  .fpanel__more { padding: 0; }
  .fpanel__morebtn {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    width: 100%; margin-top: .35rem; padding: .6rem .75rem; min-height: 44px;
    border: none; border-radius: 8px; background: transparent; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: .9rem; color: var(--primary);
    transition: background .15s;
  }
  .fpanel__morebtn:hover { background: var(--gray-light); }
  .fpanel__morebtn:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
  .fpanel__morebtn .chev {
    width: 1rem; height: 1rem; flex: none; stroke: var(--primary); fill: none;
    stroke-width: 3; transition: transform .2s;
  }
  .fpanel__morebtn.is-open .chev { transform: rotate(180deg); }

  /* checkbox / radio rows */
  .fcheck, .fradio {
    position: relative; display: flex; align-items: center; gap: .65rem;
    padding: .4rem 0; min-height: 44px; cursor: pointer;
    font-size: .95rem; line-height: 1.35; color: var(--gray-dark);
  }
  .fcheck input, .fradio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .fcheck__box, .fradio__dot { position: relative; }
  .fcheck__box {
    width: 22px; height: 22px; flex: none; border: 2px solid var(--primary);
    border-radius: 6px; background: #fff; transition: background .15s, border-color .15s;
  }
  .fcheck input:checked + .fcheck__box {
    border-color: var(--primary);
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 6.5'/%3E%3C/svg%3E"),
      linear-gradient(315deg, var(--secondary), var(--primary));
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: 12px 12px, cover;
  }
  .fradio__dot {
    width: 22px; height: 22px; flex: none; border: 2px solid var(--primary);
    border-radius: 50%; background: #fff; transition: background .15s;
  }
  .fradio input:checked + .fradio__dot { background: var(--primary); box-shadow: inset 0 0 0 5px #fff; }
  .fcheck input:focus-visible + .fcheck__box,
  .fradio input:focus-visible + .fradio__dot { outline: 3px solid var(--orange); outline-offset: 2px; }
  .fcheck__count { color: var(--secondary); font-weight: 700; font-size: .85rem; margin-left: auto; }
  fieldset.fpanel__radios { border: none; padding: 0; margin: .5rem 0 0; }
  fieldset.fpanel__radios[disabled] { opacity: .45; }
  fieldset.fpanel__radios legend {
    font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    color: var(--primary); padding: .35rem 0;
  }

  /* ============ pagination ============ */
  .loc-pager {
    display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center;
    padding: 1.5rem 0 .5rem;
  }
  .loc-pager__btn {
    min-width: 44px; min-height: 44px; padding: .5rem .8rem; cursor: pointer;
    border: 2px solid var(--primary); border-radius: 8px; background: #fff;
    color: var(--primary); font-family: inherit; font-weight: 600; font-size: .95rem;
    transition: background .2s, color .2s;
  }
  .loc-pager__btn:hover:not([disabled]):not(.is-current) { background: var(--gray-light); }
  .loc-pager__btn.is-current {
    background: linear-gradient(300deg, var(--grad-start), var(--grad-end));
    border-color: transparent; color: #fff; cursor: default;
  }
  .loc-pager__btn[disabled] { opacity: .4; cursor: default; }


  .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .no-results { display: none; padding: 3rem 0; text-align: center; color: var(--gray-dark); }
  .no-results h3 { font-size: 1.25rem; margin-bottom: .5rem; }

  /* ============ sections & cards ============ */
  .cat-section { padding: 0 0 1.5rem; scroll-margin-top: 24px; }
  .cat-section__head { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
  .cat-section__head h2 { font-size: 1.5rem; }
  .cat-section__count { font-size: .8rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--secondary); }
  .cat-section__note { width: 100%; font-size: .9rem; opacity: .75; margin-top: -.9rem; }
  .sub-head {
    font-size: .8rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--primary); margin: 2rem 0 1rem; padding-top: 1.5rem;
    border-top: 2px solid var(--gray-light); display: flex; align-items: center; gap: .6rem;
  }
  .sub-head::before { content: ""; width: 1.4rem; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, var(--grad-start), var(--grad-end)); }
  .sub-head--first { border-top: none; padding-top: 0; margin-top: 0; }
  .pcard-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .pcard {
    position: relative; background: #fff; border-radius: 14px; overflow: hidden;
    box-shadow: 0 4px 18px rgba(3,60,100,.10); display: flex; flex-direction: column;
    transition: box-shadow .25s, transform .25s;
  }
  .pcard:hover { box-shadow: 0 14px 34px rgba(3,60,100,.16); transform: translateY(-2px); }
  .pcard .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .pcard a:not(.stretched) { position: relative; z-index: 2; }
  .pcard__band {
    padding: .9rem 1.25rem;
    background: linear-gradient(300deg, var(--grad-start) 0%, var(--secondary) 55%, var(--grad-end) 100%);
    color: #fff;
  }
  .pcard__cat { font-size: .75rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.9); display: block; }
  .pcard__name { font-family: "prometo","Segoe UI",Arial,sans-serif; font-weight: 600; font-size: 1.06rem; line-height: 1.35; margin: .1rem 0 0; color: #fff; text-transform: none; letter-spacing: .1px; }
  .pcard__name a { color: #fff; text-decoration: none; }
  .pcard__name a:hover { text-decoration: underline; }
  /* Photos: the whole image at its natural proportions — the card edge
     hugs the image exactly. No crop, no zoom, no mat, no dead space. */
  .pcard__photo { position: relative; overflow: hidden; background: var(--gray-light); }
  .pcard__photo img { width: 100%; height: auto; display: block; }
  .pcard__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
  /* Status/hours — version D: small clock glyph + bold text, no dot. */
  .pcard__status { display: flex; align-items: flex-start; gap: .45rem; font-size: .9375rem; font-weight: 700; color: var(--gray-dark); }
  .pcard__status .clk { margin-top: .15rem; }
  .pcard__status .clk { width: 1.05rem; height: 1.05rem; flex: none; stroke: var(--secondary); fill: none; stroke-width: 2; }
  .pcard__meta { display: flex; align-items: flex-start; gap: .5rem; font-size: .9375rem; color: var(--gray-dark); white-space: pre-line; }
  .pcard__meta svg { width: 1rem; height: 1rem; flex: none; margin-top: .2rem; stroke: var(--secondary); fill: none; stroke-width: 2; }
  .pcard__meta a { color: inherit; display: inline-flex; align-items: center; min-height: 44px; margin: -.6rem 0; }
  .pcard__meta a:hover { color: var(--primary); text-decoration: underline; }
  /* Desktop: the phone link's oversized tap target creates dead space —
     tighten it so the number hugs the address line. */
  @media (min-width: 1024px) {
    .pcard__meta a { min-height: 0; margin: 0; }
  }
  .pcard__services { font-size: .85rem; color: var(--gray-dark); opacity: .8; }
  .pcard__cta { margin-top: auto; padding-top: .5rem; }
  .pcard__cta a {
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    min-height: 48px; padding: .75rem 1.5rem;
    font-family: "prometo","Segoe UI",Arial,sans-serif; font-weight: 700; font-size: 1rem;
    color: #fff; text-decoration: none; border-radius: 8px;
    background: linear-gradient(315deg, var(--secondary), var(--primary)); transition: filter .2s;
  }
  .pcard__cta a:hover { filter: brightness(1.12); }
  .pcard__cta a svg { width: 1.1rem; height: 1.1rem; stroke: #fff; fill: none; stroke-width: 2.2; }

  /* ---- rows variant (template-locations-rows.php) ---- */
  @media (min-width: 720px) {
    .loc-2026--rows .pcard-grid { grid-template-columns: 1fr; gap: 1rem; }
    .loc-2026--rows .pcard {
      display: grid; grid-template-columns: 380px minmax(0, 1fr);
      grid-template-areas: "photo band" "photo body";
    }
    /* Photo: fills the ENTIRE card height edge-to-edge (cover — no mat,
       no bars). The 380px column is ~20% wider than the original 320px,
       so more of the scene stays in frame. */
    .loc-2026--rows .pcard__photo { grid-area: photo; }
    .loc-2026--rows .pcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .loc-2026--rows .pcard__band { grid-area: band; padding: .6rem 1.15rem; }
    .loc-2026--rows .pcard__cat { font-size: .68rem; }
    .loc-2026--rows .pcard__name { font-size: 1.05rem; }
    .loc-2026--rows .pcard__body {
      grid-area: body; padding: .65rem 1.15rem .7rem;
      display: grid; grid-template-columns: minmax(0,1fr) auto;
      align-items: center; column-gap: 1.25rem; row-gap: .1rem;
    }
    .loc-2026--rows .pcard__body > *:not(.pcard__cta) { grid-column: 1; }
    /* Button aligns with the phone row (row 3: status / address / phone). */
    .loc-2026--rows .pcard__cta { grid-column: 2; grid-row: 3; align-self: center; margin-top: 0; padding-top: 0; }
    .loc-2026--rows .pcard__cta a { min-height: 44px; padding: .6rem 1.2rem; font-size: .92rem; white-space: nowrap; }
    /* Excerpt line spans the full card width under everything. */
    .loc-2026--rows .pcard__services { grid-column: 1 / -1; }
  }
  @media (min-width: 720px) and (max-width: 1023px) {
    .loc-2026--rows .pcard { grid-template-columns: 300px minmax(0, 1fr); }
  }