@import url("https://use.typekit.net/szp3lpf.css");
/* @mixin font-awesome($icon: '') {
content: vars.$icon;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
line-height: 1em;
border: 0;
margin-left: 0;
}
*/
.usca-button-general-content:not(p) {
background-color: #ff0039;
border-color: #ff0039;
color: #ffffff;
border-radius: 15px 0 15px 0;
font-family: "ff-good-web-pro-wide", sans-serif;
font-weight: 600;
text-transform: none;
font-size: 0.9rem;
padding: 15px 25px;
border-width: 2px;
border-style: solid;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
position: relative;
align-items: center;
gap: 0.25rem;
text-decoration: none;
display: inline-flex;
cursor: pointer;
overflow: hidden;
}

.usca-button-general-content:not(p) a {
display: inline-flex;
}

.usca-button-general-content:not(p):before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.3) 20%, transparent);
background-size: 0%;
background-position: 0%;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.usca-button-general-content:not(p):hover {
filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
}

.usca-button-general-content:not(p):hover:before {
background-size: 200%;
background-position: -100%;
transition: 0.2s linear;
}

p.usca-button-general-content a {
background-color: #ff0039;
border-color: #ff0039;
color: #ffffff;
border-radius: 15px 0 15px 0;
font-family: "ff-good-web-pro-wide", sans-serif;
font-weight: 600;
text-transform: none;
font-size: 0.9rem;
padding: 15px 25px;
border-width: 2px;
border-style: solid;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
position: relative;
align-items: center;
gap: 0.25rem;
text-decoration: none;
display: inline-flex;
cursor: pointer;
overflow: hidden;
}

p.usca-button-general-content a a {
display: inline-flex;
}

p.usca-button-general-content a:before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.3) 20%, transparent);
background-size: 0%;
background-position: 0%;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

p.usca-button-general-content a:hover {
filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
}

p.usca-button-general-content a:hover:before {
background-size: 200%;
background-position: -100%;
transition: 0.2s linear;
}


/* =========================================================
   Legacy Transparent Button (Primary)
   Border + subtle shadow (no fill), white hover
   Performance: no shimmer overlay
   ========================================================= */
.usca-button-transparent-general-content a {
  border: 2px solid #b7bdc7;
  border-radius: 15px 0 15px 0;
  background-color: transparent;
  color: #002341;
  font-family: "ff-good-web-pro-wide", sans-serif;
  font-weight: 600;
  text-transform: none;
  padding: 1rem 1.8rem;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
}

/* No shimmer */
.usca-button-transparent-general-content a:before { content: none; }
.usca-button-transparent-general-content a:after  { content: none; }

.usca-button-transparent-general-content a:hover,
.usca-button-transparent-general-content a:focus-visible {
  border-color: #002341;
  background-color: #B6BDC4;
  outline: none;
}


/* =========================================================
   Legacy Transparent Button (-2) (Performance-friendly legacy)
   Match primary transparent button styling
   ========================================================= */
.usca-button-transparent-general-content-2:not(p),
p.usca-button-transparent-general-content-2 a {
  border: 2px solid #b7bdc7;
  border-radius: 15px 0 15px 0;
  background-color: transparent;
  color: #002341;
  font-family: "ff-good-web-pro-wide", sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 0.9rem;
  padding: 15px 25px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
}

/* ensure inner link displays nicely when wrapper is used */
.usca-button-transparent-general-content-2:not(p) a,
p.usca-button-transparent-general-content-2 a a {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

/* No shimmer */
.usca-button-transparent-general-content-2:not(p):before,
p.usca-button-transparent-general-content-2 a:before {
  content: none;
}

.usca-button-transparent-general-content-2:not(p):hover,
.usca-button-transparent-general-content-2:not(p):focus-visible,
p.usca-button-transparent-general-content-2 a:hover,
p.usca-button-transparent-general-content-2 a:focus-visible {
  border-color: #002341;
  background-color: #B6BDC4;
  outline: none;
}

.usca-button-blue-general-content:not(p) {
color: #002341;
background-color: #b2ddff;
border-color: #002341;
border-radius: 15px 0 15px 0;
font-family: "ff-good-web-pro-wide", sans-serif;
font-weight: 600;
text-transform: none;
font-size: 0.9rem;
padding: 15px 25px;
border-width: 2px;
border-style: solid;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
position: relative;
align-items: center;
gap: 0.25rem;
text-decoration: none;
display: inline-flex;
cursor: pointer;
overflow: hidden;
}

.usca-button-blue-general-content:not(p) a {
display: inline-flex;
}

.usca-button-blue-general-content:not(p):before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.3) 20%, transparent);
background-size: 0%;
background-position: 0%;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.usca-button-blue-general-content:not(p):hover {
filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
}

