/* ═══════════════════════════════════════════════════════════
   TOLLAS Hair Design & Academy — replica Squarespace 7.1
   Paleta exacta extrasa din site.css original:
     white       hsl(0, 0%, 98.43%)  #FBFBFB
     lightAccent hsl(0, 0%, 90.98%)  #E8E8E8
     accent      hsl(45, 7.69%, 79.61%) #CFCDC7
     darkAccent  hsl(0, 2.79%, 49.22%)  #817A7A
     black       hsl(0, 6.12%, 19.22%)  #342E2E
   Fonturi: Marcellus (titluri) + PT Serif (text)
═══════════════════════════════════════════════════════════ */

:root {
  --white-hsl: 0, 0%, 98.43%;
  --lightAccent-hsl: 0, 0%, 90.98%;
  --accent-hsl: 45, 7.69%, 79.61%;
  --darkAccent-hsl: 0, 2.79%, 49.22%;
  --black-hsl: 0, 6.12%, 19.22%;

  --white: hsl(var(--white-hsl));
  --light: hsl(var(--lightAccent-hsl));
  --accent: hsl(var(--accent-hsl));
  --dark-accent: hsl(var(--darkAccent-hsl));
  --black: hsl(var(--black-hsl));

  --gutter: 4vw;
  --max-w: 1500px;
  /* baza de scalare a titlurilor, identica cu formula Squarespace */
  --fs-base: calc(0.012 * min(100vh, 900px));
  --container-w: min(var(--max-w), calc(100vw - 2 * var(--gutter)));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'PT Serif', serif;
  font-size: 1rem;
  line-height: 1.5em;
  color: var(--black);
  background: var(--light);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

h1, h2, h3, h4, h5 {
  font-family: 'Marcellus', serif;
  font-weight: 400;
  line-height: 1.25em;
  text-transform: none;
}

/* formule de marime identice cu Squarespace (heading-N-size-value) */
h1 { font-size: calc((4   - 1) * var(--fs-base) + 1rem); }
h2 { font-size: calc((2.8 - 1) * var(--fs-base) + 1rem); }
h3 { font-size: calc((2.2 - 1) * var(--fs-base) + 1rem); }
h4 { font-size: calc((1.6 - 1) * var(--fs-base) + 1rem); }

.text-large { font-size: calc((1.4 - 1) * var(--fs-base) + 1rem); line-height: 1.6em; }
.text-small { font-size: calc((0.9 - 1) * var(--fs-base) + 1rem); }

a { color: inherit; }

/* ── Butoane (primary solid pill / secondary outline pill / tertiary underline) ── */
.btn {
  display: inline-block;
  font-family: 'PT Serif', serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2em;
  text-decoration: none;
  text-align: center;
  border-radius: 50em;
  cursor: pointer;
  transition: opacity .2s ease;
  border: none;
}
.btn:hover { opacity: .8; }

.btn-primary {
  background: var(--black);
  color: var(--white);
}
.btn-secondary {
  background: transparent;
  color: var(--black);
  border: 1px solid var(--black);
}
.btn-tertiary {
  background: transparent;
  color: var(--black);
  border-radius: 0;
  border-bottom: 1px solid var(--black);
  padding: 0 0 .35em 0 !important;
}

.btn-sm { padding: .9rem 1.6rem; }
.btn-md { padding: 1.2rem 2.2rem; }
.btn-lg { padding: 1.5rem 2.8rem; }

/* ═══════════════════════════════════════
   HEADER (transparent, peste hero)
═══════════════════════════════════════ */
.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2vw var(--gutter);
}
/* pe subpagini header-ul e static, cu tema sectiunii de sub el (dynamic in SS) */
.site-header.header-static { position: relative; }
.header-theme-light { background: var(--light); }
.header-theme-white { background: var(--white); }
.header-static .header-nav a { color: var(--black); }
.header-static .burger span { background: var(--black); }
.header-nav a.active { text-decoration: underline; text-underline-offset: .35em; }

.header-logo img { height: 100px; width: auto; }

.header-nav { display: flex; gap: 2.2vw; }
.header-nav a {
  font-family: 'PT Serif', serif;
  font-size: 1rem;
  color: var(--white);
  text-decoration: none;
}
.header-nav a:hover { opacity: .7; }

/* burger — doua linii subtiri, ca in original */
.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 0;
  z-index: 300;
}
.burger span {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--white);
  margin: 8px 0;
  transition: transform .3s ease;
}

