/**
 * Charlie Shane — Site styles
 * Base typography, buttons, utilities, and skin hooks for seeded sections.
 * Header/footer-specific rules are appended in the Header/Footer phase.
 */

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
body,
.ast-container,
p {
  font-family: var(--font-body);
  color: var(--color-body);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.ast-single-post .entry-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-medium);
  color: var(--color-headings);
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--link-hover); }

/* ALL-CAPS kicker above section headings */
.cs-kicker {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-alt-brand);
  display: block;
  margin-bottom: 14px;
}

/* Inline "Learn More →" links */
.cs-link-arrow {
  font-weight: var(--weight-semibold);
  color: var(--color-headings);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color var(--transition-base), gap var(--transition-base);
}
.cs-link-arrow:hover { color: var(--color-brand); gap: 10px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.cs-btn,
.wp-block-button__link.cs-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.cs-btn-primary {
  background-color: var(--cta-bg);
  color: var(--text-cta);
  border-color: var(--cta-bg);
}
.cs-btn-primary:hover {
  background-color: var(--cta-hover-bg);
  border-color: var(--cta-hover-bg);
  color: var(--text-cta);
}
.cs-btn-outline {
  background-color: transparent;
  color: var(--border-color);
  border-color: var(--border-color);
}
.cs-btn-outline:hover {
  background-color: var(--border-color);
  color: #fff;
}

/* ============================================================
   SECTION BACKGROUND UTILITIES (for seeded Spectra sections)
   ============================================================ */
.cs-bg-warm-1    { background-color: var(--warm-1); }
.cs-bg-warm-2    { background-color: var(--warm-2); }
.cs-bg-sage-tint { background-color: var(--sage-tint); }
.cs-bg-white     { background-color: var(--color-background); }
.cs-bg-dark      { background-color: var(--color-headings); }
.cs-bg-dark h1, .cs-bg-dark h2, .cs-bg-dark h3, .cs-bg-dark h4 { color: #fff; }
.cs-bg-dark p    { color: rgba(255,255,255,0.75); }
.cs-bg-dark .cs-kicker { color: var(--color-primary); }

/* Rounded media wrapper */
.cs-media-round img { border-radius: var(--radius-lg); display: block; width: 100%; height: 100%; object-fit: cover; }

/* Star row */
.cs-stars { color: var(--star-color); letter-spacing: 2px; }

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.cs-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ============================================================
   HEADER (Astra HFB) — sticky blur, nav, phone CTA
   ============================================================ */
.ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap {
  background-color: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-secondary);
}
.ast-header-sticked .ast-primary-header-bar { box-shadow: 0 6px 24px rgba(64,79,60,0.08); }

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: 16px;
  color: var(--color-headings);
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover { color: var(--color-brand); }

/* Phone CTA button in header */
.ast-header-button-1 .ast-custom-button,
.ast-builder-button-wrap .ast-custom-button {
  background-color: var(--cta-bg);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  padding: 11px 22px;
}
.ast-header-button-1 .ast-custom-button:hover,
.ast-builder-button-wrap .ast-custom-button:hover { background-color: var(--cta-hover-bg); color:#fff; }

/* ============================================================
   MEGA MENU (2 columns, category headings)
   ============================================================ */
/* Center the whole mega panel under the trigger (the wrapper is the positioned element) */
.ast-desktop .astra-full-megamenu-wrapper {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  max-width: calc(100vw - 40px);
}
.ast-desktop .astra-megamenu {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 26px 32px;
  padding: 26px 30px !important;
  background: #fff;
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(64,79,60,0.16);
  width: 940px !important;
  min-width: 940px !important;
  max-width: calc(100vw - 40px) !important;
  box-sizing: border-box;
  /* center the solid panel under the trigger */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
@media (max-width: 1000px) {
  .ast-desktop .astra-megamenu { grid-template-columns: repeat(3, 1fr) !important; width: 640px !important; min-width: 640px !important; }
}
.astra-megamenu > .menu-item { list-style: none; }
.astra-megamenu > .menu-item.menu-item-heading > .menu-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-alt-brand);
  padding: 0 0 10px;
  pointer-events: none;
}
.astra-megamenu > .menu-item .sub-menu { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; background: transparent; }
.astra-megamenu > .menu-item .sub-menu .menu-link {
  font-size: 15px;
  color: var(--color-body);
  padding: 5px 0 !important;
}
.astra-megamenu > .menu-item .sub-menu .menu-link:hover { color: var(--color-brand); }

/* ============================================================
   FOOTER — dark, 3-col, social, NAP, map
   ============================================================ */
.site-footer,
.ast-footer-primary-section-equalled,
.footer-adv-overlay,
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
  background-color: var(--color-headings) !important;
  color: rgba(255,255,255,0.78);
}
.site-footer .widget-title,
.site-footer .cs-footer-heading {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.cs-footer-logo { height: 52px; width: auto; margin-bottom: 20px; display: block; }
.cs-footer-social { display: flex; gap: 12px; }
.cs-footer-social a {
  width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: border-color var(--transition-base), color var(--transition-base);
}
.cs-footer-social a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.cs-footer-phone a { color: #fff; font-weight: var(--weight-semibold); font-size: 17px; }
.cs-footer-phone a:hover { color: var(--color-primary); }
.cs-footer-address { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.75); margin-top: 12px; }
.cs-footer-map { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,0.15); height: 170px; }
.cs-footer-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.2); }

