/* AURORA Clinic — Mobile First RTL styles */

/* 1. VARIABLES & GENERAL STYLES */
:root{
  --bg: #FAF9F7;
  --gold: #E1B382;
  --nude: #E7CFC5;
  --text: #4B4B4B;
  --heading: #222222;
  --radius: 12px;
  --border-color: rgba(34,34,34,0.08);
  --shadow-sm: 0 6px 18px rgba(34,34,34,0.04);
  --shadow-md: 0 12px 24px rgba(34,34,34,0.06);
  --transition-speed: 0.25s;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Assistant',system-ui,Arial;margin:0;line-height:1.6}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:1rem}
h1,h2,h3{font-family:'Heebo',sans-serif;color:var(--heading);margin:0 0 0.5rem}
h2{font-size:1.8rem}
.lead{color:var(--text);margin-top:0.6rem;font-size:1.1rem}
.muted{color:#6b6b6b}
.grid{display:grid;gap:1rem}

/* 2. HEADER */
.site-header{position:sticky;top:0;backdrop-filter:blur(6px);background:rgba(255,255,255,0.6);border-bottom:1px solid rgba(0,0,0,0.04);z-index:40}
.header__inner{display:flex;align-items:center;justify-content:space-between;padding:0.8rem 0}
.brand .logo{font-family:'Heebo',sans-serif;font-size:1.5rem;font-weight:700;color:var(--heading);text-decoration:none;letter-spacing:-1px}
.site-nav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
.site-nav a{color:var(--text);text-decoration:none;font-weight:600;transition:color var(--transition-speed) ease}
.site-nav a:hover{color:var(--heading)}
.header-actions{display:flex;align-items:center;gap:0.6rem}
.phone{background:var(--nude);padding:0.4rem 0.8rem;border-radius:8px;color:var(--heading);text-decoration:none;transition:opacity var(--transition-speed) ease}
.phone:hover{opacity:0.85}
.hamburger{display:inline-flex;flex-direction:column;gap:4px;border:0;background:none;padding:0.4rem;cursor:pointer}
.hamburger span{width:22px;height:2px;background:var(--heading);display:block;border-radius:2px;transition:transform 0.3s ease, opacity 0.3s ease}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* 3. HERO SECTION */
.hero{
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
  background: url('../img/hero.webp') no-repeat center center/cover;
  color: #fff;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}
.hero__inner{position:relative; z-index:2; text-align:center; display:flex; flex-direction:column; align-items:center;}
.hero__copy h1{font-size:1.8rem;line-height:1.3; color:#fff;}
.hero__copy .lead { color: rgba(255,255,255,0.9); }
.hero__ctas{display:flex;gap:0.6rem;margin-top:0.8rem}
.hero__benefits{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:0.5rem 1.5rem;font-size:0.9rem;color:rgba(255,255,255,0.9); justify-content: center;}
.hero__benefits li{display:flex;align-items:center;gap:0.4rem}
.hero__benefits svg{color:var(--gold)}
.hero .demo-note, .hero .demo-note a { color: rgba(255,255,255,0.8); }

/* Staggered animation for hero elements */
.hero__copy > * { transition-delay: calc(var(--stagger-index) * 100ms); }


/* 4. BUTTONS & DEMO NOTE */
.btn{padding:0.7rem 1.2rem;border-radius:10px;text-decoration:none;display:inline-block;font-weight:600;transition:all var(--transition-speed) ease}
.btn-primary{background:var(--heading);color:#fff}
.btn-primary:hover{background:var(--gold);color:var(--heading)}
.hero .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.5);color:#fff}
.hero .btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:#fff}
.demo-note{margin-top:0.6rem;font-size:0.9rem;color:var(--text)}

/* Sample Site Banner */
.sample-site p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #fff;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  box-shadow: var(--shadow-sm);
  text-align: center;
  font-size: 0.95rem;
}
.sample-site a { font-weight: 600; color: var(--heading); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.sample-site svg { color: var(--gold); flex-shrink: 0; }

/* 5. SECTIONS */
/* Services */
.services__grid{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease;position:relative;overflow:hidden}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)}
.card__number {
  position: absolute;
  top: -0.2em;
  right: 0.2em;
  font-size: 4rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.2;
  transition: opacity var(--transition-speed) ease;
}
.card:hover .card__number { opacity: 0.3; }

/* About */
.about__grid{display:grid;gap:1rem}
.about__media img{border-radius:var(--radius)}

/* Gallery */
.gallery__grid{display: grid; grid-template-columns:repeat(2, 1fr);align-items:start; gap: 1rem;}
.gallery figure{
  background:#fff;
  padding:0.5rem;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  margin: 0;
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.gallery figure:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.gallery figure img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.gallery figure figcaption { padding: 0.5rem 0.2rem 0; font-size: 0.9rem; }

/* Responsive gallery grid */
@media(min-width:720px){
  .gallery__grid{
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Testimonials */
.testimonials__grid{grid-template-columns:1fr;gap:0.8rem}
.review{background:#fff;padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow-sm);position:relative;display:flex;flex-direction:column;justify-content:space-between;}
.review p { margin: 0 0 1rem; z-index: 2; position: relative; }
.review footer { margin-top: auto; }
.review__icon { position: absolute; top: 0.5rem; right: 1rem; font-size: 5rem; color: var(--gold); opacity: 0.15; z-index: 1; line-height: 1; }
.review__author { display: flex; align-items: center; gap: 0.75rem; }
.review__initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background-color: var(--nude);
  color: var(--heading);
  font-family: 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
}
.review__author-name { font-weight: 600; color: var(--heading); }
.star-rating { display: flex; gap: 2px; }
.star-rating svg { color: var(--gold); }


/* FAQ */
.accordion details{background:#fff;border-radius:10px;margin-bottom:0.6rem;box-shadow:var(--shadow-sm);overflow:hidden;}
.accordion summary{position:relative;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;cursor:pointer;font-weight:600;transition:color var(--transition-speed) ease;}
.accordion summary::-webkit-details-marker { display: none; }
.accordion details[open] summary { color: var(--gold); }
.accordion .panel { padding: 0 1.2rem 1.2rem; }
.accordion .icon { position: relative; width: 1.2em; height: 1.2em; }
.accordion .icon::before, .accordion .icon::after {
  content: '';
  position: absolute;
  background-color: var(--heading);
  transition: transform 0.3s ease-out;
}
.accordion .icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.accordion .icon::after { top: 0; left: 50%; width: 2px; height: 100%; margin-left: -1px; }
.accordion details[open] .icon::before { transform: rotate(90deg); }
.accordion details[open] .icon::after { transform: rotate(180deg); }

/* JS-powered animation */
.accordion details .panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.accordion details[open] .panel { max-height: 200px; }


/* Contact Form */
.contact__grid { display: grid; gap: 2rem; }
.form-grid{display:grid;gap:0.6rem}
input,textarea{padding:0.8rem 1rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;background:#fff;transition:border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease}
input:focus, textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(225,179,130,0.2)}
.checkbox{display:flex;align-items:center;gap:0.6rem}
.form-actions{display:flex;gap:0.6rem;align-items:center;margin-top:0.6rem}

.contact__map iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: var(--radius);
  filter: grayscale(100%);
  transition: filter var(--transition-speed) ease;
}
.contact__map:hover iframe { filter: grayscale(0%); }

/* 6. FOOTER */
.site-footer{background:#F8F7F5;padding:2rem 0 0;border-top:2px solid var(--gold);margin-top:2rem}
.footer__inner{display:grid;grid-template-columns:1fr;gap:2rem;padding-bottom:2rem}
.footer__logo{font-family:'Heebo',sans-serif;font-size:1.8rem;font-weight:700;color:var(--heading);text-decoration:none;letter-spacing:-1px;display:block;margin-bottom:0.5rem}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0.5rem}
.footer__col a{color:var(--text);text-decoration:none;transition:color var(--transition-speed) ease}
.footer__col a:hover{color:var(--heading)}
.socials{display:flex;gap:1rem;margin-top:1rem}
.socials a{color:var(--text);transition:color var(--transition-speed) ease}
.socials a:hover{color:var(--heading)}
.site-credit{border-top:1px solid var(--border-color);padding:1rem 0;font-size:0.9rem;color:#7b7b7b;}
.site-credit .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0.5rem}
.site-credit p{margin:0}
.weblite-credit a{color:#7b7b7b;font-weight:600}

/* 7. RESPONSIVE STYLES */
@media(min-width:720px){
  .hero { padding: 6rem 0; }
  .hero__copy h1{font-size:2.8rem}
  .services__grid{grid-template-columns:repeat(3,1fr); gap: 1.5rem;}
  .gallery__grid{grid-template-columns:repeat(3,1fr)}
  .testimonials__grid{grid-template-columns:repeat(3,1fr)}
  .about__grid{grid-template-columns:1fr 1fr;align-items:center;gap:2rem}
  .footer__inner{grid-template-columns:2fr 1fr 1fr;gap:3rem}
  .contact__grid{grid-template-columns:1fr 1fr;align-items:start}
}

/* 8. ACCESSIBILITY */
a:focus,button:focus{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px}
input:focus,textarea:focus{outline:none} /* Custom focus is applied above */

.skip-link{position:absolute;top:-100px;left:50%;transform:translateX(-50%);background:var(--heading);color:white;padding:0.5rem 1rem;z-index:100;transition:top 0.3s ease-in-out;border-radius:0 0 8px 8px;font-weight:600}
.skip-link:focus{top:0}

/* Visually hidden class for accessibility */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  border: 0;
}

/* Lightbox Styles */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox__content { max-width: 90%; max-height: 90%; }
.lightbox__content img { width: 100%; height: 100%; object-fit: contain; }
.lightbox__close, .lightbox__prev, .lightbox__next { position: absolute; background: none; border: none; color: white; font-size: 2.5rem; cursor: pointer; transition: opacity .2s ease; }
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover { opacity: 0.7; }
.lightbox__close { top: 1rem; right: 1.5rem; }
.lightbox__prev { left: 1rem; }
.lightbox__next { right: 1rem; }

/* Animation class from JS */
.card, .about__media, .review, .faq, .hero__copy > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.in-view { opacity: 1; transform: translateY(0); }


/* 9. ANIMATIONS & MOBILE NAV */
body.nav-open { overflow: hidden; }
body.preload * {transition:none !important;} /* Disable transitions on page load */

/* Fullscreen menu */
.site-nav {
  position: fixed;
  inset: 0;
  background: rgba(250, 249, 247, 0.95);
  backdrop-filter: blur(5px);
  z-index: 50; /* Above header */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.nav-open .site-nav {
  opacity: 1;
  visibility: visible;
}
.site-nav ul { flex-direction: column; gap: 1.5rem; text-align: center; }
.site-nav a { font-size: 1.5rem; font-family: 'Heebo', sans-serif; }

/* Staggered animation for nav items */
.site-nav li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
body.nav-open .site-nav li { opacity: 1; transform: translateY(0); }
body.nav-open .site-nav li:nth-child(1) { transition-delay: 0.1s; }
body.nav-open .site-nav li:nth-child(2) { transition-delay: 0.15s; }
body.nav-open .site-nav li:nth-child(3) { transition-delay: 0.2s; }
body.nav-open .site-nav li:nth-child(4) { transition-delay: 0.25s; }
body.nav-open .site-nav li:nth-child(5) { transition-delay: 0.3s; }

@media(min-width:720px){
  .site-nav{display:block !important;position:static;background:none;padding:0;border:0;box-shadow:none}
  .site-nav ul{flex-direction:row}
  .hamburger{display:none}
}