/*
 * locations-v2.css
 * Enqueue handle: locations-v2
 * Place in: /dist/css/locations-v2.css  (or wherever your theme's style_src resolves to)
 *
 * Scoped entirely to .seals-locs — safe to load alongside any existing styles.
 */

.seals-locs *,
.seals-locs *::before,
.seals-locs *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Variables ──────────────────────────────────────────── */
.seals-locs {
  --sl-bg:            #f4f4f4;
  --sl-bar-bg:        #1a1a1a;
  --sl-bar-text:      #ffffff;
  --sl-heading:       #0d1b2a;
  --sl-card-bg:       #ffffff;
  --sl-text:          #333333;
  --sl-text-light:    #666666;
  --sl-phone:         #f73930;
  --sl-link:          #007bbe;
  --sl-select-bg:     #ffffff;

  /* ── Container ── */
  --sl-max-width:     1920px;
  --sl-pad-h:         58px;

  background: var(--sl-bg);
}

/* ─── Shared full-width inner container ─────────────────── */
.seals-locs__bar-inner,
.seals-locs__content {
  width: 100%;
  max-width: var(--sl-max-width);
  margin: 0 auto;
  padding-left: var(--sl-pad-h);
  padding-right: var(--sl-pad-h);
}

/* ─── Jump Bar ───────────────────────────────────────────── */
 .seals-locs__bar .jcf-select .jcf-select-opener {
    display:none;
  }
.seals-locs__bar .jcf-select {
  border: 1px solid #6d6e71 !important;
  background: rgba(109,110,113,.2) !important;
}
.seals-locs__bar .jcf-select .jcf-select-text {
  font-size: 16px !important;
  color: #fff !important;
}
.seals-locs__bar {
 background: var(--sl-bar-bg);
  padding-top: 70px;
  padding-bottom: 60px;
}

.seals-locs__bar-inner {
  padding-top: 0;
  padding-bottom: 0;
}

.seals-locs__bar-label {
 display: block;
  color: var(--sl-bar-text);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.seals-locs__select-wrap {
position: relative;
  display: inline-block;
  width: 480px;
  max-width: 100%;
}

.seals-locs__select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--sl-select-bg);
  border: 1px solid #cccccc;
  border-radius: 4px;
  padding: 9px 36px 9px 12px;
  font-size: 14px;
  color: var(--sl-text);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s;
}

.seals-locs__select:focus {
  border-color: #4a90d9;
}

.seals-locs__select-icon {
  pointer-events: none;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #888;
}

/* ─── Intro text (optional description field) ───────────── */
.seals-locs__intro {
  margin-bottom: 36px;
  font-size: 15px;
  color: var(--sl-text);
  max-width: 760px;
}

.seals-locs__intro p {
  margin-bottom: 0.75em;
}

.seals-locs__intro p:last-child {
  margin-bottom: 0;
}

/* ─── Main Content ───────────────────────────────────────── */
.seals-locs__content {
  padding-top: 48px;
  padding-bottom: 72px;
}

/* ─── State Group ────────────────────────────────────────── */
.seals-locs__group {
  margin-bottom: 52px;
  scroll-margin-top: 24px;
}

.seals-locs__state-heading {
  font-size: 26px;
  font-weight: 700;
  color: var(--sl-heading);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

/* ─── Card Grid ──────────────────────────────────────────── */
.seals-locs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23%, 1fr));
  gap: 20px;
}

/* ─── Card ───────────────────────────────────────────────── */
/*
  Top-right notch effect:
    1. border-radius: 16px 0 16px 16px  (no radius top-right)
    2. ::before  — SVG that fills the notch corner with bg colour + blue dot
*/
.seals-locs__card {
  position: relative;
  background: var(--sl-card-bg);
  padding: 28px;
  transition: box-shadow 0.22s ease, transform 0.22s ease;
  overflow: visible;
}

