/* brookssupport.css — Brooks-style NAV + HERO for LWR (allowed tags only)
   ---------------------------------------------------------------
   HTML expected: div.bk-wrap > div.bk-navwrap + div.bk-hero > .bk-hero-inner
   CSS goals:
   - Light gray slab for nav+hero
   - White rounded corners at the VERY BOTTOM of the slab
   - Logo left, menu centered, links black
   - H1 56/1.1 desktop, 48 mobile; Manrope
   -v15 change notes: updated hero curve
*/

/* ===== Design tokens ===== */
:root{
  --bk-blue: #0057b8;          /* brand blue (not used in nav text) */
  --bk-gray-50: #f2f3f4;       /* light panel background */
  --bk-body: #25282b;          /* body text */
  --bk-head: #0c0d0e;          /* headings / nav text */
  --bk-maxw: 1200px;
  --bk-radius-lg: 32px;
}

/* ===== Base ===== */
.bk{
  font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--bk-body);
  line-height: 1.35;
}

/* PAGE background stays white so the hero's bottom curve cuts up into it */
.bk-wrap{
  background: #fff;
  margin: 0;
  padding: 0;
}

/* ===== NAV (same slab color as hero) ===== */
.bk-navwrap{
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bk-gray-50);
  box-shadow: none;
  border: 0;
}

/* Center the menu; keep logo left */
.bk-nav{
  position: relative;
  max-width: var(--bk-maxw);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: center;   /* center the UL */
  min-height: 72px;
}

.bk-logo{
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.bk-logo__img{ display:block; width:132px; height:auto; }

.bk-menu{
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bk-menu li{ display: flex; align-items: center; }

.bk-link,
.bk-link:link,
.bk-link:visited{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--bk-head) !important;   /* force black, defeat SLDS anchors */
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color .12s ease;
}
.bk-link:hover{ border-bottom-color: var(--bk-head); }

.bk-link[data-caret]::after{
  content:"";
  border: 5px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
  margin-left: 6px;
}

/* ===== HERO (slab + white rounded bottom) ===== */
.bk-hero{
  position: relative;
  background: var(--bk-gray-50);                 /* same as nav */
  border-radius: 0 0 var(--bk-radius-lg) var(--bk-radius-lg); /* bottom curve */
}

/* Ensure the page below is white so the curve is visible */
.bk-hero::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0; /* no extra overlay; curve comes from border-radius */
}

.bk-hero-inner{
  position: relative;
  max-width: var(--bk-maxw);
  margin: 0 auto;
  padding: clamp(56px, 8vw, 120px) 20px;
  text-align: center;
}

.bk-hero h1{
  color: var(--bk-head);
  margin: 0 0 18px 0;
  font-weight: 700;                              /* lighter than 800 */
  line-height: 1.1;
  font-size: clamp(48px, 5vw, 56px);
  letter-spacing: -0.01em;
}
.bk-hero p{
  margin: 0 auto;
  max-width: 950px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--bk-body);
}

/* ===== Responsive ===== */
@media (max-width: 980px){ .bk-menu{ gap: 18px; } }
@media (max-width: 720px){
  .bk-nav{ flex-wrap: wrap; row-gap: 8px; min-height: 64px; }
  .bk-logo{ position: static; transform: none; margin-right: auto; }
  .bk-nav{ justify-content: space-between; }
}

/* ===== Optional: hide platform header if present (uncomment if needed) ===== */
/*
.forceCommunityThemeHeader, .comm-header, .comm-navigation { display:none !important; }
*/

/* === Final fixes: bottom curve, centered nav (grid), black links === */

/* Ensure the page behind the slab is white so the curve is visible */
body, .bk-wrap { background:#fff; }

/* HERO: light-gray slab with a white, rounded bottom edge that “cuts up” */
.bk-hero{
  position: relative;
  background: var(--bk-gray-50);
  overflow: hidden;                    /* clip the curve element */
}

/* Draw the white rounded edge at the very bottom of the hero */
.bk-hero::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 56px;                        /* thickness of the curved edge */
  background: #fff;                    /* page color */
  border-radius: 0 0 40px 40px;        /* round upward into gray */
}

/* keep content above the curve */
.bk-hero-inner{ position: relative; z-index: 1; }

/* NAV: true centering with CSS Grid (logo left, menu perfectly centered) */
.bk-nav{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr; /* left (logo) | center (menu) | right spacer */
  align-items: center;
  justify-items: center;
  max-width: var(--bk-maxw);
  margin: 0 auto;
  padding: 14px 20px;
  min-height: 72px;
}

