/* Southern Ridge theme helper CSS
   Tailwind handles most styling. This file handles:
   - admin toolbar offset for sticky header while logged in
   - editor UI protection (Bootstrap collapse vs Tailwind collapse)
   - a small fallback style so the layout stays readable if Tailwind loads late
*/
:root{
   /* Single source of truth */
  --sr-navy: #365F84;
  --sr-navy-rgb: 54 95 132;

  --sr-navy-dark: #213A56;
  --sr-navy-dark-rgb: 33 58 86;

  --sr-blue: #4B87C8;
  --sr-blue-rgb: 75 135 200;
  --sr-blue-light: #AFD1F4;

  --sr-gold: #D3A34A;
  --sr-gold-light: #F3D7A3;

  /* Neutrals */
  --sr-ink: #0B1220;
  --sr-slate: #334155;
  --sr-muted: #64748B;

  --sr-border: #E2E8F0;

  --sr-surface: #F6F8FB;
  --sr-card: #FFFFFF;
  --sr-soft-blue: #EAF2FB;

  --sr-bg:#f6f8fb;
  --sr-ice:#dfeaf6;

  --sr-toolbar-h: 0px;
  --sr-edit-offset: 0px;

  --sr-quote-bg: rgb(var(--sr-navy-rgb) / 0.08);
  --sr-quote-border: rgb(20 61 102 / 0.12);
  --sr-quote-rule: rgb(20 61 102 / 0.25);
  --sr-quote-surface: #eef6ff;   /* very light blue base */
  --sr-quote-ink: 20 61 102;  
} 

*, *::before, *::after{
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
}

/* Sticky header offset while logged in */
html.ccm-toolbar-visible #sr .sr-header,
body.ccm-toolbar-visible #sr .sr-header{
  top: var(--sr-toolbar-h, 0px) !important;
}


/* Concrete editor uses Bootstrap .collapse. Tailwind also has a .collapse utility.
   We disable Tailwind visibility utilities, but this also adds a safety override. */
.ccm-ui .collapse, .ccm-ui .collapsing,
.ccm-block-set.collapse, .ccm-block-set.collapsing{
  visibility: visible !important;
}

/* Mobile panel hide */
.sr-mobile-panel[hidden]{ display:none !important; }

/* Video responsive */
.sr-embed{ position:relative; width:100%; padding-top:56.25%; }
.sr-embed iframe{ position:absolute; inset:0; width:100%; height:100%; }

/* Fallback styling so the design does not collapse if Tailwind is delayed */
#sr{ 
  background:var(--sr-bg); 
  color:var(--sr-ink); 
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#sr a{
  text-decoration: none;
  color: inherit;
}
#sr a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

#sr .sr-header{
  top: 0;
  background: transparent;
  border-bottom: 0;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#sr.sr-scrolled .sr-header{
  background: rgba(11,37,69,0.72);
  color:#fff;
  /* border-bottom:1px solid rgba(255,255,255,0.12); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}


#sr .sr-header .sr-header-inner{
  height:85px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
#sr .sr-footer{
  background: linear-gradient(180deg, var(--sr-navy), var(--sr-navy-2));
}
#sr .sr-footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
}

/* Buttons */
#sr .sr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 4px;
  padding: 12px 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.2px;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease, border-color 120ms ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#sr .sr-btn:focus{
  outline: none;
}

#sr .sr-btn:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 0 0 6px rgba(84,104,132,0.45);
}

#sr .sr-btn:active{
  transform: translateY(1px);
}

#sr .sr-btn-primary{
  background: rgb(var(--sr-navy-rgb));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
}

#sr .sr-btn-primary:hover{
  background: rgb(var(--sr-navy-dark-rgb));
  box-shadow: 0 16px 40px rgba(0,0,0,0.22);
  text-decoration: none;
  transition: background-color 520ms ease;
}

#sr .sr-btn-secondary{
  background: var(--sr-gold);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#sr .sr-btn-secondary:hover{
  background: var(--sr-gold-light);
  border-color: rgba(255,255,255,0.30);
  text-decoration: none;
  color: var(--sr-slate);
  transition: background-color 520ms ease, color 520ms ease;
}

#sr .sr-btn-light{
  background: #fff;
  color: #0b1220;
  border: 1px solid rgba(15,23,42,0.12);
  box-shadow: 0 10px 22px rgba(15,23,42,0.12);
}

#sr .sr-btn-light:hover{
  box-shadow: 0 14px 30px rgba(15,23,42,0.16);
}

#sr .sr_icon svg{ width:100%; height:100%; display:block; }