.usca-button-blue-general-content:not(p):hover:before {
background-size: 200%;
background-position: -100%;
transition: 0.2s linear;
}

p.usca-button-blue-general-content a {
color: #002341;
background-color: #b2ddff;
border-color: #002341;
border-radius: 15px 0 15px 0;
font-family: "ff-good-web-pro-wide", sans-serif;
font-weight: 600;
text-transform: none;
font-size: 0.9rem;
padding: 15px 25px;
border-width: 2px;
border-style: solid;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
position: relative;
align-items: center;
gap: 0.25rem;
text-decoration: none;
display: inline-flex;
cursor: pointer;
overflow: hidden;
}

p.usca-button-blue-general-content a a {
display: inline-flex;
}

p.usca-button-blue-general-content a:before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.3) 20%, transparent);
background-size: 0%;
background-position: 0%;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

p.usca-button-blue-general-content a:hover {
filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
}

p.usca-button-blue-general-content a:hover:before {
background-size: 200%;
background-position: -100%;
transition: 0.2s linear;
}

.usca-btn {
border-radius: 0;
font-family: "ff-good-web-pro-wide", sans-serif;
font-weight: 600;
text-transform: none;
font-size: 0.9rem;
padding: 15px 25px;
border-width: 2px;
border-style: solid;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
position: relative;
align-items: center;
gap: 0.25rem;
text-decoration: none;
display: inline-flex;
cursor: pointer;
overflow: hidden;
}

.usca-btn a {
display: inline-flex;
}

.usca-btn:before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.3) 20%, transparent);
background-size: 0%;
background-position: 0%;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

.usca-btn:hover {
filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
}

.usca-btn:hover:before {
background-size: 200%;
background-position: -100%;
transition: 0.2s linear;
}

.usca-btn {
border-radius: 15px 0 15px 0;
background-color: #002341;
color: #ffffff;
border-color: #002341;
}

.usca-btn.fire {
background-color: #ff0039;
color: #ffffff;
border-color: #ff0039;
}

.usca-btn.sky {
background-color: #b2ddff;
color: #002341;
border-color: #b2ddff;
}

.usca-btn.poolside {
background-color: #00bed6;
color: #ffffff;
border-color: #00bed6;
}

.usca-btn.orchid {
background-color: #d72fa8;
color: #ffffff;
border-color: #d72fa8;
}

.usca-btn.goldenrod {
background-color: #FFB500;
color: #002341;
border-color: #FFB500;
}

.usca-btn--group {
display: inline-flex;
gap: 5px;
flex-wrap: wrap;
}

.usca-btn--group.full {
display: flex;
}

.usca-btn--group .usca-btn {
border-radius: 0;
justify-content: center;
flex: 1 1 auto;
}

.usca-btn--group .usca-btn:first-child {
border-radius: 20px 0 0 0;
}

.usca-btn--group .usca-btn:last-child {
border-radius: 0 0 20px 0;
}

.usca-btn-standard {
border: 2px solid transparent;
border-radius: 0;
font-family: "ff-good-web-pro-wide", sans-serif !important;
font-weight: 600 !important;
text-transform: none;
font-size: 0.9rem !important;
padding: 15px 25px;
border-width: 2px;
border-style: solid;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
position: relative;
align-items: center;
gap: 0.25rem;
text-decoration: none !important;
display: inline-flex;
cursor: pointer;
overflow: hidden;
transition: all 0.3s ease;
}

.usca-btn-standard:hover {
filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
text-decoration: none !important;
transform: translateY(-1px);
}

.usca-btn-compact {
border: 1px solid transparent;
border-radius: 0;
font-family: "ff-good-web-pro-wide", sans-serif !important;
font-weight: 500 !important;
text-transform: none;
font-size: 0.75rem !important;
padding: 8px 15px;
border-width: 1px;
border-style: solid;
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.03));
position: relative;
align-items: center;
gap: 0.2rem;
text-decoration: none !important;
display: inline-flex;
cursor: pointer;
overflow: hidden;
transition: all 0.25s ease;
}

