/*
Theme Name: Kittler Construction
Theme URI: https://www.kittlerconstruction.net
Author: Flex360
Description: Custom theme for Kittler Construction, Inc. Migrated from Laravel/Pilot CMS, modern 2026 redesign.
Version: 1.0.0
License: Proprietary
Text Domain: kittler-construction
*/

/* Brand tokens */
:root {
  --kci-orange:       #EA9307;
  --kci-orange-dark:  #c57d08;
  --kci-orange-light: #f9a826;
  --kci-green:        #132202;
  --kci-green-dark:   #081100;
  --kci-green-light:  #2f5d0e;
  --kci-lime:         #D9FA00;
  --kci-blue:         #70B4E8;
  --kci-beige:        #FCFCF7;
  --kci-ink:          #152C04;
  --kci-muted:        #959595;
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body { background: var(--kci-beige); color: var(--kci-ink); overflow-x: hidden; max-width: 100vw; }

/* Typography */
.font-display { font-family: "Kanit", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.01em; }
.font-body    { font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; font-feature-settings: "cv11", "ss01"; }

.headline-xl { font-family: "Kanit", sans-serif; font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; }
.headline-lg { font-family: "Kanit", sans-serif; font-weight: 500; line-height: 1.05; letter-spacing: -0.015em; }

/* Skip link */
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 1rem; top: 1rem; padding: 0.5rem 1rem; background: var(--kci-orange); color: white; z-index: 9999; border-radius: 0.5rem; }

/* Hero gradient overlay */
.hero-overlay { background: linear-gradient(135deg, rgba(19,34,2,0.82) 0%, rgba(19,34,2,0.5) 50%, rgba(47,93,14,0.25) 100%); }
.hero-overlay-bottom { background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(19,34,2,0.88) 100%); }

/* Card hover lift */
.card-lift { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1); }
.card-lift:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -20px rgba(19,34,2,.25), 0 18px 36px -18px rgba(19,34,2,.18); }
.card-image-zoom { transition: transform .9s cubic-bezier(.2,.8,.2,1); }
.card-lift:hover .card-image-zoom { transform: scale(1.06); }

/* Fade-in on scroll */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Mobile drawer */
.mobile-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 380px; background: var(--kci-green); z-index: 100; transform: translateX(100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); overflow-y: auto; box-shadow: -20px 0 60px -10px rgba(0,0,0,0.5); }
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 99; pointer-events: none; transition: background .3s; }
.mobile-drawer-overlay.is-open { background: rgba(0,0,0,0.5); pointer-events: auto; }

/* Mobile drawer nav styling */
.mobile-drawer nav > ul,
.mobile-drawer nav .menu { list-style: none; padding: 0; margin: 0; }
.mobile-drawer nav > ul > li,
.mobile-drawer nav .menu > li { margin: 0.125rem 0; }
.mobile-drawer nav > ul > li > a,
.mobile-drawer nav .menu > li > a {
  display: block; padding: 0.75rem 1rem; border-radius: 0.75rem;
  color: white; font-weight: 500; transition: background .2s, color .2s;
}
.mobile-drawer nav > ul > li > a:hover,
.mobile-drawer nav .menu > li > a:hover { background: rgba(234,147,7,0.1); color: var(--kci-orange); }
.mobile-drawer .menu-item-has-children > a::after { content: '▾'; margin-left: 0.4rem; opacity: 0.6; }
.mobile-drawer .sub-menu { list-style: none; padding: 0.25rem 0 0.5rem 1.5rem; margin: 0.25rem 0 0.5rem 0.5rem; border-left: 2px solid rgba(234,147,7,0.25); }
.mobile-drawer .sub-menu li a { display: block; padding: 0.5rem 0.75rem; font-size: 0.85rem; color: rgba(255,255,255,0.7); border-radius: 0.5rem; }
.mobile-drawer .sub-menu li a:hover { background: rgba(234,147,7,0.1); color: var(--kci-orange); }