/* Copyright / disclaimer bar */
.site-below-footer-wrap[data-section="section-below-footer-builder"],
.ast-below-footer-wrap {
  background-color: #333d30 !important;
  color: rgba(255,255,255,0.6);
}
.site-below-footer-wrap .ast-builder-html-element,
.ast-below-footer-wrap * { font-size: 12px !important; line-height: 1.6; color: rgba(255,255,255,0.6) !important; }

/* ============================================================
   HOMEPAGE — let seeded sections control their own spacing
   (neutralize Spectra container default padding/width on front page)
   ============================================================ */
body.home .wp-block-uagb-container { padding: 0 !important; max-width: none !important; }
body.home .wp-block-uagb-container > .uagb-container-inner-blocks-wrap { max-width: none !important; width: 100% !important; }
body.home .site-content .ast-container { max-width: none; padding: 0; }
body.home .entry-header, body.home .ast-single-post .entry-header { display: none; } /* hero carries the H1 */


/* ============================================================
   FIXES 2026-07-17b — logo size, mega menu, phone icon
   ============================================================ */

/* Logo: smaller */
.site-header .site-logo-img img,
.ast-site-identity .site-logo-img img {
  max-width: 195px !important;
  height: auto !important;
}

/* Header phone CTA: add phone icon */
.ast-header-button-1 .ast-custom-button,
.ast-builder-button-wrap .ast-custom-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}
.ast-header-button-1 .ast-custom-button::before,
.ast-builder-button-wrap .ast-custom-button::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.9.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Mega menu: grey thin outline + drop shadow, left-justified, uppercase left headings */
.ast-desktop .ast-builder-menu-1 .astra-megamenu,
.astra-megamenu.sub-menu {
  border: 1px solid #E6E6E6 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 44px rgba(64,79,60,0.16) !important;
  background: #fff !important;
  text-align: left !important;
  padding: 26px 30px !important;
}
/* Column headings (depth-1 link) */
.astra-megamenu > .menu-item > .menu-link {
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-alt-brand) !important;
  text-align: left !important;
  justify-content: flex-start !important;
  padding: 0 0 10px !important;
  pointer-events: none;
}
/* hide the little arrow icons inside the mega menu */
.astra-megamenu .ast-icon.icon-arrow { display: none !important; }
/* Column links (depth-2) */
.astra-megamenu .sub-menu { text-align: left !important; }
.astra-megamenu .sub-menu .menu-link {
  text-align: left !important;
  justify-content: flex-start !important;
  color: var(--color-body) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 5px 0 !important;
}
.astra-megamenu .sub-menu .menu-link:hover { color: var(--color-brand) !important; }

/* Remove underlines from all buttons */
.cs-btn,
.cs-btn:hover,
.cs-btn-primary,
.cs-btn-outline,
.wp-block-button__link,
.ast-custom-button,
.gform_button,
.gform_wrapper .gform_footer input[type="submit"],
button.cs-btn {
  text-decoration: none !important;
}