.usca-btn-compact:hover {
filter: drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.15));
text-decoration: none !important;
transform: translateY(-1px);
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more-container {
text-align: center;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more-container .eapps-instagram-feed-posts-grid-load-more {
border-radius: 0;
font-family: "ff-good-web-pro-wide", sans-serif;
font-weight: 600;
text-transform: none;
font-size: 0.9rem;
padding: 15px 25px;
border-width: 2px;
border-style: solid;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
position: relative;
align-items: center;
gap: 0.25rem;
text-decoration: none;
display: inline-flex;
cursor: pointer;
overflow: hidden;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more-container .eapps-instagram-feed-posts-grid-load-more a {
display: inline-flex;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more-container .eapps-instagram-feed-posts-grid-load-more:before {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.3) 20%, transparent);
background-size: 0%;
background-position: 0%;
mix-blend-mode: screen;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more-container .eapps-instagram-feed-posts-grid-load-more:hover {
filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more-container .eapps-instagram-feed-posts-grid-load-more:hover:before {
background-size: 200%;
background-position: -100%;
transition: 0.2s linear;
}

#eapps-instagram-feed-1 .eapps-instagram-feed-posts-grid-load-more-container .eapps-instagram-feed-posts-grid-load-more {
border-radius: 15px 0 15px 0;
background-color: #ff0039;
color: #ffffff;
border-color: #ff0039;
justify-content: center;
font-size: 1rem;
min-height: 50px;
margin: 30px 0 0;
}

/* =========================================================
   TinyMCE single-class formats -> alias to real .usca-btn system
   Gives: same base styling + shimmer + hover + variant colors
   Works whether class is on <a> OR on a wrapper <span>/<ss-link>
   ========================================================= */

/* 1) Treat these as .usca-btn (base styles + shimmer selectors) */
.usca-btn-midnight,
.usca-btn-fire,
.usca-btn-goldenrod,
.usca-btn-orchid,
.usca-btn-poolside,
.usca-btn-sky,
.usca-btn-light-gray,
.USCA-BTN-MIDNIGHT,
.USCA-BTN-FIRE,
.USCA-BTN-GOLDENROD,
.USCA-BTN-ORCHID,
.USCA-BTN-POOLSIDE,
.USCA-BTN-SKY,
.USCA-BTN-LIGHT-GRAY {
  /* match .usca-btn base */
  border-radius: 15px 0 15px 0;
  font-family: "ff-good-web-pro-wide", sans-serif;
  font-weight: 600;
  text-transform: none;
  font-size: 0.9rem;
  padding: 15px 25px;
  border-width: 2px;
  border-style: solid;
  filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.05));
  position: relative;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  display: inline-flex;
  cursor: pointer;
  overflow: hidden;
}

/* shimmer overlay (same as .usca-btn:before) */
.usca-btn-midnight:before,
.usca-btn-fire:before,
.usca-btn-goldenrod:before,
.usca-btn-orchid:before,
.usca-btn-poolside:before,
.usca-btn-sky:before,
.usca-btn-light-gray:before,
.USCA-BTN-MIDNIGHT:before,
.USCA-BTN-FIRE:before,
.USCA-BTN-GOLDENROD:before,
.USCA-BTN-ORCHID:before,
.USCA-BTN-POOLSIDE:before,
.USCA-BTN-SKY:before,
.USCA-BTN-LIGHT-GRAY:before {
  content: "";
  width: 100%;
  height: 100%;
  background: linear-gradient(110deg, transparent 10%, rgba(255, 255, 255, 0.3) 20%, transparent);
  background-size: 0%;
  background-position: 0%;
  mix-blend-mode: screen;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}

.usca-btn-midnight:hover,
.usca-btn-fire:hover,
.usca-btn-goldenrod:hover,
.usca-btn-orchid:hover,
.usca-btn-poolside:hover,
.usca-btn-sky:hover,
.usca-btn-light-gray:hover,
.USCA-BTN-MIDNIGHT:hover,
.USCA-BTN-FIRE:hover,
.USCA-BTN-GOLDENROD:hover,
.USCA-BTN-ORCHID:hover,
.USCA-BTN-POOLSIDE:hover,
.USCA-BTN-SKY:hover,
.USCA-BTN-LIGHT-GRAY:hover {
  filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.2));
}

