/* ============================================================
   SIB PRO PAINTERS — PRODUCTION CSS
   Clean rebuild • No duplicates • No override hacks
   ============================================================ */

/* ------------------------------------------------------------
   1. Animations
------------------------------------------------------------ */
@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ------------------------------------------------------------
   2. Theme Variables
------------------------------------------------------------ */
:root {
  --bg:#ffffff;
  --text:#000;
  --muted:#475569;
  --brand:#2e7eb8;
  --brand-dark:#143aa2;
  --border:#e2e8f0;
  --card:#f8fafc;
}

/* ------------------------------------------------------------
   3. Base
------------------------------------------------------------ */
* { box-sizing:border-box; }

body {
  margin:0;
  font-family:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  padding-top:10px;
}

a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-dark); }

/* GLOBAL 15PX SAFETY PADDING */
.container {
  max-width:1300px;
  margin:0 auto;
  padding:0 15px;
}

/* ------------------------------------------------------------
   4. Header & Navigation
------------------------------------------------------------ */
.site-header {
  position:sticky;
  top:0;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--border);
  z-index:50;
}

.header-wrap {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
}

.logo {
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:700;
  color:var(--text);
  font-size:18px;
}

.nav a {
  margin:0 10px;
  font-size:16px;
  font-weight:700;
}

/* CTA Button in nav */
.nav .btn-primary { margin-left:10px; }

.nav-toggle {
  display:none;
  background:none;
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:8px;
}

/* ------------------------------------------------------------
   5. HERO SECTION — image anchored LEFT, spills RIGHT
------------------------------------------------------------ */
.hero {
  border-bottom:1px solid var(--border);
  min-height:420px;
  display:flex;
  align-items:center;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.98) 0%,
      rgba(255,255,255,0.94) 35%,
      rgba(255,255,255,0.85) 55%,
      rgba(255,255,255,0) 75%
    ),
    url("/assets/hero-sibpropainters-1920x450.webp"),
    linear-gradient(120deg,#eef6ff,#ffffff);

  /* THIS IS THE MAGIC:
     Anchor image LEFT, overflow/crop on RIGHT. */
  background-position:
    left top,
    left center,
    left top;

  background-size:
    auto,
    cover,
    auto;

  background-repeat:no-repeat;
  margin-top:20px;
}

.hero-inner { padding:48px 0; }

.hero h1 {
  font-size:34px;
  margin:0 0 12px;
}
.hero .hero-inner {
  padding-left: 10px !important;
  padding-right: 10px !important;
}


.hero p {
  font-size:18px;
  font-weight:500;
  color:#111827;
  max-width:1300px;
  padding-right:180px; /* your original spacing */
}

.hero-ctas {
  display:flex;
  gap:7px;
  margin-top:12px;
}

.hero .badges {
  list-style:none;
  display:flex;
  gap:10px;
  margin:16px 0;
  padding:0;
}

.hero .badges li {
  background:var(--card);
  border:1px solid var(--border);
  padding:6px 10px;
  border-radius:999px;
  font-size:14px;
  color:var(--muted);
}

/* ------------------------------------------------------------
   6. Buttons
------------------------------------------------------------ */
.btn {
  display:inline-block;
  background:#fff;
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:10px;
  font-weight:600;
}

.btn-primary {
  background:var(--brand);
  border-color:var(--brand);
  color:#fff;
}

.btn-primary:hover {
  background:var(--brand-dark);
  border-color:var(--brand-dark);
  color:#fff;
}

/* ------------------------------------------------------------
   7. Grid Layouts
------------------------------------------------------------ */

/* Basic grids */
.grid-2 {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2,1fr);
}

.grid-3 {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,1fr);
}

/* You said: NO awkward 2+1 with empty space.
   So tablet goes FULL-WIDTH 1–1–1 clean. */
@media (max-width:900px) {
  .grid-3 {
    grid-template-columns:1fr 1fr; /* 2 columns only—clean */
  }
}

@media (max-width:600px) {
  .grid-3 {
    grid-template-columns:1fr; /* 1 column on small phones */
  }
}

/* Grid-4 in footer */
.grid-4 {
  display:grid;
  gap:16px;
  grid-template-columns:2fr 1fr 1fr 2fr; /* wide – narrow – narrow – wide */
}

@media (max-width:900px) {
  .grid-4 { grid-template-columns:1fr 1fr; }
}

@media (max-width:500px) {
  .grid-4 { grid-template-columns:1fr; }
}

/* intro split */
.intro-split {
  display:grid;
  grid-template-columns:3fr 1.2fr;
  gap:20px;
}

