/*
  style.css – Utility-first CSS (Tailwind-like) for TaxiLandshut24
  - Handcrafted to match the HTML classes already used
  - Includes spacing, layout, grid, typography, colors, borders, radius, shadows, buttons,
    tables, forms, header, cards, utilities, and responsive variants (sm, md, lg)
*/

/* CSS Variables for palette & scales */
:root{
  --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8;
  --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f172a;
  --sky-50:#f0f9ff; --sky-200:#bae6fd; --sky-600:#0284c7; --sky-700:#0369a1;
  --emerald-100:#d1fae5; --emerald-700:#047857;
  --white:#fff; --black:#000;
  --ring:#0ea5e9; /* theme accent */
  --radius-md: .75rem; /* xl */
  --radius-lg: 1rem;   /* 2xl */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1);
  --shadow: 0 1px 2px rgba(0,0,0,.05);
  --container: 80rem; /* 7xl */
}

/* Base */
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--slate-800);background:var(--slate-50)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

/* Container helpers */
.max-w-7xl{max-width:var(--container);margin-left:auto;margin-right:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.px-4{padding-left:1rem;padding-right:1rem}
.sm\:px-6{padding-left:1rem;padding-right:1rem}
.lg\:px-8{padding-left:1rem;padding-right:1rem}
@media(min-width:640px){.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}}
@media(min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}

/* Spacing scale */
.p-4{padding:1rem}.p-3{padding:.75rem}.p-2{padding:.5rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}
.py-8{padding-top:2rem;padding-bottom:2rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-0{margin-bottom:0}
.ml-auto{margin-left:auto}
.md\:ml-4{margin-left:0}
@media(min-width:768px){.md\:ml-4{margin-left:1rem}}

/* Display & position */
.block{display:block}.inline-flex{display:inline-flex}.flex{display:flex}.grid{display:grid}
.hidden{display:none}
.md\:flex{display:none}
@media(min-width:768px){.md\:flex{display:flex}}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}
.sticky{position:sticky}.top-0{top:0}.z-50{z-index:50}

/* Backdrop blur & translucent bg */
.backdrop-blur{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.bg-white\/80{background-color:rgba(255,255,255,.8)}

/* Grid columns */
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.md\:grid-cols-2{grid-template-columns:1fr}
.lg\:grid-cols-2{grid-template-columns:1fr}
.lg\:grid-cols-3{grid-template-columns:1fr}
@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Width */
.w-full{width:100%}
.h-9{height:2.25rem}.w-9{width:2.25rem}

/* Typography */
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-lg{font-size:1.125rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.leading-tight{line-height:1.2}

/* Colors (text & bg) */
.text-white{color:var(--white)}
.text-slate-500{color:var(--slate-500)}
.text-slate-600{color:var(--slate-600)}
.text-slate-700{color:var(--slate-700)}
.text-slate-800{color:var(--slate-800)}
.text-sky-700{color:var(--sky-700)}
.text-emerald-700{color:var(--emerald-700)}
.bg-white{background:var(--white)}
.bg-slate-50{background:var(--slate-50)}
.bg-slate-200{background:var(--slate-200)}
.bg-slate-700{background:var(--slate-700)}
.bg-slate-900{background:var(--slate-900)}
.bg-sky-50{background:var(--sky-50)}
.bg-sky-600{background:var(--sky-600)}
.bg-sky-700{background:var(--sky-700)}
.bg-emerald-100{background:var(--emerald-100)}

/******** Components ********/
/* Header */
header{backdrop-filter:blur(8px)}
.border-b{border-bottom:1px solid var(--slate-200)}

/* Logo badge */
.rounded-xl{border-radius:var(--radius-md)}
.rounded-2xl{border-radius:var(--radius-lg)}

/* Borders */
.border{border:1px solid var(--slate-200)}
.border-slate-200{border-color:var(--slate-200)}

/* Shadows */
.shadow{box-shadow:var(--shadow)}
.shadow-sm{box-shadow:var(--shadow-sm)}

/* Buttons */
.button, .btn, .bg-sky-600, .bg-slate-900{cursor:pointer}
.hover\:bg-sky-700:hover{background:var(--sky-700)}
.hover\:bg-slate-50:hover{background:var(--slate-50)}
.hover\:text-slate-900:hover{color:var(--slate-900)}

/* Links styled as buttons */
.inline-flex{align-items:center;justify-content:center}

/* Forms */
input,textarea,select{border:1px solid var(--slate-300);border-radius:var(--radius-md);padding:.5rem .75rem;font-size:.875rem;background:#fff;color:var(--slate-800)}
input[type="search"]{appearance:none}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--sky-600);box-shadow:0 0 0 3px rgba(14,165,233,.25)}

/* Tables */
table{border-collapse:collapse;width:100%}
th,td{padding:.5rem .25rem;border-bottom:1px solid var(--slate-200)}
thead th{background:var(--slate-100)}

/* Cards */
.card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-sm)}