/* meniu mobil overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--black);
  z-index: 200;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 6vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu a {
  font-family: 'Marcellus', serif;
  font-size: 2rem;
  color: var(--white);
  text-decoration: none;
  padding: .6rem 0;
}
.mobile-menu.light { background: var(--light); }
.mobile-menu.light a { color: var(--black); }
.mobile-menu a.active { text-decoration: underline; text-underline-offset: .3em; }
body.menu-open { overflow: hidden; }
body.menu-open .burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
body.menu-open .burger span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* ═══════════════════════════════════════
   HERO — video fundal, tema black
═══════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--black);
  height: calc(0.2365 * var(--container-w) + 110px + 6vw);
  min-height: 380px;
  overflow: hidden;
}
.hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* overlay 45% negru — imageOverlayOpacity: 0.45 in original */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
}

/* ═══════════════════════════════════════
   SERVICII — text stanga / foto lipita dreapta
═══════════════════════════════════════ */
.servicii {
  background: var(--light);
  display: grid;
  grid-template-columns: minmax(0, 46%) 1fr;
}
.servicii-left {
  padding: 6.5rem 3.5rem 5rem var(--gutter);
}
.servicii-left h1 { margin-bottom: 1.2rem; }
.servicii-subtitle { margin-bottom: 2.8rem; }

.servicii-right { position: relative; min-height: 420px; }
.servicii-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.servicii-btn { margin-top: 2.8rem; }

/* ── Accordion (plus icon dreapta, divider 1px, primul deschis) ── */
.accordion { border-top: 1px solid var(--black); }
.accordion-item { border-bottom: 1px solid var(--black); }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  padding: 15px 0;
  font-family: 'Marcellus', serif;
  font-size: calc((1.6 - 1) * var(--fs-base) + 1rem);
  color: var(--black);
  text-align: left;
}
.accordion-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: none;
  margin-left: 1rem;
}
.accordion-icon::before,
.accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--black);
  transition: transform .3s ease;
}
.accordion-icon::before { top: 50%; left: 0; width: 100%; height: 1px; }
.accordion-icon::after  { left: 50%; top: 0; height: 100%; width: 1px; }
.accordion-item.open .accordion-icon::after { transform: rotate(90deg); }

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
}
.accordion-item.open .accordion-body { max-height: 500px; }
.accordion-body-inner {
  width: 90%;
  padding: 0 0 30px;
  font-size: calc((0.9 - 1) * var(--fs-base) + 1rem);
}
.accordion-body-inner p { margin: 1rem 0 0; }
.accordion-body-inner p:first-child { margin-top: 0; }

/* ═══════════════════════════════════════
   DESPRE — foto mare stanga cu text alb peste, buton in dreapta
═══════════════════════════════════════ */
.despre {
  background: var(--light);
  display: grid;
  grid-template-columns: 78% 1fr;
  padding-bottom: 6vw; /* section divider din original */
}
.despre-media {
  position: relative;
  min-height: calc(0.3655 * var(--container-w) + 176px);
  overflow: hidden;
}
.despre-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.despre-overlay {
  position: absolute;
  left: 29%;
  right: 8%;
  top: 26%;
  color: var(--white);
}
.despre-overlay h1 { color: var(--white); margin-bottom: 2.2rem; }
.despre-overlay p { color: var(--white); margin-bottom: 1.4rem; }
.despre-btn-col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.despre-btn-col .btn-secondary { color: var(--black); border-color: var(--black); }

/* ═══════════════════════════════════════
   ACADEMY — centrat, tema light
═══════════════════════════════════════ */
.academy {
  background: var(--light);
  text-align: center;
  padding: 5rem var(--gutter) 5.5rem;
}
.academy h3 { margin-bottom: 2.2rem; }
.academy-desc {
  max-width: 620px;
  margin: 0 auto 1.4rem;
}
.academy .btn-tertiary { margin-top: 1.4rem; }

/* ═══════════════════════════════════════
   CTA TARIFE — tema white, centrat
═══════════════════════════════════════ */
.cta-tarife {
  background: var(--white);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 46vh;
  padding: 5rem var(--gutter);
}
.cta-tarife h2 { margin-bottom: 2.6rem; max-width: 1100px; }

/* ═══════════════════════════════════════
   CONTACT — tema bright (accent), titlu urias
═══════════════════════════════════════ */
.contact {
  background: var(--accent);
  padding: 4rem var(--gutter) 6rem;
}
.contact-heading {
  font-size: min(calc(var(--container-w) / 7.4), 200px);
  white-space: nowrap;
  line-height: 1.1em;
  margin-bottom: 3rem;
}
.contact-inner {
  display: grid;
  grid-template-columns: minmax(0, 38%) 1fr;
  gap: 6vw;
  align-items: start;
}
.contact-info p { margin-bottom: 1.4rem; }

