/* Dream Day Social rebuild - shared styles.
   Hand-coded recreation of socialhousestudio.com/dreamdaysocial (WordPress +
   Elementor). Local study reference only. */

@font-face { font-family:'Billmake'; src:url('fonts/billmake-regular-webfont.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Voyage'; src:url('fonts/Voyage-Italic.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Garet'; src:url('fonts/garet.book_.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Luxury'; src:url('fonts/TOPLUXURY.woff2') format('woff2'); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Work Sans'; src:url('fonts/worksans-var-latin.woff2') format('woff2-variations'); font-weight:100 900; font-style:normal; font-display:swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: rgb(255, 255, 255);
  font-family: 'Garet', sans-serif;
  overflow-x: hidden;
}
img, video { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }

/* A section is a full-bleed band; .cv is the fixed 1200px design canvas,
   centred, with every element absolutely positioned inside it. */
.sec {
  position: relative;
  width: 100%;
  height: var(--h);
  overflow: visible;
}
.cv {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.cv > * { position: absolute; margin: 0; }
.cv > .in, .cv a > .in { position: absolute; }

/* full-bleed section background layers (scrims, washes) live outside .cv so
   they span the viewport rather than the 1200px canvas */
.bleed { position: absolute; z-index: 1; pointer-events: none; }

/* a section whose background IS a video: full bleed, behind the scrim and
   the canvas, exactly where the still fallback would have been */
.sec-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.sec > .cv { z-index: 2; }

/* text blocks keep their measured box and wrap exactly as the original did */
.t { margin: 0; }
.t p { margin: 0; }

/* reel / clip tiles: the container is the visible frame, the video covers it */
.tile { overflow: hidden; }
.tile > video { width: 100%; height: 100%; object-fit: cover; }

/* form controls carry their own measured box from css/home.css */
input, textarea, select, button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
}
textarea { resize: none; }
button { cursor: pointer; }

/* ---- off-canvas menu (ElementsKit panel in the original) ---- */
.menu-scrim {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90;
}
.menu-panel {
  position: fixed; top: 0; right: 0; width: 1200px; max-width: 100vw; height: 100%;
  background: #fff; z-index: 91; overflow-y: auto;
}
.menu-cv { position: relative; width: 1200px; height: 1300px; margin: 0 auto; }
.menu-cv > * { position: absolute; margin: 0; }
.menu-close {
  position: absolute; top: 24px; right: 32px; z-index: 2;
  font-size: 34px; line-height: 1; background: none; border: 0;
}
[hidden] { display: none !important; }

/* ---- hamburger (the original uses an ElementsKit icon font) ---- */
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 0; background: none; border: 0;
}
.burger span {
  display: block; width: 26px; height: 2px; background: rgb(37, 57, 33);
}

/* ---- inquiry popup (Elementor popup 112), hand-styled ---- */
.popup-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 95; }
.popup {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw); max-height: 90vh; overflow-y: auto; z-index: 96;
  background: rgb(242, 224, 220); padding: 40px 44px 44px; text-align: center;
}
.popup h3 {
  margin: 0 0 14px; font-family: 'Voyage', sans-serif; font-weight: 400;
  font-size: 38px; line-height: 1.15; color: rgb(37, 57, 33);
}
.popup p {
  margin: 0 0 24px; font-family: 'Garet', sans-serif; font-size: 15px;
  line-height: 1.6; color: rgb(37, 57, 33);
}
.popup form { display: grid; gap: 12px; }
.popup input, .popup select, .popup textarea {
  width: 100%; padding: 14px 16px; border: 1px solid rgba(37,57,33,.35);
  background: transparent; font-family: 'Garet', sans-serif; font-size: 14px;
  color: rgb(37, 57, 33);
}
.popup textarea { min-height: 110px; }
.popup form button {
  margin-top: 8px; padding: 15px; background: rgb(37, 57, 33); color: rgb(242, 224, 220);
  font-family: 'Luxury', sans-serif; font-size: 14px; letter-spacing: 3px;
  text-transform: uppercase; border: 0;
}
.popup-close, .menu-close { line-height: 1; }
.popup-close {
  position: absolute; top: 14px; right: 20px; font-size: 30px;
  background: none; border: 0; color: rgb(37, 57, 33);
}

