/* styles.css
   Compiled plain CSS for Ankita Beauty Corner
   Author: Senior web developer
   Notes: Use this file directly for production. It contains responsive layout, accessible contrast,
   and simple utility classes used across HTML files.
*/

/* ========== Base / Reset ========== */
:root{
  --container-max: 1100px;
  --gap: 1.25rem;
  --accent: #b76e79;
  --accent-contrast: #fff;
  --muted: #666;
  --bg: #ffffff;
  --surface: #f9f9fb;
  --radius: 12px;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin:0;
  font-family: var(--font-sans);
  color:#222;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
}

/* Accessibility helpers */
.sr-only { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background:#000; color:#fff; padding:.5rem 1rem;
}
.skip-link:focus { left:1rem; top:1rem; z-index:9999; }

/* Container */
.container {
  width: calc(100% - 2rem);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* Header */
.site-header { border-bottom:1px solid #eee; background:var(--surface); }
.header-grid {
  display:flex;
  align-items:center;
  gap:var(--gap);
  justify-content:space-between;
}
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit; }
.brand-logo { height:48px; width:auto; display:block; }
.nav { display:flex; align-items:center; gap:1rem; }
.nav-list { display:flex; gap:1rem; list-style:none; margin:0; padding:0; align-items:center; }
.nav-list a { text-decoration:none; color:inherit; padding:.5rem .6rem; border-radius:8px; }
.nav-list a:hover, .nav-list a:focus { background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.cta { text-decoration:none; padding:.6rem 1rem; border-radius:999px; background:var(--accent); color:var(--accent-contrast); }

/* Responsive nav toggle */
.nav-toggle { display:none; border:0; background:transparent; padding:.5rem; cursor:pointer; }
.hamburger { width:22px; height:2px; background:#333; display:block; position:relative; }
.hamburger::before, .hamburger::after {
  content:""; position:absolute; left:0; right:0; height:2px; background:#333;
}
.hamburger::before { top:-6px; }
.hamburger::after { bottom:-6px; }

/* Hero */
.hero { padding:3rem 0; background:linear-gradient(180deg,#fff,#fbf9fb); border-bottom:1px solid #f0f0f2; }
.hero-grid { display:grid; grid-template-columns: 1fr 420px; gap:var(--gap); align-items:center; }
.hero-title { margin:0; font-size:clamp(1.6rem, 3vw, 2.6rem); letter-spacing:-0.02em; }
.hero-sub { color:var(--muted); margin-top:.6rem; }
.hero-actions { margin-top:1rem; display:flex; gap:.6rem; }
.hero-media img { width:100%; height:auto; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.06); }

/* Buttons */
.btn { display:inline-block; text-decoration:none; border:0; padding:.6rem 1rem; border-radius:10px; cursor:pointer; font-weight:600; }
.btn-primary { background:var(--accent); color:var(--accent-contrast); }
.btn-secondary { background:#fff; border:1px solid #ddd; color:#222; }
.btn-ghost { background:transparent; border:1px solid transparent; color:#222; }

/* Sections */
.section-title { font-size:1.25rem; margin:0 0 .5rem 0; }
.section-sub { color:var(--muted); margin:0 0 1rem 0; }

.features .feature-list { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; list-style:none; padding:0; margin:1rem 0 0 0; }
.feature { background:#fff; padding:1rem; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.04); }

/* About */
.about-grid { display:grid; grid-template-columns: 1fr 360px; gap:var(--gap); align-items:center; }

/* Contact form */
.contact-form { max-width:720px; display:grid; gap:.75rem; background:#fff; padding:1rem; border-radius:12px; border:1px solid #f0f0f2; }
.contact-form label { font-weight:600; font-size:.95rem; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea {
  padding:.6rem; border-radius:8px; border:1px solid #e6e6e9; width:100%; font-size:1rem;
}
.contact-form textarea { min-height:120px; resize:vertical; }
.form-actions { display:flex; gap:.6rem; align-items:center; }

/* Footer */
.site-footer { margin-top:2rem; padding:1.25rem 0; border-top:1px solid #eee; background:transparent; }
.footer-grid { display:flex; justify-content:space-between; align-items:center; gap:var(--gap); }

/* Cookie banner */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 1rem;
  background: #fff; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.08);
  padding:1rem; z-index:9999; margin:0 1rem;
}
.cookie-grid { display:flex; gap:1rem; align-items:center; justify-content:space-between; }
.cookie-actions { display:flex; gap:.5rem; align-items:center; }
.cookie-panel { margin-top:.75rem; padding:.75rem; border-top:1px dashed #eee; }

/* Utilities */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px, 1px, 1px, 1px); white-space:nowrap; }

/* Small screens */
@media (max-width:900px){
  .hero-grid { grid-template-columns:1fr; }
  .features .feature-list { grid-template-columns:1fr; }
  .about-grid { grid-template-columns:1fr; }
  .nav-list { flex-direction:column; align-items:stretch; }
  .nav-toggle { display:block; }
  .nav-list[hidden] { display:none; }
  #site-menu[aria-hidden="true"] { display:none; }
}

/* Focus states for accessibility */
a:focus, button:focus, input:focus, textarea:focus { outline: 3px solid rgba(183,110,121,.18); outline-offset:2px; }

/* small helpers */
.footer-actions a { margin-left:1rem; text-decoration:none; color:var(--muted); }
.form-status { margin-top:.5rem; color:var(--muted); font-size:.95rem; }