/* theme.css — custom theme layered OVER Bootstrap 5 for
 * Absolutely Fabulous Photo Booth (ported from the original GoHighLevel site).
 * Brand: magenta + deep plum, thin Lato headings. */

:root {
  /* --- Brand palette (from capture/theme.json + original CSS vars) --- */
  --brand-primary: #C21783;        /* magenta — nav, footer, buttons, links */
  --brand-primary-2: #c21c6a;      /* warmer pink-magenta (hover/accents) */
  --brand-dark: #24152D;           /* deep plum — dark sections, accordions */
  --brand-plum: #361F43;           /* plum — secondary dark */
  --brand-pink: #F4D3E8;           /* soft pink */
  --brand-pink-bg: #FCF3F9;        /* near-white pink wash — light sections */
  --brand-gold: #FCB100;           /* gold accent */
  --brand-light: #FCF3F9;

  /* --- Typography --- */
  --font-base: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-base: 1rem;

  /* --- Map brand tokens onto Bootstrap --- */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: 194, 23, 131;
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: var(--font-size-base);
  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: 194, 23, 131;
  --bs-link-hover-color: var(--brand-primary-2);
}

body { font-family: var(--font-base); color: var(--brand-dark); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;           /* original uses light Lato headings */
  letter-spacing: .01em;
}
.fw-300 { font-weight: 300 !important; }

/* Section heading eyebrow (small magenta uppercase label above titles) */
.eyebrow {
  color: var(--brand-primary);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  font-size: .8rem;
}

