/*
Theme Name: Dream Finish Detail
Theme URI: https://dreamfinishdetail.com
Author: Front Page VIP
Description: Standalone one-page theme for Dream Finish Detail — precision auto detailing. Silver & emerald palette, transparent glass header, Bebas Neue / Oswald / Work Sans typography. No page builder required.
Version: 1.2.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: dream-finish-detail
*/

*{box-sizing:border-box}
:root{
  --ink:#1C1F1E;
  --ink-soft:#5B655F;
  --bg:#F4F5F5;
  --bg-alt:#EFF3F1;
  --white:#FFFFFF;
  --chrome:#B7BEBB;
  --chrome-light:#E2E6E4;
  --accent:#0C5E3C;
  --accent-bright:#14804F;
  --footer:#0E1613;
  --footer-line:#1B2A23;
  --footer-text:#9AA6A0;
}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Work Sans',sans-serif;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;cursor:pointer;background:none}
h1,h2,h3{margin:0}
ul{margin:0;padding:0;list-style:none}
input,select,textarea{font:inherit;color:var(--ink)}
img{max-width:100%;display:block}

.fp-nav-link{position:relative;padding:6px 2px;transition:color .15s ease}
.fp-nav-link:hover{color:var(--accent)}
.fp-btn-primary{transition:filter .15s ease, transform .15s ease}
.fp-btn-primary:hover{filter:brightness(1.1);transform:translateY(-1px)}
.fp-btn-outline{transition:background .15s ease, color .15s ease}
.fp-btn-outline:hover{background:#fff !important;color:var(--ink) !important;border-color:#fff !important}
.fp-card{transition:box-shadow .18s ease, transform .18s ease}
.fp-card:hover{box-shadow:0 18px 40px rgba(14,22,19,0.09);transform:translateY(-3px)}
.fp-input:focus,.fp-select:focus,.fp-textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.fp-link-arrow{transition:gap .15s ease}
.fp-link-arrow:hover{gap:10px}

/* Quote form success/error banner */
.fp-banner{max-width:1200px;margin:0 auto 18px;padding:14px 20px;border-radius:6px;font-size:14px;font-weight:600;}
.fp-banner-sent{background:#E6F2EC;color:#0C5E3C;border:1px solid #BFE3D0;}
.fp-banner-error{background:#FBEAEA;color:#8A1F1F;border:1px solid #F2C6C6;}

/* Honeypot field — hidden from real visitors, catches simple bots */
.fp-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* Footer Quick Links menu (rendered via wp_nav_menu) */
.fp-footer-menu a{font-size:14px;color:var(--footer-text);transition:color .15s ease;}
.fp-footer-menu a:hover{color:#ffffff;}

/* Anchor-jump offset so the sticky glass header never covers the target section */
section[id]{scroll-margin-top:100px;}

/* ---------------------------------------------------------------------
   MOBILE NAV (hamburger <-> dropdown). Hidden on desktop by default;
   .fp-nav-toggle is switched on and .fp-nav becomes a collapsible panel
   once the viewport narrows. Toggled by js/main.js.
   --------------------------------------------------------------------- */
.fp-nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:30px;height:24px;padding:0;background:none;border:none;cursor:pointer;flex:none;}
.fp-nav-toggle span{display:block;width:100%;height:2px;background:#fff;border-radius:2px;transition:transform .2s ease, opacity .2s ease;}
.fp-nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.fp-nav-toggle.is-open span:nth-child(2){opacity:0;}
.fp-nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---------------------------------------------------------------------
   RESPONSIVE BREAKPOINTS
   Inline styles hold the desktop layout (per the original design), so
   these rules use !important to override just the properties that need
   to change on smaller screens — grid columns, stacking, spacing, type.
   --------------------------------------------------------------------- */
@media (max-width:860px){
  .fp-header-row{position:relative !important;}
  .fp-nav-toggle{display:flex !important;}
  .fp-nav{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:0 !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0 !important;
    background:rgba(10,16,13,0.97) !important;
    max-height:0 !important;
    overflow:hidden !important;
    transition:max-height .25s ease !important;
    padding:0 24px !important;
  }
  .fp-nav.is-open{
    max-height:420px !important;
    padding:10px 24px 20px !important;
  }
  .fp-nav .fp-nav-link{width:100% !important;padding:13px 0 !important;border-bottom:1px solid rgba(255,255,255,0.12) !important;}
  .fp-nav .fp-btn-primary{width:100% !important;text-align:center !important;margin:14px 0 4px !important;}

  .fp-trust-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .fp-services-grid,
  .fp-whyus-grid,
  .fp-process-grid,
  .fp-reviews-grid,
  .fp-quote-grid{grid-template-columns:1fr !important;}
  .fp-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:32px 24px !important;}

  /* Grid children default to min-width:auto, which lets a long word or
     letter-spaced heading force the track wider than the viewport —
     that's what was pushing "FLAWLESS" off-screen in the quote section.
     Letting every grid item shrink below its content size fixes it. */
  .fp-trust-strip > *,
  .fp-services-grid > *,
  .fp-whyus-grid > *,
  .fp-process-grid > *,
  .fp-reviews-grid > *,
  .fp-quote-grid > *,
  .fp-footer-grid > *,
  .fp-form-row > *{min-width:0 !important;}

  .fp-hero-heading{font-size:46px !important;}
  .fp-hero-content-wrap{padding:118px 20px 52px !important;}
  .fp-cta-heading{font-size:34px !important;}
}

@media (max-width:600px){
  .fp-utility-hours{display:none !important;}
  .fp-utility-bar{flex-wrap:wrap !important;gap:6px !important;}
  .fp-hero-heading{font-size:36px !important;}
  .fp-hero-ctas{flex-direction:column !important;align-items:stretch !important;}
  .fp-hero-ctas a{justify-content:center !important;text-align:center !important;}
  .fp-trust-strip{grid-template-columns:1fr !important;text-align:center;}
  .fp-trust-strip > div{justify-content:center !important;}
  .fp-form-row{grid-template-columns:1fr !important;}
  .fp-footer-grid{grid-template-columns:1fr !important;}
  .fp-footer-bottom{justify-content:center !important;text-align:center !important;}
  .fp-cta-heading{font-size:28px !important;}
  section[id]{scroll-margin-top:80px;}
}