/* ---- accordion panels (section "why") ---- */
.acc-panel {
  padding: 0 70px 26px;
  font-family: 'Garet', sans-serif; font-size: 15px; line-height: 1.7;
  color: rgb(37, 57, 33);
}
.acc-panel p { margin: 0 0 12px; }
/* the +/- and chevron marks were icon-font glyphs in the original */
.acc-row { cursor: pointer; }
.acc-row::before, .acc-row::after {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: 'Garet', sans-serif; font-size: 22px; font-weight: 400;
  color: rgb(37, 57, 33); line-height: 1;
}
.acc-row::before { content: "+"; left: 40px; }
.acc-row.is-open::before { content: "−"; }
.acc-row::after { content: "›"; right: 46px; font-size: 26px; }
.acc-panel { background: rgba(242,224,220,.53); }


/* ---- Bask brand -------------------------------------------------------
   Logo: her own transparent PNG, cropped to the mark. The header slot was
   sized for Dream Day's taller lockup, so the height follows the real
   artwork's aspect (900x428) instead of stretching it. */
.sec-top .e-2 { width: 158px !important; height: 75.1px !important;
  top: 12.4px !important; }
.sec-footer .e-477 { width: 150px !important; height: 71.3px !important; }
.sec-top .e-2, .sec-footer .e-477 { object-fit: contain !important; }

/* Her primary is the logo magenta, so it carries the calls to action. */
.e-14, .e-38, .e-217, .e-328, .e-469, .e-86, .e-512, .mq-cta {
  background-color: rgb(179, 43, 93) !important;
  color: rgb(242, 224, 220) !important;
}
.e-14 [data-x], .e-38 [data-x], .e-217 [data-x], .e-328 [data-x], .e-469 [data-x], .e-86 [data-x], .e-512 [data-x], .mq-cta [data-x] { color: rgb(242, 224, 220) !important; }

/* ==========================================================================
   MOBILE LAYER (2026-08-04). Purely additive: everything lives inside the
   media block, so desktop rendering is untouched (proved by pixel-diffing
   every segment at 1440 and 1200 against a pre-change baseline).
   Only the shared scaffolding lives here; per-section re-flow is in
   css/home.css, which loads after this file and therefore wins ties.
   ========================================================================== */
@media (max-width: 900px) {
  /* the design canvas is a fixed 1200px box; unlock it. Only .sec-top (a
     zero-height nav stub) and .sec-colophon still use it on this site. */
  .cv { width: auto; height: auto; }

  /* the off-canvas menu is a 1200px right-hand panel; on a phone it is the
     whole screen, and its absolutely positioned children have to flow.
     !important is needed only where the desktop rules already use it. */
  .menu-panel { width: 100vw; max-width: 100vw; }
  .menu-panel .menu-cv {
    width: auto !important; height: auto !important;
    padding: 72px 22px 44px;
    /* flex so the flow order can be set independently of the DOM. The canvas
       is authored for desktop (photo first, links last); letting that order
       stand on a phone put the first nav link at y=783 of an 844px screen, so
       the menu opened onto a giant photo with the navigation below the fold. */
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .menu-panel .menu-cv > * {
    position: static; left: auto; top: auto; right: auto; bottom: auto;
    width: auto; height: auto;
    max-width: 100%;
    /* the desktop canvas carries hand-nudged inline transforms from the visual
       editor; they are absolute-position tweaks and only misplace things once
       the children flow */
    transform: none !important;
  }
  .menu-close { top: 16px !important; right: 16px !important; font-size: 30px; }

  .popup { padding: 34px 22px 30px; }
  .popup h3 { font-size: 28px; }
  .popup p { font-size: 14px; margin-bottom: 18px; }
}

/* lead form: submitted state + inline error, added at launch wiring */
.bq-thanks {
  margin: 0; font-family: 'Garet', sans-serif; font-size: 16px; line-height: 1.6;
  color: rgb(37, 57, 33); text-align: center;
}
.bq-note {
  grid-column: 1 / -1; margin: 6px 0 0; font-family: 'Garet', sans-serif;
  font-size: 13px; line-height: 1.5; color: rgb(179, 43, 93);
}