/* ---------------------------------------
   CharTheBarber — styles.css
   Mobile-first, accessible, SEO-friendly
--------------------------------------- */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700&display=swap");

/* CSS Variables */
:root{
  --bg: #ffffff;
  --fg: #0f172a;        /* slate-900 */
  --muted: #475569;     /* slate-600 */
  --line: #e2e8f0;      /* slate-200 */
  --soft: #f8fafc;      /* slate-50 */

  --primary: #e11d48;   /* rose-600 */
  --primary-700:#be123c;
  --accent: #111827;    /* gray-900 */

  --radius: 14px;
  --shadow: 0 10px 24px rgba(2,8,23,.08);
  --shadow-strong: 0 14px 32px rgba(2,8,23,.14);

  --container: 1200px;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
}

/* Base / Reset */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.site{
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }
.nowrap{ white-space: nowrap; }
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); border:0; }

/* Focus styles (accessible) */
:focus-visible{
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Layout helpers */
.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.section{
  padding-block: var(--space-16);
  position: relative;
}

.section--tight{ padding-block: var(--space-12); }
.section--emphasis{
  background: linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
  color: #fff;
}

/* Typography */
h1,h2,h3{ line-height: 1.2; margin: 0 0 var(--space-4); }
h1{ font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(2rem, 4vw + 1rem, 3.25rem); letter-spacing: -0.5px; }
h2{ font-weight: 800; font-size: clamp(1.5rem, 1.3vw + 1rem, 2rem); }
h3{ font-weight: 700; font-size: 1.125rem; }

.section__header{ margin-bottom: var(--space-8); }
/*.section__title{ }*/
.section__subtitle{ color: var(--muted); margin: 0; }

/* Buttons */
.btn{
  display: inline-block;
  border-radius: calc(var(--radius) - 6px);
  padding: .8rem 1.15rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid transparent;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }

.btn--primary{
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow);
}
.btn--primary:hover{ background: var(--primary-700); box-shadow: var(--shadow-strong); }

