/* ==========================================================================
   Revival Millworks: the shared look.

   This one file is everything the website and the customer portal have in
   common: the brand colours and type, the header and its menu, the buttons
   and the footer. The portal links it from
   https://revivalmillworks.com/shared/site.css, so a change here changes
   both. Keep page-specific styling out of it; that lives in
   src/assets/site.css on the website and in the portal's own stylesheet.

   Every class here starts with rm- so it cannot collide with a class the
   portal already uses. The colour names match the portal's (rmp/render.py),
   so its own rules keep working when it switches to this file.
   ========================================================================== */

/* Both faces are SIL Open Font License, so they ship with the site rather
   than coming from a font service: nothing is fetched from anyone else, and
   the page still sets correctly offline. Addresses are from the site root,
   so the portal loads them from here too (the site sends them with
   Access-Control-Allow-Origin, which browsers require for fonts). */
@font-face { font-family: Poppins; font-style: normal; font-weight: 300;
             font-display: swap; src: url("/shared/fonts/poppins-300.woff2") format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600;
             font-display: swap; src: url("/shared/fonts/poppins-600.woff2") format("woff2"); }
/* One variable file covers every weight the site uses. */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 300 600;
             font-display: swap; src: url("/shared/fonts/source-serif-4.woff2") format("woff2"); }

:root {
  /* The brand sheet's copper gradient. --brand is the midpoint; the sheet
     gives only the two ends. */
  --brand-dark: #B65D2A; --brand: #D57C48; --brand-light: #F29866;
  /* The brand dark, RGB 23|41|40: the colour "REVIVAL" is set in. */
  --ink: #1C2928;
  /* The warm cream the old site's sections sat on, white panels, and the
     deep teal of its footer. */
  --bg: #F5F1EE; --panel: #fff; --deep: #212F2E;
  /* Secondary text. 5.1:1 on the cream. */
  --dim: #6b655d;
  /* Terracotta for section titles. Only 3.3:1 on the cream, which passes for
     large type and fails for small, so --clay-deep exists for small labels
     (5.2:1). */
  --clay: #AC795E; --clay-deep: #8A5A40;
  --head: var(--ink);
  /* Page titles and links: the brand's teal family, held to 8:1 on the
     cream so it reads as green without losing contrast. */
  --title: #145247;
  --line: #e4e0d9;
  /* kepler-std is what the old site set headings in. It is Adobe's and
     cannot be shipped, so Source Serif 4 stands in, named second so a machine
     that has Kepler still uses it. */
  --font-body: Poppins, "Century Gothic", Futura, Montserrat, "Segoe UI", system-ui, sans-serif;
  --font-display: "kepler-std", "Kepler Std", "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --radius: 14px;
  --gutter: clamp(16px, 4vw, 32px);
  --max: 1200px;
}

/* One theme, the cream one, as the portal decided on 2026-09-24: the logo
   sets "REVIVAL" in the brand dark, which vanishes on a dark page. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  /* Poppins Light runs small and tight; it needs the room. */
  font: 300 17px/1.65 var(--font-body);
}
img { max-width: 100%; height: auto; }

.rm-container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Visible only to keyboard users, the first thing Tab reaches. */
.rm-skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 16px;
           background: var(--deep); color: #fff; border-radius: 8px; font-weight: 600; }
.rm-skip:focus { top: 8px; }

/* ---- Buttons ------------------------------------------------------------
   Pills, as the old site drew them. The primary one is the deep teal, the
   same as the old site's "Get a Quote" button: 13.9:1 with white text. */
