/* ICS shared site styles
   Global reusable values and helpers for Dreamweaver editing.
   Page-specific CSS files are loaded after this file so they can override safely. */

:root {
  --ics-green: #4eab56;
  --ics-green-dark: #258036;
  --ics-teal: #6faab6;
  --ics-blue: #6faab6;
  --ics-navy: #061b2c;
  --ics-navy-2: #0a2538;
  --ics-navy-deep: #061b2c;
  --ics-blue-deep: #0a2538;
  --ics-text: #283340;
  --ics-ink: #24313d;
  --ics-muted: #637180;
  --ics-light: #f7f9fb;
  --ics-soft-blue: #eef7fa;
  --ics-soft-green: #eef8f1;
  --ics-pale-blue: #eef7fa;
  --ics-pale-green: #edf8ef;
  --ics-paper: #ffffff;
  --ics-border: #dfe7ec;
  --ics-line: #dde8ea;
  --ics-radius: 1.35rem;
  --ics-radius-sm: .75rem;
  --ics-radius-md: 1.35rem;
  --ics-radius-lg: 2rem;
  --ics-shadow: 0 18px 46px rgba(6, 27, 44, .12);
  --ics-shadow-soft: 0 14px 36px rgba(6, 27, 44, .10);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.serif,
.serif-heading {
  font-family: "Libre Baskerville", Georgia, serif;
}

.ics-section {
  padding: 5rem 0;
}

.ics-section-soft {
  background: var(--ics-soft-blue);
}

.ics-section-green {
  background: var(--ics-soft-green);
}

.ics-section-title {
  color: var(--ics-navy);
  font-weight: 800;
  letter-spacing: -.025em;
}

.ics-section-intro {
  color: var(--ics-muted);
  max-width: 760px;
  line-height: 1.65;
}

/* =========================================================
   ICS FOOTER BRAND TEXT FINAL FIX
   Ensures footer brand text displays as ICS and copyright is clean.
   ========================================================= */

.site-footer .footer-brand strong,
.site-footer .footer-brand span,
.site-footer .footer-logo-text,
.site-footer .footer-brand-name {
  color: #ffffff !important;
}

/* Hide older two-line footer brand wording if it remains in any static/generated page */
.site-footer .footer-brand strong,
.site-footer .footer-brand-name {
  font-size: 0 !important;
  line-height: 0 !important;
}

.site-footer .footer-brand strong::after,
.site-footer .footer-brand-name::after {
  content: "ICS" !important;
  display: inline-block !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}

/* =========================================================
   ICS HEADER LOGO ONLY
   Removes the text beside the top-left logo while keeping
   the footer brand text and layout intact.
   ========================================================= */

.site-header .brand-lockup .brand-name,
.site-header .navbar-brand .brand-name {
  display: none !important;
}

.site-header .brand-lockup,
.site-header .navbar-brand {
  gap: 0 !important;
}

/* Keep the larger icon from the previous header work */
.site-header img.brand-logo,
.site-header .brand-logo {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  flex: 0 0 68px !important;
  display: block !important;
}

/* Mobile */
@media (max-width: 991.98px) {
  .site-header img.brand-logo,
  .site-header .brand-logo {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    flex-basis: 60px !important;
  }
}

@media (max-width: 575.98px) {
  .site-header img.brand-logo,
  .site-header .brand-logo {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    max-width: 56px !important;
    flex-basis: 56px !important;
  }
}

/* =========================================================
   ICS HEADER LOGO ALIGN + SIZE TWEAK
   - keeps header text hidden
   - makes the logo larger
   - lines the logo up more closely with the main page content
   ========================================================= */

/* Keep header text hidden */
.site-header .brand-lockup .brand-name,
.site-header .navbar-brand .brand-name {
  display: none !important;
}

/* Remove the empty gap from the old text lockup */
.site-header .brand-lockup,
.site-header .navbar-brand {
  gap: 0 !important;
}

/* Desktop layout: increase side padding so the logo aligns
   more closely with the start of the page content */
@media (min-width: 992px) {
  .site-header .nav-wrap,
  body.home-page .site-header .nav-wrap,
  body.membership-page .site-header .nav-wrap,
  body.training-page .site-header .nav-wrap,
  body.advice-page .site-header .nav-wrap,
  body.member-profile-page .site-header .nav-wrap,
  body.directory-page .site-header .nav-wrap {
    padding-left: clamp(4.25rem, 6vw, 7rem) !important;
    padding-right: clamp(4.25rem, 6vw, 7rem) !important;
    column-gap: 2.35rem !important;
  }
}

/* Larger logo */
.site-header .brand-logo,
.site-header img.brand-logo {
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  flex: 0 0 78px !important;
  display: block !important;
}

/* Small screens */
@media (max-width: 991.98px) {
  .site-header .brand-logo,
  .site-header img.brand-logo {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    flex-basis: 66px !important;
  }
}

@media (max-width: 575.98px) {
  .site-header .brand-logo,
  .site-header img.brand-logo {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    max-width: 58px !important;
    flex-basis: 58px !important;
  }
}

/* =========================================================
   ICS HEADER LOGO FINAL ALIGNMENT
   Makes the header logo larger and aligns it with the main
   hero/page content start instead of the far browser edge.
   ========================================================= */

/* Header remains logo-only */
.site-header .brand-lockup .brand-name,
.site-header .navbar-brand .brand-name {
  display: none !important;
}

.site-header .brand-lockup,
.site-header .navbar-brand {
  gap: 0 !important;
}

/* Desktop: line the logo up with the hero/page content start */
@media (min-width: 1200px) {
  .site-header .nav-wrap,
  body.home-page .site-header .nav-wrap,
  body.membership-page .site-header .nav-wrap,
  body.training-page .site-header .nav-wrap,
  body.advice-page .site-header .nav-wrap,
  body.member-profile-page .site-header .nav-wrap,
  body.directory-page .site-header .nav-wrap {
    padding-left: clamp(8.75rem, 12vw, 14.25rem) !important;
    padding-right: clamp(4.25rem, 6vw, 7rem) !important;
  }
}

/* Slightly smaller desktop/tablet widths need a little less inset */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-header .nav-wrap,
  body.home-page .site-header .nav-wrap,
  body.membership-page .site-header .nav-wrap,
  body.training-page .site-header .nav-wrap,
  body.advice-page .site-header .nav-wrap,
  body.member-profile-page .site-header .nav-wrap,
  body.directory-page .site-header .nav-wrap {
    padding-left: clamp(5.5rem, 8vw, 7.5rem) !important;
    padding-right: clamp(2.5rem, 4vw, 4rem) !important;
  }
}