#sr .sr_stroke_srNavy{ color: rgb(var(--sr-navy-rgb) / 1); }
#sr .sr_stroke_srNavyDark{ color: rgb(var(--sr-navy-dark-rgb) / 1); }
#sr .sr_stroke_srBlue{ color: var(--sr-blue); }
#sr .sr_stroke_white{ color: #fff; }
#sr .sr_stroke_black{ color: #000; }

#sr .sr_stroke_w_16 svg{ stroke-width: 1.6; }
#sr .sr_stroke_w_18 svg{ stroke-width: 1.8; }
#sr .sr_stroke_w_22 svg{ stroke-width: 2.2; }
#sr .sr_stroke_w_26 svg{ stroke-width: 2.6; }

/* Header Auto Nav: ul.nav inside nav.sr-nav */
#sr nav.sr-nav ul.nav{
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

/* remove default li spacing */
#sr nav.sr-nav ul.nav > li{
  margin: 0;
  padding: 0;
}

/* link styling */
#sr nav.sr-nav ul.nav > li > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 44px;
  padding: 0 14px;

  border-radius: 9999px;
  font-weight: 800;
  letter-spacing: 0.2px;

  color: rgba(255,255,255,0.92);
  text-decoration: none;

  transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

#sr nav.sr-nav ul.nav > li > a:hover{
  background: rgba(255,255,255,0.12);
  color: #fff;
}

#sr nav.sr-nav ul.nav > li > a:focus{
  outline: none;
}

#sr nav.sr-nav ul.nav > li > a:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 0 0 6px rgb(var(--sr-navy-rgb) / 0.45);
}

#sr nav.sr-nav ul.nav > li.nav-selected > a,
#sr nav.sr-nav ul.nav > li.nav-path-selected > a{
  background: rgba(255,255,255,0.18);
  color: #fff;
}

.sr-quote-surface{
  position: relative;
  overflow: hidden;
  background-color: var(--sr-quote-surface);
  border: 1px solid var(--sr-quote-border);
}

.sr-quote-surface .sr-quote-waves{
  position: absolute;
  inset: 0;
  background-image: url("../images/sr_quote_waves.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.55;
  filter: blur(0.4px);
  transform: scale(1.05);
  pointer-events: none;
  z-index: 0;
}

.sr-quote-surface .sr-quote-content{
  position: relative;
  z-index: 1;
}

/* Editing: prevent toolbar + header from covering hero content */

body.ccm-toolbar-visible #sr .sr-hero-inner{ padding-top: calc(5rem + var(--sr-toolbar-h)) !important; }

/* Concrete add block panel: force block sets visible even if Bootstrap .show is not applied */
.ccm-panel-add-block .ccm-block-set.collapse{ display:block !important; visibility:visible !important; }


/* Editing: keep header from blocking block controls */

body.ccm-edit-mode #sr .sr-header{ z-index: 10 !important; }


/* Editor: keep main content clickable under sticky header */
/* Editor: ensure header sits below admin toolbar */
body.ccm-toolbar-visible #sr .sr-header{
  top: var(--sr-toolbar-h, 0px) !important;
}

/* Editor: Concrete add block panel block sets must not be hidden by visibility: collapse */
body.ccm-edit-mode .ccm-block-set.collapse{
  visibility: visible !important;
  display: block !important;
  height: auto !important;
}

/* Concrete editor safety: keep sticky header below admin toolbar */
#sr .sr-header{
  top: var(--sr-toolbar-h, 0px) !important;
}

/* In edit mode, ensure main content starts below toolbar + header */

body.ccm-edit-mode #sr main,
body.ccm-page-edit #sr main{
  padding-top: var(--sr-edit-offset) !important;
}

/* Mobile menu open: prevent background scroll */
body.sr-menu-open{ overflow:hidden; }

.sr-yt-trigger{cursor:pointer}

.sr-yt-trigger .sr-play-btn{
  width:64px;
  height:64px;
  position:absolute;
  left:calc(50% - 32px);
  top:calc(50% - 32px);
  border-radius:50%;
  overflow:hidden;
  display:block;

  background:
    radial-gradient(
      rgb(var(--sr-blue-rgb) / 1) 50%,
      rgb(var(--sr-blue-rgb) / 0.35) 52%
    );
}

.sr-yt-trigger .sr-play-btn::before{
  content:"";
  position:absolute;
  width:84px;
  height:84px;
  top:-15%;
  left:-15%;
  border-radius:50%;
  opacity:1;
  background:rgb(0 0 0 / 0);

  border:5px solid rgb(var(--sr-blue-rgb) / 0.7);

  animation:sr_pulsate_btn 2s steps(60) infinite;
}

