/* =========================
   PECOS RIDGE — BRAND CSS
   ========================= */

/* ---- Brand tokens (tactical palette) ---- */
:root{
  --pr-bg-dark: #0d0f11;       /* hero / deep sections */
  --pr-bg-mid:  #121416;       /* dark bands */
  --pr-bg-chip:#0f1418;        /* chip slab */
  --pr-bg-light:#f8f9fa;       /* light section */
  --pr-text:    #e6eaee;
  --pr-text-dim:#c8d0d6;
  --pr-border:  #2A3238;
  --pr-border-2:#3b4752;
  --pr-chip-bd:#2e3944;
  --pr-gold:    #C9A15F;       /* action gold */
  --pr-gold-strong:#D1A465;
  --pr-black:   #121416;
  --pr-white:   #ffffff;

  --pr-radius:  14px;
  --pr-gap:     22px;
}

/* -------------------------
   Global scaffolding
-------------------------- */
.sec{ padding:72px 0; }
@media (max-width:782px){ .sec{ padding:56px 0; } }

/* Container widths for main sections */
.sec.hero,
.sec.services,
.sec.about,
.sec.values,
.sec.final-cta{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:var(--wp--preset--spacing--50, 24px);
}

/* Images never overflow */
img{ max-width:100%; height:auto; }

/* Column vertical gaps when theme is tight */
.wp-block-columns{ row-gap:var(--pr-gap); }

/* Heading hierarchy polish */
h2{ font-weight:800; letter-spacing:.02em; }
h3{ font-weight:600; }

/* =========================
   HERO (CSS background)
   ========================= */
.sec.hero.hero-bg{
  position:relative;
  min-height:560px;
  padding:60px var(--wp--preset--spacing--50, 24px);
  padding-bottom:100px;               /* extra breathing room before Services */
  color:#fff;
  overflow:hidden;
}
.sec.hero.hero-bg::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("https://pecosridge.com/wp-content/uploads/2025/08/bsm-20211205-294-2.webp");
  background-size:cover;
  background-position:center;
  filter:brightness(.55);              /* slightly lighter for legibility */
  z-index:0;
}
.hero-inner{
  position:relative;
  z-index:1;
  max-width:1100px;
  margin-inline:auto;
}
.sec.hero h1{
  margin:0 0 14px;
  text-shadow:0 2px 4px rgba(0,0,0,.5); /* pop over photo */
}
.sec.hero p{ color:var(--pr-text-dim); }

/* Parser-safe hero CTAs (anchors styled as buttons) */
.hero-cta .btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:6px;
  font-weight:700;
  text-decoration:none;
  line-height:1;
  margin-right:12px;
}
.hero-cta .btn-primary{
  background:var(--pr-gold);
  color:var(--pr-black);
}
.hero-cta .btn-primary:hover{ filter:brightness(.95); }
.hero-cta .btn-outline{
  background:transparent;
  color:var(--pr-white);
  border:2px solid var(--pr-white);
}
.hero-cta .btn-outline:hover{
  background:rgba(209,164,101,.15);   /* gold-tinted hover */
  border-color:var(--pr-gold-strong);
  color:var(--pr-gold-strong);
}

/* Fallback styling if native Buttons block is used elsewhere */
.wp-block-buttons{ gap:12px; }
.wp-block-button .wp-block-button__link{ font-weight:700; }
.wp-block-button.is-style-outline .wp-block-button__link{ border-width:2px; }

/* Hide the inline hero image used only for alt/SEO */
.hero-vis-img{ display:none; }

/* =========================
   SERVICES (light band)
   ========================= */
.sec.services{
  background:var(--pr-bg-light);       /* subtle contrast from hero */
  color:#111;
}

/* =========================
   ABOUT (dark band)
   ========================= */
.sec.about{
  background:var(--pr-bg-mid);
  color:var(--pr-text);
}
.sec.about p{ color:var(--pr-text-dim); }
.sec.about figure img{
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--pr-radius);
  border:1px solid var(--pr-border);
  display:block;
}
@media (max-width:960px){ .sec.about figure img{ max-height:420px; } }

/* =========================
   CORE VALUES (centered chips)
   ========================= */