/* Keep headings legible on dark/colored sections. */
.bg-dark h1,.bg-dark h2,.bg-dark h3,.bg-dark h4,.bg-dark h5,.bg-dark h6,
.bg-plum h1,.bg-plum h2,.bg-plum h3,.bg-plum h4,.bg-plum h5,.bg-plum h6,
.bg-plum-2 h1,.bg-plum-2 h2,.bg-plum-2 h3,.bg-plum-2 h4,.bg-plum-2 h5,.bg-plum-2 h6,
.bg-brand h1,.bg-brand h2,.bg-brand h3,.bg-brand h4,.bg-brand h5,.bg-brand h6,
.text-white h1,.text-white h2,.text-white h3,.text-white h4,.text-white h5,.text-white h6 { color:#fff; }

/* --- Brand background helpers --- */
.bg-brand      { background-color: var(--brand-primary) !important; color:#fff; }
.bg-plum       { background-color: var(--brand-dark) !important; color:#fff; }
.bg-plum-2     { background-color: var(--brand-plum) !important; color:#fff; }
.bg-pink-wash  { background-color: var(--brand-pink-bg) !important; }
.text-brand    { color: var(--brand-primary) !important; }
.text-gold     { color: var(--brand-gold) !important; }

/* --- Buttons --- */
.btn-primary {
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg: var(--brand-primary-2);
  --bs-btn-hover-border-color: var(--brand-primary-2);
  --bs-btn-active-bg: var(--brand-primary-2);
  --bs-btn-active-border-color: var(--brand-primary-2);
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
  font-weight: 700; letter-spacing: .02em;
}
.btn-outline-light { font-weight: 700; }
.btn-brand {
  --bs-btn-color:#fff; --bs-btn-bg:var(--brand-primary); --bs-btn-border-color:var(--brand-primary);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:var(--brand-primary-2); --bs-btn-hover-border-color:var(--brand-primary-2);
  --bs-btn-active-bg:var(--brand-primary-2); font-weight:700;
}
.btn-pill { border-radius: 50rem; padding-inline: 1.5rem; }

a { color: var(--brand-primary); }
a:hover { color: var(--brand-primary-2); }

/* ===================== Header / Nav ===================== */
.topbar { background:#fff; border-bottom:1px solid rgba(0,0,0,.06); }
.topbar .brand-logo { height:54px; width:auto; }
.topbar .award-logo { height:54px; width:auto; }
.topbar .social-ico {
  width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--brand-primary); color:#fff; font-size:1rem; text-decoration:none;
}
.topbar .social-ico:hover { background:var(--brand-primary-2); color:#fff; }
.topbar .call-num { color:var(--brand-primary); font-weight:700; text-decoration:none; white-space:nowrap; }
.topbar .call-num:hover { color:var(--brand-primary-2); }

.site-navbar { background: var(--brand-primary); }
.site-navbar .navbar-brand { color:#fff; font-weight:700; }
.site-navbar .nav-link { color:#fff; text-align:center; font-weight:600; padding-inline:1rem; }
.site-navbar .nav-link:hover,.site-navbar .nav-link:focus { color:#fff; opacity:.85; }
.site-navbar .nav-link.active { color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:6px; }
.site-navbar .navbar-toggler { border-color:rgba(255,255,255,.5); }
.site-navbar .navbar-toggler-icon {
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.site-navbar .dropdown-menu {
  --bs-dropdown-link-active-bg: var(--brand-primary);
  --bs-dropdown-link-hover-bg: var(--brand-pink-bg);
  --bs-dropdown-link-hover-color: var(--brand-primary);
  border:0; box-shadow:0 .5rem 1.5rem rgba(0,0,0,.18); border-radius:.5rem;
}
.site-navbar .dropdown-item { font-weight:600; color:var(--brand-dark); }
@media (min-width: 992px) {
  .site-navbar .nav-link { white-space: nowrap; }
  .site-navbar .nav-item.dropdown:hover > .dropdown-menu { display:block; margin-top:0; }
}

/* ===================== Hero ===================== */
.hero { position:relative; color:#fff; background-size:cover; background-position:center; display:flex; align-items:center; }
.hero::before { content:""; position:absolute; inset:0; background:rgba(36,21,45,.55); }
.hero > .container { position:relative; z-index:1; }
.hero h1 { font-weight:300; }
.hero .eyebrow { color:#fff; opacity:.9; }
.page-hero { min-height: 56vh; }
.home-hero { min-height: 78vh; }

/* ===================== Experience / feature tiles ===================== */
.exp-tile { display:block; position:relative; overflow:hidden; border-radius:.5rem; text-decoration:none; color:#fff; box-shadow:0 .25rem .75rem rgba(0,0,0,.12); }
.exp-tile img { width:100%; height:240px; object-fit:cover; display:block; transition:transform .4s ease; }
.exp-tile:hover img { transform:scale(1.06); }
.exp-tile .exp-label { position:absolute; left:0; right:0; bottom:0; padding:.75rem 1rem; background:linear-gradient(transparent, rgba(36,21,45,.88)); font-weight:700; color:#fff; }

/* ===================== Reviews ===================== */
.review-card { background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:.75rem; }
.stars { color:var(--brand-gold); letter-spacing:2px; }

/* ===================== Accordion (FAQ) ===================== */
.faq .accordion-button { background: var(--brand-dark); color:#fff; font-weight:600; }
.faq .accordion-button:not(.collapsed) { background: var(--brand-plum); color:#fff; box-shadow:none; }
.faq .accordion-button::after { filter: invert(1) grayscale(1) brightness(2); }
.faq .accordion-button:focus { box-shadow:none; }
.faq .accordion-item { border:0; margin-bottom:.5rem; border-radius:.4rem; overflow:hidden; }
.faq .accordion-body { background:#fff; }

/* ===================== Footer ===================== */
.site-footer { background: var(--brand-primary); color:#fff; }
.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5 { color:#fff; }
.site-footer .footer-head { text-transform:uppercase; letter-spacing:.1em; font-weight:700; font-size:.95rem; }
.site-footer a:not(.btn) { color:#fff; text-decoration:none; }
.site-footer a:not(.btn):hover,.site-footer a:not(.btn):focus { color:var(--brand-pink); text-decoration:underline; }
.site-footer .btn-link { color:#fff; }

/* ===================== Image fit helpers ===================== */
.object-cover   { object-fit: cover;   }
.object-contain { object-fit: contain; background: transparent; }
.card img, .feature-card img { object-fit: contain; }
.photo-frame { background: transparent; border-radius:.5rem; overflow:hidden; }
.photo-frame img { width:100%; height:100%; object-fit:contain; }

/* Section rhythm */
.section { padding-block: 4rem; }
@media (max-width: 767px){ .section { padding-block: 2.5rem; } }