.btn--secondary{
  background: #fff;
  color: var(--fg);
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.section--emphasis .btn--secondary{ background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.btn--secondary:hover{ border-color: var(--primary); }

.btn--ghost{
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.btn--ghost:hover{ border-color: var(--primary); color: var(--primary); }

.btn--lg{ padding: 1rem 1.25rem; font-size: 1rem; }
.btn--xl{ padding: 1.1rem 1.4rem; font-size: 1.05rem; }

/* Skip link */
.skip-link{
  position: absolute; left: -9999px; top: auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 1000;
  background:#000; color:#fff; padding:.75rem 1rem; border-radius:10px;
}

/* Header */
.header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header__inner{
  display: flex; align-items: center; justify-content: space-between;
  padding-block: .75rem;
}
.logo{
  display:flex; align-items:center; gap:.5rem; font-weight: 800;
}
.logo__mark{ font-size: 1.25rem; }
.logo__text{ letter-spacing: .2px; }
.logo__accent{ color: var(--primary); }

.nav__list{
  list-style: none; margin:0; padding:0;
  display:flex; align-items:center; gap: .75rem;
}
.nav__link{
  display:inline-block; padding:.6rem .75rem; border-radius: 10px; color: var(--muted); font-weight:600;
}
.nav__link:hover{ color: var(--fg); background: var(--soft); }
.nav__cta{ margin-left: .25rem; }

/* Hero */
.hero{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(225,29,72,.08), transparent 60%),
    radial-gradient(800px 400px at 110% 10%, rgba(225,29,72,.08), transparent 60%);
}
.hero__grid{
  display: grid; gap: var(--space-10);
  grid-template-columns: 1fr;
}
.hero__subtitle{ color: var(--muted); margin-bottom: var(--space-6); }
.hero__cta{ display:flex; flex-wrap: wrap; gap: .75rem; margin-bottom: var(--space-6); }
.hero__highlights{
  margin:0; padding:0; list-style:none; color: var(--muted);
  display:grid; gap: .5rem;
}
.hero__image{ display: grid; place-items: center; }
.hero__img{
  border-radius: var(--radius);
  box-shadow: var(--shadow-strong);
  object-fit: cover;
}

/* Trust / KPIs */
.trust__grid{
  margin-top: var(--space-8);
  display:grid; gap: 1rem;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.trust__item{
  background: var(--soft);
  border:1px solid var(--line);
  border-radius: var(--radius);
  text-align:center;
  padding: 1rem;
}
.trust__kpi{ display:block; font-weight:800; font-size: 1.25rem; }
.trust__label{ color: var(--muted); }
.trust__cta{ margin-top: var(--space-8); text-align:center; }

/* Services */
.cards{ display:grid; gap: 1rem; }
.services__grid{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem;
  box-shadow: var(--shadow);
}
.service__title{ margin-bottom: .35rem; }
.service__text{ color: var(--muted); margin:0; }
.section__cta{ margin-top: var(--space-8); text-align:center; }

/* Portfolio */
.portfolio__grid{
  display:grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.shot{ margin:0; }
.shot__img{
  border-radius: calc(var(--radius) - 2px);
  width:100%; height: 280px; object-fit: cover;
  box-shadow: var(--shadow);
}

/* Reviews */
.reviews__grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.review{ font-style: normal; }
.review__text{ margin:0; }
.review__author{ color: var(--muted); margin-top: .5rem; }

/* FAQ */
.faq__item{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  background: #fff;
  box-shadow: var(--shadow);
}
.faq__item + .faq__item{ margin-top: .75rem; }
.faq__q{ font-weight: 700; }
.faq__a{ color: var(--muted); padding-top: .5rem; }

/* Location */
.location__grid{
  display:grid; gap: var(--space-8);
  grid-template-columns: 1fr;
}
.contact{ list-style:none; padding:0; margin: var(--space-4) 0; display: grid; gap:.25rem; }
.contact__link{
  display:inline-block; padding:.25rem 0; color: var(--primary); font-weight: 700;
}
.contact__link:hover{ color: var(--primary-700); }
.map__img{
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

/* Booking */
.booking__inner{ text-align:center; }
.booking__actions{ display:flex; flex-wrap: wrap; gap:.75rem; justify-content:center; margin: var(--space-6) 0; }
.booking__btn{ min-width: 200px; text-align:center; }
.booking__note{ color: #e5e7eb; } /* light slate for dark bg */

/* Footer */
.footer{
  border-top: 1px solid var(--line);
  background: #0b0f19;
  color: #cbd5e1;
}
.footer__inner{
  display:flex; flex-direction: column; gap: .75rem;
  align-items: center; justify-content: center;
  padding-block: var(--space-8);
  text-align: center;
}
.footer__brand{ margin:0; }
.footer__nav{ display:flex; flex-wrap: wrap; gap:.75rem; }
.footer__link{
  color:#cbd5e1; padding:.35rem .5rem; border-radius: 8px; font-weight:600;
}
.footer__link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.footer__cta{ background: var(--primary); color:#fff; }
.footer__cta:hover{ background: var(--primary-700); }

/* Floating CTA */
.floating-cta{
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  background: var(--primary); color:#fff; font-weight:800;
  padding: .9rem 1.15rem; border-radius: 999px;
  box-shadow: var(--shadow-strong);
  border: 2px solid rgba(255,255,255,.2);
}
.floating-cta:hover{ background: var(--primary-700); }

/* Utilities */
.section .btn + .btn{ margin-left: .25rem; }

/* Media Queries */
@media (min-width: 720px){
  .hero__grid{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
  }
  .trust__grid{
    grid-template-columns: repeat(4, minmax(0,1fr));
  }
  .location__grid{
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
  }
}

@media (min-width: 1024px){
  .header__inner{ padding-block: 1rem; }
  .card{ padding: 1.25rem 1.3rem; }
  .shot__img{ height: 320px; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* Dark Mode (optional subtle support) */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f19;
    --fg: #e5e7eb;
    --muted: #94a3b8;
    --line: #1f2937;
    --soft: #0f172a;
  }
  .header{ background: rgba(11,15,25,.7); border-bottom-color: var(--line); }
  .card, .faq__item{ background:#0f172a; border-color: var(--line); }
  .shot__img, .map__img{ box-shadow: 0 10px 22px rgba(0,0,0,.45); }
  .nav__link:hover{ background:#0f172a; }
}





/* --- Mobile nav / hamburger --- */
.nav-toggle{
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #e11d48;
  color: var(--fg);
  box-shadow: var(--shadow);
}
.nav-toggle:focus-visible{ outline: 3px solid var(--primary); outline-offset: 2px; }
.nav-toggle__icon{ display:block; }

/* lock body scroll when menu open */
body.nav-open{ overflow: hidden; }

@media (max-width: 719px){
  /* show the button, convert nav to overlay panel */
  .nav-toggle{ display: inline-flex; }
  .header__inner{ gap: .5rem; }

  .nav{
    position: fixed;
    left: 0; right: 0;
    top: 64px;                 /* approx header height */
    bottom: 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
    transform: translateY(-110%);
    opacity: 0;
    visibility: hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s step-end;
    padding: 1rem;
    z-index: 49;               /* just under sticky header */
  }
  body.nav-open .nav{
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform .2s ease, opacity .2s ease, visibility .2s step-start;
  }

  .nav__list{
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .nav__link,
  .nav__cta{
    display:block;
    padding: .9rem 1rem;
    border-radius: 10px;
    font-size: 1.05rem;
    background: var(--soft);
    color: var(--fg);
    border: 1px solid var(--line);
  }
  .nav__link:hover{ background: #be123c; }
  .nav__cta{ background: var(--primary); color:#fff; border-color: transparent; }
  .nav__cta:hover{ background: var(--primary-700); }
}



/* --- Lift/expand hover for tiles & cards --- */
.card,
.trust__item{
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  will-change: transform;
}

.card:hover,
.card:active,
.card:focus-within,
.trust__item:hover,
.trust__item:active,
.trust__item:focus-within{
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow-strong);
  border-color: rgba(225,29,72,.35); /* subtle rose border on hover */
}

/* Portfolio images get a gentle zoom on hover */
.shot__img{
  transition: transform .22s ease, box-shadow .22s ease;
  transform-origin: center;
}
.shot:hover .shot__img,
.shot:focus-within .shot__img{
  transform: scale(1.03);
  box-shadow: var(--shadow-strong);
}

/* Optional: make the trust tiles feel tappable on touch */
.trust__item{ cursor: default; }
@media (hover:hover){
  .trust__item{ cursor: pointer; }
}

/* Respect reduced motion settings (kept snappy but no animations) */
@media (prefers-reduced-motion: reduce){
  .card, .trust__item, .shot__img{ transition: none !important; }
}



/* --- Portfolio: show full images on phones (no crop) --- */
@media (max-width: 720px){
  .shot__img{
    height: auto !important;      /* remove fixed 280px height */
    width: 100%;
    object-fit: contain;           /* fit whole photo, no cropping */
    background: #0b0f19;           /* subtle letterbox behind image edges */
    border: 1px solid var(--line); /* optional: tidy edge */
  }

  /* Optional: single-column on very narrow screens for more detail */
  .portfolio__grid{
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}


/* --- Portfolio: fixed columns (1 / 2 / 3) --- */
@media (max-width: 719px){
  .portfolio__grid{
    grid-template-columns: 1fr !important;   /* phones: 1 column for detail */
  }
}

/* --- Portfolio: no crop on tablets (2-column) --- */
@media (min-width: 720px) and (max-width: 1023px){
  .shot__img{
    height: auto !important;   /* remove the fixed 280px height */
    width: 100%;
    object-fit: contain;        /* show full photo */
    background: #0b0f19;        /* subtle letterbox behind edges */
    border: 1px solid var(--line); /* keeps tidy edge around non-filled areas */
  }
}

@media (min-width: 1024px){
  .portfolio__grid{
    grid-template-columns: repeat(3, 1fr) !important;  /* desktop: 3 cols */
  }
}


/* Services: always 2 columns on tablets */
@media (min-width: 720px) and (max-width: 1023px){
  .services__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* Static card: never lifts/scales */
.card--static,
.card--static:hover,
.card--static:active,
.card--static:focus-within{
  transform: none !important;
  transition: none !important;
  box-shadow: var(--shadow) !important;
  border-color: var(--line) !important;
}


/* Reviews: "Show more" toggle */
.reviews__more{ margin-top: var(--space-6); text-align: center; }
.reviews__more > summary{
  list-style: none;                 /* remove default arrow */
  display: inline-block;
  cursor: pointer;
}
.reviews__more > summary::-webkit-details-marker{ display: none; }

.reviews__toggle{ padding: .85rem 1.15rem; }  /* matches your .btn sizing */
.reviews__grid--more{ margin-top: var(--space-6); }

/* Swap button text when open (no JS) */
.reviews__toggle .less{ display: none; }
.reviews__more[open] .reviews__toggle .more{ display: none; }
.reviews__more[open] .reviews__toggle .less{ display: inline; }

/* Gentle reveal */
@keyframes reviewsFadeIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: none; }
}
.reviews__more[open] .reviews__grid--more{
  animation: reviewsFadeIn .22s ease;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reviews__more[open] .reviews__grid--more{ animation: none; }
}


/* Center the Email + Call/Text links in the Location section */
.contact{
  display: grid;            /* you already use grid; this keeps them stacked */
  justify-items: center;    /* centers each list item horizontally */
  text-align: center;       /* centers the link text itself */
}

.contact__link{
  display: inline-flex;     /* centers icon + text as one unit */
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-inline: auto;      /* ensures the link block itself is centered */
}