/* place the logo in the left column, no absolute positioning */
.bk-logo{
  grid-column: 1;
  justify-self: start;
  position: static !important;
  transform: none !important;
}

/* place the menu dead-center */
.bk-menu{
  grid-column: 2;
  display: flex;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Force black nav text across states; beat SLDS with specificity + !important */
.bk-navwrap .bk-menu a.bk-link,
.bk-navwrap .bk-menu a.bk-link:link,
.bk-navwrap .bk-menu a.bk-link:visited,
.bk-navwrap .bk-menu a.bk-link:active,
.bk-navwrap .bk-menu a.bk-link:hover{
  color: #0c0d0e !important;           /* heading color (black) */
  text-decoration: none !important;
  border-bottom-color: transparent;
}

/* keep the subtle hover underline effect in black */
.bk-navwrap .bk-menu a.bk-link:hover{
  border-bottom-color: #0c0d0e !important;
}

/* H1 weight tuned (not overly heavy) */
.bk-hero h1{
  font-weight: 700;
  font-size: clamp(48px, 5vw, 56px);
  line-height: 1.1;
  color: #0c0d0e;
}

/* === Hero bottom: white curve INTO the gray background === */

/* Make the page around the slab gray so the white curve is visible */
body,
.bk-wrap { 
  background: var(--bk-gray-50);
}

/* Hero stays gray (slab) */
.bk-hero{
  position: relative;
  background: var(--bk-gray-50);
  overflow: visible;                 /* allow the curve to extend below */
}

/* Draw a white rounded “cap” that overlaps BELOW the hero,
   so it looks like the next (white) section has rounded TOP corners */
.bk-hero::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -40px;                     /* pushes the white shape below the hero */
  width: 100%;
  height: 80px;                      /* thickness of the curve — tweak 64–96px */
  background: #ffffff;               /* white cap */
  border-radius: 40px 40px 0 0;      /* rounded UPWARD corners */
  pointer-events: none;
  z-index: 2;
}

/* Keep hero content above the curve */
.bk-hero-inner{ position: relative; z-index: 3; }

/* If the section immediately after the hero isn't white,
   you can force the top to be white so the cap blends perfectly: */
