/*
Theme Name: NDR Child Theme
Template: buildpress
Version: 1.0.0
Text Domain: ndr-child
*/

/* =========================================================
   0) Tokens
   ========================================================= */
:root{
  --ndr-max: 1240px;
  --ndr-gutter: clamp(18px, 2.4vw, 34px);

  --ndr-navy:#002868;
  --ndr-navy-dk:#001F4D;

  --ndr-gold:#FFB81C;
  --ndr-gold-dk:#CC8F00;

  --ndr-ink:#0F172A;
  --ndr-muted:#64748B;
  --ndr-line:#E5E7EB;

  --ndr-surface:#FFFFFF;
  --ndr-surface-2:#F3F4F6;
}

/* Prevent tiny horizontal scroll from 100vw breakouts */
html, body{ overflow-x:hidden; }
@supports (overflow: clip){
  html, body{ overflow-x:clip; }
}

/* =========================================================
   1) GLOBAL LAYOUT (Premium: boxed content + gutters)
   Overrides BuildPress fixed container widths (750/970/1170)
   ========================================================= */
.container{
  width:100% !important;
  max-width:var(--ndr-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--ndr-gutter) !important;
  padding-right:var(--ndr-gutter) !important;
}

/* Neutralize theme "width: 750/970/1170" media-query rules */
@media (min-width: 768px){ .container{ width:100% !important; } }
@media (min-width: 992px){ .container{ width:100% !important; } }
@media (min-width: 1200px){ .container{ width:100% !important; } }

/* =========================================================
   2) HEADER / NAV (ensure gutters even if theme has wrappers)
   ========================================================= */
.header .container,
.top .container,
.navbar .container,
.navigation .container{
  padding-left:var(--ndr-gutter) !important;
  padding-right:var(--ndr-gutter) !important;
}

/* =========================================================
   3) BREADCRUMBS — PROMINENT + OBVIOUS + PREMIUM
   Based on your actual HTML:
   <nav id="project-navigation-anchor" class="breadcrumbs ndr-breadcrumbs">
     <div class="container">
       <span property="itemListElement">...</span>
       <span property="itemListElement">...</span>
       <span property="itemListElement">...</span>
   ========================================================= */

/* The bar itself: more visible */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs{
  background:linear-gradient(#FFFFFF, #F3F4F6) !important;
  border-bottom:1px solid var(--ndr-line) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.08) !important;

  margin:0 !important;
  padding:0 !important;
  position:relative;
  z-index:10;
}

/* Container: off the edge + slightly taller */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs .container{
  width:100% !important;
  max-width:var(--ndr-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;

  padding:12px var(--ndr-gutter) !important;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  line-height:1.2;
}

/* Hard reset any existing chip/pill styling inside breadcrumbs */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs *,
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a,
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs span[property="itemListElement"],
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs span[property="name"]{
  box-shadow:none !important;
}

/* Each crumb: make it obviously a breadcrumb “node” */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs span[property="itemListElement"]{
  display:inline-flex !important;
  align-items:center;
  gap:10px;
}

/* Chevron separators between crumbs */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs
span[property="itemListElement"] + span[property="itemListElement"]::before{
  content:"›";
  display:inline-block;
  margin:0 2px 0 2px;
  color:#94A3B8;
  font-weight:900;
  line-height:1;
  transform: translateY(-.5px);
}

/* Link: prominent but premium — looks clickable */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a{
  display:inline-flex !important;
  align-items:center;

  background:#FFFFFF !important;
  border:1px solid var(--ndr-line) !important;
  border-radius:999px !important;

  padding:7px 12px !important;
  margin:0 !important;

  color:var(--ndr-navy) !important;
  font-weight:800 !important;
  font-size:12px !important;
  letter-spacing:.02em;

  text-decoration:none !important;
  cursor:pointer;

  transition:
    background-color .14s ease,
    border-color .14s ease,
    color .14s ease,
    transform .14s ease,
    box-shadow .14s ease;
}

/* Hover: gold highlight (obvious interaction) */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a:hover,
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a:focus{
  background:var(--ndr-gold) !important;
  border-color:var(--ndr-gold-dk) !important;
  color:#1A1A1A !important;
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.12) !important;
  outline:none;
}

#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a:focus-visible{
  box-shadow:0 0 0 3px rgba(255,184,28,.45), 0 10px 22px rgba(0,0,0,.12) !important;
}

/* Current page: distinct “active” chip */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs .current-item{
  display:inline-flex !important;
  align-items:center;

  background:var(--ndr-navy) !important;
  border:1px solid var(--ndr-navy-dk) !important;
  border-radius:999px !important;

  padding:7px 12px !important;

  color:#FFFFFF !important;
  font-weight:900 !important;
  font-size:12px !important;
  letter-spacing:.02em;

  box-shadow:0 10px 22px rgba(0,40,104,.22) !important;
}

/* Kill BuildPress angled dividers */
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a::before,
#project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a::after{
  content:none !important;
  display:none !important;
}

/* Breadcrumbs closer to the first section */
#project-navigation-anchor + .master-container .elementor-section:first-child{
  padding-top:0 !important;
}

/* Mobile: tighten but keep obvious */
@media (max-width: 768px){
  #project-navigation-anchor.breadcrumbs.ndr-breadcrumbs .container{
    padding-top:10px !important;
    padding-bottom:10px !important;
    gap:8px;
  }
  #project-navigation-anchor.breadcrumbs.ndr-breadcrumbs a,
  #project-navigation-anchor.breadcrumbs.ndr-breadcrumbs .current-item{
    padding:6px 10px !important;
    font-size:11px !important;
  }
}

/* =========================================================
   4) SERVICE / ELEMENTOR PAGES FULL-WIDTH SECTIONS (Premium)
   - Sections/backgrounds full width (100vw canvas)
   - Content stays boxed + responsive (max-width + gutters)
   ========================================================= */

/* Break Elementor canvas out of theme boxing */
body.elementor-page .entry-content > .elementor,
body.page-template-template-builder-page .entry-content > .elementor{
  width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
}

/* Remove theme boxing ONLY on Elementor/builder pages */
body.elementor-page .master-container > .container,
body.page-template-template-builder-page .master-container > .container{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* Ensure Elementor sections can be full-bleed */
body.elementor-page .elementor-section,
body.page-template-template-builder-page .elementor-section{
  width:100% !important;
}

/* Premium boxed inner content */
body.elementor-page .elementor-section .elementor-container,
body.page-template-template-builder-page .elementor-section .elementor-container{
  max-width:var(--ndr-max) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--ndr-gutter) !important;
  padding-right:var(--ndr-gutter) !important;
}

/* Utility: add class "ndr-edge" to a SECTION if you want true edge-to-edge content */
.ndr-edge .elementor-container{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}