/*
Theme Name:        Smith & Eulo by Camille
Theme URI:         https://smithandeulo.com
Author:            Smith & Eulo Law Firm by Camille
Author URI:        https://smithandeulo.com
Description:       Premium WordPress theme for Smith & Eulo Law Firm. Dark navy and gold design system with full-width Elementor sections, sticky header, mega footer, and complete Elementor Kit integration. Optimized for criminal defense attorneys and legal professionals.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       smith-eulo-camille
Domain Path:       /languages
Tags:              law, legal, attorney, lawyer, elementor, dark, gold, one-page, responsive, custom-colors, custom-menu, featured-images, full-width-template, sticky-post, threaded-comments, criminal-defense

*/

/* ============================================================
   LAWRIST THEME — PRIMARY STYLESHEET
   All major styles are handled by the Elementor Kit.
   This file provides foundational resets and typography
   base so the site renders correctly before Elementor loads.
   ============================================================ */

/* --- Google Fonts (loaded via functions.php enqueue) --- */

/* --- Box Sizing Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #555f70;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

/* --- Headings --- */
h1, h2, h3, h4 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: #111827;
  margin-top: 0;
  margin-bottom: 0.75em;
}

h1 { font-size: clamp(32px, 5vw, 64px); font-weight: 900; letter-spacing: -1px; }
h2 { font-size: clamp(26px, 4vw, 42px); letter-spacing: -0.5px; }
h3 { font-size: clamp(20px, 3vw, 28px); }
h4 { font-size: clamp(17px, 2vw, 20px); }

