/*
 Theme Name: Kadence Child
 Template: kadence
*/

/* =========================================================
   SKYWATCH SIGNS — CLEAN, SAFE, DROP-IN CHILD THEME CSS
   =========================================================
   Notes:
   - Keep everything in THIS file (avoid Additional CSS) to prevent duplicates.
   - Purge LiteSpeed after edits (Toolbox → Purge All + CSS/JS).
   - If something looks stuck, hard refresh (Ctrl/Cmd+Shift+R).
*/

/* ---------------------------------
   0) Brand tokens & small defaults
   --------------------------------- */
:root{
  --sw-blue-700:#0e76c6;     /* deep sky blue */
  --sw-blue-500:#35b4ff;     /* light sky blue */
  --sw-ink:#0b2540;          /* dark text */
  --sw-gold:#ffe266;         /* CTA gold */
  --sw-gold-600:#f2c94c;
  --sw-white:#ffffff;

  --sw-radius-pill:9999px;
  --sw-radius-12:12px;
}

/* Slightly crisper text on modern browsers */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ============================
   1) HEADER / HERO CLEANUPS
   ============================ */

/* Remove stray borders/shadows that created “blue bars” */
.site-header,
.header-area,
.page-hero,
.entry-hero,
.archive-hero,
.kadence-sticky-header{
  border:0 !important;
  box-shadow:none !important;
  background-color:transparent; /* do NOT kill background images globally */
}

/* Kill pseudo underline/stripes Kadence sometimes injects */
.page-hero::before,
.page-hero::after,
.entry-hero::before,
.entry-hero::after,
.archive-hero::before,
.archive-hero::after{
  content:none !important;
  background:none !important;
  border:0 !important;
}

/* Don’t allow random hero overlays to cover content */
.kadence-sticky-header::before,
.kadence-sticky-header::after{ content:none !important; }

/* If any legacy SkyMiner images leak into the header as inline IMG, keep this commented.
   Uncomment ONLY if you see the issue. */
/*
img[src*="skyminer"] { display:none !important; visibility:hidden !important; opacity:0 !important; }
*[style*="skyminer"] { background-image:none !important; }
*/

/* Make sure canvas stays behind text in custom hero */
.skywatch-hero{ position:relative; color:var(--sw-white); }
#bg-animation{ position:absolute; inset:0; z-index:1 !important; }
.skywatch-hero .hero-content{ position:relative; z-index:2; }

/* ================================
   2) NAV UNDERLINE / PILL CLEANUP
   ================================ */

.primary-navigation .menu-item > a::after,
.header-navigation .menu-item > a::after,
.main-navigation .menu-item > a::after,
.mobile-navigation .menu-item > a::after,
#mobile-drawer .menu-item > a::after{
  content:none !important; display:none !important;
}
.primary-navigation .menu-item > a,
.header-navigation .menu-item > a,
.main-navigation .menu-item > a,
.mobile-navigation .menu-item > a{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
}
.site-header .primary-navigation{
  --nav-underline-color:transparent !important;
  --nav-underline-active-color:transparent !important;
  --nav-underline-height:0px !important;
  --nav-underline-offset:0px !important;
}

/* ==================================
   3) GLOBAL BUTTON LOOK & FEEL
   ================================== */

.cta-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce .single_add_to_cart_button,
a.button, button, .button{
  background:linear-gradient(180deg,var(--sw-blue-500),var(--sw-blue-700));
  color:var(--sw-white) !important;
  border:0;
  border-radius:var(--sw-radius-pill);
  padding:12px 22px;
  font-weight:700;
  letter-spacing:.2px;
  text-decoration:none;
  line-height:1.2;
  box-shadow:0 8px 20px rgba(0,174,255,.35);
  transition:transform .08s ease, box-shadow .2s ease, filter .2s ease;
}
.cta-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
a.button:hover, button:hover, .button:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(0,174,255,.45);
  filter:brightness(1.05);
}
.cta-button:focus,
.wp-block-button__link:focus,
.woocommerce a.button:focus,
.woocommerce button.button:focus,
a.button:focus, button:focus, .button:focus{
  outline:2px solid var(--sw-white);
  box-shadow:0 0 0 4px rgba(0,174,255,.35);
}

