/*
Theme Name: SBN Stones
Theme URI: https://sbnstones.com
Author: SBN Stones
Author URI: https://sbnstones.com
Description: A dark, industrial, editorial WordPress theme built for SBN Stones — granite mining, processing & wholesale. Fully responsive, built as a clean canvas for Elementor page building. Each page is composed of independent, separately-editable sections.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sbnstones
*/

/* ==========================================================================
   1. DESIGN TOKENS
   (Primary display font is set to Bebas Neue — a free, condensed, bold
   industrial font that matches the brand brief. If you own a license for
   "Aquire", drop the font files into /assets/fonts/ and update the
   @font-face + --font-display variable below — nothing else needs to change.)
   ========================================================================== */
:root{
  --sbn-black:#0a0a0a;
  --sbn-black-2:#121212;
  --sbn-black-soft:#1a1a1a;
  --sbn-white:#ffffff;
  --sbn-offwhite:#f3f3ef;
  --sbn-gray:#9a9a94;
  --sbn-gray-dark:#5c5c58;
  --sbn-line:rgba(255,255,255,.12);
  --sbn-line-soft:rgba(255,255,255,.06);
  --sbn-accent:#c6ff2e;
  --sbn-accent-dark:#9fd418;

  --font-display:'Bebas Neue','Arial Narrow',sans-serif;
  --font-body:'Darker Grotesque','Segoe UI',sans-serif;

  --sbn-radius:2px;
  --sbn-container:1320px;
  --sbn-gap:24px;
}

/* Optional self-hosted Aquire override — uncomment + add files to activate
@font-face{
  font-family:'Aquire';
  src:url('assets/fonts/Aquire-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
:root{ --font-display:'Aquire','Bebas Neue',sans-serif; }
*/

/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body.sbn-theme{
  background:var(--sbn-black);
  color:var(--sbn-white);
  font-family:var(--font-body);
  font-weight:500;
  font-size:18px;
  line-height:1.5;
  margin:0;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:400;
  line-height:1.02;
  margin:0 0 .4em;
  color:var(--sbn-white);
}
h1{ font-size:clamp(44px,8.5vw,150px); }
h2{ font-size:clamp(32px,5vw,72px); }
h3{ font-size:clamp(22px,2.6vw,32px); }
p{ margin:0 0 1em; color:var(--sbn-gray); }
::selection{ background:var(--sbn-accent); color:var(--sbn-black); }

/* ==========================================================================
   3. GRAIN / TEXTURE OVERLAY (matches the gritty reference mood)
   ========================================================================== */
.sbn-grain{ position:relative; isolation:isolate; }
.sbn-grain::after{
  content:"";
  position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.sbn-container{ max-width:var(--sbn-container); margin:0 auto; padding:0 24px; }
.sbn-section-dark{ background:var(--sbn-black); color:var(--sbn-white); }
.sbn-section-black2{ background:var(--sbn-black-2); color:var(--sbn-white); }
.sbn-section-light{ background:var(--sbn-offwhite); color:var(--sbn-black); }
.sbn-section-light p{ color:var(--sbn-gray-dark); }
.sbn-section-light h1,.sbn-section-light h2,.sbn-section-light h3{ color:var(--sbn-black); }

/* ==========================================================================
   5. TYPOGRAPHY UTILITIES (use these as "CSS Classes" on Elementor widgets)
   ========================================================================== */
.sbn-eyebrow{
  font-family:var(--font-body);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:3px;
  font-size:13px;
  color:var(--sbn-accent);
  display:inline-block;
  margin-bottom:14px;
}
.sbn-bracket{
  font-family:var(--font-body);
  font-size:clamp(16px,1.6vw,22px);
  line-height:1.45;
  color:var(--sbn-gray);
  font-weight:500;
}
.sbn-bracket .sym{ color:var(--sbn-accent); }
.sbn-section-light .sbn-bracket{ color:var(--sbn-gray-dark); }
.sbn-index{
  font-family:var(--font-display);
  color:var(--sbn-accent);
  font-size:20px;
  letter-spacing:2px;
}
.sbn-tag{
  font-family:var(--font-body); font-weight:700; font-size:13px;
  letter-spacing:2px; text-transform:uppercase; color:var(--sbn-gray);
}
.sbn-stat-num{
  font-family:var(--font-display);
  font-size:clamp(36px,4vw,56px);
  color:var(--sbn-white);
  line-height:1;
}
.sbn-section-light .sbn-stat-num{ color:var(--sbn-black); }
.sbn-stat-label{
  font-family:var(--font-body); font-size:14px; color:var(--sbn-gray);
  text-transform:uppercase; letter-spacing:1px;
}
.sbn-divider-line{ border:none; border-top:1px solid var(--sbn-line); margin:0; }

/* ==========================================================================
   6. BUTTONS (also styles Elementor's native button widget when class applied)
   ========================================================================== */
.sbn-btn,.elementor-button.sbn-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; text-transform:uppercase;
  letter-spacing:1px; font-size:14px;
  padding:16px 28px; border-radius:var(--sbn-radius);
  border:1px solid var(--sbn-line); transition:all .25s ease;
  background:transparent; color:var(--sbn-white);
}
.sbn-btn:hover{ border-color:var(--sbn-accent); color:var(--sbn-accent); }
.sbn-btn-accent,.elementor-button.sbn-btn-accent{
  background:var(--sbn-accent); color:var(--sbn-black); border-color:var(--sbn-accent);
}
.sbn-btn-accent:hover{ background:var(--sbn-accent-dark); border-color:var(--sbn-accent-dark); color:var(--sbn-black); }