.sec.values{
  background:#151a1e;                 /* dark tactical slate */
  color:var(--pr-text);
  text-align:center;
}
.sec.values h2{
  color:#E9EEF3;
  margin:0 0 18px;
  font-size:clamp(26px,3vw,34px);
}
.sec.values .wp-block-columns{
  justify-content:center;             /* center the three columns container */
  flex-wrap:wrap;
  gap:16px;
}
.sec.values .wp-block-column{
  display:flex; justify-content:center; flex-wrap:wrap;
}
.sec.values .chip{
  display:inline-block;
  margin:6px;                         /* equal spacing around every chip */
  background:var(--pr-bg-chip);
  border:1px solid var(--pr-chip-bd);
  color:#dfe7ec;
  padding:10px 16px;
  border-radius:999px;
  font-size:16px;
  font-weight:600;
  line-height:1.1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  white-space:nowrap;
}
.sec.values .chip:hover{
  background:#121a20;
  border-color:var(--pr-border-2);
}

/* =========================
   FINAL CTA (if used)
   ========================= */
.sec.final-cta{
  background:linear-gradient(180deg, var(--pr-bg-dark) 0%, #111518 100%);
  color:var(--pr-text);
  text-align:center;
  border-top:1px solid #1e242a;
}
.sec.final-cta h2{
  color:#F3EAD8;                       /* warm off-white */
  margin:0 0 12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-size:clamp(24px,2.6vw,30px);
  font-weight:800;
}
.sec.final-cta .btn{ margin:0 8px; }
.sec.final-cta .btn-primary{
  background:var(--pr-gold); color:var(--pr-black);
}
.sec.final-cta .btn-primary:hover{ filter:brightness(.95); }
.sec.final-cta .btn-outline{ border-color:#fff; color:#fff; }
.sec.final-cta .btn-outline:hover{ background:rgba(255,255,255,.08); }

/* Small-screen trims */
@media (max-width:782px){
  .sec.values{ padding-top:56px; padding-bottom:56px; }
  .sec.final-cta h2{ font-size:clamp(22px,2.4vw,28px); }
}
/* Brighten About headings */
.sec.about h2,
.sec.about h3 {
  color: #E9EEF3;
  font-weight: 700;
}

/* Gold-accented section titles */
.sec.services h2,
.sec.about h2,
.sec.values h2 {
  color: var(--pr-gold);
}

/* Bullet list styling */
.sec.about ul li::marker {
  color: var(--pr-gold);
  font-weight: bold;
}

/* Improve About columns spacing */
.sec.about .wp-block-columns {
  gap: 40px;
}

/* Optional: subtle dividers between sections */
.sec.services,
.sec.about,
.sec.values {
  border-top: 1px solid rgba(209,164,101,0.25); /* gold tint divider */
  padding-top: 72px;
}

/* === HERO HEADING & TAGLINE VISIBILITY === */
.sec.hero.hero-bg h1,
.sec.hero.hero-bg p {
  color: #F3EAD8;                        /* warm off-white tactical tone */
  font-weight: 800;                      /* bold weight for punch */
  text-shadow: 0 2px 6px rgba(0,0,0,.65); /* subtle dark glow for separation */
}

/* Heading gets a bit more presence */
.sec.hero.hero-bg h1 {
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

/* Optional: translucent backdrop only behind text (comment out if too heavy) */
.sec.hero.hero-bg h1,
.sec.hero.hero-bg p {
  display: inline-block;
  background: rgba(0,0,0,0.35);  /* dark glass effect */
  padding: 6px 12px;
  border-radius: 6px;
}

/* === HERO LOGO === */
.hero-logo img {
  max-width: 220px;             /* adjust size for visibility */
  height: auto;
  margin-bottom: 20px;          /* spacing before heading */
  display: block;
}

/* Center it inside hero */
.hero-inner {
  text-align: center;           /* aligns logo, heading, tagline, buttons */
}
.hero-logo img {
  max-width: 220px;
  height: auto;
  margin-bottom: 18px;
  display: block;
}
@media (max-width:782px){
  .hero-logo img {
    max-width: 160px;
    margin-bottom: 12px;
  }
}
/* =========================
   HEADER / FOOTER
   ========================= */

/* Layout helper */
.wrap{
  width: min(1200px, 92vw);
  margin-inline: auto;
}

/* ===== Header: tactical glass / sticky ===== */
.pr-header{
  position: sticky;
  top: 0;
  z-index: 999; /* above hero/content */
  background: rgba(13,15,17,.72);    /* dark glass */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #1e242a;
}

/* container and gaps */
.pr-header .wp-block-navigation__container{ gap: 24px; }
.pr-header .header-ctas .wp-block-button{ margin-left: 10px; }

/* Logo sizing */
.pr-header .brand img{ height: 40px; width: auto; display: block; }

/* Link styling */
.pr-header a{
  color: #E6EAEE;
  text-decoration: none;
}
.pr-header a:hover{ color: #C9A15F; }

/* Buttons */
.pr-header .wp-block-button .wp-block-button__link{
  font-weight: 700;
  border-radius: 6px;
  padding: 10px 14px;
}
.pr-header .wp-block-button:not(.is-style-outline) .wp-block-button__link{
  background: #C9A15F;   /* warm tactical gold */
  color: #121416;
}
.pr-header .wp-block-button.is-style-outline .wp-block-button__link{
  background: transparent;
  color: #E6EAEE;
  border: 2px solid #E6EAEE;
}
.pr-header .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background: rgba(255,255,255,.08);
}

/* Mobile overlay menu */
.wp-block-navigation__responsive-container.is-menu-open{
  background: #0F1112;
}
.wp-block-navigation__responsive-container .wp-block-navigation__container{
  gap: 18px;
}
.wp-block-navigation__responsive-container a{
  color: #E6EAEE;
  font-size: 18px;
}
.wp-block-navigation__responsive-container a:hover{
  color: #C9A15F;
}

/* Make header breathe on small screens */
@media (max-width: 782px){
  .pr-header{ padding: 10px 0; }
  .pr-header .brand img{ height: 32px; }
}
/* ===== Header look & feel ===== */
.pr-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(18,20,22,.70);     /* translucent dark */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Logo size and readability */
.pr-header .brand img {
  height: 40px;                       /* adjust if needed */
  width: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}

/* Desktop nav spacing */
.pr-header .wp-block-navigation .wp-block-navigation__container {
  gap: 28px;
}

/* Header CTAs */
.pr-header .header-ctas .wp-block-button .wp-block-button__link {
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
}

/* Outline = white, Gold = brand */
.pr-header .header-ctas .is-style-outline .wp-block-button__link {
  color: #ffffff;
  border: 2px solid #ffffff;
  background: transparent;
}
.pr-header .header-ctas .is-style-outline .wp-block-button__link:hover {
  background: rgba(255,255,255,.08);
}

.pr-header .header-ctas .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: #C9A15F;         /* brand gold */
  color: #121416;
}
.pr-header .header-ctas .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  filter: brightness(.95);
}

/* Mobile tweaks */
@media (max-width: 960px) {
  .pr-header .brand img { height: 34px; }
  .pr-header .header-ctas { display: none; } /* keep header clean on mobile; hero has primary CTAs */
}
/* ====== TEXTURE PACK (toggle per section) ====== */

/* Carbon fiber – faint crosshatch */
.texture-carbon {
  /* deep neutral base */
  background-color:#0f1215 !important;
  /* layered subtle cross hatch */
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px);
  background-blend-mode: overlay, normal, normal;
}

