/*
 Theme Name: SecondRing (Clean Rewrite — No Crop + Fixed Nav)
 Description: Solid layout with strict brand colours. Hero image is NEVER cropped. Fixed mobile drawer & caret.
 Version: 2.6.0
*/

/* =========================
   Brand tokens
   ========================= */
:root{
  --sr-primary:#4851B1;   /* Indigo */
  --sr-accent:#00C2A8;    /* Teal */
  --sr-white:#ffffff;
  --sr-dark:#0b1020;
  --sr-muted:#6b7280;
  --sr-radius:16px;
  --sr-shadow:0 10px 30px rgba(0,0,0,.08);
  --sr-shadow-strong:0 14px 40px rgba(0,0,0,.14);

  /* Hero image sizing */
  --sr-hero-img: 300px;
  --sr-hero-img-mob: 220px;
  --sr-hero-lower: 0px;
}

/* =========================
   Base
   ========================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--sr-dark);
  background:#fff;
  line-height:1.6;
}
img{max-width:100%;height:auto;border:0;box-shadow:none;outline:none;background:transparent}
a{color:var(--sr-primary);text-decoration:none}
a:hover,a:focus{text-decoration:underline}
.container{width:min(1200px,92vw);margin:0 auto}
.alignfull{width:100vw;margin-left:50%;transform:translateX(-50%)}
.alignwide{width:min(1400px,96vw);margin-inline:auto}

/* Skip link */
.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem 1rem;background:var(--sr-primary);color:#fff}

/* =========================
   Header / Navigation
   ========================= */
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e6e8f2;z-index:1002}
.site-header.is-scrolled{ box-shadow: var(--sr-shadow) }
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.site-logo img{height:44px;width:auto}
.brand{font-weight:800;letter-spacing:.2px;font-size:1.25rem;color:var(--sr-primary)}

.header-actions{display:flex;align-items:center;gap:10px}
@media (max-width:980px){ .header-actions{display:none} }

/* Overlay for mobile drawer */
.nav-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); z-index:1000 }
.nav-overlay[hidden]{ display:none !important }

/* Mobile toggle (big, tappable) */
.mobile-toggle{
  display:none; width:48px; height:48px; padding:0; line-height:0;
  background:#fff; border:1px solid #e6e8f2; border-radius:12px; cursor:pointer;
  align-items:center; justify-content:center;
}
.mobile-toggle .icon-bars{ width:26px; height:26px; display:block }

/* Nav base */
.nav{ display:flex; align-items:center; z-index:1001 }
.nav ul{ list-style:none; margin:0; padding:0 }
.nav a{ display:block; font-weight:600; color:var(--sr-dark) }
.nav li{ position:relative }

/* -------------------------
   Desktop (inline)
   ------------------------- */
@media (min-width:981px){
  .mobile-toggle{ display:none !important }
  .nav-overlay{ display:none !important }

  .nav.nav-drawer{
    position:static !important; transform:none !important; transition:none !important;
    width:auto; height:auto; background:transparent; border:0; box-shadow:none; padding:0;
    display:flex !important; align-items:center;
  }
  .nav.nav-drawer > .menu{ display:flex !important; gap:6px; align-items:center }
  .nav.nav-drawer .menu > li{ border:0 }
  .nav.nav-drawer .menu > li > a{ padding:12px 16px; border-radius:12px; display:inline-flex; align-items:center }
  .nav.nav-drawer .menu > li > a:hover,
  .nav.nav-drawer .menu > li > a:focus{ background:rgba(72,81,177,.10); border:1px solid rgba(72,81,177,.20); text-decoration:none }

  /* Desktop dropdowns */
  .nav.nav-drawer .sub-menu{
    display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:60;
    background:#fff; border:1px solid #e6e8f2; border-radius:14px; box-shadow:var(--sr-shadow-strong);
    min-width:240px; padding:8px;
  }
  .nav.nav-drawer li:hover > .sub-menu,
  .nav.nav-drawer li:focus-within > .sub-menu{ display:block }
  .nav.nav-drawer .sub-menu a{ padding:10px 12px; border-radius:10px; white-space:nowrap }

  /* Show a SINGLE caret on desktop (after link).
     Works with either sr-has-children or WP's default class. */
  .nav li.sr-has-children > a::after,
  .nav li.menu-item-has-children > a::after{
    content:"▾"; display:inline-block; margin-left:6px; font-size:.85em; opacity:.85; vertical-align:middle;
  }

  /* Hide mobile caret button on desktop */
  .nav .sr-submenu-toggle,
  .nav .submenu-toggle{ display:none !important }
}