.sr-yt-trigger .sr-play-btn::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translateX(-40%) translateY(-50%);
  width:0;
  height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:15px solid #fff;
  z-index:1;
  transition:all 400ms cubic-bezier(0.55,0.055,0.675,0.19);
}

.sr-yt-trigger:hover .sr-play-btn::before,
.sr-yt-trigger:focus-visible .sr-play-btn::before{
  left:50%;
  top:50%;
  transform:translateX(-40%) translateY(-50%);
  width:0;
  height:0;
  border:none;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:15px solid #fff;
  z-index:2;
  animation:none;
  border-radius:0;
}

.sr-yt-trigger:hover .sr-play-btn::after,
.sr-yt-trigger:focus-visible .sr-play-btn::after{
  border-left:15px solid rgb(var(--sr-blue-rgb) / 1);
  transform:scale(20);
}

.footer-service-times .rounded-2xl{background:transparent;border:0;padding:0;box-shadow:none}
.footer-service-times .text-slate-900{color:#fff}
.footer-service-times .text-slate-600{color:rgb(255 255 255 / 0.75)}

.sr-footer-nav{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sr-footer-nav li{margin:0;padding:0}
.sr-footer-nav a{color:rgba(255,255,255,.85);text-decoration:underline;text-decoration-color:rgba(255,255,255,.25)}
.sr-footer-nav a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.7)}

/* Base footer social layout */
.sr-footer-social{
  display:grid;
  gap:12px;
  margin-top:14px;
}

.sr-footer-social-link{
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(255,255,255,.85);
  text-decoration:none;
}

.sr-footer-social-link:hover{
  color:#fff;
}

/* Icon badge */
.sr-footer-social-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  background:rgba(255,255,255,.10);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 40px;
  line-height:1;

  /* absolutely prevent inherited underline visuals */
  text-decoration:none !important;
}

.sr-footer-social-icon::before{
  font-size:18px;
  line-height:1;
  text-decoration:none !important;
}

/* Text label */
.sr-footer-social-text{
  font-weight:700;
  text-decoration:none;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
  text-decoration-color:rgba(255,255,255,.30);
}

/*
  IMPORTANT:
  Your global rule (#sr a:hover) is adding underline to the whole <a>.
  We must force that off for THIS link, then apply underline only to the text span.
*/
#sr a.sr-footer-social-link:hover{
  text-decoration:none !important;
}

#sr a.sr-footer-social-link:hover .sr-footer-social-text{
  text-decoration:underline !important;
  text-decoration-color:rgba(255,255,255,.70);
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}

/* Extra safety: never underline icon, even if a global rule tries */
#sr a.sr-footer-social-link:hover .sr-footer-social-icon,
#sr a.sr-footer-social-link:hover .sr-footer-social-icon::before{
  text-decoration:none !important;
}


/* If the underline is coming from decoration instead of text-decoration */
.sr-footer-social-link .sr-footer-social-icon {
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
}

.sr-footer-social-link .sr-footer-social-icon::before {
  text-decoration: none !important;
}

@keyframes sr_pulsate_btn{
  0%{transform:scale(0.6);opacity:1}
  100%{transform:scale(1);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  .sr-yt-trigger .sr-play-btn::before{animation:none}
}


@media (min-width: 768px) {
  #sr .sr-footer-grid{ grid-template-columns: 1fr 1fr 1fr; }

   .ccm-layout-column-wrapper{
    display: flex;
    align-items: stretch;
    gap: 0 50px;
    margin-left: -50px !important;
    margin-right: -50px !important;
  }

  .ccm-layout-column-wrapper > .ccm-layout-column{
    float: none !important;
    display: flex;
    flex-direction: column;
    height: auto !important;
  }

  .ccm-layout-column-wrapper > .ccm-layout-column > .ccm-layout-column-inner{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .ccm-layout-column-wrapper > .ccm-layout-column > .ccm-layout-column-inner > div {
    flex: 1 1 auto;
  }
  
  #sr .sr-header .sr-header-inner{ height:64px; }
}

@media (max-width: 768px) {
  .ccm-layout-column-wrapper .ccm-layout-column{
    width: 100% !important;
    float: none !important;
    display: block !important;
  }

  .ccm-layout-column-wrapper .ccm-layout-column + .ccm-layout-column{
    margin-top: 16px;
  }
}

@supports selector(:has(*)){
  #sr:not(:has(.sr-hero)) .sr-header{
    background-color: rgb(var(--sr-navy-rgb) / 0.90);
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 12px 30px rgba(0,0,0,0.20);
  }
}

/* Fallback for sr-only if Tailwind fails */
#sr .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}