/**
 * Client-Specific Theming & Customizations
 *
 * This file contains CSS variables for easy color/theme customization
 * and any client-specific CSS overrides.
 *
 * USAGE:
 * 1. Update the CSS variables below to match your client's brand colors
 * 2. Add any additional client-specific CSS at the bottom of this file
 * 3. Do not modify bootstrap.css, platforma.css, or clue.css directly
 */


/* ========================================================================
   CSS VARIABLES - CUSTOMIZE THESE FOR EACH CLIENT
   ======================================================================== */

:root {
  /* ===== PRIMARY BRAND COLORS — NuLine Orthodontics ===== */
  /* Brand palette derived from the NuLine logo: signature orange #ff5100 +
     charcoal grey #54565a. Orange is the action/accent color (buttons, links,
     CTAs); charcoal is the neutral/secondary. */
  --primary-color: #ff5100;              /* NuLine signature orange */
  --primary-color-dark: #cc4100;         /* Darker shade for hover states */
  --primary-color-light: #ff7a40;        /* Lighter shade for accents */
  --primary-color-bright: #ff8c52;       /* Brighter shade for button hover states */

  /* Override Bootstrap's primary color to match the brand */
  --bs-primary: #ff5100;
  --bs-primary-rgb: 255, 81, 0;


  /* ===== SECONDARY COLORS ===== */
  --secondary-color: #54565a;            /* NuLine charcoal grey */
  --accent-color: #ff5100;               /* Accent color (same as primary) */


  /* ===== UI ELEMENT COLORS ===== */
  --link-color: var(--primary-color);
  --link-hover-color: var(--primary-color-dark);
  --button-color: var(--primary-color);
  --button-hover-color: var(--primary-color-dark);


  /* ===== BACKGROUND COLORS ===== */
  --bg-primary: var(--primary-color);
  --bg-secondary: #fafafa;
  --bg-light: #f8f9fa;
  --hero-bg-color: #fff1ea;              /* Homepage hero — warm light tint */
  --sidebar-bg: rgba(84, 86, 90, 0.95);  /* Mobile sidebar — NuLine charcoal */

  /* ===== SURFACE COLORS (large containers / section bands) =====
     Vivid --primary-color (#ff5100) is reserved for buttons, links, icons and
     small accents. Large full-bleed surfaces (footer, page-title band,
     dark section bands, microsite subnav) use the logo charcoal instead, so
     the orange reads as an accent rather than dominating the page. Charcoal
     also gives white text a ~7.4:1 contrast (AAA) vs. ~2.9:1 on orange. */
  --surface-dark: #54565a;               /* Charcoal — primary large dark surface */
  --surface-dark-2: #45474b;             /* Deeper charcoal — gradient shadow end */
  --surface-dark-3: #5f6166;             /* Lighter charcoal — gradient highlight end */
  --surface-soft: #faf7f4;               /* Warm cream — light alternating sections */


  /* ===== TEXT COLORS ===== */
  --text-primary: #212529;               /* Main body text */
  --text-secondary: #6c757d;             /* Secondary/muted text */
  --text-light: #6c757d;                 /* Light gray text */
  --text-white: #ffffff;                 /* White text */


  /* ===== TYPOGRAPHY ===== */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-family-headings: var(--font-family-base);
  --font-size-base: 1rem;
  --line-height-base: 1.5;

  /* Heading font weights */
  --heading-font-weight: 300;            /* Light weight for h1-h4 */

  /* Heading color — NuLine blue, carried over from the legacy site where
     headings were blue, bold, and uppercase. Reserved for the heading
     hierarchy; the orange brand color stays on buttons/links/accents.
     Headings that sit on the charcoal dark bands are forced white (see below). */
  --heading-color: #336bb4;              /* NuLine heading blue (legacy) */


  /* ===== SPACING ===== */
  --section-padding: 4rem;               /* Vertical padding for major sections */
  --section-padding-mobile: 2rem;        /* Vertical padding on mobile */


  /* ===== BORDER RADIUS ===== */
  --border-radius-sm: 0.25rem;
  --border-radius: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-pill: 30px;            /* For rounded buttons */


  /* ===== SHADOWS ===== */
  --box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}


