/* =====================================================================
   Lodgely — dark navy scheme
   Loaded straight after style.css on every page that uses it.
   Colours only: no layout, spacing or type changes.
   ===================================================================== */

:root{
  color-scheme: dark;
  --paper:  #162236;   /* page background (was white)            */
  --white:  #1C2B44;   /* raised panels and cards (was white)    */
  --ink:    #FFFFFF;   /* headings and strong text (was navy)    */
  --muted:  #A3B2C8;   /* body and secondary text                */
  --rule:   #2A3C58;   /* dividers and borders                   */
  --accent: #6FA3E0;   /* accent text, italics, links            */
}

/* Brand blue for filled buttons and badges. The lighter --accent is for
   text only; white text on it doesn't have enough contrast. */
html body{ background:#162236; color:#FFFFFF; }
::selection{ background:#1565C0; color:#FFFFFF; }

/* Nav */
.nav{ background:#162236; border-bottom-color:#24344D; }
.nav-links{ background-color:#162236; }
.nav-links a{ color:var(--muted); }
.nav-links a:hover,
.nav-links a.active{ color:#FFFFFF; }
.nav-links a.nav-login{ color:#FFFFFF; }
.nav-toggle span{ background:#FFFFFF; }

/* Buttons */
.btn-primary,
.nav-links a.nav-cta{ background:#1565C0; border-color:#1565C0; color:#FFFFFF; }
.btn-primary:hover,
.nav-links a.nav-cta:hover{ background:#1976D2; border-color:#1976D2; color:#FFFFFF; }
.btn-outline{ background:transparent; border-color:#3A4E6C; color:#FFFFFF; }
.btn-outline:hover{ border-color:#8A9BB5; color:#FFFFFF; }
.btn-light{ background:#FFFFFF; border-color:#FFFFFF; color:#1565C0; }

/* Page heroes sit straight on the navy page */
.page-hero{ background:transparent; }

/* Forms */
input, select, textarea{ color-scheme:dark; }
input::placeholder, textarea::placeholder{ color:#6F819E; }

/* Footer — already dark in the original; text that used --paper
   (white) is pinned back to white now that --paper is navy. */
footer .footer-wordmark,
footer .footer-col h4{ color:#FFFFFF; }
footer .footer-col a:hover,
footer .footer-bottom a:hover{ color:#FFFFFF; }

/* Footer social links */
.footer-social{ display:flex; gap:.75rem; margin-top:1.25rem; }
.footer-social a{ width:36px; height:36px; border:1px solid #2A3C58; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#8A9BB5; text-decoration:none; transition:color .15s, border-color .15s; }
.footer-social a:hover{ color:#FFFFFF; border-color:#6FA3E0; }

/* ---------------------------------------------------------------------
   Logo watermark — the Lodgely mark at 5% white, cropped off the edge.
   Uses lodgely-mark-shade.svg (sits beside this file).
   --------------------------------------------------------------------- */

/* Top of every page, behind the hero */
body{ position:relative; isolation:isolate; }
body::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:min(1100px, 150vh);
  background:url("lodgely-mark-shade.svg") no-repeat;
  background-size:auto clamp(420px, 58vw, 840px);
  background-position:right -14vw top 72px;
  pointer-events:none;
  z-index:-1;
}

/* Footer on every page */
footer{
  background-image:url("lodgely-mark-shade.svg");
  background-repeat:no-repeat;
  background-size:auto 150%;
  background-position:right -6vw center;
}

/* Mid-page bands: "What it checks" (Home, How it works) and the About roadmap */
body .band,
body .story:has(.timeline){
  background-image:url("lodgely-mark-shade.svg");
  background-repeat:no-repeat;
  background-size:auto 105%;
}
body .band{ background-position:left -12vw center; }
body .story:has(.timeline){ background-position:right -12vw center; }