/* Team slider */
.cs-team-slider { overflow: hidden; }
.cs-team-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.cs-team-track::-webkit-scrollbar { display: none; }
.cs-team-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 40px; }
.cs-team-arrow {
  width: 48px !important; height: 48px !important;
  min-width: 48px !important; max-width: 48px !important;
  padding: 0 !important; box-sizing: border-box !important;
  aspect-ratio: 1 / 1; flex: 0 0 48px;
  border-radius: 50% !important;
  border: 1px solid var(--color-secondary); background: #fff;
  color: var(--color-headings); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.cs-team-arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* Team card: hover lift + no underline on links */
.cs-team-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cs-team-card:hover { transform: none; box-shadow: none; }
.cs-team-card a { text-decoration: none !important; }

/* Team slider — responsive cards-per-view (desktop = 4 exactly) */
@media (max-width: 1024px) { .cs-team-card { flex-basis: calc((100% - 44px)/3) !important; } }
@media (max-width: 768px)  { .cs-team-card { flex-basis: calc((100% - 22px)/2) !important; } }
@media (max-width: 520px)  { .cs-team-card { flex-basis: 82% !important; } }

/* Blog slider (mirrors team slider) */
.cs-blog-slider { overflow: hidden; }
.cs-blog-track {
  display: flex; gap: 26px; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 4px;
}
.cs-blog-track::-webkit-scrollbar { display: none; }
.cs-blog-nav { display: flex; justify-content: center; align-items: center; gap: 18px; margin-top: 40px; }
.cs-slider-arrow {
  width: 48px !important; height: 48px !important;
  min-width: 48px !important; max-width: 48px !important;
  padding: 0 !important; box-sizing: border-box !important;
  aspect-ratio: 1 / 1; flex: 0 0 48px; border-radius: 50% !important;
  border: 1px solid var(--color-secondary); background: #fff;
  color: var(--color-headings); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.cs-slider-arrow:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.cs-blog-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.cs-blog-card:hover { transform: none; box-shadow: none; }
.cs-blog-card a { text-decoration: none !important; }
@media (max-width: 900px) { .cs-blog-card { flex-basis: calc((100% - 26px)/2) !important; } }
@media (max-width: 600px) { .cs-blog-card { flex-basis: 85% !important; } }

/* FAQ accordion +/- icon */
body.home details > summary { display: flex !important; justify-content: space-between; align-items: center; list-style: none; }
body.home details > summary::-webkit-details-marker { display: none; }
body.home details > summary::after {
  content: "+";
  flex: none;
  margin-left: 20px;
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--color-brand);
  transition: transform 0.2s ease;
}
body.home details[open] > summary::after { content: "\2212"; }

/* Footer text/link colors (NAP renders as bare shortcode output) */
.site-primary-footer-wrap { color: rgba(255,255,255,0.82) !important; }
.site-primary-footer-wrap p,
.site-primary-footer-wrap .widget_block,
.site-primary-footer-wrap .widget_custom_html { color: rgba(255,255,255,0.82) !important; }
.site-primary-footer-wrap a { color: #ffffff !important; }
.site-primary-footer-wrap a:hover { color: var(--color-primary) !important; }
.site-primary-footer-wrap .cs-footer-heading { color: var(--color-primary) !important; }

/* Remove white gap above footer on homepage */
body.home #content, body.home .site-content,
body.home #primary, body.home #main { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* ============================================================
   GRAVITY FORMS — Charlie Shane skin
   ============================================================ */
.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield textarea,
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container textarea {
  background-color: var(--warm-2) !important;
  border: 1px solid var(--color-secondary) !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-family: var(--font-body) !important;
  color: var(--color-headings) !important;
  box-shadow: none !important;
}
.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield textarea:focus {
  border-color: var(--color-brand) !important;
  outline: none !important;
}
.gform_wrapper .gfield_label { color: var(--color-headings) !important; font-weight: 600 !important; }

/* Submit button: green, full-width */
.gform_wrapper .gform_footer { text-align: center !important; padding: 8px 0 0 !important; margin-top: 8px !important; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper .gform-theme-button.gform_button {
  background-color: var(--cta-bg) !important;
  color: #fff !important;
  border: 2px solid var(--cta-bg) !important;
  border-radius: 4px !important;
  width: 100% !important;
  padding: 14px 28px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer .gform_button:hover {
  background-color: var(--cta-hover-bg) !important;
  border-color: var(--cta-hover-bg) !important;
}

/* Footer menu (Disclaimer / Privacy / Sitemap) in bottom bar */
.site-below-footer-wrap .footer-primary-navigation ul,
.ast-below-footer-wrap .footer-primary-navigation ul {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; margin: 0; padding: 0; list-style: none;
}
.site-below-footer-wrap .footer-primary-navigation a {
  color: rgba(255,255,255,0.7) !important; font-size: 13px !important; text-decoration: none !important;
}
.site-below-footer-wrap .footer-primary-navigation a:hover { color: var(--color-primary) !important; }

/* ============================================================
   BLOG SINGLE — sticky sidebar with consultation CTA + form
   ============================================================ */
body.single-post #secondary {
  position: sticky;
  top: 100px;
  align-self: flex-start;
  height: -moz-fit-content;
  height: fit-content;
}
body.single-post #secondary .widget { margin-bottom: 22px; }

.cs-sidebar-cta {
  background: var(--color-headings);
  color: #fff;
  border-radius: 16px;
  padding: 26px 24px;
  margin-bottom: 18px;
}
.cs-sidebar-title { font-family: var(--font-heading); font-weight: 600; font-size: 22px; line-height: 1.2; color: #fff; margin-bottom: 8px; }
.cs-sidebar-sub { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.82); margin-bottom: 16px; }
.cs-sidebar-nap { display: flex; flex-direction: column; gap: 6px; }
.cs-sidebar-phone a { color: #fff !important; font-weight: 700; font-size: 18px; }
.cs-sidebar-phone a:hover { color: var(--color-primary) !important; }
.cs-sidebar-addr { color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.5; }

/* Form card in sidebar */
body.single-post #secondary .widget_block .wp-block-shortcode,
body.single-post #secondary .gform_wrapper {
  background: var(--warm-2);
  border: 1px solid var(--color-secondary);
  border-radius: 16px;
  padding: 22px 20px;
}
body.single-post #secondary .gform_wrapper .gfield { margin-bottom: 12px; }

/* Hide post author byline (no "by smbteam") */
.ast-author-meta, .posted-by, .entry-meta .posted-by { display: none !important; }


/* Header phone as [company-phone] shortcode, styled as the CTA button */
.ast-primary-header-bar .ast-header-html a {
  display: inline-flex; align-items: center; gap: 8px;
  background-color: var(--cta-bg); color: #fff !important;
  border-radius: var(--radius-sm); font-weight: var(--weight-semibold);
  padding: 11px 22px; text-decoration: none !important; white-space: nowrap;
}
.ast-primary-header-bar .ast-header-html a:hover { background-color: var(--cta-hover-bg); color: #fff !important; }
.ast-primary-header-bar .ast-header-html a::before {
  content: ""; display: inline-block; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2016.92v3a2%202%200%200%201-2.18%202%2019.79%2019.79%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6%2019.79%2019.79%200%200%201-3.07-8.67A2%202%200%200%201%204.11%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.09%209.91a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.9.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Footer + sidebar email line */
.cs-footer-email { margin: 8px 0; }
.cs-footer-email a { color: #fff !important; font-size: 15px; }
.cs-footer-email a:hover { color: var(--color-primary) !important; }
.cs-sidebar-email { display: block; margin-top: 6px; }
.cs-sidebar-email a { color: #fff !important; }

/* ============================================================
   HOMEPAGE — links never underlined in seeded sections
   ============================================================ */
body.home .wp-block-uagb-container a { text-decoration: none !important; }

/* ============================================================
   HOMEPAGE MOBILE FIXES (seeded sections use inline styles;
   !important in a stylesheet overrides inline non-important)
   ============================================================ */
@media (max-width: 768px) {
  /* Collapse every two/three-column grid to a single column */
  body.home [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Scale oversized inline headings down */
  body.home [style*="font-size:60px"] { font-size: 34px !important; line-height: 1.1 !important; }
  body.home [style*="font-size:48px"] { font-size: 30px !important; line-height: 1.15 !important; }
  body.home [style*="font-size:44px"] { font-size: 28px !important; line-height: 1.18 !important; }
  body.home [style*="font-size:42px"] { font-size: 28px !important; line-height: 1.18 !important; }
  body.home [style*="font-size:40px"] { font-size: 26px !important; line-height: 1.18 !important; }
  body.home [style*="font-size:23px"] { font-size: 19px !important; }

  /* Reduce oversized card / section padding */
  body.home [style*="padding:74px 68px"] { padding: 32px 22px !important; }
  body.home [style*="padding:46px"]      { padding: 26px !important; }
  body.home [style*="padding:44px"]      { padding: 26px !important; }
  body.home [style*="88px calc"]         { padding: 48px 24px !important; }
  body.home section[style*="padding:100px 0"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  /* Neutralize edge-breaking negative/positive offsets that overflow on mobile */
  body.home [style*="margin-right:-90px"] { margin-right: 0 !important; }
  body.home [style*="margin-top:-90px"]   { margin-top: 0 !important; }
  body.home [style*="margin-top:44px"]    { margin-top: 0 !important; }
  body.home [style*="left:-18px"]         { left: 0 !important; }

  /* Keep decorative circles/shapes from causing horizontal scroll */
  body.home section { overflow-x: hidden; }

  /* Reviews strip + cards: tighter padding */
  body.home [style*="padding:26px 30px"] { padding: 20px 18px !important; }
  body.home [style*="gap:36px"] { gap: 22px !important; }
  body.home [style*="gap:64px"] { gap: 28px !important; }
  body.home [style*="gap:56px"] { gap: 26px !important; }
}

/* ============================================================
   MOBILE — broaden to ALL seeded pages (contact, reviews) + footer stacking
   ============================================================ */
/* No underlines on any seeded-section link (all pages, not just home) */
.wp-block-uagb-container a { text-decoration: none !important; }

@media (max-width: 768px) {
  /* Collapse grids + scale headings + padding on every seeded page */
  .wp-block-uagb-container [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .wp-block-uagb-container [style*="font-size:48px"] { font-size: 30px !important; line-height: 1.15 !important; }
  .wp-block-uagb-container [style*="font-size:44px"] { font-size: 28px !important; line-height: 1.18 !important; }
  .wp-block-uagb-container [style*="font-size:42px"] { font-size: 28px !important; line-height: 1.18 !important; }
  .wp-block-uagb-container [style*="font-size:40px"] { font-size: 26px !important; line-height: 1.18 !important; }
  .wp-block-uagb-container [style*="font-size:38px"] { font-size: 26px !important; line-height: 1.18 !important; }
  .wp-block-uagb-container [style*="padding:40px"] { padding: 24px !important; }

  /* Footer: stack the three columns instead of 3-across */
  .site-footer .ast-builder-footer-grid-columns { display: block !important; }
  .site-footer .site-footer-primary-section-1,
  .site-footer .site-footer-primary-section-2,
  .site-footer .site-footer-primary-section-3 {
    width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    margin-bottom: 26px !important;
  }
  .cs-footer-map { max-width: 100%; }
}

@media (max-width: 768px) {
  .wp-block-uagb-container [style*="padding:36px"] { padding: 22px !important; }
}

/* Sticky consultation sidebar on practice-area PAGES (same as blog posts) */
body.page #secondary {
  position: sticky; top: 100px; align-self: flex-start;
  height: -moz-fit-content; height: fit-content;
}
body.page #secondary .widget { margin-bottom: 22px; }
body.page #secondary .widget_block .wp-block-shortcode,
body.page #secondary .gform_wrapper {
  background: var(--warm-2); border: 1px solid var(--color-secondary);
  border-radius: 16px; padding: 22px 20px;
}

/* Hand-authored Spectra containers lack Spectra's generated flex-direction; force column so multi-section containers stack */
.wp-block-uagb-container > .uagb-container-inner-blocks-wrap { flex-direction: column; }

/* ============================================================
   BLOG/PAGE SIDEBAR — remove top gap + tighten the form
   ============================================================ */
body.single-post #secondary,
body.page #secondary {
  top: 28px !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body.single-post #secondary .widget:first-child,
body.page #secondary .widget:first-child { margin-top: 0 !important; }
body.single-post #secondary .widget,
body.page #secondary .widget { margin-bottom: 16px !important; }

/* Consultation CTA card: a touch tighter */
#secondary .cs-sidebar-cta { padding: 22px 22px !important; }

/* Gravity form in the sidebar: compact so the submit button is visible */
body.single-post #secondary .gform_wrapper,
body.page #secondary .gform_wrapper { padding: 16px 16px !important; }
#secondary .gform_wrapper .gfield { margin-bottom: 8px !important; }
#secondary .gform_wrapper .gform_fields { row-gap: 8px !important; }
#secondary .gform_wrapper .gfield input[type="text"],
#secondary .gform_wrapper .gfield input[type="email"],
#secondary .gform_wrapper .gfield input[type="tel"],
#secondary .gform_wrapper .gfield textarea {
  padding: 9px 12px !important;
}
#secondary .gform_wrapper textarea { min-height: 64px !important; height: 64px !important; }
#secondary .gform_wrapper .gfield_label { margin-bottom: 3px !important; font-size: 13px !important; }
#secondary .gform_wrapper .gform_footer { padding-top: 4px !important; margin-top: 4px !important; }

/* Sidebar widgets: drop Astra's white 2em-padded box so the CTA/form cards sit flush (kills top gap) */
body.single-post #secondary .widget,
body.page #secondary .widget {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  border: 0 !important;
}

/* Content box: halve the top padding; give the sticky sidebar a little top space */
body.single-post .ast-article-single,
body.page .ast-article-single { padding-top: 1.25em !important; }
body.single-post #secondary,
body.page #secondary { margin-top: 20px !important; }

/* Align content column top with the sticky sidebar top */
body.single-post #primary,
body.page #primary { margin-top: 20px !important; }

/* Blog meta: drop the "By /" (bare text nodes) but keep the date */
.single-post .entry-meta { font-size: 0 !important; }
.single-post .entry-meta .posted-by { display: none !important; }
.single-post .entry-meta .posted-on,
.single-post .entry-meta .posted-on * { font-size: 15px !important; color: var(--color-alt-brand) !important; }
.single-post .entry-meta .posted-on a { color: var(--color-alt-brand) !important; }

/* Mega-menu headers that are real landing pages (Divorce, Consumer Protection) are clickable;
   pure group labels (href="#") stay non-clickable */
.ast-desktop .astra-megamenu > .menu-item > .menu-link[href]:not([href="#"]) {
  pointer-events: auto !important;
  cursor: pointer;
}
.ast-desktop .astra-megamenu > .menu-item > .menu-link[href]:not([href="#"]):hover {
  color: var(--color-brand) !important;
  text-decoration: underline;
}

/* Footer disclaimer bar: higher contrast */
.site-below-footer-wrap[data-section="section-below-footer-builder"] .ast-builder-html-element,
.site-below-footer-wrap .ast-builder-html-element,
.ast-below-footer-wrap * { color: rgba(255,255,255,0.85) !important; }
.site-below-footer-wrap a, .ast-below-footer-wrap a { color: #fff !important; text-decoration: underline; }

/* Scroll-to-top button: brand green (was default blue) */
#ast-scroll-top {
  background-color: var(--color-accent) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
}
#ast-scroll-top:hover { background-color: var(--cta-hover-bg) !important; }

/* Footer copyright: override Astra's low-contrast global-color-3 */
.site-below-footer-wrap .ast-footer-copyright,
.ast-footer-copyright.site-footer-focus-item,
.ast-footer-copyright p,
.ast-footer-copyright * { color: rgba(255,255,255,0.9) !important; }

/* Team cards: whole card clickable (stretched-link over the "Learn More" anchor) */
.cs-team-card { position: relative; cursor: pointer; }
.cs-team-card a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; }

/* Footer legal menu (Disclaimer / Privacy / Sitemap) rendered via HTML element */
.site-below-footer-wrap .cs-footer-legal-menu {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end;
  margin: 0; padding: 0; list-style: none;
}
.site-below-footer-wrap .cs-footer-legal-menu li { margin: 0; }
.site-below-footer-wrap .cs-footer-legal-menu a { color: rgba(255,255,255,0.8) !important; font-size: 13px !important; text-decoration: none !important; }
.site-below-footer-wrap .cs-footer-legal-menu a:hover { color: var(--color-primary) !important; }
@media (max-width: 768px) { .site-below-footer-wrap .cs-footer-legal-menu { justify-content: center; } }

/* Footer legal links row sits above the disclaimer, aligned left with it */
.ast-footer-copyright .cs-footer-legal { margin-bottom: 12px; }
.ast-footer-copyright .cs-footer-legal-menu { justify-content: flex-start; gap: 8px 20px; }
.ast-footer-copyright .cs-footer-legal-menu a { color: #fff !important; font-weight: 600; }
.ast-footer-copyright .cs-footer-copy { line-height: 1.6; }
@media (max-width: 768px) {
  .ast-footer-copyright .cs-footer-legal-menu { justify-content: center; }
}

/* Blog archive header */
.cs-blog-header {
  text-align: center;
  max-width: 720px;
  margin: 8px auto 44px;
  padding: 0 20px;
}
.cs-blog-header h1 {
  font-size: 44px;
  line-height: 1.1;
  margin: 0 0 14px;
  color: var(--color-headings);
}
.cs-blog-header p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--color-body);
  margin: 0;
}
@media (max-width: 768px) { .cs-blog-header h1 { font-size: 30px; } }

/* Blog archive: match the About page's header offset exactly
   (About = #primary 20px margin + 84px section top padding). */
body.blog #primary { margin-top: 20px !important; }
body.blog .cs-blog-header { margin-top: 0; padding-top: 84px; }

/* Blog/archive cards: hide the category ("Uncategorized") above each post title */
.ast-article-post .ast-taxonomy-container { display: none !important; }

/* ============================================================
   MARKUP QA FIXES (Aug 2026)
   ============================================================ */

/* #2/#3 — Team + blog cards: match Abbey's design hover (link colour + arrow
   nudge only). The old translateY lift was being clipped by the slider's
   overflow:hidden, cutting off the card top and drop shadow. */
.cs-team-card .cs-arrow-x,
.cs-blog-card .cs-arrow-x { display: inline-block; transition: transform .2s ease; }
.cs-team-card:hover a,
.cs-blog-card:hover a { color: var(--color-brand) !important; }
.cs-team-card:hover .cs-arrow-x,
.cs-blog-card:hover .cs-arrow-x { transform: translateX(5px); }

/* #6/#7 — About staff cards: equal height, text block vertically centred */
.cs-staff-grid { align-items: stretch !important; }
.cs-staff-grid > div { height: 100%; }
.cs-staff-grid > div > div:last-child {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* #8 — Contact page: centre the page heading */
.page-id-63 .entry-title,
.page-id-63 .ast-single-post .entry-title { text-align: center; }

/* ============================================================
   #5 — PRACTICE AREAS CAROUSEL (matches Claude design)
   ============================================================ */
.cs-pa-head {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: flex-end; gap: 24px; margin-bottom: 44px;
}
.cs-pa-nav { display: flex; align-items: center; gap: 14px; }
.cs-pa-arrow {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--color-secondary); background: #fff;
  color: var(--color-headings); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.cs-pa-arrow:hover {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}

.cs-pa-slider { overflow: hidden; }
.cs-pa-track {
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -ms-overflow-style: none; scrollbar-width: none;
}
.cs-pa-track::-webkit-scrollbar { display: none; }

.cs-pa-card {
  flex: 0 0 calc((100% - 48px)/3);
  scroll-snap-align: start;
  background: var(--warm-1);
  border-radius: 16px;
  padding: 34px 32px 30px;
  display: flex; flex-direction: column; gap: 12px;
  min-height: 250px;
  text-decoration: none !important;
  transition: background .25s ease;
}
.cs-pa-ico {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--color-headings); color: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px; flex: none;
  transition: background .25s ease;
}
.cs-pa-title {
  font-family: var(--font-heading); font-weight: 600;
  font-size: 24px; line-height: 1.2; color: var(--color-headings);
  transition: color .25s ease;
}
.cs-pa-desc {
  font-size: 15px; line-height: 1.55; color: var(--color-body);
  flex: 1; transition: color .25s ease;
}
.cs-pa-link {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 15px; color: var(--color-headings);
  transition: color .25s ease;
}
/* Hover: whole card flips to deep green */
.cs-pa-card:hover { background: var(--color-headings); }
.cs-pa-card:hover .cs-pa-ico { background: rgba(255,255,255,0.16); }
.cs-pa-card:hover .cs-pa-title { color: #fff; }
.cs-pa-card:hover .cs-pa-desc { color: rgba(255,255,255,0.85); }
.cs-pa-card:hover .cs-pa-link { color: #fff; }
.cs-pa-card:hover .cs-arrow-x { transform: translateX(5px); }

@media (max-width: 1024px) { .cs-pa-card { flex-basis: calc((100% - 24px)/2); } }
@media (max-width: 700px)  {
  .cs-pa-card { flex-basis: 85%; min-height: 0; padding: 28px 24px 26px; }
  .cs-pa-head { align-items: flex-start; }
  .cs-pa-head h2 { font-size: 32px !important; }
}

/* #4 — Footer NAP icons (matches the Claude design: bare 18px icons, 10px gap) */
.cs-footer-phone,
.cs-footer-email,
.cs-footer-address { display: flex; align-items: center; gap: 10px; }
.cs-footer-address { align-items: flex-start; }
.cs-footer-phone .cs-fi,
.cs-footer-email .cs-fi,
.cs-footer-address .cs-fi { flex: none; width: 18px; height: 18px; }
.cs-footer-address .cs-fi { margin-top: 4px; }

/* ============================================================
   SLIDER ARROWS — keep them perfect circles in the brand colours
   in every state. Astra's default button styling was bleeding
   through on :focus/:active (blue fill + extra padding => oval).
   ============================================================ */
.cs-pa-arrow,
.cs-team-arrow,
.cs-slider-arrow {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  flex: 0 0 auto;
  width: 48px !important;
  height: 48px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  line-height: 1;
  background: #fff !important;
  border: 1px solid var(--color-secondary) !important;
  color: var(--color-headings) !important;
  box-shadow: none !important;
  text-shadow: none;
}

/* Hover / keyboard-focus / pressed — all use the design's deep green */
.cs-pa-arrow:hover,
.cs-pa-arrow:focus,
.cs-pa-arrow:focus-visible,
.cs-pa-arrow:active,
.cs-team-arrow:hover,
.cs-team-arrow:focus,
.cs-team-arrow:focus-visible,
.cs-team-arrow:active,
.cs-slider-arrow:hover,
.cs-slider-arrow:focus,
.cs-slider-arrow:focus-visible,
.cs-slider-arrow:active {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* Mouse clicks shouldn't leave a ring; keyboard users still get one (brand green, never blue) */
.cs-pa-arrow:focus:not(:focus-visible),
.cs-team-arrow:focus:not(:focus-visible),
.cs-slider-arrow:focus:not(:focus-visible) { outline: none !important; }
.cs-pa-arrow:focus-visible,
.cs-team-arrow:focus-visible,
.cs-slider-arrow:focus-visible {
  outline: 2px solid var(--color-brand) !important;
  outline-offset: 2px !important;
}

/* ============================================================
   ABOUT (#7) — centre the intro block in its white band.
   The gap above the text was ~146px (Astra's page-builder
   #primary padding of 4em, plus our 20px #primary margin, plus
   the section's own 62px) while below it was only 62px — so the
   text sat low. Remove the outer top spacing on this page so the
   section's symmetric 62px padding is the ONLY thing setting the
   gap: 62px above, 62px below. Other pages are untouched.
   ============================================================ */
.page-id-41 #primary {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ============================================================
   MOBILE QA ROUND — Markup.io mobile board, items #10–#21.
   All on the homepage. Placed last so these win over the
   earlier July mobile pass where the two overlap.
   ============================================================ */
@media (max-width: 768px) {

  /* #10 — less space between the header and the hero box
     #12 — less space between the hero and Content 1
     (hero is the section with inline padding 64px 0 130px) */
  body.home section[style*="padding:64px 0 130px"] {
    padding-top: 24px !important;
    padding-bottom: 56px !important;
  }
  body.home section[style*="padding:40px 0 104px"] { padding-top: 10px !important; }

  /* #13 — MORE breathing room between the video and its text when stacked
     (the July pass had squeezed this 64px gap down to 28px) */
  body.home section[style*="padding:40px 0 104px"] > div { gap: 44px !important; }

  /* #16 — the Prenup/Postnup image was min-height:520px, which on a narrow
     screen crops the subject out. Shorter = more of the scene visible. */
  body.home [style*="min-height:520px"] { min-height: 260px !important; }

  /* #14 + #17 — arrows left-aligned with the cards (were centred)
     #15 + #18 — the section button moves BELOW the arrows.
     The button lives in the section's header row, so that row becomes
     display:contents and the container becomes a flex column; that lets
     us order title → cards → arrows → button. */
  body.home #team > div,
  body.home #blog > div { display: flex; flex-direction: column; }

  /* the header row carries an INLINE display:flex, so this needs !important
     or the order[] rules below never take effect */
  body.home #team > div > div:first-child,
  body.home #blog > div > div:first-child { display: contents !important; }

  body.home #team > div > div:first-child > div,
  body.home #blog > div > div:first-child > div { order: 1; margin-bottom: 8px !important; }

  body.home #team .cs-team-slider,
  body.home #blog .cs-blog-slider { order: 2; }

  body.home #team .cs-team-nav,
  body.home #blog .cs-blog-nav {
    order: 3;
    justify-content: flex-start !important;
    margin-top: 24px !important;
  }

  body.home #team > div > div:first-child > a.cs-btn,
  body.home #blog > div > div:first-child > a.cs-btn {
    order: 4;
    align-self: flex-start;
    margin-top: 18px;
  }

  /* #19 + #20 — show exactly ONE card at a time, fully visible, with no
     sliver of the next card clipped at the edge. Cards go full content
     width and the track snaps one card per swipe. */
  body.home .cs-pa-slider,
  body.home .cs-team-slider,
  body.home .cs-blog-slider {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }
  body.home .cs-pa-track,
  body.home .cs-team-track,
  body.home .cs-blog-track {
    padding-left: 0 !important;
    padding-right: 0 !important;
    scroll-padding-left: 0;
  }
  body.home .cs-pa-card,
  body.home .cs-team-card,
  body.home .cs-blog-card {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start;
  }
}

/* #11 — hamburger trigger in the brand green (#404F3C). Not inside the
   768px query: Astra swaps to the mobile header at its own break point. */
.menu-toggle,
.main-header-menu-toggle,
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger-outline,
.mobile-menu-toggle-icon { color: var(--color-headings) !important; }

.mobile-menu-toggle-icon .ast-mobile-svg,
.menu-toggle .ast-mobile-svg,
.ast-mobile-menu-trigger-minimal .ast-mobile-svg,
.ast-mobile-svg.ast-menu-svg,
.ast-mobile-svg.ast-close-svg,
.mobile-menu-toggle-icon svg { fill: var(--color-headings) !important; }

/* #21 — footer gets the same 40px side padding as the other mobile sections */
@media (max-width: 768px) {
  .site-footer .ast-builder-grid-row-container-inner {
    padding-left: 40px !important;
    padding-right: 40px !important;
  }
}

/* ============================================================
   #22 — MOBILE MENU. Root cause was not styling: the
   `mobile_menu` ("Off-Canvas Menu") location had no menu
   assigned, so WordPress fell back to auto-listing every page
   alphabetically by page title (hence "About the Law Office of
   Charlie Shane", Disclaimer, Opt-out Preferences). The Primary
   menu is now assigned to that location, so the mobile dropdown
   mirrors the desktop main menu.

   These rules just make the Practice Areas group labels read as
   section headings — the same uppercase treatment as the desktop
   mega menu — so they don't look like broken links.
   ============================================================ */
.ast-header-break-point #ast-hf-mobile-menu .menu-item-heading > .menu-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-alt-brand) !important;
}
/* the label itself doesn't navigate (href="#"); the arrow expands it */
.ast-header-break-point #ast-hf-mobile-menu .menu-item-heading > .menu-link {
  pointer-events: none;
}
.ast-header-break-point #ast-hf-mobile-menu .menu-item-heading > .ast-menu-toggle {
  pointer-events: auto;
}

/* ============================================================
   MOBILE MENU — dropdown arrows: kill Astra's dotted focus box
   and the stock blue. Two separate Astra sources:
     • outline-style:dotted on a big :focus-visible selector list
       that includes .ast-menu-toggle  -> the "weird outline"
     • color:var(--ast-global-color-1) (#045cb4) on hover /
       current-menu-item / current-menu-ancestor  -> the blue
   ============================================================ */

/* arrow colour: brand green in every state */
.ast-header-break-point #ast-hf-mobile-menu .menu-item > .ast-menu-toggle,
.ast-header-break-point #ast-hf-mobile-menu .menu-item:hover > .ast-menu-toggle,
.ast-header-break-point #ast-hf-mobile-menu .menu-item.current-menu-item > .ast-menu-toggle,
.ast-header-break-point #ast-hf-mobile-menu .menu-item.current-menu-ancestor > .ast-menu-toggle,
.ast-header-break-point .ast-builder-menu-mobile .main-navigation .menu-item > .ast-menu-toggle {
  color: var(--color-headings) !important;
  background: transparent !important;
}
.ast-header-break-point #ast-hf-mobile-menu .ast-menu-toggle .ast-arrow-svg,
.ast-header-break-point #ast-hf-mobile-menu .ast-menu-toggle svg,
.ast-header-break-point .ast-builder-menu-mobile .ast-menu-toggle svg {
  fill: var(--color-headings) !important;
}

/* no dotted box on tap/click; keyboard users still get a clean brand ring */
#ast-hf-mobile-menu .ast-menu-toggle:focus,
#ast-hf-mobile-menu .menu-link:focus,
.ast-builder-menu-mobile .ast-menu-toggle:focus,
.menu-toggle:focus {
  outline: none !important;
  outline-style: none !important;
  box-shadow: none !important;
}
#ast-hf-mobile-menu .ast-menu-toggle:focus-visible,
#ast-hf-mobile-menu .menu-link:focus-visible,
.menu-toggle:focus-visible {
  outline: 2px solid var(--color-brand) !important;
  outline-style: solid !important;
  outline-offset: 2px !important;
}

/* current page row: brand tint instead of Astra's stock blue */
.ast-header-break-point #ast-hf-mobile-menu .menu-item.current-menu-item > .menu-link,
.ast-header-break-point #ast-hf-mobile-menu .menu-item.current-menu-ancestor > .menu-link {
  color: var(--color-brand) !important;
  background: var(--sage-tint) !important;
}