/* ========================================================================
   PER-LOCATION ACCENTS (microsite theming)
   Mirrors the bennett_4 pattern: each microsite body carries
   `microsite location-<slug>` (added in base-simple.njk when isLocationScoped).
   The microsite inside-header band + subnav active-link read these accent
   variables (the subnav bar itself is charcoal — see "understated large
   surfaces" below). NuLine is a single brand, so all four offices currently
   share the brand orange. TODO: assign subtle distinct per-office accents if
   the client wants each microsite visually differentiated.
   ======================================================================== */

:root {
  --accent-color-dark: var(--primary-color-dark);
  --accent-color-soft: rgba(255, 81, 0, 0.10);
}

body.location-milwaukee,
body.location-greenfield,
body.location-beloit,
body.location-roscoe {
  --accent-color: var(--primary-color);
  --accent-color-dark: var(--primary-color-dark);
  --accent-color-soft: rgba(255, 81, 0, 0.10);
}


/* ========================================================================
   MICROSITE & MULTI-LOCATION CHROME
   Ported/adapted from the bennett_4 multi-location build. Styles the
   microsite subnav, location-accented inside-header, the four-office footer
   cards, and the Call Us location-picker modal.
   ======================================================================== */

/* ---------- Microsite sub-navigation ---------- */
.microsite-subnav {
  background: var(--surface-dark);
  padding: 0.6rem 0;
  position: relative;
  z-index: 50;
}
.microsite-subnav-label {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.microsite-subnav .subnav-link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: 30px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.microsite-subnav .subnav-link:hover,
.microsite-subnav .subnav-link:focus-visible {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
}
.microsite-subnav .subnav-link.active {
  color: #fff;
  background-color: var(--primary-color);   /* current page = orange accent pill */
  font-weight: 600;
}
.microsite-subnav .subnav-link--secondary {
  font-size: 0.8rem;
  opacity: 0.85;
}

/* ---------- Location-accented inside-header on microsite pages ---------- */
body.microsite #inside-header {
  background: var(--accent-color-soft, rgba(255, 81, 0, 0.10));
  border-bottom: 3px solid var(--accent-color, var(--primary-color));
}
body.microsite #inside-header h1 { color: var(--primary-color); }
body.microsite #inside-header .hp-section-sub { color: #555; }
body.microsite #inside-header .hp-eyebrow { color: var(--accent-color, var(--primary-color)); }
body.microsite .hp-eyebrow,
body.microsite .contact-gallery-eyebrow { color: var(--accent-color, var(--primary-color)); }

/* ---------- Four-office footer cards ---------- */
.footer-location-card {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.5rem;
}
.footer-location-card .footer-heading {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 0.5rem;
}
.footer-hours-list li { padding-bottom: 0.15rem; }

/* ---------- Call Us location-picker modal ---------- */
.location-picker-modal.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
  z-index: 2000;
}
.modal-backdrop.show { z-index: 1999; }
.location-picker-modal .modal-content { border-radius: 0.75rem; }
.call-location-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding-block: 0.85rem;
}
.call-location-btn .call-location-name { font-weight: 600; letter-spacing: 0.04em; }
.call-location-btn .call-location-phone { font-size: 0.9rem; opacity: 0.92; }


/* ========================================================================
   UNDERSTATED LARGE SURFACES
   Repaint the big full-bleed bands that the template fills with brand orange
   so they use the logo charcoal instead. Orange stays on buttons, links, and
   small accents elsewhere. These selectors mirror clue.css; client.css loads
   after clue.css, so they win at equal specificity (no !important needed).
   ======================================================================== */

