/*
Theme Name: Rines Design
Theme URI: https://rinesdesign.com
Author: Rines Design
Description: Premium custom cabinetry & woodworking theme for Rines Design Indianapolis. Features full mega-menu, homepage builder, custom page templates for Cabinetry, Custom Wood Work, Areas We Serve, Contact, and About pages. Fully responsive with mobile-first design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
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: rines-design
Tags: business, custom-colors, custom-menu, featured-images, full-width-template, responsive-layout, custom-logo, one-column, two-columns
*/

/* ============================================================
   HEADER & MEGA MENU FIXES
============================================================ */

/* Logo icon squares */
.logo-icon {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.logo-icon span {
  background: var(--red) !important;
  border-radius: 2px !important;
  display: block !important;
}
.logo-icon span:nth-child(2),
.logo-icon span:nth-child(3) { opacity: 0.55; }

/* SVG icons — force render */
.hdr-btn svg,
.hdr-btn-call-mobile svg,
.hdr-location-pill svg,
.ndrop-topbar a svg,
.ndrop-link-ic svg,
.ndrop-col-title svg,
.ndrop-ci-ic svg,
.ndrop-quote-btn svg,
.btn-red svg,
.footer-call-link svg,
.footer-contact-icon svg {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Mega menu — dynamic top position via JS */
#megaMenu {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 997 !important;
  /* top set by JS below */
}

/* When WordPress admin bar is present (logged in) */
body.admin-bar #megaMenu {
  /* admin bar is 32px on desktop, 46px on mobile */
}

/* Ensure header is always on top of mega menu */
#mainHeader {
  z-index: 999 !important;
  position: sticky !important;
  top: 0 !important;
}
body.admin-bar #mainHeader {
  top: 32px !important;
}
@media screen and (max-width: 782px) {
  body.admin-bar #mainHeader { top: 46px !important; }
}

/* Top bar */
.top-bar { position: relative; z-index: 1000; }
body.admin-bar .top-bar { }

/* Backdrop z-index */
.menu-backdrop { z-index: 996 !important; }

/* ndrop-topbar SVGs need fill:none for stroke-based icons */
.ndrop-topbar a svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  width: 14px;
  height: 14px;
}

/* ndrop-link-ic SVGs */
.ndrop-link-ic svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: #8B5E3C;
  stroke-width: 2;
}
.ndrop-link:hover .ndrop-link-ic svg { stroke: #fff; }

/* ndrop-col-title SVGs */
.ndrop-col-title svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2;
}



/* WordPress custom logo wrapper */
.header-logo .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}

/* Logo image sizing — fits header height without overflow */
.header-logo .custom-logo-link img,
.header-logo .custom-logo {
  height: 58px !important;
  width: auto !important;
  max-width: 220px !important;
  object-fit: contain;
  display: block;
}

/* Remove extra gap when custom logo is used */
.header-logo:has(.custom-logo-link) {
  gap: 0;
}

/* Mobile logo size */
@media (max-width: 768px) {
  .header-logo .custom-logo-link img,
  .header-logo .custom-logo {
    height: 44px !important;
    max-width: 160px !important;
  }
}

/* ============================================================
   HEADER HEIGHT + LOGO FIX
============================================================ */

/* Header height increase */
#mainHeader .header-inner {
  height: 96px !important;
}
@media (max-width: 768px) {
  #mainHeader .header-inner { height: 68px !important; }
}

/* Logo container — remove right border gap, push pill right */
.header-logo {
  padding-right: 0 !important;
  border-right: none !important;
  margin-right: 0 !important;
}

/* Custom logo image — bigger */
.header-logo .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}
.header-logo .custom-logo-link img,
.header-logo .custom-logo,
.custom-logo-link img {
  height: 80px !important;
  width: auto !important;
  max-width: 260px !important;
  object-fit: contain;
  display: block;
}

/* Push location pill away from logo */
.hdr-location-pill {
  margin-left: 32px !important;
}

/* Push header-right to far right */
.header-right {
  margin-left: auto !important;
}

/* Mobile logo */
@media (max-width: 768px) {
  .header-logo .custom-logo-link img,
  .header-logo .custom-logo,
  .custom-logo-link img {
    height: 50px !important;
    max-width: 160px !important;
  }
  .hdr-location-pill {
    margin-left: 12px !important;
  }
}

/* ============================================================
   GRID LAYOUT FIXES — Max 3 columns, proper responsive
============================================================ */

/* Why grid: 4 col -> max 3 col */
.why-grid {
/*   grid-template-columns: repeat(3, 1fr) !important; */
}
@media (max-width: 900px) {
  .why-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .why-grid { grid-template-columns: 1fr !important; }
}

/* Woodwork grid: 4 col -> 3 col */
.woodwork-grid {
/*   grid-template-columns: repeat(3, 1fr) !important; */
}
@media (max-width: 900px) {
  .woodwork-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .woodwork-grid { grid-template-columns: 1fr !important; }
}

/* Trust grid: 4 col -> 3 col */
.trust-grid {
/*   grid-template-columns: repeat(3, 1fr) !important; */
}
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .trust-grid { grid-template-columns: 1fr !important; }
}

/* Stat strip: 4 col -> 3 col max */
.stat-strip {
/*   grid-template-columns: repeat(3, 1fr) !important; */
}
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Process grid: 4 col -> 3 col */
.pg-process-grid {
/*   grid-template-columns: repeat(3, 1fr) !important; */
}
@media (max-width: 900px) {
  .pg-process-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .pg-process-grid { grid-template-columns: 1fr !important; }
}

/* Sfeat grid: 3 col is correct, ensure responsive */
@media (max-width: 900px) {
  .sfeat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .sfeat-grid { grid-template-columns: 1fr !important; }
}

/* Area service grid on area pages */
.svc-grid {
/*   grid-template-columns: repeat(3, 1fr) !important; */
}
@media (max-width: 900px) {
  .svc-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
  .svc-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   DARK BACKGROUND — EM TEXT READABILITY
   Replace red-on-red with gold for readable contrast
============================================================ */

/* Homepage hero italic line */
.hero-h1-mid { color: #FFB701 !important; }

/* Page hero (About, Cabinetry, Contact etc.) */
.page-hero h1 em { color: #FFB701 !important; }
.page-hero .page-hero-eyebrow span::before { background: #FFB701 !important; }

/* Showcase section heading */
#showcase .section-title em { color: #FFB701 !important; }

/* Feature band dark section */
#feature-band .section-title em { color: #FFB701 !important; }
.feature-band-content .section-title em { color: #FFB701 !important; }

/* Quote section dark */
#quote .section-title em { color: #FFB701 !important; }
.quote-inner .section-title em { color: #FFB701 !important; }

/* Footer CTA dark */
.footer-cta-title em { color: #FFB701 !important; }

/* Mission section dark */
.mission-sec blockquote em { color: #FFB701 !important; }

/* pg-cta-sec dark red section */
.pg-cta-sec h2 em { color: #FFB701 !important; }

/* Inner hero subpages */
.inner-hero h1 em { color: #FFB701 !important; }

/* Area hero */
.area-hero h1 em { color: #FFB701 !important; }

/* Contact info side dark */
.contact-info-side h3 em { color: #FFB701 !important; }

/* Budget card featured */
.budget-card.featured .budget-price { color: #FFB701 !important; }