/* Larger logo */
.site-header .brand-logo,
.site-header img.brand-logo {
  width: 92px !important;
  height: 92px !important;
  min-width: 92px !important;
  max-width: 92px !important;
  flex: 0 0 92px !important;
  display: block !important;
}

/* Give the header enough breathing room for the larger logo */
.site-header .nav-wrap {
  min-height: 116px !important;
}

/* Medium screens */
@media (max-width: 991.98px) {
  .site-header .brand-logo,
  .site-header img.brand-logo {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex-basis: 72px !important;
  }

  .site-header .nav-wrap {
    min-height: 92px !important;
  }
}

/* Small mobile */
@media (max-width: 575.98px) {
  .site-header .brand-logo,
  .site-header img.brand-logo {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    flex-basis: 62px !important;
  }

  .site-header .nav-wrap {
    min-height: 84px !important;
  }
}

/* =========================================================
   ICS HEADER LOGO FORCE-LARGER FIX
   Uses stronger selectors plus transform so the visible mark
   definitely increases even if older width rules are cached
   or loaded later.
   ========================================================= */

/* Keep the header as logo-only */
html body .site-header .brand-lockup .brand-name,
html body .site-header .navbar-brand .brand-name {
  display: none !important;
}

html body .site-header .brand-lockup,
html body .site-header .navbar-brand {
  gap: 0 !important;
  overflow: visible !important;
}

/* Desktop alignment with the hero text block */
@media (min-width: 1200px) {
  html body .site-header .nav-wrap {
    padding-left: clamp(8.75rem, 12vw, 14.25rem) !important;
    padding-right: clamp(4.25rem, 6vw, 7rem) !important;
  }
}

/* Strong visual size increase */
html body .site-header a.brand-lockup > img.brand-logo,
html body .site-header a.navbar-brand > img.brand-logo,
html body .site-header img.brand-logo,
html body .site-header .brand-logo {
  width: 104px !important;
  height: 104px !important;
  min-width: 104px !important;
  max-width: 104px !important;
  flex: 0 0 104px !important;
  display: block !important;
  transform: scale(1.18) !important;
  transform-origin: center center !important;
}