/* Page-title band on every inside page (clue.css #inside-header) */
#inside-header {
  background: linear-gradient(135deg, var(--surface-dark-2) 0%, var(--surface-dark) 55%, var(--surface-dark-3) 100%);
}
/* Subtitle text must be white on the dark header — microsite pages override
   this back to #555 via the higher-specificity body.microsite rule above. */
#inside-header .hp-section-sub { color: #fff; }

/* Site footer (clue.css #footer) */
#footer {
  background: linear-gradient(135deg, var(--surface-dark-2) 0%, var(--surface-dark) 55%, var(--surface-dark-3) 100%);
}

/* Dark contact gallery section (clue.css #contact-gallery) */
#contact-gallery {
  background: linear-gradient(135deg, var(--surface-dark-2) 0%, var(--surface-dark) 100%);
}

/* Alternating dark section band — used on every treatment page, the homepage
   promo band, and video CTAs (clue.css .treatment-band-dark) */
.treatment-band-dark {
  background-color: var(--surface-dark);
}


/* ========================================================================
   HEADING COLOR & STYLE
   The template colors the heading hierarchy with the vivid orange
   (clue.css `h1,h2,h3,h4` + `.hp-section-heading`). Repaint them with the
   legacy NuLine blue and carry over the old site's bold, uppercase heading
   treatment. client.css loads after clue.css, so these win at equal
   specificity. Small uppercase kicker labels (.treatment-box-heading,
   .hp-eyebrow) intentionally stay orange as accents.
   ======================================================================== */
h1, h2, h3, h4 {
  color: var(--heading-color);
}
/* Bold uppercase treatment, scoped to the main headings (matches the legacy
   site, which left h4 and smaller subheadings in their default case). */
h1, h2, h3,
.hp-section-heading {
  color: var(--heading-color);
  text-transform: uppercase;
  font-weight: 800;
}

/* Headings that sit on the charcoal dark surfaces must stay white. These
   selectors out-specify the element rule above; #inside-header h1 and
   .contact-gallery-heading are already white in clue.css. */
.treatment-band-dark h1,
.treatment-band-dark h2,
.treatment-band-dark h3,
.treatment-band-dark h4,
#contact-gallery h1,
#contact-gallery h2,
#contact-gallery h3,
#contact-gallery h4,
#footer h1,
#footer h2,
#footer h3,
#footer h4 {
  color: #fff;
}


/* ========================================================================
   DARK MODE SUPPORT (OPTIONAL)
   Uncomment this section if you want to support dark mode
   ======================================================================== */

/*
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-light: #3d3d3d;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
  }
}
*/


/* ========================================================================
   CLIENT-SPECIFIC CSS OVERRIDES
   Add any additional custom CSS below this line
   ======================================================================== */

/* Example: Override specific element styling
.custom-header {
  background-color: var(--primary-color);
  color: var(--text-white);
}
*/

/* Example: Client-specific font import
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
:root {
  --font-family-base: 'Roboto', sans-serif;
}
*/

/* Example: Custom button style
.btn-custom {
  background-color: var(--accent-color);
  color: white;
  border-radius: var(--border-radius-pill);
  padding: 0.75rem 2rem;
}
*/


/* ========================================================================
   USAGE EXAMPLES & NOTES
   ======================================================================== */

/*
HOW TO USE CSS VARIABLES:

1. In your HTML or other CSS:
   background-color: var(--primary-color);
   color: var(--text-primary);

2. To change colors for a specific client:
   - Simply update the hex values in the :root section above
   - All instances throughout the site will update automatically

3. Common customizations by client:
   - --primary-color: Your client's main brand color
   - --sidebar-bg: Match the sidebar to their branding
   - --hero-bg-color: Customize homepage hero section
   - --font-family-base: Use client's preferred font

4. Advanced: Override Bootstrap classes:
   .btn-primary {
     background-color: var(--primary-color);
     border-color: var(--primary-color);
   }

BEST PRACTICES:
- Always use variables instead of hardcoded colors
- Test changes across multiple pages before deploying
- Keep client-specific overrides in this file
- Document any custom CSS you add below
*/