@media (max-width:900px) {
  .intro-split { grid-template-columns:1fr; }
}
.grid-4-equal {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Tablet */
@media (max-width: 900px) {
  .grid-4-equal {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .grid-4-equal {
    grid-template-columns: 1fr;
  }
}

/* ===========================
   PORTFOLIO IMAGE GRID
   =========================== */

.grid-portfolio-img {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin: 30px auto;
}

/* Portfolio cells */
.portfolio-cell {
  overflow: hidden;
  border-radius: 8px;
  background: #000; /* hides bad edges if image doesn't fill */
}

/* Force all portfolio images into uniform shape */
.grid-portfolio-img img {
  width: 100%;
  height: 240px;          /* You can adjust: 220, 240, 260, etc */
  object-fit: cover;      /* crops ugly areas, keeps consistency */
  display: block;
}

/* TABLET: 2 per row */
@media (max-width: 900px) {
  .grid-portfolio-img {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PHONE: 1 per row */
@media (max-width: 500px) {
  .grid-portfolio-img {
    grid-template-columns: 1fr;
  }
}


/* ------------------------------------------------------------
   8. Cards & Content Blocks
------------------------------------------------------------ */
.card {
  background:var(--card);
  border:1px solid var(--border);
  padding:18px;
  border-radius:12px;
}

.text-link { font-weight:600; }

.checklist {
  columns:2;
  gap:24px;
}

@media (max-width:600px) {
  .checklist { columns:1; }
}

.quote {
  background:#fff;
  border-left:4px solid var(--brand);
  padding:12px 16px;
  border-radius:8px;
}

.cta {
  background:linear-gradient(90deg,#e0f2fe,#f1f5f9);
}

.fineprint {
  font-size:13px;
  color:var(--muted);
}

/* ------------------------------------------------------------
   9. Footer
------------------------------------------------------------ */
.site-footer {
  background:#0b1220;
  color:#ced6e0;
  padding:32px 0;
  margin-top:40px;
}

.site-footer h4 {
  color:#fff;
  margin-top:0;
}

.site-footer a { color:#8ecaff; }

.footer-social {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.footer-social img {
  width:20px;
  height:20px;
  object-fit:contain;
  opacity:0.9;
}

.footer-social img:hover {
  opacity:1;
}

/* ------------------------------------------------------------
   10. Contact Form
------------------------------------------------------------ */
.contact-form input,
.contact-form textarea {
  width:100%;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  margin-top:6px;
}

.contact-form .hp { display:none !important; }

/* ------------------------------------------------------------
   11. NAV WIDTH FIX — 1150 to 901px
------------------------------------------------------------ */
/* hide these two only in this range */
@media (min-width:901px) and (max-width:1150px) {
  .nav a { margin:0 5px; }

  .nav a[href="/service-areas/"],
  .nav a[href="/painting-portfolio/"] {
    display:none;
  }
}

/* ------------------------------------------------------------
   12. Full Mobile Navigation
------------------------------------------------------------ */
@media (max-width:900px) {
  .nav {
    display: none;               /* hidden by default */
    position: absolute;
    right: 16px;
    top: 60px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px;

    /* FORCE VERTICAL MENU */
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-width: 220px;
    z-index: 999;
  }

  /* when JS opens it (pick ONE class name you actually use) */
  .nav.open,
  .nav.active,
  .nav.is-open {
    display: flex;
  }

  .nav a {
    display: block;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
  }

  .nav a:hover {
    background: var(--card);
  }

  .nav-toggle { display: block; }
}

/* ------------------------------------------------------------
   13. Hero on small phones
------------------------------------------------------------ */
@media (max-width:600px) {
  .hero {
    background-position:center center;
    min-height:auto;
    padding:20px 15px;
  }

  .hero p {
    padding-right:0;
    max-width:none;
  }

  .hero-ctas {
    flex-wrap:wrap;
    justify-content:center;
  }
}

/* ------------------------------------------------------------
   14. Small heading tweak
------------------------------------------------------------ */
@media (max-width:768px) {
  .hero-heading {
    font-size:0.875rem;
    line-height:1.2;
    font-weight:600;
  }
}
/* ============================
   HERO PADDING: Desktop → Mobile
   Smooth auto scaling
   ============================ */

/* Default desktop (already correct) */
.hero-inner {
  padding: 48px 0;
}

/* Tablet (shrink a bit) */
@media (max-width: 900px) {
  .hero-inner {
    padding: 32px 0; /* comfortable but not bulky */
  }
}

/* Phones (shrink more so it doesn't feel like endless scrolling) */
@media (max-width: 600px) {
  .hero-inner {
    padding: 22px 0; /* perfect balance for mobile */
  }
}

/* Tiny phones (ultra narrow screens) */
@media (max-width: 400px) {
  .hero-inner {
    padding: 18px 0; /* still breathable, no wasted space */
  }
}

/* =========================
   LINK HOVER EFFECTS
   ========================= */
.site-header .nav a,
.site-footer a,
.text-link {
  display: inline-block;
  transition: transform 160ms ease, color 160ms ease;
}

.site-header .nav a:hover,
.site-footer a:hover,
.text-link:hover {
  transform: translateY(-2px);
}