html body .site-header .nav-wrap {
  min-height: 126px !important;
  overflow: visible !important;
}

html body .site-header,
html body .site-header .navbar {
  overflow: visible !important;
}

/* Medium screens */
@media (max-width: 991.98px) {
  html body .site-header a.brand-lockup > img.brand-logo,
  html body .site-header a.navbar-brand > img.brand-logo,
  html body .site-header img.brand-logo,
  html body .site-header .brand-logo {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
    max-width: 78px !important;
    flex-basis: 78px !important;
    transform: scale(1.08) !important;
  }

  html body .site-header .nav-wrap {
    min-height: 98px !important;
  }
}

/* Small mobile */
@media (max-width: 575.98px) {
  html body .site-header a.brand-lockup > img.brand-logo,
  html body .site-header a.navbar-brand > img.brand-logo,
  html body .site-header img.brand-logo,
  html body .site-header .brand-logo {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    flex-basis: 66px !important;
    transform: scale(1.04) !important;
  }

  html body .site-header .nav-wrap {
    min-height: 88px !important;
  }
}

/* =========================================================
   ICS HEADER DEPTH REFINEMENT
   Keeps the logo strong but reduces the nav bar depth.
   ========================================================= */

/* Header remains logo-only */
html body .site-header .brand-lockup .brand-name,
html body .site-header .navbar-brand .brand-name {
  display: none !important;
}

html body .site-header .brand-lockup,
html body .site-header .navbar-brand {
  gap: 0 !important;
  overflow: visible !important;
}

/* Keep the logo aligned with the main content */
@media (min-width: 1200px) {
  html body .site-header .nav-wrap {
    padding-left: clamp(8.75rem, 12vw, 14.25rem) !important;
    padding-right: clamp(4.25rem, 6vw, 7rem) !important;
  }
}

/* Slightly smaller than the previous forced version */
html body .site-header a.brand-lockup > img.brand-logo,
html body .site-header a.navbar-brand > img.brand-logo,
html body .site-header img.brand-logo,
html body .site-header .brand-logo {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  flex: 0 0 96px !important;
  display: block !important;
  transform: scale(1.08) !important;
  transform-origin: center center !important;
}

/* Reduced header height */
html body .site-header .nav-wrap {
  min-height: 108px !important;
  overflow: visible !important;
}

html body .site-header,
html body .site-header .navbar {
  overflow: visible !important;
}

/* Medium screens */
@media (max-width: 991.98px) {
  html body .site-header a.brand-lockup > img.brand-logo,
  html body .site-header a.navbar-brand > img.brand-logo,
  html body .site-header img.brand-logo,
  html body .site-header .brand-logo {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex-basis: 72px !important;
    transform: scale(1.04) !important;
  }

  html body .site-header .nav-wrap {
    min-height: 90px !important;
  }
}

/* Small mobile */
@media (max-width: 575.98px) {
  html body .site-header a.brand-lockup > img.brand-logo,
  html body .site-header a.navbar-brand > img.brand-logo,
  html body .site-header img.brand-logo,
  html body .site-header .brand-logo {
    width: 62px !important;
    height: 62px !important;
    min-width: 62px !important;
    max-width: 62px !important;
    flex-basis: 62px !important;
    transform: scale(1) !important;
  }

  html body .site-header .nav-wrap {
    min-height: 82px !important;
  }
}

/* =========================================================
   Shared typography refinement
   Softer top navigation and button weights, used site-wide.
   Keep this in site.css so it does not need repeating in each
   page-specific stylesheet.
   ========================================================= */

html body .site-header .navbar .nav-link,
html body .site-header .navbar-nav .nav-link,
html body .site-header .dropdown-toggle {
  font-weight: 500 !important;
}

html body .site-header .nav-cta,
html body .btn-ics-primary,
html body .btn-ics-secondary,
html body .shop-card-link,
html body .shop-email-link,
html body .shop-btn-primary,
html body .shop-btn-secondary,
html body .contact-card .contact-link,
html body .home-contact-link,
html body .listing-profile-btn,
html body .btn-call,
html body .btn-email {
  font-weight: 600 !important;
}