/* Gutenberg “outline” buttons should look filled in this design */
.wp-block-button.is-style-outline .wp-block-button__link{
  background:linear-gradient(180deg,var(--sw-blue-500),var(--sw-blue-700));
  border:0; color:#fff !important;
}

/* ===========================================
   4) HERO BUTTONS — HIGH CONTRAST ON BLUE
   =========================================== */

.skywatch-hero .button-group{
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
}

.skywatch-hero .button-group a,
.skywatch-hero a.cta-button,
.skywatch-hero .cta-button,
.skywatch-hero .wp-block-button__link{
  background:#fff !important;                 /* MAX contrast */
  background-image:none !important;
  color:var(--sw-ink) !important;
  border:2px solid rgba(0,0,0,.08) !important;
  border-radius:14px !important;
  padding:.9rem 1.25rem !important;
  font-weight:800 !important;
  position:relative; z-index:3;
  box-shadow:
    0 0 0 6px rgba(255,255,255,.25),
    0 14px 28px rgba(0,0,0,.30),
    inset 0 -2px 0 rgba(0,0,0,.10) !important;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
.skywatch-hero .button-group a:hover,
.skywatch-hero .cta-button:hover,
.skywatch-hero .wp-block-button__link:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:
    0 0 0 8px rgba(255,255,255,.28),
    0 18px 32px rgba(0,0,0,.30),
    inset 0 -2px 0 rgba(0,0,0,.10) !important;
}
/* Alt/secondary = Gold */
.skywatch-hero .button-group a.alt,
.skywatch-hero .cta-button.alt,
.skywatch-hero .wp-block-button.is-style-outline .wp-block-button__link{
  background:var(--sw-gold) !important;
  background-image:none !important;
  border-color:var(--sw-gold-600) !important;
  color:var(--sw-ink) !important;
}

/* Mobile: make hero CTAs full-width for easy taps */
@media (max-width:640px){
  .skywatch-hero .button-group a,
  .skywatch-hero .cta-button,
  .skywatch-hero .wp-block-button__link{
    width:100% !important; text-align:center !important;
  }
}

/* ======================================================
   5) SHOP / ARCHIVE — HIDE EXCERPTS ON GRID ONLY
   ====================================================== */

.woocommerce-shop ul.products li.product .product-excerpt,
.post-type-archive-product ul.products li.product .product-excerpt,
.tax-product_cat ul.products li.product .product-excerpt,
.tax-product_tag ul.products li.product .product-excerpt,
.woocommerce-shop ul.products li.product .woocommerce-product-details__short-description,
.post-type-archive-product ul.products li.product .woocommerce-product-details__short-description,
.tax-product_cat ul.products li.product .woocommerce-product-details__short-description,
.tax-product_tag ul.products li.product .woocommerce-product-details__short-description,
.woocommerce-shop ul.products li.product .kadence_product_excerpt,
.post-type-archive-product ul.products li.product .kadence_product_excerpt,
.tax-product_cat ul.products li.product .kadence_product_excerpt,
.tax-product_tag ul.products li.product .kadence_product_excerpt{
  display:none !important;
}

/* Keep single product tabs/descriptions visible */
.single-product .woocommerce div.product .woocommerce-product-details__short-description,
.single-product .woocommerce div.product .woocommerce-tabs,
.single-product .woocommerce div.product .woocommerce-tabs .panel{
  display:block !important; visibility:visible !important;
}

/* Reduce “no reviews” clutter */
.single-product .woocommerce .woocommerce-verification-required,
.single-product .woocommerce #reviews .woocommerce-noreviews,
.single-product .woocommerce p.woocommerce-noreviews,
.single-product .woocommerce #reviews .no-comments{
  display:none !important;
}

/* Tidy stacked spacing on mobile */
@media (max-width:768px){
  .single-product div.product .woocommerce-product-gallery{ margin-bottom:.75rem !important; }
  .single-product div.product .summary{ margin-top:.5rem !important; }
}
.single-product div.product .summary{ max-width:48rem; }

/* ======================================================
   6) PRODUCT GALLERY — STABLE VIEWPORT & THUMB GRID
   ====================================================== */

/* Keep main image stable */
.woocommerce div.product div.images .woocommerce-product-gallery__image img{
  width:100%; height:auto; object-fit:contain;
}