.bk-hero + * { background: #ffffff; }

/* === Make everything below the hero WHITE; keep only nav+hero gray === */

/* Reset the overall page background to white */
html, body { background:#fff !important; }

/* Experience Cloud wrappers that sometimes force a gray bg */
.siteforceContentArea,
.comm-layout-column,
.dxp-template,
.cb-section,
.cb-section_row,
.cb-section_column {
  background:#fff !important;
}

/* Ensure ONLY the slab (nav + hero) is gray */
.bk-navwrap,
.bk-hero { background: var(--bk-gray-50) !important; }

/* Keep the white, upward curve at the very bottom of the hero */
.bk-hero {
  position: relative;
  overflow: visible;
}
.bk-hero::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-40px;           /* adjust with your chosen numbers */
  width:100%;
  height:80px;
  background:#fff;        /* must match page background */
  border-radius:40px 40px 0 0;
  pointer-events:none;
  z-index:2;
}

/* Make sure the first section after the hero also starts white */
.bk-hero + * { background:#fff !important; }

/* === Remove unwanted vertical scroll from hero curve === */

/* Prevent the hero's curve from forcing a scrollbar */
html, body {
  overflow-x: hidden;         /* safety */
}

body::after {
  /* Fix for LWR preview / published height mismatch */
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}

/* The hero curve itself should not trigger scrolling */
.bk-hero {
  overflow: clip;             /* modern browsers */
  overflow: hidden;           /* fallback */
}

/* === Kill hairline seams around the white curve === */

/* Make sure the section below the hero is truly white and flush */
.bk-hero + * {
  background: #fff !important;
  margin-top: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Expand the white cap a few pixels past the edges to cover sub-pixel gaps */
.bk-hero {
  position: relative;
  background: var(--bk-gray-50);
  overflow: visible;
}

.bk-hero::after{
  content: "";
  position: absolute;
  left: -2px;                            /* extend past edges */
  width: calc(100% + 4px);               /* cover anti-alias gaps */
  bottom: -44px;                         /* half the height (even value) */
  height: 88px;                          /* even value to avoid half-pixel */
  background: #fff;
  border-radius: 44px 44px 0 0;
  pointer-events: none;
  z-index: 2;
  transform: translateZ(0);              /* nixes hairlines on some GPUs */
  box-shadow: 0 0 0 1px #fff inset;      /* overpaint any 1px seam */
}

/* Ensure no container above/below adds its own line */
.cb-section, .cb-section_row, .cb-section_column,
.comm-layout-column, .siteforceContentArea, .dxp-template {
  background-clip: padding-box !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* In case the browser is adding a horizontal scroll due to overhang */
html, body { overflow-x: hidden; }

/* === Put the white curve at the BOTTOM of the hero, no scrollbars === */

/* Keep the hero as the gray slab and clip its contents */
.bk-hero{
  position: relative;
  background: var(--bk-gray-50);
  overflow: hidden;               /* avoids vertical/horizontal scroll */
}

/* Wipe any earlier gradient backgrounds we added */
.bk-hero::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;                      /* <-- anchor to BOTTOM */
  height: 88px;                   /* curve depth (tweak 72–104px) */
  background: #fff;               /* solid white, no bg-images */
  background-image: none !important;
  border-radius: 44px 44px 0 0;   /* rounded UPWARD corners */
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 0 1px #fff inset;  /* cover any hairline seam */
}

/* Ensure the next section is white so the curve blends perfectly */
.bk-hero + * { background:#fff !important; margin-top:0 !important; border-top:0 !important; }

/* Safety: no horizontal scroll from anything else */
html, body { overflow-x: hidden; }

/* === Remove the "double curve" and blend perfectly === */

/* 1) Only the ::after cap should create a curve — flatten the hero box itself */
.bk-hero{
  border-radius: 0 !important;          /* kill any leftover bottom radius */
  background-image: none !important;    /* in case an older gradient remains */
}

/* 2) The white cap we already use at the bottom of the hero */
.bk-hero::after{
  /* keep your current numbers if you tuned them; shown here for clarity */
  height: 88px;
  border-radius: 44px 44px 0 0;
  bottom: 0;
  background: #fff;
}

/* 3) Make the very next section *flat* and pure white so it mates cleanly */
.bk-hero + * {
  background: #fff !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  box-shadow: none !important;          /* some Builder blocks add a faint line */
  background-clip: padding-box !important;
}

/* 4) In case the next container is a Builder wrapper, flatten those too */
.cb-section, .cb-section_row, .cb-section_column,
.comm-layout-column, .siteforceContentArea, .dxp-template {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  box-shadow: none !important;
}

/* Safety: no horizontal scrollbars from any rounding math */
html, body { overflow-x: hidden; }

/* === Brooks PRIMARY button (stable in Experience Builder) === */
/* Use class .bk-btn-primary on <a> or <button> */

.bk-btn-primary {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;

  /* shape & spacing */
  padding: 12px 24px;
  border-radius: 8px;                /* rounded like reference */
  border: 2px solid transparent;

  /* colors */
  background-color: #0a56a9;         /* Default (Brooks deep blue) */
  color: #ffffff !important;

  /* type */
  font-family: "Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  text-align: center;
  cursor: pointer;

  /* animation */
  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* keep text white in all link states */
.bk-btn-primary:link,
.bk-btn-primary:visited { color:#fff !important; }

/* Hover (brighter blue) */
.bk-btn-primary:hover {
  background-color: #0b77ff;         /* Hover blue per spec image */
  color:#fff !important;
}

/* Focus Visible (white inner + blue outer ring) */
.bk-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #a0c4ff;
  border-color: #0a56a9;
}

/* Row layout (side-by-side) */
.bk-btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;           /* change to flex-start if you want left align */
  align-items: center;
}

/* ===== Brooks Primary Buttons — SLDS/DXP proof ===== */

/* Layout for the pair */
.bk-btn-row{
  display:flex !important;
  gap:16px !important;
  justify-content:center !important;
  align-items:center !important;
  margin:24px 0 !important;
}
/* Builder sometimes wraps anchors in <p>; kill that spacing */
.bk-btn-row p{ margin:0 !important; }

/* The button itself */
a.bk-btn{
  /* make sure link looks like a button in ALL states */
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  padding:12px 24px !important;
  min-height:44px !important;
  border-radius:8px !important;

  background-color:#0a56a9 !important;  /* default (deep Brooks blue) */
  border:2px solid transparent !important;
  color:#fff !important;
  text-decoration:none !important;

  font-family:"Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  font-size:16px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  cursor:pointer !important;

  transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease !important;
}

/* Keep white text in every link state */
a.bk-btn:link,
a.bk-btn:visited,
a.bk-btn:active{ color:#fff !important; }

/* Hover: brighter blue */
a.bk-btn:hover{
  background-color:#0b77ff !important;
  color:#fff !important;
}

/* Focus-visible: white inner + blue outer ring */
a.bk-btn:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px #a0c4ff !important;
  border-color:#0a56a9 !important;
}

/* === Brooks Eyebrow / Section Label (fixed color & spacing) === */
.bk-eyebrow {
  display: block !important;
  font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: #0057b8 !important;           /* Force Brooks Blue */
  margin-bottom: 28px !important;      /* More space above the heading */
  line-height: 1.4 !important;
}

/* ===== Brooks Footer (match look of brooksinstrument.com) ===== */
.bk-footer {
  background:#fff;
  color:#0c0d0e;
  border-top:1px solid #e9edf2;
  font-family:"Manrope", ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Layout container */
.bk-footer-top,
.bk-footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* top row: brand + 3 columns */
.bk-footer-top {
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr; /* logo/social + three columns */
  gap: 48px 32px;
}

/* Brand block */
.bk-footer-logo { display:block; width: 180px; height:auto; }
.bk-social { margin-top: 28px; }
.bk-social-label {
  font-weight:700;
  font-size:14px;
  color:#0c0d0e;
  margin-bottom:10px;
}

/* Social icons (inline SVG backgrounds) */
.bk-social-icons { display:flex; gap:12px; }
.bk-social-icon {
  width:36px; height:36px; border-radius:50%;
  display:inline-block;
  background:#222;               /* dark circle like site */
  position:relative;
}
.bk-social-icon::after{
  content:""; position:absolute; inset:0;
  background-position:center; background-repeat:no-repeat; background-size:18px 18px;
  filter: invert(1); /* white glyph */
}
/* LinkedIn icon */
.bk-social-icon.li::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M20.45 20.45h-3.56v-5.6c0-1.34-.02-3.06-1.86-3.06c-1.86 0-2.14 1.45-2.14 2.95v5.71H9.33V9h3.41v1.56h.05c.47-.9 1.62-1.86 3.33-1.86c3.56 0 4.21 2.34 4.21 5.38v6.37zM5.34 7.44a2.07 2.07 0 1 1 0-4.14a2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.56V9h3.56v11.45z'/></svg>");
}
/* YouTube icon */
.bk-social-icon.yt::after{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M23 7.5s-.23-1.63-.94-2.35c-.9-.94-1.9-.95-2.36-1C16.94 4 12 4 12 4h0s-4.94 0-7.7.15c-.46.05-1.45.06-2.36 1C.23 5.87 0 7.5 0 7.5S-.02 9.37 0 11.24v1.52C-.02 14.63 0 16.5 0 16.5s.23 1.63.94 2.35c.9.94 2.08.9 2.61 1C5.16 19.96 12 20 12 20s4.94 0 7.7-.15c.46-.05 1.45-.06 2.36-1c.71-.72.94-2.35.94-2.35s.02-1.87 0-3.74v-1.52C23.02 9.37 23 7.5 23 7.5zM9.54 15.18v-6.3l6.15 3.16l-6.15 3.14z'/></svg>");
}
.bk-social-icon:hover { background:#000; }

/* Column headings + lists */
.bk-foot-h {
  font-weight:800;
  font-size:16px;
  margin:18px 0 8px;
}
.bk-foot-col:first-child .bk-foot-h:first-child { margin-top:0; }
.bk-foot-list { list-style:none; padding:0; margin:0 0 12px 0; }
.bk-foot-list li + li { margin-top:8px; }

.bk-foot-list a {
  color:#0c0d0e;
  text-decoration:none;
}
.bk-foot-list a:hover { color:#0057b8; text-decoration:underline; }

/* Bottom legal bar */
.bk-footer-bottom {
  border-top:1px solid #e9edf2;
  padding-top:16px;
  display:flex; gap:16px; justify-content:space-between; align-items:center; flex-wrap:wrap;
}
.bk-legal {
  display:flex; flex-wrap:wrap; gap:18px;
  list-style:none; padding:0; margin:0;
  font-size:13px; color:#5a6168;
}
.bk-legal a{ color:#5a6168; text-decoration:none; }
.bk-legal a:hover{ color:#0c0d0e; text-decoration:underline; }
.bk-copy{ font-size:13px; color:#5a6168; }

/* Responsive */
@media (max-width: 1024px){
  .bk-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .bk-footer-top { grid-template-columns: 1fr; }
  .bk-footer-logo { width: 160px; }
  .bk-footer-bottom { flex-direction:column; align-items:flex-start; gap:12px; }
}