/* ── Formular: campuri outline + pill, ca in original ── */
.contact-form form { max-width: 640px; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-group { margin-bottom: 1.5rem; }
.form-group > label {
  display: block;
  font-size: .95rem;
  margin-bottom: .6rem;
}
.form-caption {
  display: block;
  font-size: .8rem;
  margin-top: .4rem;
  opacity: .85;
}
input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
  width: 100%;
  font-family: 'PT Serif', serif;
  font-size: 1rem;
  color: var(--black);
  background: transparent;
  border: 1px solid var(--black);
  border-radius: 50em;
  padding: .95em 1.4em;
  outline: none;
}
textarea { border-radius: 1.5em; min-height: 120px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-width: 2px; }

.form-submit { margin-top: 2rem; }
.form-submit .btn { min-width: 130px; }

.alert {
  padding: 1rem 1.4em;
  border-radius: 1em;
  margin-bottom: 1.5rem;
  font-size: .95rem;
}
.alert-ok  { background: var(--white); }
.alert-err { background: var(--black); color: var(--white); }

/* ═══════════════════════════════════════
   FOOTER — logo / harta / locatie / contact
═══════════════════════════════════════ */
.footer {
  background: var(--light);
  padding: 3.5rem 0 3.5rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 21% 30% 18% 17%;
  justify-content: space-between;
  gap: 2vw;
  align-items: start;
  padding-right: var(--gutter);
}
.footer-logo { padding-left: var(--gutter); align-self: center; }
.footer-logo img { max-height: 170px; width: auto; object-fit: contain; }

.footer-map { height: 210px; }
.footer-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1); /* stilul "minimal" al hartii din original */
}

.footer-col h4 { margin-bottom: .8rem; }
.footer-col p, .footer-col a { text-decoration: none; }

/* ═══════════════════════════════════════
   PAGINA TARIFE — meniu simplu centrat (menu-style-simple)
═══════════════════════════════════════ */
.tarife-page {
  background: var(--white);
  padding: 4rem var(--gutter) 6rem;
}
.tarife-page h1 { text-align: center; margin-bottom: 3.5rem; }

.menu-simple {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.menu-section { margin-bottom: 3.4rem; }
.menu-section:last-child { margin-bottom: 0; }
.menu-section-title {
  font-family: 'Marcellus', serif;
  font-size: calc((1.6 - 1) * var(--fs-base) + 1rem);
  letter-spacing: .04em;
  margin-bottom: 1.6rem;
}
.menu-item { margin-bottom: 1.15rem; }
.menu-item-title { font-weight: 700; }
.menu-item-note { font-style: italic; margin-top: .6rem; }

/* ═══════════════════════════════════════
   PAGINA DESPRE NOI
═══════════════════════════════════════ */
.dn-hero {
  background: var(--light);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44%;
  column-gap: 4vw;
  padding: 3.5rem var(--gutter) 5rem;
}
.dn-hero h1 { grid-column: 1; margin-bottom: 2.5rem; }
.dn-hero .dn-right { grid-column: 2; grid-row: 1 / span 5; }
.dn-right img {
  width: 100%;
  height: 100%;
  min-height: 700px;
  object-fit: cover;
}
.dn-block { grid-column: 1; margin-bottom: 2.8rem; }
.dn-block h2 { margin-bottom: 1.2rem; }
.dn-block p { margin-bottom: 1.2rem; }

.dn-directions {
  background: var(--white);
  text-align: center;
  padding: 5rem var(--gutter) 0;
}
.dn-directions h1 { max-width: 1050px; margin: 0 auto 2.5rem; }
.dn-directions-text { max-width: 620px; margin: 0 auto; }
.dn-directions-text p { margin-bottom: 1.3rem; }

/* ═══════════════════════════════════════
   PAGINA SERVICII — texte alternate stanga / foto lipita dreapta
═══════════════════════════════════════ */
.sv-page {
  background: var(--light);
  display: grid;
  grid-template-columns: minmax(0, 46%) 1fr;
}
.sv-left { padding: 3.5rem 3.5rem 5rem var(--gutter); }
.sv-left h1 { margin-bottom: 2.5rem; }
.sv-block { margin-bottom: 2.8rem; }
.sv-block h2 { margin-bottom: 1.2rem; }
.sv-block p { margin-bottom: 1.2rem; }
.sv-right-align { text-align: right; }
.sv-right { position: relative; min-height: 420px; }
.sv-right img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ═══════════════════════════════════════
   PAGINA CURSURI
═══════════════════════════════════════ */
.cr-classic {
  background: var(--white);
  padding: calc(2.5vmax + 2rem) var(--gutter) 0;
}
.cr-classic-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36%;
  column-gap: 5vw;
  align-items: start;
  margin-bottom: 3.5rem;
}
.cr-classic-top-text h2 { margin-bottom: 1.4rem; }
.cr-classic-img img {
  width: 100%;
  height: 480px;
  object-fit: cover;
}
.cr-classic-cols,
.cr-modern-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 6vw;
  margin-bottom: 3rem;
}
.cr-col h2 { margin-bottom: 1.2rem; }
.cr-col h3 { margin-bottom: .8rem; }
.cr-col p { margin-bottom: 1.2rem; }
.cr-classic-offer {
  text-align: center;
  max-width: 620px;
  margin: 1.5rem auto 0;
}
.cr-classic-offer h3 { margin-bottom: 1.4rem; }
.cr-classic-offer p { margin-bottom: 1.3rem; }