h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff;
}
h5 { font-size: 13px; }
h6 { font-size: 11px; color: #c9a96e; letter-spacing: 3px; }

/* --- Paragraphs & Text --- */
p {
  margin-top: 0;
  margin-bottom: 1.25em;
  color: #555f70;
}

a {
  color: #c9a96e;
  text-decoration: none;
  transition: color 0.25s ease;
}
a:hover { color: #a8884d; }

strong, b { font-weight: 700; }
em, i { font-style: italic; }

/* --- Lists --- */
ul, ol { margin: 0 0 1.25em; padding-left: 1.5em; }
li { margin-bottom: 0.4em; }

/* --- Images --- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* --- Selection --- */
::selection { background: #c9a96e; color: #ffffff; }
::-moz-selection { background: #c9a96e; color: #ffffff; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0b0f1e; }
::-webkit-scrollbar-thumb { background: #c9a96e; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a8884d; }

/* --- Inputs & Forms (base) --- */
input, textarea, select, button {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #c9a96e;
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18);
}

/* --- WordPress Core Classes --- */
.alignleft  { float: left;  margin-right: 1.5em; margin-bottom: 1em; }
.alignright { float: right; margin-left: 1.5em;  margin-bottom: 1em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; margin-bottom: 1em; }
.alignwide  { width: 100%; }
.alignfull  { width: 100%; }

/* --- Skip Link (Accessibility) --- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: #c9a96e;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 13px;
  font-weight: 700;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* --- Screen Reader Text --- */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* --- Site Structure --- */
#page { display: flex; flex-direction: column; min-height: 100vh; }
#content { flex: 1 0 auto; }
#colophon { flex-shrink: 0; }

/* --- Elementor page full width --- */
.page-template-elementor_canvas,
.page-template-elementor_header_footer {
  overflow-x: hidden;
}
.elementor-page { overflow-x: hidden; }

/* ============================================================
   FULL WIDTH ELEMENTOR SECTIONS WITH HEADER/FOOTER
   Display theme header/footer even with Elementor canvas
   ============================================================ */

/* Ensure site structure displays correctly */
#page { 
  display: flex; 
  flex-direction: column; 
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

/* Make content area flex-grow to push footer down */
#content { 
  flex: 1 0 auto;
  width: 100%;
}

/* Header stays visible and sticky */
#masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  left: 0;
  right: 0;
}

/* Footer stays at bottom */
#colophon {
  flex-shrink: 0;
  width: 100%;
}

/* Support full-width sections in Elementor - NO 100vw WIDTH */
.elementor-section-full_width {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  left: 0;
  right: 0;
}

/* Elementor container in full-width sections */
.elementor-section-full_width > .elementor-container {
  width: 100%;
  max-width: 100%;
}

/* Full-width background extends properly - NO 100vw */
.elementor-section-full_width > .elementor-background {
  width: 100%;
  left: 0;
}

/* Ensure Elementor content area displays */
#content,
.elementor-page-content,
.elementor.elementor-edit-mode {
  width: 100%;
}

/* Canvas template should show header/footer */
.page-template-elementor_canvas {
  background: #ffffff;
}

/* Remove body overflow hidden that can hide content */
body.elementor-editor-active,
body.elementor-editor-preview {
  overflow-x: visible !important;
}

/* Prevent horizontal scroll on full-width sections */
body {
  overflow-x: hidden;
}

/* Sticky header compensation */
@media (max-width: 1024px) {
  .elementor-section-full_width {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }
  
  .elementor-section-full_width > .elementor-background {
    width: 100%;
    left: 0;
  }
}

/* ============================================================
   ELEMENTOR KIT OVERRIDES
   Fine-tune Elementor defaults to match Lawrist design tokens
   ============================================================ */

/* Remove default Elementor section margins on mobile */
@media (max-width: 767px) {
  .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* Elementor invisible class (entrance animations) */
.elementor-invisible { visibility: hidden !important; }

/* Testimonial carousel dots */
.swiper-pagination-bullet { background: rgba(201,169,110,0.4) !important; }
.swiper-pagination-bullet-active { background: #c9a96e !important; }
.elementor-swiper-button { color: #c9a96e !important; }

/* ============================================================
   DOUBLE SCROLLBAR FIX - Applied April 29, 2026
   The issue was caused by 100vw creating overflow.
   ============================================================ */

html, body {
  overflow-x: hidden !important;
  width: 100% !important;
}

.alignfull {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.elementor-section-full_width {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.elementor-page {
  overflow-x: hidden !important;
  width: 100% !important;
}

/* CRITICAL FIX: Mega Menu dropdown scrollbar fix */
/* Only add max-height to DROPDOWNS, not the main menu */
@media (min-width: 769px) {
  #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
    max-height: 80vh !important;
    overflow-y: auto !important;
  }
}

/* CRITICAL: Override Google Reviews inline CSS that causes double scrollbar */
.rpi .rpi-slides {
  overflow-x: hidden !important;
  overflow: hidden !important;
}

.rpi .rpi-dots {
  overflow-x: hidden !important;
}

.rpi-slides {
  overflow-x: hidden !important;
}

.grw-review {
  overflow-x: hidden !important;
}

.wp-gr .grw-scroll {
  overflow-y: auto !important;
}

/* Kill any 100vw width properties as fallback */
[style*="width: 100vw"],
[style*="100vw"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ========================================
   SMITH & EULO FOOTER MEGA MENU
   ======================================== */

.se-footer-mega-menu {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 0.8fr 1fr 0.8fr 0.6fr 0.8fr 0.6fr;
  gap: 40px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.se-footer-mega-menu > li.footer-column {
  list-style: none;
}

.se-footer-mega-menu > li.footer-column > a {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #c9a96e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
  display: block;
  pointer-events: none;
  text-decoration: none;
}

.se-footer-mega-menu ul.sub-menu {
  list-style: none;
  padding: 0;
  margin: 15px 0 0 0;
}

.se-footer-mega-menu ul.sub-menu li {
  margin-bottom: 12px;
}

.se-footer-mega-menu ul.sub-menu li a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  line-height: 1.6;
  transition: color 0.2s ease;
}

.se-footer-mega-menu ul.sub-menu li a:hover {
  color: #c9a96e;
}

.se-footer-mega-menu a[href^="tel:"] {
  font-size: 18px;
  font-weight: 600;
  color: #c9a96e !important;
}

@media (max-width: 768px) {
  .se-footer-mega-menu {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .se-footer-mega-menu > li.footer-column > a {
    font-size: 14px;
    margin-bottom: 15px;
  }
  
  .se-footer-mega-menu ul.sub-menu li {
    margin-bottom: 10px;
  }
  
  .se-footer-mega-menu ul.sub-menu li a {
    font-size: 13px;
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .se-footer-mega-menu {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .se-footer-mega-menu {
    grid-template-columns: repeat(5, 1fr);
  }
}