.seals-locs__card:hover {
  box-shadow:-15px 15px 20px rgba(0, 0, 0, 0.10);
  transform: translateY(-1px);
}

/* Notched corner SVG (matches existing SEALS design language) */
.seals-locs__card::before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 83px;
  height: 82px;
  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODMiIGhlaWdodD0iODIiIHZpZXdCb3g9IjAgMCA4MyA4MiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik04Mi4yMDg5IDgyTDgyLjMxNjggMEgwTDAuMDI2MTk0NSAxTDEuODAwMDZlLTA1IDgySDgyLjIwODlaTTgyLjIwODkgODJIMS44MDAwNmUtMDVMMC4wMjYxOTQ1IDFDMy44NDI5MiAxIDguODE2NzcgMSAxNC40NzExIDJDMjAuMTI1NSAzIDI0LjMzNjcgOC4zMTQ4OCAyNC43NzkgMTQuMzQxNEMyNS4xMzE2IDIyLjk3NzIgMjQuMzE0OCAzMS45NTE5IDI0Ljc3NSA0MC41NDc2QzI1LjE5NzMgNDguNDIxNSAzMS43NjE2IDU0LjcyNTYgMzkuOTUxNSA1NS4xMzE0QzQ4Ljg5NjUgNTUuNTczNyA1OC4yMzU5IDU0Ljc4ODggNjcuMjIyNyA1NS4xMjc2Qzc1LjE1MTcgNTUuNjI5MiA4MS41NTg2IDYxLjgxNDYgODIuMTA2NCA2OS40MjA1TDgyLjIwODkgODJaIiBmaWxsPSIjRjNGM0YzIi8+DQo8cmVjdCB4PSI1OCIgeT0iMTkiIHdpZHRoPSI0IiBoZWlnaHQ9IjQiIGZpbGw9IiMwMDdCQkUiLz4NCjwvc3ZnPg==') no-repeat top right;
  background-size: 83px 82px;
  pointer-events: none;
  z-index: 1;
}

/* ─── Card internals ─────────────────────────────────────── */
.seals-locs__card-name {
  font-size: 22px;
  margin-bottom: 6px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  padding-right: 44px;
}

.seals-locs__card-name a {
  color: inherit;
  text-decoration: none;
}

.seals-locs__card-name a:hover {
  text-decoration: underline;
}

.seals-locs__card-address {
  font-size: 18px;
  margin-bottom: 20px;
}

.seals-locs__card-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.seals-locs__card-hours,
.seals-locs__card-phone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
}

.seals-locs__card-hours {
  color: var(--sl-text-light);
}

.seals-locs__card-phone a {
color: var(--sl-phone);
  text-decoration: underline;
  font-weight: 700;
}

.seals-locs__card-phone a:hover {
  text-decoration: underline;
}

.seals-locs__card-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--sl-text-light);
}

.seals-locs__card-icon--phone {
  color: var(--sl-phone);
}

.seals-locs__card-links {
  display: flex;
  flex-direction: column;
  padding-top: 10px;
}

.seals-locs__card-links a {
font-size: 17px;
  color: var(--sl-link);
  text-decoration: underline;
}

.seals-locs__card-links a:hover {
  text-decoration: underline;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1199px) {
	.seals-locs__grid {
  grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
}
}
@media (max-width: 900px) {
  .seals-locs {
    --sl-pad-h: 28px;
  }

  .seals-locs__bar {
    padding-top: 16px;
    padding-bottom: 20px;
  }

  .seals-locs__content {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .seals-locs__state-heading {
    font-size: 22px;
  }
}
@media (max-width: 768px) {
	.seals-locs__grid {
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
}
}

@media (max-width: 560px) {
	.seals-locs__select-wrap {
  width: 100%;
}
  .seals-locs {
    --sl-pad-h: 16px;
  }

  .seals-locs__grid {
    grid-template-columns: 1fr;
  }
}