/* Camo-lite – soft organic blobs using radial gradients */
.texture-camo {
  background-color:#101417 !important;
  background-image:
    radial-gradient( 700px 350px at 14% 18%, rgba(58,72,63,.08) 0 60%, transparent 61%),
    radial-gradient( 520px 300px at 86% 10%, rgba(45,52,46,.07) 0 60%, transparent 61%),
    radial-gradient( 620px 320px at 28% 92%, rgba(30,38,44,.08) 0 60%, transparent 61%),
    radial-gradient( 600px 360px at 88% 82%, rgba(54,60,54,.06) 0 60%, transparent 61%),
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)); /* global darken */
  background-blend-mode: normal, normal, normal, normal, overlay;
}

/* Optional intensity dial – add alongside texture class */
.texture--soft  { filter: none; }
.texture--bold  { filter: contrast(1.02) brightness(.97); }

/* Helpful utility so your Group blocks don’t clip the texture */
.sec { background-clip: padding-box; }


/* ====== STENCIL SEPARATORS (automatic) ====== */

/* Make sure sections are context containers */
.sec { position: relative; }

/* Draw a dashed/stenciled line between sections */
.sec + .sec {
  border-top: 2px dashed rgba(201,161,95,.65);  /* gold-ish */
  border-image: repeating-linear-gradient(90deg,
                rgba(201,161,95,.85) 0 110px,
                rgba(201,161,95,0) 110px 170px) 1;  /* creates “stencil gap” pattern */
  margin-top: 44px;
  padding-top: 44px;
}

/* Add a centered chevron (feels military rank) */
.sec + .sec::after{
  content:"";
  display:block;
  width: 18px;
  height: 18px;
  margin: 12px auto 0;
  transform: rotate(45deg);
  background: #C9A15F;
  box-shadow: 0 0 0 2px #0f1112; /* tiny outline for contrast on dark */
}