.usca-btn-midnight:hover:before,
.usca-btn-fire:hover:before,
.usca-btn-goldenrod:hover:before,
.usca-btn-orchid:hover:before,
.usca-btn-poolside:hover:before,
.usca-btn-sky:hover:before,
.usca-btn-light-gray:hover:before,
.USCA-BTN-MIDNIGHT:hover:before,
.USCA-BTN-FIRE:hover:before,
.USCA-BTN-GOLDENROD:hover:before,
.USCA-BTN-ORCHID:hover:before,
.USCA-BTN-POOLSIDE:hover:before,
.USCA-BTN-SKY:hover:before,
.USCA-BTN-LIGHT-GRAY:hover:before {
  background-size: 200%;
  background-position: -100%;
  transition: 0.2s linear;
}

/* 2) Map colors to match .usca-btn variants */
.usca-btn-midnight,
.USCA-BTN-MIDNIGHT {
  background-color: #002341;
  color: #ffffff;
  border-color: #002341;
}

.usca-btn-fire,
.USCA-BTN-FIRE {
  background-color: #ff0039;
  color: #ffffff;
  border-color: #ff0039;
}

.usca-btn-goldenrod,
.USCA-BTN-GOLDENROD {
  background-color: #FFB500;
  color: #002341;
  border-color: #FFB500;
}

.usca-btn-orchid,
.USCA-BTN-ORCHID {
  background-color: #d72fa8;
  color: #ffffff;
  border-color: #d72fa8;
}

.usca-btn-poolside,
.USCA-BTN-POOLSIDE {
  background-color: #00bed6;
  color: #ffffff;
  border-color: #00bed6;
}

.usca-btn-sky,
.USCA-BTN-SKY {
  background-color: #b2ddff;
  color: #002341;
  border-color: #b2ddff;
}

.usca-btn-light-gray,
.USCA-BTN-LIGHT-GRAY {
  background-color: #e6e7ea;
  color: #002341;
  border-color: #c8ccd3;
}

/* 3) If TinyMCE put the class on a wrapper, make the inner <a> behave */
.usca-btn-midnight a,
.usca-btn-fire a,
.usca-btn-goldenrod a,
.usca-btn-orchid a,
.usca-btn-poolside a,
.usca-btn-sky a,
.usca-btn-light-gray a,
.USCA-BTN-MIDNIGHT a,
.USCA-BTN-FIRE a,
.USCA-BTN-GOLDENROD a,
.USCA-BTN-ORCHID a,
.USCA-BTN-POOLSIDE a,
.USCA-BTN-SKY a,
.USCA-BTN-LIGHT-GRAY a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
}


/* =========================================================
   USCA Button Group (Manual: Start / Middle / End)
   Works with T4/TinyMCE output (classes applied to <a>/<ss-link>)
   
   VERTICAL GROUP (touching stack):
   - each button is its own <p> line
   - first button uses usca-btn-group-start
   - middles use usca-btn-group-middle
   - last uses usca-btn-group-end

   HORIZONTAL GROUP (touching row):
   - multiple buttons placed in the SAME <p>
   - use start/middle/end in order

   Notes:
   - Group is LEFT aligned (not centered)
   - Buttons use fit-content sizing with min/max for long labels
   ========================================================= */


/* ---------------------------------------------------------
   1) Remove paragraph spacing for grouped-button paragraphs
   (vertical stack)
   --------------------------------------------------------- */
p:has(> a.usca-btn-group-start),
p:has(> a.usca-btn-group-middle),
p:has(> a.usca-btn-group-end),
p:has(> ss-link.usca-btn-group-start),
p:has(> ss-link.usca-btn-group-middle),
p:has(> ss-link.usca-btn-group-end) {
  margin: 0 !important;
}

/* Add spacing after the group (only after the end item) */
p:has(> a.usca-btn-group-end),
p:has(> ss-link.usca-btn-group-end) {
  margin-bottom: 0.75rem !important;
}


/* ---------------------------------------------------------
   2) Base grouped button sizing + alignment (LEFT)
   --------------------------------------------------------- */
a.usca-btn-group-start,
a.usca-btn-group-middle,
a.usca-btn-group-end,
ss-link.usca-btn-group-start,
ss-link.usca-btn-group-middle,
ss-link.usca-btn-group-end {
  display: flex !important;

  /* smart sizing */
  width: fit-content;
  min-width: 14rem;   /* baseline size */
  max-width: 28rem;   /* prevents mega-wide buttons */

  /* left alignment (matches nav-ish behavior) */
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;

  /* middle default */
  border-radius: 0 !important;

  /* long labels */
  white-space: normal;
  text-align: left;
}