/* -------------------------
   Mobile (drawer)
   ------------------------- */
@media (max-width:980px){
  .mobile-toggle{ display:inline-flex }

  /* Only use the drawer on mobile */
  .nav.nav-drawer{
    position:fixed !important; top:0; right:0; bottom:0; width:min(86vw,380px);
    background:#fff; border-left:1px solid #eef0f5; box-shadow:var(--sr-shadow-strong);
    padding:18px calc(18px + env(safe-area-inset-right)) 24px 18px;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(100%); transition:transform .25s ease;
    display:block !important;  /* beats any older .nav{display:none} */
  }
  .nav.nav-drawer.open{ transform:translateX(0) !important }

  /* Vertical list inside drawer */
  .nav.nav-drawer > .menu{ display:block !important }
  .nav.nav-drawer .menu > li{ border-bottom:1px solid #f1f3fa }
  .nav.nav-drawer .menu > li:last-child{ border-bottom:0 }

  /* Keep label + caret on SAME row */
  .nav.nav-drawer .menu > li.sr-has-children,
  .nav.nav-drawer .menu > li.menu-item-has-children{
    display:flex; align-items:center; gap:8px; min-height:48px;
  }
  .nav.nav-drawer .menu > li.sr-has-children > a,
  .nav.nav-drawer .menu > li.menu-item-has-children > a{
    flex:1 1 auto; min-width:0; display:flex; align-items:center; padding:12px 12px;
  }

  /* Our caret button (single source of truth on mobile) */
  .sr-submenu-toggle,
  .submenu-toggle{
    appearance:none; background:#fff; border:1px solid #e6e8f2; border-radius:10px;
    padding:10px; margin:0 4px 0 0; cursor:pointer; line-height:0;
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:0 0 auto;
  }
  .sr-submenu-toggle .caret,
  .submenu-toggle .caret{ width:18px; height:18px; transition:transform .2s ease }
  .nav li.sr-open > .sr-submenu-toggle .caret,
  .nav li.submenu-open > .submenu-toggle .caret{ transform:rotate(180deg) }

  /* Expand/collapse */
  .nav .sub-menu{
    display:none; padding:0 0 12px 12px; border:0; box-shadow:none; background:transparent;
  }
  .nav li.sr-open > .sub-menu,
  .nav li.submenu-open > .sub-menu{ display:block }

  /* Kill pseudo-caret on mobile to prevent double pointers */
  .nav li.sr-has-children > a::after,
  .nav li.menu-item-has-children > a::after{ content:none !important }
}

/* Keyboard focus */
.site-header a:focus-visible,.site-header button:focus-visible{
  outline:3px solid color-mix(in srgb, var(--sr-accent) 60%, white 40%); outline-offset:2px;
}

/* =========================
   Buttons (Chrome text-fill safe)
   ========================= */
.button,.cta-btn{
  border:0;color:#fff;cursor:pointer;font-weight:700;border-radius:12px;display:inline-block;padding:12px 16px;
  transition:transform .08s ease,filter .2s ease,box-shadow .2s ease;line-height:1.2;
  -webkit-text-fill-color: currentColor !important; /* Chrome fix */
}
.button{background:var(--sr-primary)}
.cta-btn{background:var(--sr-accent)}
.button.secondary{background:#fff;color:var(--sr-primary);border:1px solid var(--sr-primary)}
.button:hover,.cta-btn:hover{filter:brightness(1.06);transform:translateY(-1px);text-decoration:none}

/* Ensure buttons inside hero keep their own color */
.hero a.button,.hero a.cta-btn{ -webkit-text-fill-color: currentColor !important }
.hero a.button.secondary{ color:var(--sr-primary) !important; -webkit-text-fill-color: var(--sr-primary) !important }

/* =========================
   Hero
   ========================= */
.hero{
  background:linear-gradient(135deg,var(--sr-primary),var(--sr-accent));
  color:#fff;position:relative;z-index:0;isolation:isolate
}
.hero .inner{
  position:relative;z-index:1;padding:72px 0;
  display:grid;grid-template-columns:1fr .9fr;gap:24px;align-items:start;
}
@media (max-width:980px){
  .hero .inner{grid-template-columns:1fr;gap:16px;padding:48px 0}
}

/* Force hero text white (not buttons) */
.hero h1,.hero .hero-title,.hero .text-gradient,
.hero .title,.hero p,.hero li{color:#fff !important;background:none !important;-webkit-text-fill-color:#fff !important}
.hero h1,.hero .hero-title{font-size:clamp(2rem,5vw,3rem);line-height:1.15;margin:0 0 12px}
.hero p{margin:0 0 20px}
.hero ul{margin:0;padding-left:18px}
.hero li{margin:4px 0}

/* Right column alignment */
.hero .inner > div:last-child{margin-top:28px}
@media (max-width:980px){.hero .inner > div:last-child{margin-top:10px}}

/* “Why SecondRing?” card */
.hero .card{
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.18);
  padding:10px 14px;border-radius:14px;backdrop-filter:blur(6px);color:#fff
}
.hero .card h3{margin:0 0 4px;color:#fff}
.hero .card p{margin:4px 0;line-height:1.35;color:rgba(255,255,255,0.92) !important}
.hero .card strong{color:#fff}

/* HERO IMAGE — NO CROP, NO MASKS, NO OVERLAYS */
.hero .hero-shot{
  margin:calc(8px + var(--sr-hero-lower)) 0 0;
  display:flex;justify-content:center;align-items:center;padding:0;position:relative;
}
.hero .hero-shot img{
  width:var(--sr-hero-img);max-width:90vw;height:auto;display:block;object-fit:contain !important;
  border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; border-radius:0 !important;
}
.hero .hero-shot::before,.hero .hero-shot::after{ content:none !important; display:none !important; }
.hero figure,.hero .wp-block-image,.hero .wp-caption{ margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;box-shadow:none !important; }
@media (max-width:980px){ .hero .hero-shot img{ width:var(--sr-hero-img-mob) }}

/* Vertical CTAs inside hero (optional stack) */
.hero .cta-vertical{
  display:flex;flex-direction:column;gap:.65rem;max-width:360px;margin:10px 0 0;
}
.hero .cta-vertical .button{ width:100%;text-align:center;-webkit-text-fill-color: currentColor !important }
.hero .cta-vertical .button.secondary{
  color:var(--sr-primary) !important;background:#fff !important;border:1px solid var(--sr-primary) !important;
  -webkit-text-fill-color: var(--sr-primary) !important;
}

/* =========================
   Sections & Cards
   ========================= */
.section{padding:42px 0}
.title{font-size:clamp(1.4rem,2.6vw,2rem);margin:0 0 8px;color:var(--sr-dark)}
.lead{color:#4b5563;margin:0 0 16px}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:980px){.grid{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid #eef0f5;border-radius:var(--sr-radius);padding:18px;box-shadow:var(--sr-shadow)
}
.card h3{margin-top:0}

/* Accented card tops */
.card.accent-primary{box-shadow:var(--sr-shadow),inset 0 3px 0 0 var(--sr-primary)}
.card.accent-accent{box-shadow:var(--sr-shadow),inset 0 3px 0 0 var(--sr-accent)}

/* ===== Popular number types (ensures look even if other CSS interfered) ===== */
.section .grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width:980px){
  .section .grid{ grid-template-columns:1fr; }
}
.section .card h3{ color:var(--sr-dark); }
.section .card p{ margin:0 0 12px; color:#4b5563; }
.section .card .button{
  display:inline-block; font-weight:700; padding:12px 16px; border-radius:12px;
  background:var(--sr-primary); color:#fff; border:0;
  -webkit-text-fill-color: currentColor !important;
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.section .card .button:hover{ filter:brightness(1.06); transform:translateY(-1px); text-decoration:none }

/* =========================
   Pricing
   ========================= */
.pricing{background:#f7f8ff}
.price-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:980px){.price-cards{grid-template-columns:1fr}}
.price{font-size:2rem;font-weight:800;color:var(--sr-primary)}

/* =========================
   Badges
   ========================= */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--sr-primary);color:var(--sr-primary);font-weight:600;font-size:.82rem}

/* =========================
   Footer
   ========================= */
.site-footer{background:#0c102b;color:#d1d5db}
.site-footer a{color:#e5e7eb}
.site-footer .inner{padding:36px 0;display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.site-footer .brand{color:#fff}
.copy{border-top:1px solid rgba(255,255,255,.08);padding:12px 0;color:#a8b1c7}
@media (max-width:980px){.site-footer .inner{grid-template-columns:1fr}}

/* =========================
   Sticky Mobile CTA (optional)
   ========================= */
.mobile-cta-bar{display:none}
@media (max-width:980px){
  body{padding-bottom:84px}
  .mobile-cta-bar{
    position:fixed;left:0;right:0;bottom:0;
    background:var(--sr-primary);color:#fff;border-top:1px solid rgba(255,255,255,.2);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    display:flex;gap:10px;align-items:center;justify-content:center;z-index:900
  }
  .mobile-cta-bar a{text-align:center;padding:12px 14px;border-radius:12px;font-weight:700;border:2px solid #fff;color:#fff}
  .mobile-cta-bar .get-started a{background:#fff;color:var(--sr-primary)}
}

/* =========================
   WordPress helpers
   ========================= */
.wp-block-image img{border:0 !important;box-shadow:none !important;background:transparent !important}
.wp-block-button__link{border-radius:12px}

/* Optional divider */
.section.gradient-divider{position:relative}
.section.gradient-divider::before{
  content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;
  width:min(1200px,92vw);height:1px;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(72,81,177,.35),rgba(0,0,0,0))
}

/* =========================
   NO-CROP CORE OVERRIDES
   ========================= */
body .hero .hero-shot img,
body .hero .hero-shot img[src*="Business-Incomming.png"]{
  -webkit-mask:none !important;mask:none !important;clip-path:none !important;object-fit:contain !important;overflow:visible !important;
  border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;
}
.img-frame{width:auto;max-width:100%;height:auto;overflow:visible !important;border-radius:0}
.img-frame img{object-fit:contain !important}

/* =========================
   SecondRing Slider (core)
   ========================= */
.sr-slider{
  --sr-bg:#4851B1; --sr-text:#fff;
  background:var(--sr-bg); color:var(--sr-text);
  border-radius:16px; overflow:hidden;
  padding:clamp(14px,3vw,28px);
  max-width:1200px; margin:0 auto; box-shadow:0 10px 24px rgba(0,0,0,.12);
  position:relative;
}
.sr-slides{position:relative}
.sr-slide{display:none}
.sr-slide.is-active{display:block; animation:sr-fade .4s ease}
@keyframes sr-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.sr-slide-inner{display:grid; grid-template-columns:1.15fr 1fr; align-items:center; gap:clamp(14px,3vw,28px)}
.sr-title{margin:0 0 .25em; line-height:1.15; font-size:clamp(22px,3.2vw,40px); font-weight:800; color:#fff}
.sr-body{margin:0; font-size:clamp(14px,2.1vw,18px); opacity:.95; color:#fff}

.sr-media img{
  width:100%; height:auto; max-height:440px; object-fit:contain;
  display:block; border-radius:12px; background:rgba(255,255,255,.06); padding:clamp(6px,1vw,10px)
}

/* arrows */
.sr-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px; border:2px solid rgba(255,255,255,.7);
  background:rgba(255,255,255,.08); color:#fff; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.2s; z-index:3
}
.sr-prev{left:12px} .sr-next{right:12px}
.sr-nav:hover,.sr-nav:focus{background:rgba(255,255,255,.18); outline:none}

/* dots */
.sr-dots{display:flex; gap:8px; justify-content:center; margin-top:14px}
.sr-dot{width:10px; height:10px; border-radius:999px; border:2px solid rgba(255,255,255,.85); background:transparent; cursor:pointer; padding:0; transition:.18s}
.sr-dot.is-active{background:#fff; transform:scale(1.1)}
.sr-visually-hidden{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}

/* responsive */
@media (max-width:900px){
  .sr-slide-inner{grid-template-columns:1fr}
  .sr-media img{max-height:48vh}
  .sr-nav{display:none} /* keep swipe/tap clean */
}
@media (prefers-reduced-motion:reduce){ .sr-slide.is-active{animation:none} }

/* =========================
   Hero CTA Buttons (alt set)
   ========================= */
.cta-group{display:flex;flex-wrap:wrap;gap:.75rem;margin:10px 0 14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.9rem 1.1rem;border-radius:12px;font-weight:800;letter-spacing:.1px;border:0;cursor:pointer;text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;will-change:transform, filter;
  -webkit-text-fill-color: currentColor !important;
}
.btn:active{ transform:translateY(1px) }
.btn:focus-visible{ outline:3px solid color-mix(in srgb, var(--sr-accent) 60%, white 40%); outline-offset:2px }
.btn-primary{ color:#fff; background:linear-gradient(135deg, var(--sr-primary), var(--sr-accent)); box-shadow:0 8px 20px rgba(0,0,0,.18) }
.btn-primary:hover{ filter:brightness(1.06); text-decoration:none }
.btn-secondary{ background:#fff; color:var(--sr-primary); border:2px solid #e6e8f2; box-shadow:0 6px 14px rgba(0,0,0,.08) }
.btn-secondary:hover{ background:#f9fafb; border-color:#d9dce6; text-decoration:none }
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 0}
.chip{font-size:.9rem;padding:.4rem .6rem;border-radius:999px;border:1px solid #e5e7eb;background:#f3f4f6;color:#111827}
.hero .chip{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.12);color:#fff}
.hero .subhead{margin:.25rem 0 1rem;opacity:.95}
@media (max-width:640px){
  .cta-group{ gap:.6rem }
  .cta-group .btn{ flex:1 1 100%; width:100%; text-align:center; padding:.85rem 1rem }
}

/* =========================
   Final Chrome/Blink safety nets
   ========================= */
a.button,
.button,
.cta-btn,
.wp-block-button__link{ -webkit-text-fill-color: currentColor !important }

a.button.secondary,
.button.secondary,
.wp-block-button.is-style-outline .wp-block-button__link{
  color: #4851B1 !important;
  -webkit-text-fill-color: #4851B1 !important;
  background: #ffffff !important;
  border: 1px solid #4851B1 !important;
}
/* --- SR Value Props (global, mobile-ready) --- */
:root{
  --sr-primary:#4851B1;   /* Indigo */
  --sr-accent:#00C2A8;    /* Teal */
  --sr-white:#ffffff;
  --sr-dark:#0b1020;
  --sr-muted:#6b7280;
  --sr-offwhite:#f5f7fb;  /* fallback */
}
@supports (color: color-mix(in srgb, white 92%, black)) {
  :root{ --sr-offwhite: color-mix(in srgb, var(--sr-white) 92%, var(--sr-dark) 8%); }
}

.sr-value-props{ margin:16px 0 0; }
.sr-value-props .grid{
  display:grid;
  gap:clamp(10px, 2vw, 16px);
  grid-template-columns:repeat(3, minmax(0,1fr));
  align-items:center;
}
@media (max-width:900px){
  .sr-value-props .grid{ grid-template-columns:1fr; }
}

.sr-value-props .item{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.sr-value-props .icon{
  line-height:0; flex:0 0 auto; margin-top:2px;
}
.sr-value-props .icon svg{
  width:22px; height:22px;
  stroke:var(--sr-offwhite);
  fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  opacity:.95;
}

.sr-value-props h4{
  margin:0; color:var(--sr-offwhite);
  font-weight:800; font-size:1rem; line-height:1.2;
}
.sr-value-props p{
  margin:.2rem 0 0 0;
  color:rgba(255,255,255,.85); /* soft off-white body text */
  font-size:.95rem; line-height:1.45;
}