/*
Theme Name: KleidarasTheme
Author: DMM Dev Team
Description: A minimal custom WordPress theme using existing HTML structure.
Version: 1.8
*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Roboto', sans-serif;
            line-height: 1.6;
        }

          .container {
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
          }

  :root {
    --background: 0 0% 100%;
    --foreground: 220 26% 14%;

    --card: 0 0% 100%;
    --card-foreground: 220 26% 14%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 26% 14%;

    /* Professional locksmith blue */
    --primary: 217 91% 40%;
    --primary-foreground: 0 0% 100%;
    
    /* Vibrant service yellow */
    --secondary: 45 93% 56%;
    --secondary-foreground: 220 26% 14%;

    /* Soft background for sections */
    --muted: 210 40% 98%;
    --muted-foreground: 220 13% 46%;

    /* Subtle accent */
    --accent: 213 27% 84%;
    --accent-foreground: 220 26% 14%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 217 91% 40%;

    /* Custom locksmith design tokens */
    --locksmith-blue-deep: 217 91% 30%;
    --locksmith-blue-light: 213 27% 84%;
    --locksmith-yellow: 45 93% 56%;
    --locksmith-yellow-light: 45 93% 76%;
    
    /* Gradients */
    --gradient-hero: linear-gradient(135deg, hsl(217 91% 40%), hsl(217 91% 30%));
    --gradient-service: linear-gradient(135deg, hsl(45 93% 56%), hsl(45 93% 46%));
    
    /* Shadows */
    --shadow-elegant: 0 10px 30px -10px hsl(217 91% 40% / 0.3);
    --shadow-card: 0 4px 15px -3px hsl(220 26% 14% / 0.1);
    
    /* Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    --radius: 0.5rem;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }


  /* Global comfy padding + text scales */
  section { scroll-margin-top: 80px; }
  h1, h2, h3 { word-wrap: break-word; }

  /* ---------- HERO ---------- */
  /* container inside hero */
  #home > div { padding-left: 1rem !important; padding-right: 1rem !important; }
  /* the 2-col grid in hero */
  #home > div > div[style*="grid-template-columns:1fr 1fr"] {
    gap: 2rem !important;
    align-items: start !important;
  }
  /* hero image fixed height (desktop default) */
  #home img[style*="height:500px"] { height: 500px !important; }

  /* Hero title and paragraph fluid sizes */
  #home h1 {
    font-size: clamp(1.6rem, 4.5vw, 2.25rem) !important;
    line-height: 1.2 !important;
  }
  #home p { font-size: clamp(1rem, 2.5vw, 1.125rem) !important; }

  /* Feature pills (3 cols → responsive below) */
  #home div[style*="grid-template-columns:repeat(3"] { gap: 1rem !important; }

  /* ---------- SERVICES GRID ---------- */
  #services > div > div[style*="display: grid"] {
    gap: 1.5rem !important;
    justify-content: stretch !important;
  }
  #services h2 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    line-height: 1.2 !important;
  }
  #services p[style*="max-width: 48rem"] {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
  }
  #services [data-role="card"] { border-radius: .75rem !important; }

  /* ---------- REVIEWS ---------- */
  #reviews h2 { font-size: clamp(1.5rem, 3.2vw, 1.875rem) !important; }
  #reviews p { font-size: clamp(1rem, 2.5vw, 1.25rem) !important; }
  /* stats grid and reviews grid defined as 3 cols in HTML */
  #reviews div[style*="grid-template-columns:repeat(3"] { gap: 1.25rem !important; }

  /* ---------- CONTACT ---------- */
  /* 2-col grid */
  #contact div[style*="grid-template-columns:repeat(2"] {
    gap: 2rem !important;
  }
  #contact a[href^="tel:"] { font-size: clamp(1rem, 2.5vw, 1.125rem) !important; }

  /* ---------- BREAKPOINTS ---------- */

  /* ≤ 1024px (tablets) */
  @media (max-width: 1024px) {
    /* hero grid → 1 column */
    #home > div > div[style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
      gap: 1.5rem !important;
    }
    /* features: 3 → 2 */
    #home div[style*="grid-template-columns:repeat(3"] {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 1rem !important;
    }
    /* services: 3 → 2 */
    #services > div > div[style*="display: grid"] {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
    /* reviews: 3 → 2 */
    #reviews div[style*="grid-template-columns:repeat(3"] {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
  }

  /* ≤ 768px (phones) */
  @media (max-width: 768px) {
    section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
    /* hero image shorter */
    #home img[style*="height:500px"] { height: 320px !important; }
    /* features: 2 → 1 */
    #home div[style*="grid-template-columns:repeat(3"] {
      grid-template-columns: 1fr !important;
    }
    /* stack trust indicators */
    #home div[style*="Ικανοποιημένοι Πελάτες"], 
    #home div[style*="Χρόνια Εμπειρίας"] { margin-top: .25rem !important; }
    /* services: 2 → 1 */
    #services > div > div[style*="display: grid"] {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }
    /* reviews: 2 → 1 */
    #reviews div[style*="grid-template-columns:repeat(3"],
    #reviews div[style*="grid-template-columns:repeat(2"] {
      grid-template-columns: 1fr !important;
    }
    /* contact: 2 → 1 */
    #contact div[style*="grid-template-columns:repeat(2"] {
      grid-template-columns: 1fr !important;
      gap: 1.25rem !important;
    }
    /* map height a bit smaller on phones */
    #contact iframe[width="100%"] { height: 260px !important; }
    /* make CTAs full width and taller */
    a[style*="border-radius:9999px"], 
    #services a[href^="#contact"] {
      width: 100% !important;
      height: 3rem !important;
      font-weight: 700 !important;
    }
    /* tighten card paddings */
    #services [data-role="card"] > div:first-child { padding: 1rem 1rem .5rem !important; }
    #services [data-role="card"] > div:last-child  { padding: .75rem 1rem 1rem !important; }
  }

  /* ≤ 480px (small phones) */
  @media (max-width: 480px) {
    #home h1 { font-size: 2.45rem !important; }
    #home p { font-size: .95rem !important; }
    #home img[style*="height"] { height: 240px !important; }
    #services ul li { font-size: .9rem !important; line-height: 1.4rem !important; }
    /* reduce outer side padding a touch */
    #home > div, #services > div, #reviews > div, #contact > div {
      padding-left: .75rem !important; padding-right: .75rem !important;
    }
	#home > div {
      padding-top: 0rem !important;
    } 
  }

  /* Desktop: tiny breathing room */
  @media (min-width: 769px) {
    header > div > div { gap: .5rem !important; }
  }

  /* ===== Mobile & tablets ===== */
  @media (max-width: 768px) {
    /* The main row inside header */
    header > div > div {
      gap: .5rem !important;
      align-items: stretch !important;
    }

    /* Brand (first child) grows full width */
    header > div > div > :nth-child(1) {
      flex: 1 1 100% !important;
      min-width: 0 !important;
    }

    /* Nav becomes a horizontal scroller, placed after the brand */
    header nav {
      order: 3 !important;                 /* move under the phone button on very small screens if desired */
      width: 100% !important;
      overflow-x: auto !important;
      white-space: nowrap !important;
      -webkit-overflow-scrolling: touch !important;
      margin-top: .25rem !important;
      padding-bottom: .25rem !important;
    }
    header nav a {
      display: inline-block !important;
      padding: .5rem .75rem !important;
      font-weight: 600 !important;
      text-decoration: none !important;
    }

    /* Phone button—make it prominent and full width */
    header > div > div > :nth-child(3) {
      order: 2 !important;                 /* appears above the nav */
      width: 100% !important;
    }
    header > div > div > :nth-child(3) a {
      display: flex !important;
      width: 100% !important;
      justify-content: center !important;
      padding: .75rem 1rem !important;
      border-radius: .625rem !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
    }

    /* Container paddings tighter on mobile */
    header > div {
      padding-left: .75rem !important;
      padding-right: .75rem !important;
      padding-top: .75rem !important;
      padding-bottom: .75rem !important;
    }

    /* Slightly smaller brand text to avoid wrapping */
    header h1 {
      font-size: 1.1rem !important;
      line-height: 1.5rem !important;
    }
    header p {
      font-size: .8rem !important;
      line-height: 1.1rem !important;
    }
  }

  /* ===== Very small phones ===== */
  @media (max-width: 420px) {
    header nav a { padding: .45rem .6rem !important; }
  }


  /* Base polish */
  footer { -webkit-tap-highlight-color: transparent; }
  footer h3, footer h4 { line-height: 1.25 !important; }

  /* The 4-column grid in your footer */
  footer div[style*="grid-template-columns:repeat(4"] {
    gap: 1.5rem !important;
  }

  /* Links easier to tap */
  footer a { text-underline-offset: 2px; }

  /* ====== ≤ 1024px (tablets): 4 → 2 columns ====== */
  @media (max-width: 1024px) {
    /* container paddings a bit tighter */
    footer > div {
      padding-left: .875rem !important;
      padding-right: .875rem !important;
    }
    footer div[style*="grid-template-columns:repeat(4"] {
      grid-template-columns: repeat(2, minmax(0,1fr)) !important;
      gap: 1.25rem !important;
    }
  }

  /* ====== ≤ 640px (phones): 2 → 1 column ====== */
  @media (max-width: 640px) {
    /* outer paddings and vertical rhythm */
    footer > div {
      padding-top: 2rem !important;
      padding-bottom: 2rem !important;
      padding-left: .75rem !important;
      padding-right: .75rem !important;
    }

    /* stack columns */
    footer div[style*="grid-template-columns:repeat(4"] {
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
    }

    /* headings a touch smaller */
    footer h3 { font-size: 1rem !important; }
    footer h4 { font-size: 1rem !important; }

    /* paragraphs & list items */
    footer p, footer li, footer a { font-size: .95rem !important; }

    /* “Working Hours” rows: don’t squash */
    footer div[style*="justify-content:space-between"] {
      gap: .5rem !important;
    }

    /* Emergency call bar: fuller width button, bigger tap target */
    footer a[href^="tel:"] {
      display: inline-flex !important;
      width: 100% !important;
      border-radius: 9999px !important;
      font-size: 1.05rem !important;
      font-weight: 700 !important;
    }

    /* Emergency container spacing */
    footer div[style*="background-color:hsl(var(--locksmith-yellow) / .2)"] {
      padding: 1.25rem !important;
    }

    /* Copyright block spacing */
    footer > div > div[style*="text-align:center"] {
      padding-top: 1.25rem !important;
      margin-top: 1.5rem !important;
      font-size: .9rem !important;
    }
  }

  /* ====== ≤ 420px (small phones) ====== */
  @media (max-width: 420px) {
    /* tighten vertical gaps slightly */
    footer div[style*="row-gap"] { row-gap: .5rem !important; }
    /* icon + title line-height */
    footer svg { flex-shrink: 0; }
  }