/* ---------------------------------------------------------
   3) Start / End rounding rules
   --------------------------------------------------------- */
a.usca-btn-group-start,
ss-link.usca-btn-group-start {
  border-top-left-radius: 15px !important;
}

a.usca-btn-group-end,
ss-link.usca-btn-group-end {
  border-bottom-right-radius: 15px !important;
}


/* ---------------------------------------------------------
   4) Horizontal touching group (multiple buttons in ONE <p>)
   - When a paragraph contains a run of grouped buttons,
     turn that <p> into a flex row.
   --------------------------------------------------------- */
p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle),
p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-end) {
  display: inline-flex;
  flex-wrap: wrap;  /* wraps if too long */
  gap: 0;           /* touching */
  margin: 0 !important;
}

/* In horizontal mode, let buttons size naturally to their labels */
p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle)
  > :is(a, ss-link).usca-btn-group-start,
p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle)
  > :is(a, ss-link).usca-btn-group-middle,
p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle)
  > :is(a, ss-link).usca-btn-group-end,
p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-end)
  > :is(a, ss-link).usca-btn-group-start,
p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-end)
  > :is(a, ss-link).usca-btn-group-end {
  min-width: 0;      /* allow tight buttons */
  width: fit-content;
  max-width: 100%;
}

@media (max-width: 600px) {
  /* Any paragraph acting as a horizontal group */
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle),
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-end) {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0; /* touching */
  }

  /* Mobile: full-width stacked buttons */
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle)
    > :is(a, ss-link).usca-btn-group-start,
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle)
    > :is(a, ss-link).usca-btn-group-middle,
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle)
    > :is(a, ss-link).usca-btn-group-end,
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-end)
    > :is(a, ss-link).usca-btn-group-start,
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-end)
    > :is(a, ss-link).usca-btn-group-end {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =========================================================
   Guardrails for TinyMCE stacking classes
   Priority:
   - Middle should always be square
   - Start should ONLY add top-left
   - End should ONLY add bottom-right
   - If multiple classes are present, enforce predictable corners
   ========================================================= */

/* 1) If it's Middle (even if it also has Start/End), keep it square */
a.usca-btn-group-middle,
ss-link.usca-btn-group-middle {
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* 2) If it has BOTH Start and End (TinyMCE weirdness), treat it as "End" by default
      (you can flip this to treat as Start if you prefer) */
a.usca-btn-group-start.usca-btn-group-end,
ss-link.usca-btn-group-start.usca-btn-group-end {
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 15px !important;
}

/* 3) If it's Start but ALSO has Middle, make it behave like Start */
a.usca-btn-group-start.usca-btn-group-middle,
ss-link.usca-btn-group-start.usca-btn-group-middle {
  border-top-left-radius: 15px !important;
  border-bottom-right-radius: 0 !important;
}

/* 4) If it's End but ALSO has Middle, make it behave like End */
a.usca-btn-group-end.usca-btn-group-middle,
ss-link.usca-btn-group-end.usca-btn-group-middle {
  border-top-left-radius: 0 !important;
  border-bottom-right-radius: 15px !important;
}

/* If you want horizontal groups to have a little breathing room
   when they wrap to a new line, uncomment this:
@media (max-width: 600px) {
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-middle),
  p:has(> :is(a, ss-link).usca-btn-group-start + :is(a, ss-link).usca-btn-group-end) {
    row-gap: 0.5rem;
  }
}
*/

/* =========================================
   Transparent buttons – USCA corner language
   ========================================= */

.usca-button-transparent-general-content a,
.usca-button-transparent-general-content-2:not(p),
p.usca-button-transparent-general-content-2 a {
  border-radius: 15px 0 15px 0 !important;
  background-color: transparent !important;
  margin-bottom: 0.5rem;
  border: 1.5px solid #b7bdc7 !important;
  box-sizing: border-box;

  transition:
    border-color 0.1s ease,
    border-width 0.1s ease,
    background-color 0.1s ease;
}

/* Hover / focus */
.usca-button-transparent-general-content a:hover,
.usca-button-transparent-general-content a:focus-visible,
.usca-button-transparent-general-content-2:not(p):hover,
.usca-button-transparent-general-content-2:not(p):focus-visible,
p.usca-button-transparent-general-content-2 a:hover,
p.usca-button-transparent-general-content-2 a:focus-visible {
  border: 2px solid #00bed6 !important;
  background-color: #fafafa !important;
  background-image: linear-gradient(
  to bottom,
  rgba(255,255,255,0.6),
  rgba(255,255,255,0)
);
  color: #002341 !important;
  box-shadow: none !important;
  filter: none !important;
}
  
 /* =========================================================
   Secondary/Tertiary "Quick Links" Styling
   Make link rows look like department-nav dropdown buttons
   Scoped ONLY to secondary + tertiary card content areas.
   ========================================================= */

.usca-card.secondary-card .usca-card-content,
.usca-card.simple-card .usca-card-content {
  --ql-text: #002341;
  --ql-border: #d8dee6;
  --ql-hover-bg: #FFB500;          /* use theme if you want */
  --ql-hover-border: #FFB500;
  --ql-hover-text: #002341;
  --ql-gap: 10px;
}

/* 1) Remove default list styling & spacing in these areas */
.usca-card.secondary-card .usca-card-content ul,
.usca-card.secondary-card .usca-card-content ol,
.usca-card.simple-card .usca-card-content ul,
.usca-card.simple-card .usca-card-content ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.usca-card.secondary-card .usca-card-content li,
.usca-card.simple-card .usca-card-content li {
  margin: 0 0 var(--ql-gap) 0 !important;
  padding: 0 !important;
}

/* 2) Give vertical spacing when links are in separate <p> blocks */
.usca-card.secondary-card .usca-card-content p,
.usca-card.simple-card .usca-card-content p {
  margin: 0 0 var(--ql-gap) 0 !important;
}

/* 3) Only style “button rows”:
   - link is the only meaningful content in its container
   - catches <p><a>...</a></p> and <li><a>...</a></li>
*/
.usca-card.secondary-card .usca-card-content p:has(> a:only-child),
.usca-card.secondary-card .usca-card-content li:has(> a:only-child),
.usca-card.simple-card .usca-card-content p:has(> a:only-child),
.usca-card.simple-card .usca-card-content li:has(> a:only-child) {
  /* keep container clean */
}

/* 4) Apply dropdown-button styling to those single links */
.usca-card.secondary-card .usca-card-content p:has(> a:only-child) > a,
.usca-card.secondary-card .usca-card-content li:has(> a:only-child) > a,
.usca-card.simple-card .usca-card-content p:has(> a:only-child) > a,
.usca-card.simple-card .usca-card-content li:has(> a:only-child) > a {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;

  width: 100%;
  box-sizing: border-box;

  font-family: "ff-good-web-pro-wide", sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  line-height: 1.2 !important;

  padding: 10px 12px !important;

  background: transparent !important;
  color: var(--ql-text) !important;

  border: 1px solid var(--ql-border) !important;
  border-radius: 0 !important;

  text-decoration: none !important;

  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

/* 5) Hover/focus behavior (accessible) */
.usca-card.secondary-card .usca-card-content p:has(> a:only-child) > a:hover,
.usca-card.secondary-card .usca-card-content li:has(> a:only-child) > a:hover,
.usca-card.simple-card .usca-card-content p:has(> a:only-child) > a:hover,
.usca-card.simple-card .usca-card-content li:has(> a:only-child) > a:hover {
  background-color: var(--ql-hover-bg) !important;
  border-color: var(--ql-hover-border) !important;
  color: var(--ql-hover-text) !important;
  transform: translateY(-1px);
}

.usca-card.secondary-card .usca-card-content p:has(> a:only-child) > a:focus-visible,
.usca-card.secondary-card .usca-card-content li:has(> a:only-child) > a:focus-visible,
.usca-card.simple-card .usca-card-content p:has(> a:only-child) > a:focus-visible,
.usca-card.simple-card .usca-card-content li:has(> a:only-child) > a:focus-visible {
  outline: 2px solid #00bed6 !important; /* poolside focus ring */
  outline-offset: 2px !important;
}

/* 6) TinyMCE nested span nonsense: if link contains a span with same class,
      make it not create an inner “box” */
.usca-card.secondary-card .usca-card-content p:has(> a:only-child) > a > span,
.usca-card.secondary-card .usca-card-content li:has(> a:only-child) > a > span,
.usca-card.simple-card .usca-card-content p:has(> a:only-child) > a > span,
.usca-card.simple-card .usca-card-content li:has(> a:only-child) > a > span {
  display: contents;
}

/* 7) Remove spacing after the last row */
.usca-card.secondary-card .usca-card-content > *:last-child,
.usca-card.simple-card .usca-card-content > *:last-child {
  margin-bottom: 0 !important;
}