/* 
 Theme Name: 01 Local Mechanic
 Description: Mobile-first WordPress theme (clean breakpoints)
 Author: 24 Local Mechanic
 Version: 1.1.0
*/

/* ================================
   0) CSS VARIABLES & GLOBAL RESET
   ================================ */
:root{
  --brand-black:#0f1115;
  --brand-yellow:#FFC107;
  --brand-orange:#FF8C00;
  --brand-blue-light:#DBEAFE;
  --ink:#0F172A;
  --bg-grey:#F7FAFC;
  --card-border:#eee;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',Arial,'Noto Sans',sans-serif;color:#222;background:#fff;line-height:1.6}
a{color:#0b5cab;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 16px}

/* ================================
   1) BASE (applies to all sizes)
   Keep these minimal; size-specific tweaks go in sections below.
   ================================ */

/* Header */
.header{
  position:sticky; top:0; z-index:1000;
  background:var(--brand-blue-light);
  color:var(--ink);
  border-bottom:2px solid var(--brand-yellow);
}
.header .nav{display:flex;align-items:center;justify-content:space-between;padding:8px 0;min-height:56px}

/* Brand (text title; logo optional) */
.brand{display:flex;align-items:center;gap:12px}
.brand .title{font-weight:700;font-size:20px;color:var(--ink);text-decoration:none}
.brand .title:hover{opacity:.8}
.badge{background:var(--brand-orange);color:#000;font-weight:700;padding:3px 8px;border-radius:999px;font-size:12px;margin-left:8px}

/* Menu core */
.menu{display:flex;gap:16px;align-items:center}
.menu-list{list-style:none;display:flex;gap:16px;margin:0;padding:0;align-items:center}
.menu-list li a{color:var(--ink);font-weight:600;text-decoration:none}
.menu-list li a:hover{opacity:.85}
.menu-toggle{
  display:none; /* shown on mobile */
  height:40px; line-height:40px; padding:0 14px;
  border:1px solid #94b8ff; background:#fff; color:var(--ink);
  border-radius:10px; font-weight:600; font-size:clamp(13px,3.5vw,16px);
}
.cta-call{background:var(--brand-yellow);color:#000;font-weight:800;padding:8px 12px;border-radius:10px}

/* Hero */
.hero{
  /* Image + light overlay (image URL is injected from functions.php) */
  background:
    linear-gradient(rgba(255,255,255,0.35), rgba(255,255,255,0.35));
  color:var(--ink);
  padding:28px 0 18px;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;      /* pulled up so “Mechanic” is visible */
}
.hero .lead{font-size:14px;opacity:.85}
.hero h1{font-size:28px;margin:10px 0 8px}
.hero h2{font-size:16px;font-weight:500;margin:0 0 18px;opacity:.95}
.hero .btn {
    background-color: #FF8C00 ; /* DarkOrange, a vibrant and warm shade */
    border-radius: 10px; /* Adds rounded corners (adjust value as needed) */
    color: #333333; /* Text color is nearly black */
    font-weight: 650; 
    padding: 6px 10px;
    display: inline-block;
}

/* Cards / grid */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--card-border);border-radius:14px;padding:16px;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.section{padding:28px 0;background:#fff}
.section.alt{background:var(--bg-grey)}
.section h3{margin:0 0 14px}
.list{padding-left:18px;margin:0}

/* Why card (warm) */
.why-card{background: #FFFFFFB3;color:#3C2F23;border: 3px solid #333333;}
.why-card strong{color:#3C2F23;text-decoration: underline;}
.why-card li {font-weight: bold;}

/* Footer */
.footer{background:#0f1115;color:#c9c9cf;padding:24px 0;margin-top:24px}
.footer a{color:#c9c9cf}
.copy{border-top:1px solid #222;margin-top:16px;padding-top:16px;font-size:13px;text-align:center}

/* Footer: Service Areas — 2 columns (always) */
.footer .service-areas{
  list-style:none !important; margin:0 !important; padding:0 !important; width:100%;
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:20px; row-gap:6px;
}
.footer .service-areas li{display:flex;align-items:flex-start;margin:4px 0;color:#c9c9cf;font-size:14px;line-height:1.4}
.footer .service-areas li::before{content:"📍";margin-right:8px;line-height:1;transform:translateY(1px)}

/* Footer map */
.footer .footer-map iframe{width:100%;height:220px;border:0;border-radius:12px;display:block}

/* Forms */
.form fieldset{border:0;padding:0;margin:0}
.form .row{display:grid;gap:12px}
.form .row-2{grid-template-columns:1fr 1fr}
.form label{font-weight:700;font-size:14px}
.form input,.form select,.form textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;outline:none}
.form button {
    border: 0;
    
    /* NEW: Orange color for high visibility */
    background-color: #FF8C00; /* DarkOrange - vibrant and warm */
    color: #FFFFFF;           /* White text for excellent contrast (WCAG accessible) */
    font-weight: bold;        /* Makes the text stand out */
    padding: 10px 20px;       /* Gives the button a good size */
    cursor: pointer;          /* Ensures it looks clickable */
}

/* Misc */
.status-bar{display:flex;gap:8px;flex-wrap:wrap}
.status-step{padding:8px 10px;border-radius:10px;background:#eee;font-weight:700}
.status-step.active{background:var(--brand-yellow)}
.map-embed iframe{width:100%;min-height:320px;border:0;border-radius:14px}
.whatsapp-float{position:fixed;left:14px;bottom:14px;z-index:998;background:#25D366;color:#fff;padding:12px 14px;border-radius:999px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.whatsapp-float:hover{opacity:.9;text-decoration:none}

/* Testimonials & FAQ */
.t-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
.t-card .t-stars{font-size:18px;color:#F59E0B;letter-spacing:1px}
.t-card .t-name{margin-top:8px;font-weight:700;color:var(--ink)}
.t-card .t-text p{margin:8px 0 0}
.faq-item summary{cursor:pointer}
.faq-item p{margin:10px 0 0}

/* ======================================
   2) DESKTOP styles (≥ 901px)
   ====================================== */
@media (min-width: 901px){
  .header .nav{min-height:64px}
  .brand .title{font-size:22px}

  .grid-3{grid-template-columns:repeat(3,1fr)}
  .footer .footer-map iframe{height:260px}
}

/* ======================================
   3) TABLET styles (721px – 900px)
   ====================================== */
@media (min-width:721px) and (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .t-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ======================================
   4) MOBILE styles (≤ 720px)
   ====================================== */
@media (max-width:720px){
  /* Header & menu */
  .menu-toggle{display:inline-block}
  .menu{
    display:none; position:absolute; left:0; right:0; top:58px;
    background:var(--brand-blue-light); border-top:1px solid #c7defe; padding:12px; z-index:1000;
  }
  .menu.show{display:block}
  .menu-list{flex-direction:column; gap:12px}
  .menu .cta-call{display:block;width:100%;text-align:center;margin-top:8px}

  /* Typography scale */
  .hero h1{font-size:24px}
  .hero h2{font-size:15px}

  /* Hero image focus higher to reveal “Mechanic” */
  .hero{background-position:center 2%}

  /* Single-column grids on mobile */
  .grid-2,.grid-3{grid-template-columns:1fr}

  /* Testimonials stack */
  .t-grid{grid-template-columns:1fr}

  /* Service Areas — keep two columns on mobile as requested; 
     change to 1fr here if you ever want single column */
  .footer .service-areas{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  /* Tiny phones tweak */
  @media (max-width:360px){
    .footer .service-areas li{font-size:13px}
  }
}


/* Order Tracking: align input & button */
.order-track .row-2{
  grid-template-columns: 1fr auto;   /* input expands, button autosize */
  align-items: end;                   /* bottom align both columns */
  gap: 12px;
}
.order-track .form label{ margin-bottom: 6px; }

.order-track input{
  height: 42px;                       /* consistent control height */
}

.order-track .actions{ align-self: end; }
.order-track .actions .btn {
    /* Set a clean, professional green background */
    background-color: #4CAF50; 
    color: #FFFFFF; /* White text for perfect contrast */
    border-radius: 4px; /* Optional: adds a nice modern touch */
    border: none; 

    /* Existing styles */
    height: 42px; 
    line-height: 42px;
    padding: 0 14px;
    
    /* Ensure the button text is visible */
    font-weight: bold; 
}