/* ------- SERVICES: responsive, mobile-first ------- */
.services-grid{
  display:grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Card base */
.service-card{
  border-radius: .75rem;
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--shadow-card);
  transition: var(--transition-smooth);
  transform: translateY(0);
}
@media (hover:hover){
  .service-card:hover{ box-shadow: var(--shadow-elegant); transform: translateY(-6px); }
}

/* Head */
.service-card__head{ 
  display:flex; flex-direction:column; row-gap:.5rem;
  padding:1.25rem 1.25rem .75rem; text-align:center;
}
.service-card__icon{
  width:4rem; height:4rem; border-radius:9999px;
  background:hsl(var(--primary)); color:hsl(var(--background));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1rem; transition: transform .25s ease;
}
@media (hover:hover){ .service-card:hover .service-card__icon{ transform: scale(1.05); } }

.service-card__title{ 
  font-size:1.125rem; font-weight:700; color:hsl(var(--foreground)); margin:0 0 .5rem;
}
.service-card__desc{ color:hsl(var(--muted-foreground)); font-size:1rem; line-height:1.6; margin:0; }

/* Body */
.service-card__body{ padding:0 1.25rem 1.25rem; text-align:center; }
.service-card__list{
  list-style:none; padding:0; margin:0 0 1rem;
  display:flex; flex-direction:column; row-gap:.5rem; text-align:left;
  max-width:30rem; margin-left:auto; margin-right:auto;
}
.service-card__item{ display:flex; align-items:flex-start; color:hsl(var(--muted-foreground)); font-size:.95rem; line-height:1.5rem; }
.service-card__check{ width:1rem; height:1rem; color:hsl(var(--primary)); margin-right:.5rem; margin-top:.2rem; flex-shrink:0; }

/* CTA */
.service-card__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-size:.95rem; font-weight:600; width:100%; height:2.75rem; padding:0 1rem;
  border-radius:.5rem; border:1px solid hsl(var(--input));
  background-color:hsl(var(--background)); color:hsl(var(--foreground));
  text-decoration:none; transition: var(--transition-smooth);
}
.service-card__cta:focus-visible{ outline:none; box-shadow:0 0 0 2px hsl(var(--ring)); }
@media (hover:hover){
  .service-card__cta:hover{ background-color:hsl(var(--primary)); color:hsl(var(--primary-foreground)); }
}

/* --- Mobile tweaks --- */
@media (max-width: 768px){
  section#services{ padding: 3rem 0 !important; }
  .service-card__head{ padding:1rem 1rem .5rem; }
  .service-card__body{ padding:.75rem 1rem 1rem; }
  .service-card__cta{ height:3rem; font-weight:700; }
}

/* Very small phones */
@media (max-width: 420px){
  .services-grid{ gap: 1rem; }
  .service-card__title{ font-size:1.05rem; }
  .service-card__item{ font-size:.9rem; line-height:1.4rem; }
}