/* ========================================================================
   HOMEPAGE HERO — two-column video overlay (NuLine)
   ------------------------------------------------------------------------
   Replaces the template's centered single-column hero. Left column is an
   editorial intro + retained AI search box (#homepage-search-input keeps
   its id so search.js + search-placeholder-animation.js still attach).
   Right column is a glassy four-office locator — distinctive to NuLine's
   multi-location practice. A treatment quick-link rail is anchored to the
   bottom of the hero. Background video, overlay, and .hero-video-toggle
   continue to be styled by modern-header-modern.css.
   ======================================================================== */

#homepage-cover .nl-hero-grid {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 5rem 1.25rem 5rem;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: 3rem;
	align-items: center;
	min-height: 100%;
	color: #fff;
}

/* Left column ------------------------------------------------------- */
#homepage-cover .nl-hero-left {
	max-width: 640px;
}
#homepage-cover .nl-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-family-base);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 1.1rem;
}
#homepage-cover .nl-hero-eyebrow::before {
	content: "";
	width: 32px;
	height: 2px;
	background: var(--primary-color);
}
#homepage-cover .nl-hero-grid h1 {
	font-family: var(--font-family-headings);
	font-weight: 700;
	font-size: clamp(2.4rem, 5vw, 4.1rem);
	line-height: 1.06;
	margin: 0 0 1.25rem;
	color: #fff;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
#homepage-cover .nl-hero-grid h1 em {
	font-style: normal;
	color: var(--primary-color-light);
}
#homepage-cover .nl-hero-tagline {
	font-family: var(--font-family-base);
	font-weight: 300;
	font-size: 1.05rem;
	line-height: 1.6;
	max-width: 54ch;
	color: rgba(255, 255, 255, 0.92);
	margin-bottom: 1.5rem;
	padding-left: 0;          /* cancel inherited #homepage-cover p padding */
	padding-right: 0;
}

/* Search pill on dark hero ------------------------------------------ */
#homepage-cover .nl-hero-search {
	position: relative;
	max-width: 500px;
	margin: 0 0 1.5rem;
}
#homepage-cover .nl-hero-search input {
	width: 100%;
	background: rgba(255, 255, 255, 0.96);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	padding: 0.8rem 1.25rem 0.8rem 2.9rem;
	font-family: var(--font-family-base);
	font-size: 0.95rem;
	color: var(--text-primary);
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
}
/* Mobile polish (workflow 04): iOS Safari zooms the whole page when a focused
   input is under 16px, and 0.95rem above is 15.2px. Must live here rather than
   in clue.css — the base rule uses an ID selector, which any class-only rule
   elsewhere would lose to regardless of load order. Desktop keeps 0.95rem. */
@media (max-width: 767.98px) {
	#homepage-cover .nl-hero-search input {
		font-size: 16px;
	}
}
#homepage-cover .nl-hero-search input::placeholder {
	color: var(--text-light);
}
#homepage-cover .nl-hero-search input:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
	background: #fff;
}
#homepage-cover .nl-hero-search .nl-hero-search-icon {
	position: absolute;
	left: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	font-size: 1.05rem;
	pointer-events: none;
}

/* CTA buttons row — buttons use the template's #homepage-cover
   .btn-outline-primary override (solid white, primary text). */
#homepage-cover .nl-hero-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

