/*
 * drem-theme.css: DREM Book identity layer
 * © 2026 DREM Book. All rights reserved.
 *
 * Loaded last in every page's <head>, after responsive.css. The bulk of the
 * recolouring lives in the themed copies of the site stylesheets under
 * assets/css/vendor/. This file adds the brand tokens and the few rules that
 * are about the new logo and focus/selection colours rather than palette swaps.
 * Token values match brand/drem-book-brand-kit.html.
 */
:root {
  --drem-midnight: #1E2147;
  --drem-ember: #C4470E;
  --drem-ember-deep: #A83A09;
  --drem-moonlight: #F4E7A1;
  --drem-paper: #F7F2E8;
  --drem-dusk: #5548A6;
  --drem-meadow: #5D7B2B;
  --drem-lagoon: #23788A;
  --drem-rosewood: #A24E67;
  --drem-amber: #F0A030;
  --drem-mist: #E7F1F3;
  --drem-spring: #D8E3A0;
  --drem-graphite: #4A4D63;
  --drem-line: #E3DDCF;
}

html body ::selection {
  background: var(--drem-moonlight);
  color: var(--drem-midnight);
}

/* Logos. The original template sized a wide, low logo by width. The DREM mark used in the
   phone header is portrait (55 x 72), so it is sized by height there. */
html body #mobile-header .link-logo img {
  width: auto;
  height: 34px;
  max-width: none;
}

html body #mobile-header a.link-logo {
  width: auto;
}

html body #site-header .link-logo img,
html body #site-header .img-logo {
  width: 176px;
  height: auto;
}

html body #footer-bottom #footer-logo-link img {
  width: 170px;
  height: auto;
}

/* Between 1025px and 1279px the desktop nav needs the room, so the header shows the mark alone. */
@media (min-width: 1025px) and (max-width: 1279px) {
  html body #site-header .link-logo img,
  html body #site-header .img-logo {
    width: auto;
    height: 46px;
  }
}

/* ---- "Coming soon" ---------------------------------------------------------
   Anything that points to a platform or feature DREM Book does not have yet stays on the page,
   disabled. Nothing says "coming soon" until you hover over it (or focus it with the keyboard or
   a tap), and then a small label appears. The links keep their <a> element (no href), so their
   styling stays. The label is generated here, so no markup or visible tag is needed. */
html body .is-soon {
  position: relative;
  cursor: not-allowed;
  text-decoration: none;
}

html body a.is-soon:hover,
html body a.is-soon:focus {
  text-decoration: none;
}

html body .is-soon::after {
  content: "Coming soon";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 2147483000;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--drem-midnight);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 12px rgba(30, 33, 71, .3);
  color: #fff;
  font: 700 12px/1.5 'Open Sans', system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .15s ease;
}

html body .is-soon:hover::after,
html body .is-soon:focus::after,
html body .is-soon:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* In the sticky header the label drops below the item, where there is room. */
html body #site-header .is-soon::after,
html body #mobile-header .is-soon::after {
  bottom: auto;
  top: calc(100% + 8px);
}

/* Screen readers still hear that the item is not available. */
html body .soon-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html body a.is-soon > i {
  opacity: .6;
}

html body #site-footer a.is-soon,
html body #footer-bottom a.is-soon,
html body #site-footer-container a.is-soon {
  opacity: 1 !important;
}

html body .footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 18px;
  padding-bottom: 20px;
}

html body .soon-note {
  margin: 12px 0;
  font-size: 15px;
}

html body .soon-note--inline {
  display: inline-block;
  margin: 0;
}

html body .contact-card {
  max-width: 560px;
  margin: 18px auto;
  padding: 24px;
  border: 1px solid var(--drem-line);
  border-radius: 10px;
  background: #fff;
  color: var(--drem-midnight);
  text-align: center;
  box-shadow: 0 1px 2px rgba(30, 33, 71, .06), 0 10px 28px rgba(30, 33, 71, .08);
}

html body .contact-card h3 {
  margin: 0 0 8px;
  font-weight: 800;
}

html body .contact-card p {
  margin: 0 0 10px;
  color: var(--drem-graphite);
}

html body .video-soon {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: var(--drem-midnight) url("../img/placeholders/hero-wide.svg") center / cover no-repeat;
}

/* Footer newsletter: shown, but disabled. */
html body .newsletter-soon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 460px;
  margin: 12px auto 0;
}

html body .newsletter-soon input {
  flex: 1 1 220px;
  min-height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--drem-line);
  border-radius: 999px;
  background: #fff;
}

html body .newsletter-soon button {
  min-height: 44px;
  padding: 0 22px;
  border: 3px solid var(--drem-moonlight);
  border-radius: 999px;
  background: var(--drem-ember);
  color: #fff;
  font-weight: 700;
}

html body .newsletter-soon input:disabled,
html body .newsletter-soon button:disabled {
  cursor: not-allowed;
}


/* The original site reveals these on scroll with a script that does not run on this host, so they
   would stay invisible. Show them in their final state. */
.reveal-on-scroll, .hero-image-reveal, .trust-list > li, .trust-list li {
  opacity: 1 !important; visibility: visible !important; transform: none !important;
}