/* The site's look (Ashley 2026-10-02: "its kinda dark" -> liked B and C -> "Go with the night all the time").
   Option B everywhere, at every hour: charcoal header, footer, photo banners, home hero and Tonight cards;
   warm cream for page content below the banners. <html data-look="night"> is always set by the server.
   Works by re-pointing site.css's own colour variables per region, so text, shadows and fades follow. */

html[data-look] { --cream: #FBF5EA; --cream-2: #F6EEDF; }

/* light content area */
html[data-look] body { background: var(--cream); }
html[data-look] main {
  --bg: var(--cream); --bg-deep: var(--cream-2); --panel: #FFFFFF;
  --fg: #1E1F1B; --fg-2: #4F4A41; --red-text: #A3312E;
  --line: rgba(30, 31, 27, .12); --line-2: rgba(30, 31, 27, .22);
  --glow: rgba(235, 166, 54, .22);
  background: var(--cream);
  color: var(--fg);
}

/* regions that stay dark (photo banners, Tonight cards, the night hero) */
html[data-look] .phead,
html[data-look] .tp__top,
html[data-look] .tcard,
html[data-look] .tboard,
html[data-look="night"] .hero {
  --bg: #161714; --bg-deep: #121311; --panel: #1E1F1B;
  --fg: #F6F1E6; --fg-2: #C9C1B3; --red-text: #EBA636;
  --line: rgba(246, 241, 230, .12); --line-2: rgba(246, 241, 230, .24);
  color: var(--fg);
}
html[data-look] .tboard { background: #1E1F1B; }
html[data-look] .tp__top { background: #161714; padding-bottom: 28px; margin-bottom: 22px; }

/* the gold button always keeps dark text */
html[data-look] .btn--gold { color: #121311; }

/* night hero (desktop): let the photo breathe */
@media (min-width: 900px) {
  html[data-look="night"] .hero__shade {
    background: linear-gradient(90deg, rgba(18, 19, 17, .80) 0%, rgba(18, 19, 17, .50) 32%, rgba(18, 19, 17, .06) 62%, rgba(18, 19, 17, 0) 80%);
  }
}

/* brighter photos everywhere */
html[data-look] .ph__img,
html[data-look] .hero__media img,
html[data-look] .tile__media img,
html[data-look] .pstrip__item img,
html[data-look] .tcard__thumb img { filter: brightness(1.12) saturate(1.1); }

html[data-look] .pstrip { padding-bottom: 3px; }

/* the bigger header seal (Ashley 2026-10-02: "bigger and clear") hangs into the hero: keep the headline clear of it */
@media (min-width: 1100px) { .eyebrow--hero { margin-top: 48px; } }
@media (min-width: 1100px) and (max-width: 1259px) { .eyebrow--hero { margin-top: 22px; } }

/* Accent colour (Ashley 2026-10-02: red label "almost too dark to read" -> options -> "bright red or gold, which looks cleaner"):
   GOLD everywhere (labels, heading rules, the current-page underline) so the site has ONE accent that matches the Call
   button; on cream the small labels are charcoal (gold would be too faint there). She confirmed "go gold i want it to look clean":
   the Tonight / today's-special card frames are gold too (no red left on the site). To switch back to bright red:
   set the three accent values below to #FF4B42 (and the cream label to #A3312E). */
html[data-look] { --red-deep: #EBA636; --red-text: #EBA636; --red: #EBA636; --frame-red: #EBA636; }
html[data-look] main { --red-text: #3A3733; }
.eyebrow, .eyebrow--hero { font-weight: 700; }
html[data-look] .tcard, html[data-look] .tboard, html[data-look] .today-special { border-color: var(--frame-red); }
html[data-look] .tcard:hover { border-color: color-mix(in srgb, var(--frame-red) 70%, #EBA636); }

/* "Follow us" (Ashley 2026-10-02: "link their insta"): labelled links in the footer and on the Contact page */
.ftr__follow { display: grid; gap: 4px; }
.ftr__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ftr__social .ftr__link { gap: 10px; }
.ftr__social .ico { width: 20px; height: 20px; flex: none; }
.ftr__handle, .follow__handle { text-transform: none; letter-spacing: .02em; opacity: .8; }
.follow__text { margin: 0 0 14px; color: var(--fg-2); }
@media (min-width: 760px) { html[data-look] .ftr__main { grid-template-columns: minmax(0, 1fr) auto auto; } }
/* 760-1023px (iPad portrait and the like): beside Explore and Follow us the brand column kept ~130px at 768 (the wordmark
   shrank to 40px wide and "EST. 2024" broke over two lines; full size needs ~340px, which the three columns only leave from
   ~1000px). Here the seal and the wordmark take their own row at their usual size, Explore and Follow us side by side under
   them. Phones and 1024px up are as they were. */
@media (min-width: 760px) and (max-width: 1023px) {
  html[data-look] .ftr__main { grid-template-columns: max-content max-content; column-gap: clamp(56px, 9vw, 96px); align-items: start; }
  html[data-look] .ftr__brand { grid-column: 1 / -1; }
}

/* Magnolia Grace maker's mark (Ashley's standing rule; same lockup as the Queen Horse Bedding footer):
   the brand flower image unchanged + the wordmark as real text, white on this dark footer, linking to her site. */
.mgmark { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; }
.mgmark__lbl { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 700; margin-right: .15rem; }
.mgmark img { height: 34px; width: auto; display: block; }
.mgmark__text { display: flex; flex-direction: column; line-height: 1.25; }
.mgmark__l1 { font-family: var(--f-head); font-size: .92rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.mgmark__l2 { font-family: var(--f-head); font-size: .5rem; font-weight: 600; letter-spacing: .4em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.mgmark:hover .mgmark__l1, .mgmark:focus-visible .mgmark__l1 { color: #EBA636; }
.ftr__end { flex-wrap: wrap; row-gap: 14px; }
@media (max-width: 520px) { .mgmark img { height: 28px; } }

/* "Est. 2024" under the footer wordmark (Ashley 2026-10-05; Local Junction opened in fall 2024). The © line keeps the current year. */
.ftr__est { display: block; margin-top: 8px; color: #EBA636; font: 600 12px/1 var(--f-head); letter-spacing: .32em; text-transform: uppercase; white-space: nowrap; }

/* Print (the /tonight door board): black on white. The dark regions above re-point the colour variables after site.css's print
   block, so without this the /tonight top (title, status line) and the Tonight board (date, titles) printed warm white on
   white paper, or as a charcoal block with background graphics on. In print they take the cream area's own colours (dark text,
   charcoal labels, the gold times as below) on white, and the board keeps site.css's black print frame. */
@media print {
  html[data-look] body, html[data-look] main { background: #FFFFFF; }
  html[data-look] .tp__top,
  html[data-look] .tboard {
    --bg: #FFFFFF; --bg-deep: #FFFFFF; --panel: #FFFFFF;
    --fg: #121311; --fg-2: #121311; --red-text: #3A3733;
    --line: #121311; --line-2: #121311;
    background: #FFFFFF; color: #121311;
  }
  html[data-look] .tboard { border-color: #121311; }
  /* the door board's top on paper: the screen's 28px under it and 22px after it (dark-band room) tightened to fit one page */
  html[data-look] .tp__top { padding-top: 0; padding-bottom: 12px; margin-bottom: 6px; }
}