/* Desktop nav (wp_nav_menu output: ul.menu > li.menu-item > a) */
header nav .menu { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: 0.25rem; }
header nav .menu > li { position: relative; list-style: none; }
header nav .menu > li > a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.025em; color: white; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s; }
header nav .menu > li > a:hover { background: rgba(255,255,255,0.1); color: var(--kci-orange); }

/* Desktop sub-menu dropdown */
header nav .menu > li { padding-bottom: 0.5rem; margin-bottom: -0.5rem; } /* invisible hover bridge */
header nav .menu .sub-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--kci-green); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.75rem; padding: 0.5rem; list-style: none; z-index: 50; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.4); }
header nav .menu > li:hover > .sub-menu { display: block; }
header nav .menu .sub-menu li { list-style: none; }
header nav .menu .sub-menu li a { display: block; padding: 0.5rem 0.75rem; border-radius: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.8); text-decoration: none; transition: background .2s, color .2s; white-space: nowrap; }
header nav .menu .sub-menu li a:hover { background: rgba(234,147,7,0.1); color: var(--kci-orange); }

/* Article body styling */
.prose-kci { max-width: 70ch; }
.prose-kci h2 { font-family: "Kanit", sans-serif; font-weight: 600; font-size: 2rem; line-height: 1.15; letter-spacing: -0.02em; margin: 2.5rem 0 1rem; color: var(--kci-green); }
.prose-kci h3 { font-family: "Kanit", sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin: 2rem 0 0.75rem; color: var(--kci-green); }
.prose-kci p  { margin: 0 0 1.25rem; line-height: 1.75; font-size: 1.0625rem; color: rgba(21,44,4,.85); }
.prose-kci a  { color: var(--kci-green-light); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .15s; }
.prose-kci a:hover { color: var(--kci-orange); }
.prose-kci img { border-radius: 12px; margin: 1.75rem auto; max-width: 100% !important; width: auto !important; height: auto !important; box-shadow: 0 18px 40px -20px rgba(19,34,2,.25); display: block; }
.prose-kci strong { color: var(--kci-green); font-weight: 600; }
.prose-kci ul, .prose-kci ol { margin: 0 0 1.25rem 1.5rem; line-height: 1.7; }
.prose-kci li { margin-bottom: 0.5rem; }
.prose-kci blockquote { border-left: 4px solid var(--kci-orange); padding-left: 1.5rem; font-family: "Kanit", sans-serif; font-size: 1.25rem; font-style: italic; color: rgba(19,34,2,.85); margin: 2rem 0; }

/* Tag pills */
.tag-pill { display: inline-flex; align-items: center; padding: 0.375rem 0.875rem; background: rgba(234,147,7,.15); color: var(--kci-green); border-radius: 999px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; transition: background .2s; }
.tag-pill:hover { background: rgba(234,147,7,.35); }

/* ──────────────────────────────────────────────────────────
   LEGACY CONTENT NORMALIZATION
   ────────────────────────────────────────────────────────── */
.prose-kci table { width: 100% !important; border-collapse: separate; border-spacing: 0.5rem 0.25rem; margin: 1.5rem 0; table-layout: fixed; }
.prose-kci .btn,
.prose-kci a.btn-primary,
.prose-kci a[class*="btn-"] {
  display: inline-block !important; padding: 0.75rem 1.5rem !important;
  background: var(--kci-green) !important; color: var(--kci-orange) !important;
  border-radius: 999px !important; text-align: center !important;
  font-weight: 600 !important; text-decoration: none !important;
  transition: all 0.2s !important; font-size: 0.9rem !important;
}
.prose-kci .btn:hover,
.prose-kci a.btn-primary:hover,
.prose-kci a[class*="btn-"]:hover {
  background: var(--kci-orange) !important; color: white !important;
  transform: translateY(-1px) !important;
}