/* ==========================================================================
   7. CARDS / BOXES
   ========================================================================== */
.sbn-card{
  background:var(--sbn-black-2); border:1px solid var(--sbn-line);
  padding:32px; height:100%;
}
.sbn-card .sbn-index{ display:block; margin-bottom:18px; }
.sbn-card-light{ background:var(--sbn-white); color:var(--sbn-black); border:none; }
.sbn-card-light p{ color:var(--sbn-gray-dark); }
.sbn-card-light h3{ color:var(--sbn-black); }

.sbn-step{ border-left:1px solid var(--sbn-line); padding-left:20px; }
.sbn-icon-circle{
  width:56px; height:56px; border:1px solid var(--sbn-accent); border-radius:50%;
  display:flex; align-items:center; justify-content:center; color:var(--sbn-accent);
  font-size:22px;
}

/* ==========================================================================
   8. HEADER
   ========================================================================== */
.sbn-header{
  position:sticky; top:0; z-index:999;
  background:rgba(10,10,10,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--sbn-line-soft);
}
.sbn-header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 24px; max-width:var(--sbn-container); margin:0 auto;
}
.sbn-logo{ font-family:var(--font-display); font-size:24px; letter-spacing:1px; color:var(--sbn-white); }
.sbn-logo span{ color:var(--sbn-accent); }
.sbn-logo img{ max-height:38px; width:auto; }
.sbn-nav-desktop ul{ display:flex; gap:34px; }
.sbn-nav-desktop a{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--sbn-white); position:relative; padding:6px 0;
}
.sbn-nav-desktop a:hover{ color:var(--sbn-accent); }
.sbn-header-cta{ display:flex; align-items:center; gap:18px; }
.sbn-burger{
  display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;
}
.sbn-burger span{ width:24px; height:2px; background:var(--sbn-white); display:block; }
.sbn-mobile-nav{
  display:none; flex-direction:column; gap:0; background:var(--sbn-black-2);
  border-top:1px solid var(--sbn-line-soft);
}
.sbn-mobile-nav.is-open{ display:flex; }
.sbn-mobile-nav a{
  padding:16px 24px; border-bottom:1px solid var(--sbn-line-soft);
  text-transform:uppercase; font-weight:700; letter-spacing:1px; font-size:14px; display:block;
}

@media(max-width:900px){
  .sbn-nav-desktop{ display:none; }
  .sbn-header-cta .sbn-btn{ display:none; }
  .sbn-burger{ display:flex; }
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.sbn-footer{ background:var(--sbn-black-2); border-top:1px solid var(--sbn-line-soft); padding:80px 0 0; }
.sbn-footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:60px; border-bottom:1px solid var(--sbn-line-soft);
}
.sbn-footer-grid h4{
  font-family:var(--font-body); font-size:13px; letter-spacing:2px; text-transform:uppercase;
  color:var(--sbn-accent); margin-bottom:18px; font-weight:700;
}
.sbn-footer-grid li{ margin-bottom:10px; }
.sbn-footer-grid a{ color:var(--sbn-gray); font-size:15px; }
.sbn-footer-grid a:hover{ color:var(--sbn-white); }
.sbn-footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 0; font-size:13px; color:var(--sbn-gray-dark);
  text-transform:uppercase; letter-spacing:1px;
}
.sbn-footer-bottom a{ color:var(--sbn-gray-dark); }
.sbn-footer-bottom a:hover{ color:var(--sbn-accent); }
@media(max-width:900px){
  .sbn-footer-grid{ grid-template-columns:1fr 1fr; }
  .sbn-footer-bottom{ flex-direction:column; gap:10px; text-align:center; }
}