/* Lock the main viewport ratio so it doesn’t jump */
.woocommerce div.product div.images .flex-viewport{
  aspect-ratio:4 / 3; /* change to 1/1 or 16/9 if you prefer */
  height:auto !important; overflow:hidden !important; position:relative !important;
}

/* Ensure images scale sanely */
.woocommerce div.product div.images .woocommerce-product-gallery__image img,
.woocommerce div.product div.images .flex-viewport img{
  width:100% !important; height:auto !important;
  object-fit:contain !important; object-position:center center !important;
  display:block !important; opacity:1 !important; visibility:visible !important; transform:none !important;
}

/* Kill zoom clone that sometimes overlays */
.woocommerce div.product div.images .zoomImg{ display:none !important; }

/* Thumbnail strip as a nice grid */
.woocommerce div.product div.images .flex-control-thumbs{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:8px; margin-top:10px;
}
.woocommerce div.product div.images .flex-control-thumbs li{
  float:none !important; width:auto !important; margin:0 !important;
}
.woocommerce div.product div.images .flex-control-thumbs img{
  width:100%; height:78px; object-fit:cover;
  border-radius:6px; border:1px solid rgba(0,0,0,.08);
  transition:filter .15s ease;
}
.woocommerce div.product div.images .flex-control-thumbs img:hover{ filter:brightness(1.06); }

@media (max-width:640px){
  .woocommerce div.product div.images .flex-viewport{ aspect-ratio:1 / 1; }
  .woocommerce div.product div.images .flex-control-thumbs{ grid-template-columns:repeat(4,1fr); }
}

/* ===========================================
   7) FOOTER — CENTER & HIDE KADENCE CREDIT
   =========================================== */

.site-footer .site-info{
  text-align:center !important; width:100%; display:block;
  margin:0 auto; padding:10px 0; font-size:14px; color:#ffffff;
}
.site-footer .site-info a[href*="kadencewp.com"]{ display:none !important; }

/* ==================================================
   8) SAFETY — don’t style header/drawer controls
   ================================================== */

.site-header button,
.header-navigation button,
.kadence-popup-drawer button,
.off-canvas-panel button{
  background:transparent !important; box-shadow:none !important; border:0 !important;
}

/* ===================================
   9) MOBILE BUTTON TIGHTENING (≤768)
   =================================== */

@media (max-width:768px){
  .cta-button,
  .wp-block-button__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce .single_add_to_cart_button,
  a.button, button, .button{
    border-radius:var(--sw-radius-12) !important;
    padding:12px 18px !important;
    box-shadow:0 6px 14px rgba(0,174,255,.28);
  }
}

/* -------------------------------------------
   10) OPTIONAL DEBUG — uncomment to confirm
-------------------------------------------- */
/*
body::after{
  content:"child-css-loaded";
  position:fixed; right:8px; bottom:8px;
  font:11px/1 monospace; background:#000; color:#fff;
  padding:3px 6px; z-index:999999;
}
*/

/* Skywatch — Business Circuit */
#business-circuit .bc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:1024px){#business-circuit .bc-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){#business-circuit .bc-grid{grid-template-columns:repeat(2,1fr)}}
#business-circuit .bc-title{margin:0 0 10px;font-weight:700;font-size:1.05rem;letter-spacing:.2px}
#business-circuit .bc-note{margin:0 0 14px;font-size:.92rem;opacity:.9}
#business-circuit .bc-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:12px 10px;min-height:46px;border-radius:12px;text-decoration:none;font-weight:700;line-height:1.2;border:1px solid rgba(255,255,255,.25);background:linear-gradient(135deg,#dfe7ee 0%,#88c6f3 45%,#0d4e8a 100%);color:#072b47;box-shadow:0 8px 20px rgba(0,0,0,.18);transition:transform .08s ease,box-shadow .15s ease,filter .15s ease;white-space:normal}
#business-circuit .bc-btn:hover,#business-circuit .bc-btn:focus{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.22);filter:brightness(1.03)}
#business-circuit .bc-emoji{margin-right:.5em;font-size:1.1em}
#business-circuit .bc-top,#business-circuit .bc-bottom{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
#business-circuit .bc-top .bc-btn,#business-circuit .bc-bottom .bc-btn{padding:10px 14px;background:linear-gradient(135deg,#bcd4e7 0%,#74b6ea 50%,#0a4a84 100%)}





