/* styles.css
   - Bootstrap overrides and theme variables sourced from /config/config.json via CSS variables (set by JS).
   - Do not hardcode brand colors below; use --brand-* variables set at runtime in main.js.
*/
:root {
  --brand-primary: #f4c2c2;
  --brand-secondary: #f5e9e2;
  --brand-accent: #c8a27e;
  --brand-surface: #ffffff;
  --brand-text: #2b2b2b;
  --font-display: 'Great Vibes', cursive;
  --font-body: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--brand-text);
  background: var(--brand-surface);
}

.navbar-brand {
  font-family: var(--font-display);
  font-size: 1.8rem;
}

.btn-brand {
  background: var(--brand-primary);
  border: none;
}
.btn-brand:hover { filter: brightness(0.95); }

.hero {
  position: relative;
  overflow: visible; /* allow rotated image to extend */
  background: linear-gradient(180deg, var(--brand-secondary), #fff);
  min-height: clamp(720px, 86vh, 1000px);
  padding-top: calc(var(--nav-h, 72px) + 1.5rem); /* room under sticky navbar */
  padding-bottom: 7rem;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 4rem);
}

/* ---------- Hero art stage ---------- */
.hero .artstage{
  position: relative;
  min-height: clamp(340px, 46vw, 620px); /* room for the fan-out */
  display: grid;
  place-items: center;                   /* center everything */
  isolation: isolate;                    /* z-index layering is clean */
}

.hero .artstage img{
  pointer-events: none;
  user-select: none;
}

/* PORTRAIT: always on top */
.hero .artstage .portrait{
  position: relative;
  z-index: 100;
  /* +20% size (0.2x); old: clamp(168px, 24vw, 308px) */
  width: clamp(202px, 29vw, 370px);
  height: auto;
  left: -20px;        /* ← move ~20px left */
  top: 25px;                 /* push down ~25px */
  transform-origin: 50% 90%;
  will-change: transform;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.12));
}


/* Underlay tools share base positioning: start exactly under the portrait */
.hero .artstage .tool{
  position: absolute;
  z-index: 2;
  bottom: 8%;
  left: 50%;                 /* start centered, fully covered by portrait */
  transform: translateX(-50%) rotate(0deg) scale(1);
  opacity: 1;                /* they’re hidden only because the portrait sits above */
  will-change: transform, left;
}

/* Small screens: ensure the stage is not cramped */
@media (max-width: 768px){
  .hero .artstage{ min-height: 360px; }
}


@media (max-width: 768px) {
  .hero {
    min-height: 640px;
    padding-top: calc(var(--nav-h, 60px) + .5rem);
  }
  .hero .lipstick {
    right: -6px;
    top: calc(var(--nav-h, 60px) + 6px);
    width: clamp(180px, 46vw, 380px);
  }
}

/* TOOLS: order under the portrait (lipstick above scissors above brush) */
.hero .artstage .tool{ position: absolute; z-index: 10; }
.hero .artstage .tool--lipstick{ z-index: 12; }   /* top-most tool */
.hero .artstage .tool--scissors{ z-index: 11; }
.hero .artstage .tool--brush{    z-index: 10; }

.section-heading {
  font-family: var(--font-display);
  font-size: 2rem;
}

.card.service-card {
  border: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.1);
}

footer {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.06);
}

.badge-soft {
  background: rgba(200,162,126,0.12);
  color: var(--brand-accent);
  border: 1px solid rgba(200,162,126,0.22);
}

.gallery img {
  width: 100%;
  height: auto;
  border-radius: .5rem;
}

.visually-hidden-focusable:active, .visually-hidden-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}


/* Instagram embeds: never force height; let IG size itself */
.sm-embed .instagram-media {
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  border: 0;
}

/* Keep previews responsive; never stretch vertically */
.sm-embed .instagram-media img,
.sm-embed .instagram-media video,
.sm-embed .instagram-media iframe {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* put this in styles.css (or the <style> on the page) */
.sm-section + .sm-section { margin-top: 3rem; }  /* space between IG and TikTok sections */
#igGrid { margin-bottom: 1.5rem; }               /* a bit of breathing room after IG cards */

/* Tidy up TikTok’s default margins */
.tiktok-embed { margin-top: 0 !important; }


/* Square, cover-cropped thumbnail used for static IG embeds */
.ig-static-card{
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  display: block;
  border-radius: .5rem;
  overflow: hidden;
  background-color: #eee;
  background-image: var(--thumb);
  background-size: cover;        /* crop, don't stretch */
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(0,0,0,.04);
}
.ig-static-card .ig-static-play{
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
}
.ig-static-card .ig-static-badge{
  position: absolute; left: 8px; bottom: 8px;
  background: rgba(0,0,0,.6); color:#fff; font-size:.75rem; line-height:1;
  padding:6px 10px; border-radius:999px;
}

/* Spacing + headings */
.sm-section + .sm-section { margin-top: 3rem; }
#igGrid { margin-bottom: 1.5rem; }
.section-heading { font-family: var(--font-display); }  

/* simple light skeleton for IG placeholders */
.ig-skel { aspect-ratio: 1 / 1; background: linear-gradient(90deg,#f6f7f8 25%,#edeef1 37%,#f6f7f8 63%); background-size: 400% 100%; animation: igShine 1.2s infinite; border-radius: .5rem; }
@keyframes igShine { 0%{background-position: 100% 0;} 100%{background-position: -100% 0;} }


/* Default: logged out shows Login/Sign up; hide Logout */
[data-auth="in"]  { display: none !important; }
[data-auth="out"] { display: inline-block; }

/* When signed in, flip them */
body.auth-in [data-auth="in"]  { display: inline-block !important; }
body.auth-in [data-auth="out"] { display: none !important; }

/* Nudge the left hero column up & left on wider screens */
@media (min-width: 768px){
  .hero .col-md-7{
    padding-top: 0 !important;
    margin-top: -28px;     /* up */
    margin-left: -8px;     /* left */
  }
}

/* Optional: reduce the hero’s top padding slightly site-wide */
@media (min-width: 768px){
  .hero{ padding-top: calc(var(--nav-h, 72px) + 0.5rem); }  /* was +1.5rem */
}

.breadcrumbs { font-size:.9rem; margin:.75rem 0; }
.breadcrumbs ol { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.breadcrumbs li { color:#666; }
.breadcrumbs a { color:inherit; text-decoration:none; }
.breadcrumbs a:hover { text-decoration:underline; }
.breadcrumbs li + li::before { content:"›"; margin:0 .25rem; color:#aaa; }