/* ==========================================================================
   10. FALLBACK CONTENT (blog / search / 404 / pages without Elementor)
   ========================================================================== */
.sbn-content-wrap{ max-width:820px; margin:0 auto; padding:120px 24px; }
.sbn-content-wrap h1{ font-size:clamp(36px,6vw,64px); margin-bottom:24px; }
.sbn-content-wrap article{ margin-bottom:60px; padding-bottom:60px; border-bottom:1px solid var(--sbn-line-soft); }
.sbn-content-wrap .entry-meta{ color:var(--sbn-accent); font-size:13px; letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; }
.sbn-404{ text-align:center; padding:160px 24px; }
.sbn-404 h1{ font-size:clamp(80px,16vw,220px); color:var(--sbn-accent); margin:0; }

/* ==========================================================================
   11. ELEMENTOR CONTAINER NICETIES
   ========================================================================== */
.elementor .sbn-section-dark,
.elementor .sbn-section-black2,
.elementor .sbn-section-light{ width:100%; }
.e-con{ max-width:100% !important; }

/* WordPress core alignment support */
.alignfull{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); }
.alignwide{ max-width:1320px; margin-left:auto; margin-right:auto; }

/* ==========================================================================
   12. NATIVE ELEMENTOR WIDGET HARMONIZATION
   (so icon-box / counter / testimonial / image-box widgets automatically
   pick up the brand colors & fonts inside .sbn-section-* wrappers, with no
   manual styling needed per-widget in the editor)
   ========================================================================== */
.elementor-icon-box-title{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.5px; }
.sbn-section-dark .elementor-icon-box-title,
.sbn-section-black2 .elementor-icon-box-title{ color:var(--sbn-white) !important; }
.sbn-section-light .elementor-icon-box-title{ color:var(--sbn-black) !important; }
.elementor-icon-box-description{ color:var(--sbn-gray); }
.sbn-section-light .elementor-icon-box-description{ color:var(--sbn-gray-dark); }
.elementor-icon-box-icon i,
.elementor-icon-box-icon svg{ color:var(--sbn-accent) !important; fill:var(--sbn-accent) !important; }
.elementor-icon-box-wrapper .elementor-icon{ background:transparent; }

.elementor-counter-number-wrapper,
.elementor-counter-number{
  font-family:var(--font-display); color:var(--sbn-white) !important; font-size:clamp(34px,4vw,52px);
}
.sbn-section-light .elementor-counter-number-wrapper,
.sbn-section-light .elementor-counter-number{ color:var(--sbn-black) !important; }
.elementor-counter-title{
  font-family:var(--font-body); text-transform:uppercase; letter-spacing:1px;
  font-size:14px; color:var(--sbn-gray); margin-top:6px;
}

.elementor-testimonial-content{
  color:var(--sbn-white) !important; font-family:var(--font-body); font-size:19px; font-style:normal; line-height:1.5;
}
.sbn-section-light .elementor-testimonial-content{ color:var(--sbn-black) !important; }
.elementor-testimonial-name{ color:var(--sbn-accent) !important; font-family:var(--font-body); font-weight:700; }
.elementor-testimonial-job{ color:var(--sbn-gray); }

.elementor-image-box-title{ font-family:var(--font-display); text-transform:uppercase; }
.sbn-section-dark .elementor-image-box-title,
.sbn-section-black2 .elementor-image-box-title{ color:var(--sbn-white) !important; }
.sbn-section-light .elementor-image-box-title{ color:var(--sbn-black) !important; }
.elementor-image-box-description{ color:var(--sbn-gray); }

.sbn-list-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--sbn-line); font-size:17px;
}
.sbn-section-light .sbn-list-row{ border-bottom-color:rgba(0,0,0,.12); }

/* Google Maps widget — match dark theme */
.elementor-widget-google_maps iframe{ filter:grayscale(1) invert(92%) contrast(83%); display:block; }