.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 22px; border-radius: 999px;
  font: 600 15px/1.2 var(--font-body); text-decoration: none; white-space: nowrap;
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.rm-btn--primary { background: var(--deep); color: #fff; }
.rm-btn--primary:hover { background: var(--title); }
/* Copper with white text is 4.6:1, enough for button text. */
.rm-btn--accent { background: var(--brand-dark); color: #fff; }
.rm-btn--accent:hover { background: #9A4E22; }
.rm-btn--outline { border-color: var(--deep); color: var(--deep); background: transparent; }
.rm-btn--outline:hover { background: var(--deep); color: #fff; }
/* For use on photographs and on the teal footer. */
.rm-btn--light { border-color: rgba(255,255,255,.85); color: #fff; background: rgba(0,0,0,.12); }
.rm-btn--light:hover { background: #fff; color: var(--deep); }
.rm-btn:focus-visible, .rm-header a:focus-visible, .rm-header button:focus-visible,
.rm-footer a:focus-visible { outline: 3px solid var(--brand-light); outline-offset: 2px; }

/* ---- Header -------------------------------------------------------------
   The logo on the left, the menu on the right. It stays at the top of the
   window while the page scrolls, because a contractor reading a long page
   should never have to scroll back up to find the phone number. */
.rm-header { position: sticky; top: 0; z-index: 50; background: rgba(245, 241, 238, .97);
             border-bottom: 1px solid var(--line); }
.rm-header__inner { display: flex; align-items: center; gap: 24px;
                    max-width: var(--max); margin: 0 auto; padding: 12px var(--gutter); }
.rm-header__brand { display: block; flex: none; line-height: 0; }
/* The lockup file is 444 px wide, so it stays sharp up to 222 px on a
   high-resolution screen. */
.rm-header__brand img { width: clamp(170px, 18vw, 210px); height: auto; }
.rm-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.rm-nav__list { display: flex; align-items: center; gap: 22px; margin: 0; padding: 0; list-style: none; }
.rm-nav__list a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
                  padding: 6px 0; border-bottom: 2px solid transparent; }
.rm-nav__list a:hover { border-bottom-color: var(--brand-light); }
.rm-nav__list a[aria-current="page"] { border-bottom-color: var(--brand-dark); }
/* Set apart from the pages about the company: it goes somewhere else. */
.rm-nav__list a.rm-nav__portal { display: inline-flex; align-items: center; gap: 6px; color: var(--title); }
.rm-nav__portal svg { width: 15px; height: 15px; flex: none; }
.rm-nav__phone { color: var(--title); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.rm-nav__phone:hover { text-decoration: underline; }

/* The menu button exists only once header.js has run; without it, the
   menu simply wraps onto a second line, which still works. */
.rm-header__toggle { display: none; margin-left: auto; align-items: center; gap: 8px;
                     min-height: 44px; padding: 0 16px; border: 2px solid var(--deep); border-radius: 999px;
                     background: transparent; color: var(--deep); font: 600 15px var(--font-body); cursor: pointer; }
.rm-header__toggle svg { width: 18px; height: 18px; }

@media (max-width: 1080px) {
  .rm-header__inner { flex-wrap: wrap; }
  .rm-nav, .rm-nav__list { flex-wrap: wrap; gap: 6px 18px; }
  .rm-header--js .rm-header__toggle { display: inline-flex; }
  .rm-header--js .rm-nav { display: none; }
  .rm-header--js.rm-header--open .rm-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    width: 100%; margin: 4px 0 8px; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .rm-header--js.rm-header--open .rm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .rm-header--js.rm-header--open .rm-nav__list a { display: flex; padding: 12px 2px; font-size: 17px;
                                                    border-bottom: 1px solid var(--line); }
  .rm-header--js.rm-header--open .rm-nav__list a[aria-current="page"] { color: var(--brand-dark); }
  .rm-header--js.rm-header--open .rm-nav__phone { font-size: 17px; padding: 4px 2px; }
}

/* ---- Footer -------------------------------------------------------------
   The old site's deep teal block, its most recognisable feature after the
   logo, full width with the mark faint in the corner. */
.rm-footer { position: relative; overflow: hidden; background: var(--deep);
             color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.6; }
.rm-footer__inner { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
                    padding: 56px var(--gutter) 28px; }
.rm-footer__grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr; }
.rm-footer h2 { margin: 0 0 12px; font: 600 13px/1.3 var(--font-body); letter-spacing: .12em;
                text-transform: uppercase; color: var(--brand-light); }
.rm-footer h2.rm-footer__next { margin-top: 24px; }
.rm-footer p { margin: 0 0 8px; }
.rm-footer a { color: #fff; }
.rm-footer ul { list-style: none; margin: 0; padding: 0; }
.rm-footer li { margin: 0 0 6px; }
.rm-footer__name { font: 600 26px/1.2 var(--font-display); color: #fff; margin: 0 0 10px; }
.rm-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
                   margin-top: 40px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18);
                   font-size: 13px; color: rgba(255,255,255,.6); }
.rm-footer__base a { color: rgba(255,255,255,.85); }
.rm-footer__links { display: inline-flex; flex-wrap: wrap; gap: 8px 20px; }
/* "Wholesale & Trade Only": set apart from the description above it. */
.rm-footer__trade { font-weight: 600; color: #fff; letter-spacing: .02em; }
/* Decoration only: hidden from screen readers in the markup. */
.rm-footer__mark { position: absolute; right: -90px; bottom: -120px; width: 420px; height: auto;
                   opacity: .09; pointer-events: none; }
@media (max-width: 800px) {
  .rm-footer__grid { grid-template-columns: 1fr; gap: 26px; }
  .rm-footer__mark { width: 300px; right: -80px; bottom: -90px; }
}

/* ---- The backdrop -------------------------------------------------------
   The mark, large, fixed in the bottom-left corner of the window and
   bleeding off both edges, as the portal draws it. A share of its own size
   is cut away at any window size. */
.rm-backdrop { position: fixed; left: 0; bottom: 0; z-index: 0; width: 76vmin; height: auto;
               pointer-events: none; user-select: none; transform: translate(-26%, 16%); }
@media (max-width: 700px) { .rm-backdrop { width: 72vw; opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  .rm-btn { transition: none; }
}
@media print {
  .rm-header { position: static; }
  .rm-header__toggle, .rm-nav, .rm-footer__mark, .rm-backdrop { display: none; }
  .rm-footer { background: #fff; color: #000; }
  .rm-footer a { color: #000; }
}