.cr-modern { background: var(--white); padding: 2rem var(--gutter) 3rem; }
.cr-cta { background: var(--white); padding: 2rem 0 5rem; text-align: center; }
.cr-cta-btn { margin-top: 2.5rem; padding: 0 var(--gutter); }

/* ── Marquee (bloc scrolling din original) ── */
.marquee { overflow: hidden; padding: 2.5rem 0; }
.marquee-inner {
  display: flex;
  width: max-content;
  animation: marquee-scroll linear infinite;
}
.marquee h1 { white-space: nowrap; display: flex; }
.marquee-slow { animation-duration: 60s; }
.marquee-fast { animation-duration: 35s; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-inner { animation: none; }
}

/* ── Section dividers (wavy / jagged din original) ── */
.divider { height: 6vw; margin-top: 3.5rem; }
.divider svg { display: block; width: 100%; height: 100%; }
.divider path { stroke: var(--black); }
.divider-wavy path { stroke-width: 6px; }
.divider-jagged path { stroke-width: 2px; }

/* ═══════════════════════════════════════
   MOBILE (max 767px, ca breakpoint-ul Squarespace)
═══════════════════════════════════════ */
@media (max-width: 767px) {
  :root {
    --gutter: 6vw;
    --container-w: calc(100vw - 12vw);
  }

  .site-header { padding: 6vw var(--gutter); }
  .header-logo img { height: auto; max-height: 60px; }
  .header-nav { display: none; }
  .burger { display: block; }

  .hero { height: calc(339px + 12vw); min-height: 0; }

  .servicii { grid-template-columns: 1fr; }
  .servicii-left { padding: 5rem var(--gutter) 0; }
  .servicii-btn { text-align: center; margin: 2.4rem 0 2.8rem; }
  .servicii-right {
    position: relative;
    min-height: 0;
    height: 410px;
    margin: 0 var(--gutter) 3rem;
  }

  .despre { grid-template-columns: 1fr; }
  .despre-media { min-height: 415px; }
  /* pe mobil textul intra in flux, ca imaginea sa creasca odata cu el
     (in original imaginea si textul impart aceleasi randuri de grid) */
  .despre-overlay {
    position: relative;
    left: auto; right: auto; top: auto;
    padding: 90px var(--gutter) 60px;
  }
  .despre-btn-col { padding: 2.2rem var(--gutter) 1rem; }
  .despre-btn-col .btn { width: 100%; }

  .academy { padding: 4rem var(--gutter); }

  .cta-tarife { min-height: 0; padding: 4.5rem var(--gutter); }

  .contact { padding: 3rem var(--gutter) 4.5rem; }
  .contact-heading { font-size: calc(var(--container-w) / 7.6); }
  .contact-inner { grid-template-columns: 1fr; gap: 2.5rem; }

  .footer { padding: 2.5rem 0 3rem; }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2.2rem;
    padding: 0 var(--gutter);
  }
  .footer-logo { padding-left: 0; }
  .footer-logo img { max-height: 190px; margin: 0 auto; }
  .footer-map { height: 400px; }

  /* subpagini pe mobil */
  .tarife-page { padding: 3rem var(--gutter) 4.5rem; }

  .dn-hero {
    display: block;
    padding: 3rem var(--gutter) 4rem;
  }
  .dn-hero .dn-right { margin-bottom: 2.5rem; }
  .dn-right img { min-height: 0; height: 490px; }
  .dn-directions { padding: 4rem var(--gutter) 0; }

  .sv-page { grid-template-columns: 1fr; }
  .sv-left { padding: 3rem var(--gutter) 0; }
  .sv-right {
    position: relative;
    min-height: 0;
    height: 520px;
    margin: 1rem var(--gutter) 3rem;
  }

  .cr-classic { padding: 2.5rem var(--gutter) 0; }
  /* pe mobil imaginea vine inaintea textului, ca in original */
  .cr-classic-top { display: flex; flex-direction: column-reverse; }
  .cr-classic-img { margin-bottom: 2rem; }
  .cr-classic-img img { height: 380px; }
  .cr-classic-cols,
  .cr-modern-cols { grid-template-columns: 1fr; }
  .marquee { padding: 1.5rem 0; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .servicii-left { padding-top: 5rem; }
  .despre-overlay { left: 24%; top: 20%; }
}