/* Right column: glassy four-office locator -------------------------- */
#homepage-cover .nl-hero-offices {
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 14px;
	padding: 1.75rem 1.75rem 1.5rem;
}
#homepage-cover .nl-hero-offices-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-family-base);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 0.85rem;
}
#homepage-cover .nl-hero-offices-label i {
	color: var(--primary-color-light);
	font-size: 0.95rem;
}
#homepage-cover .nl-hero-offices ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#homepage-cover .nl-hero-offices li + li {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
}
#homepage-cover .nl-hero-offices a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 0;
	font-family: var(--font-family-headings);
	font-size: 1.15rem;
	font-weight: 500;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s ease, padding-left 0.2s ease;
}
#homepage-cover .nl-hero-office-state {
	font-family: var(--font-family-base);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.6);
	margin-left: 0.55rem;
	vertical-align: middle;
}
#homepage-cover .nl-hero-office-arrow {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.5);
	transition: transform 0.2s ease, color 0.2s ease;
}
#homepage-cover .nl-hero-offices a:hover,
#homepage-cover .nl-hero-offices a:focus-visible {
	color: var(--primary-color-light);
	padding-left: 0.35rem;
}
#homepage-cover .nl-hero-offices a:hover .nl-hero-office-arrow,
#homepage-cover .nl-hero-offices a:focus-visible .nl-hero-office-arrow {
	transform: translateX(4px);
	color: var(--primary-color-light);
}
#homepage-cover .nl-hero-offices-all {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	font-family: var(--font-family-base);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
}
#homepage-cover .nl-hero-offices-all:hover,
#homepage-cover .nl-hero-offices-all:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* Treatment quick-link rail anchored to the bottom of the hero ------ */
#homepage-cover .nl-hero-service-rail {
	position: absolute;
	bottom: 1.25rem;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	padding: 0 1rem;
	z-index: 25;
}
#homepage-cover .nl-hero-service-rail a {
	font-family: var(--font-family-base);
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	padding: 0.3rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.45);
	transition: color 0.2s ease, border-color 0.2s ease;
}
#homepage-cover .nl-hero-service-rail a:hover,
#homepage-cover .nl-hero-service-rail a:focus-visible {
	color: var(--primary-color-light);
	border-bottom-color: var(--primary-color-light);
}
#homepage-cover .nl-hero-service-rail-dot {
	color: rgba(255, 255, 255, 0.4);
	align-self: center;
}

/* Responsive -------------------------------------------------------- */
@media (max-width: 991.98px) {
	#homepage-cover .nl-hero-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
		padding: 4rem 1.25rem 5rem;
		align-items: start;
	}
}
@media (max-width: 767.98px) {
	#homepage-cover .nl-hero-service-rail { display: none; }
	#homepage-cover .nl-hero-grid {
		padding: 3rem 1.1rem 3rem;
	}
	#homepage-cover .nl-hero-tagline {
		max-width: none;
	}
}

/* Brand-tinted hero video overlay — charcoal top-left, warm orange
   bottom-right (overrides the template's default blue corners). */
:root {
	--hero-overlay-corner-1: rgba(54, 56, 58, 0.92);    /* charcoal, top-left */
	--hero-overlay-corner-2: rgba(255, 81, 0, 0.55);    /* NuLine orange, bottom-right */
	--hero-overlay-tint: rgba(28, 27, 26, 0.45);        /* dark tint for white-text legibility */
}

/* Sienna accessibility widget — override default blue with NuLine orange */
.asw-menu-btn {
	background: #ff5100 !important;
	background: linear-gradient(96deg, #ff7a40, #ff5100) !important;
	outline-color: #ff5100 !important;
}
.asw-menu-header { background-color: #ff5100 !important; }
.asw-menu-reset-footer-btn { background: #ff5100 !important; }
.asw-btn:hover,
.asw-btn.asw-selected { border-color: #ff5100 !important; }
.asw-btn.asw-selected svg,
.asw-btn.asw-selected span { fill: #ff5100 !important; color: #ff5100 !important; }
.asw-btn.asw-selected:after { background-color: #ff5100 !important; }
.asw-footer a:hover,
.asw-footer a:hover span { color: #ff5100 !important; }
.asw-plus:hover, .asw-minus:hover { border-color: #ff5100 !important; }