/*
Theme Name: Gerken Environmental
Theme URI: https://gerkenenvironmental.com
Author: Flex360
Description: Custom 2026 theme for Gerken Environmental Enterprises.
Version: 1.0.0
*/

:root {
  --brand-brown: #432a13;
  --brand-brown-2: #5d3820;
  --brand-cream: #f5efe6;
  --brand-gold: #c9a55c;
  --brand-red: #851719;
  --ink: #1f1611;
  --ink-soft: #4a3a2c;
}

html, body { max-width: 100vw; overflow-x: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; color: var(--ink); -webkit-font-smoothing: antialiased; }
.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-variation-settings: 'SOFT' 50, 'WONK' 0; }

.headline-xl { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: -0.02em; }
.headline-lg { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; }

/* Article body — long-form content from Laravel pages */
.prose-gerken { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.75; }
.prose-gerken h1, .prose-gerken h2, .prose-gerken h3, .prose-gerken h4 { font-family: 'Fraunces', Georgia, serif; color: var(--brand-brown); margin-top: 2em; margin-bottom: 0.6em; line-height: 1.2; }
.prose-gerken h2 { font-size: 1.75rem; }
.prose-gerken h3 { font-size: 1.375rem; }
.prose-gerken p { margin-bottom: 1.25em; }
.prose-gerken a { color: var(--brand-brown); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose-gerken a:hover { color: var(--brand-gold); }
.prose-gerken ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1.25em; }
.prose-gerken ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1.25em; }
.prose-gerken li { margin-bottom: 0.4em; }
.prose-gerken img { max-width: 100%; height: auto; border-radius: 0.75rem; margin: 1.5em 0; }
.prose-gerken blockquote { border-left: 3px solid var(--brand-gold); padding-left: 1.25em; font-style: italic; color: var(--brand-brown); margin: 1.5em 0; }
.prose-gerken strong { color: var(--brand-brown); }

/* Legacy content normalization - source uses inline styles + tables */
.prose-gerken table { border-collapse: collapse; width: 100%; margin: 1.5em 0; }
.prose-gerken table td, .prose-gerken table th { border: 1px solid #e5dccc; padding: 0.5em 0.75em; }
.prose-gerken [style*="font-family"] { font-family: inherit !important; }
.prose-gerken [style*="font-size"] { font-size: inherit !important; }
.prose-gerken font { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }

.card-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-lift:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -15px rgba(67, 42, 19, 0.25); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Mobile drawer */
.mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(85vw, 360px); background: var(--brand-brown); color: white; transform: translateX(100%); transition: transform 0.3s ease; z-index: 100; padding: 5rem 2rem 2rem; overflow-y: auto; }
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 99; }
.mobile-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-drawer ul { list-style: none; padding: 0; }
.mobile-drawer li { border-bottom: 1px solid rgba(255,255,255,0.15); }
.mobile-drawer a { display: block; padding: 0.875rem 0; color: white; text-decoration: none; font-weight: 500; }
.mobile-drawer .sub-menu { padding-left: 1rem; padding-bottom: 0.5rem; }
.mobile-drawer .sub-menu li { border: none; }
.mobile-drawer .sub-menu a { padding: 0.5rem 0; font-weight: 400; opacity: 0.85; }