/* Lists */
.list-disc{list-style:disc}
.pl-5{padding-left:1.25rem}
.pl-6{padding-left:1.5rem}
.space-y-1>*+*{margin-top:.25rem}

/* Utilities */
.backdrop-blur{backdrop-filter:blur(8px)}
.border-y{border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200)}
.text-center{text-align:center}

/* Badges */
.badge{display:inline-block;padding:.25rem .5rem;border-radius:.5rem;font-size:.75rem;font-weight:600}

/* Helper for CTA phone chip */
.phone-cta{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:var(--radius-md);background:var(--sky-600);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)}
.phone-cta:hover{background:var(--sky-700)}

/* Footer */
footer p, footer a{color:var(--slate-600)}
footer a:hover{color:var(--slate-900)}

/* Accessibility focus ring helper */
.focus\:outline-none:focus{outline:none}
.focus\:ring:focus{box-shadow:0 0 0 3px rgba(14,165,233,.25)}
.focus\:border-sky-500:focus{border-color:var(--ring)}

/* Responsive visibility */
.md\:hidden{display:block}
@media(min-width:768px){.md\:hidden{display:none}}

/* Specific tweaks for this site */
/* hero search card */
.hero-search{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius-lg);padding:1rem;box-shadow:var(--shadow-sm)}

/* header nav spacing */
nav a{padding:.25rem .25rem;border-radius:.5rem}
nav a:hover{background:var(--slate-100)}

/* "tags" in provider cards inherit via data-tags; no visual needed */

/* Ensure details summary looks clickable */
details{border:1px solid var(--slate-200);background:var(--slate-50);border-radius:var(--radius-lg);padding:1rem}
details+details{margin-top:1rem}
details summary{cursor:pointer;font-weight:600}

/* Badge color examples */
.bg-emerald-100{background:var(--emerald-100)}

/* Hover states for links with class */
.text-sky-700:hover{text-decoration:underline}

/* Utilities used but missing earlier */
.rounded{border-radius:.25rem}
.border-t{border-top:1px solid var(--slate-200)}
.border-y{border-top:1px solid var(--slate-200);border-bottom:1px solid var(--slate-200)}

/* Fix: allow cards to wrap nicely */
@media(min-width:1024px){
  .card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
}

/* Improve table readability */
tbody tr:nth-child(odd){background:rgba(148,163,184,.06)}

/* Small helper classes found in markup */
.text-center{text-align:center}
.text-right{text-align:right}

/* Ensure clickable tap targets on mobile */
a[href^="tel:"]{cursor:pointer}

/* Smooth section transitions */
section{scroll-margin-top:5rem}

/* Extra spacing utilities commonly used */
.gap-1{gap:.25rem}
.pr-2{padding-right:.5rem}
.pl-3{padding-left:.75rem}

/* Ensure <summary> caret spacing */
summary::-webkit-details-marker{margin-right:.5rem}

/* Optional: subtle card hover */
[data-card]{transition:transform .18s ease, box-shadow .18s ease}
[data-card]:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)}

img.logo {
    max-width: 8rem;
}