/*
Theme Name: DataWeaver
Author: OmniCASE for DataWeaver Ltd
Description: Minimal marketing theme for the DataWeaver warehouse reporting software.
Version: 0.3
Requires at least: 6.0
Text Domain: dataweaver
*/

/* ---------------------------------------------------------------------
   Font. One family (Archivo), stored inside the theme so nothing is
   fetched from Google. It has a "width" setting: headings use the wide
   end of it to echo the wide lettering in the DataWeaver logo.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   Colours. The first three are read from the DataWeaver logo:
     ink    = the lettering
     olive  = the woven "W"
     bronze = the "Pure Analysis" strapline
   Change them here and the whole site follows.
   --------------------------------------------------------------------- */
:root {
  --dw-ink: #002b00;
  --dw-olive: #99aa33;
  --dw-bronze: #998033;
  --dw-paper: #ffffff;
  --dw-mist: #f3f5e9;      /* pale olive, for panels on white */
  --dw-line: #d9dfc5;      /* soft olive-grey, for borders */
  --dw-muted: #4d5b4d;     /* secondary text on white */
  --dw-pale: #cfd8c0;      /* secondary text on the dark band */
  --dw-max: 1400px;
}

* { box-sizing: border-box; }

/* Everything is sized in "rem", so this one line scales the whole site
   to the window: normal size on a laptop, a little larger on a big
   monitor so the page does not look lost in the middle of the screen,
   and a little smaller in a short window so it still fits one screen. */
html { font-size: clamp(15px, min(0.55vw + 8.5px, 2.25vh), 19px); }

body {
  margin: 0;
  font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--dw-ink);
  background: var(--dw-paper);
  /* Every page scrolls top to bottom in the ordinary way. These lines
     only make sure the footer sits at the bottom of the window on a page
     too short to fill it. (The home page is the one exception: see
     "One screen on a desktop" further down.) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
/* WordPress shows a 32px bar above the page when you are logged in. */
body.admin-bar { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
main { flex: 1 0 auto; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

a { color: var(--dw-ink); }
a:focus-visible,
.dw-button:focus-visible {
  outline: 3px solid var(--dw-bronze);
  outline-offset: 3px;
}

.dw-container {
  width: min(var(--dw-max), calc(100% - 2 * clamp(24px, 6.5vw, 120px)));
  margin: 0 auto;
}

/* ----- Header --------------------------------------------------------- */
.dw-header {
  background: var(--dw-paper);
  border-bottom: 1px solid var(--dw-line);
}
.dw-header-inner {
  min-height: 4.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.dw-logo { display: block; line-height: 0; }
.dw-logo img { width: 13.2rem; height: auto; display: block; }

.dw-nav { display: flex; align-items: center; gap: 1.6rem; }
.dw-nav a { text-decoration: none; font-weight: 500; }
.dw-nav a:hover { text-decoration: underline; text-underline-offset: 7px; }
/* The page you are on gets an olive underline. */
.dw-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--dw-olive);
  text-decoration-thickness: 3px;
  text-underline-offset: 7px;
}

/* ----- Buttons -------------------------------------------------------- */
.dw-button {
  display: inline-block;
  padding: 13px 22px;
  border: 2px solid var(--dw-ink);
  border-radius: 4px;
  background: var(--dw-ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.dw-button:hover { background: #0d4a0d; border-color: #0d4a0d; }
.dw-nav .dw-button {
  padding: 8px 16px;
  background: transparent;
  color: var(--dw-ink);
}
.dw-nav .dw-button:hover { background: var(--dw-ink); color: #fff; text-decoration: none; }
.dw-nav .dw-button[aria-current="page"] { text-decoration: none; }

/* ----- Home: the opening ---------------------------------------------- */
.dw-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(12px, 3.5vh, 56px) 0;
}
.dw-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(2.1rem, 2.6vw + 1rem, 3.5rem);
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.dw-lead {
  margin: 0 0 28px;
  max-width: 34em;
  font-size: 1.15rem;
  color: var(--dw-muted);
}
.dw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.dw-actions-note { color: var(--dw-muted); }

/* ----- Home: the weave picture ----------------------------------------
   Drawn in the page itself (front-page.php), not an image file.
   Swap it for a real screenshot when one is ready.                      */
.dw-weave { margin: 0; }
.dw-weave svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 54vh;
  font-family: inherit;
}
.dw-weave .dw-chip { fill: var(--dw-mist); stroke: var(--dw-line); }
.dw-weave .dw-chip-name { fill: var(--dw-ink); font-size: 17px; font-weight: 600; }
.dw-weave .dw-chip-field { fill: var(--dw-muted); font-size: 14px; }
.dw-weave .dw-caption { fill: var(--dw-muted); font-size: 14px; }
.dw-weave .dw-casing { stroke: var(--dw-paper); stroke-width: 10; fill: none; }
.dw-weave .dw-thread { stroke: var(--dw-olive); stroke-width: 5; stroke-linecap: round; fill: none; }
.dw-weave .dw-join { stroke: var(--dw-bronze); stroke-width: 5; stroke-linecap: round; fill: none; }
.dw-weave .dw-join-over { stroke: var(--dw-bronze); stroke-width: 5; fill: none; }
.dw-weave .dw-knot { fill: var(--dw-olive); }
.dw-weave .dw-report { fill: var(--dw-paper); stroke: var(--dw-ink); stroke-width: 1.5; }
.dw-weave .dw-report-title { fill: var(--dw-ink); font-size: 15px; font-weight: 600; }
.dw-weave .dw-report-head { fill: var(--dw-muted); font-size: 12px; }
.dw-weave .dw-report-rule { stroke: var(--dw-line); stroke-width: 1; }
.dw-weave .dw-bar { fill: var(--dw-line); }
.dw-weave .dw-bar-total { fill: var(--dw-olive); }

/* The one moving moment: the threads draw across once when the page
   opens, then the report appears. Skipped for anyone whose device asks
   for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .dw-weave .dw-thread {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: dw-draw 0.9s ease-out forwards;
  }
  .dw-weave .dw-thread:nth-of-type(2) { animation-delay: 0.12s; }
  .dw-weave .dw-thread:nth-of-type(3) { animation-delay: 0.24s; }
  .dw-weave .dw-thread:nth-of-type(4) { animation-delay: 0.36s; }
  .dw-weave .dw-report-group {
    opacity: 0;
    animation: dw-appear 0.5s ease-out 1.1s forwards;
  }
}
@keyframes dw-draw { to { stroke-dashoffset: 0; } }
@keyframes dw-appear { to { opacity: 1; } }

/* ----- Home: the three steps ------------------------------------------ */
.dw-steps {
  background: var(--dw-ink);
  color: #fff;
}
.dw-steps ol {
  list-style: none;
  margin: 0;
  padding: clamp(22px, 3.6vh, 36px) 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
}
.dw-steps li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  column-gap: 12px;
}
.dw-step-number {
  grid-row: span 2;
  font-size: 2.6rem;
  font-weight: 200;
  font-stretch: 125%;
  line-height: 1;
  color: var(--dw-olive);
}
.dw-steps h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}
.dw-steps p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--dw-pale);
}

/* ----- Footer --------------------------------------------------------- */
.dw-footer {
  background: var(--dw-ink);
  color: var(--dw-pale);
  font-size: 0.9rem;
}
.dw-footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 14px 0;
}
/* On the home page the footer sits directly under the three steps, so a
   faint line separates them. */
body.home .dw-footer-inner { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.dw-footer p { margin: 0; }
.dw-footer a { color: #fff; }

/* ----- Ordinary pages (anything that is not the home page) ------------- */
.dw-page { padding: clamp(32px, 6vh, 64px) 0; }
.dw-page h1 {
  margin: 0 0 24px;
  font-size: clamp(1.9rem, 2vw + 1rem, 2.8rem);
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.15;
}
.dw-page-content { max-width: 44em; }
.dw-page-content h2 { margin: 1.8em 0 0.5em; font-size: 1.35rem; font-weight: 600; }
.dw-page-content img { max-width: 100%; height: auto; }
.dw-page-content a { text-underline-offset: 3px; }

/* ----- Product page (page-product.php) ----------------------------------- */
.dw-prod-intro { padding: clamp(36px, 7vh, 72px) 0 clamp(28px, 5vh, 48px); }
.dw-prod-intro h1 {
  margin: 0 0 20px;
  font-size: clamp(2rem, 2.2vw + 1rem, 3.1rem);
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.12;
}
.dw-prod-intro .dw-lead { max-width: 40em; margin-bottom: 0; }

/* The three screens, as links that jump down the page. Each has a coloured
   thread along its top edge. */
.dw-jump {
  list-style: none;
  margin: clamp(28px, 5vh, 48px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
}
.dw-jump li { padding-top: 14px; border-top: 4px solid var(--dw-olive); }
.dw-jump li:nth-child(2) { border-top-color: var(--dw-bronze); }
.dw-jump li:nth-child(3) { border-top-color: var(--dw-ink); }
.dw-jump a { font-size: 1.25rem; font-weight: 600; text-underline-offset: 5px; }
.dw-jump p { margin: 6px 0 0; color: var(--dw-muted); }

.dw-section { padding: clamp(44px, 8vh, 88px) 0; scroll-margin-top: 12px; }
.dw-section-tint { background: var(--dw-mist); }
.dw-section h2 {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 1.4vw + 1rem, 2.3rem);
  font-weight: 300;
  font-stretch: 125%;
  line-height: 1.15;
}
.dw-section-lead { margin: 0 0 1.4em; max-width: 38em; font-size: 1.15rem; color: var(--dw-muted); }
.dw-section p { max-width: 38em; }

/* Short points, set out in columns. */
.dw-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 22px clamp(24px, 3.5vw, 52px);
  margin: clamp(24px, 4vh, 40px) 0;
}
.dw-points h3 { margin: 0 0 6px; font-size: 1.08rem; font-weight: 600; line-height: 1.3; }
.dw-points p { margin: 0; color: var(--dw-muted); }
.dw-section > .dw-container > :last-child { margin-bottom: 0; }

/* A screenshot with its caption. */
.dw-shot { margin: clamp(24px, 4vh, 40px) 0; }
.dw-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--dw-line);
  border-radius: 6px;
  background: var(--dw-paper);
  box-shadow: 0 12px 30px -18px rgba(0, 43, 0, 0.45);
}
.dw-shot figcaption { margin-top: 12px; font-size: 0.95rem; color: var(--dw-muted); }
/* For a screenshot of a screen that carries on below: the bottom edge fades
   out instead of ending in a hard cut. */
.dw-shot-fade img {
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent);
}
.dw-shot-fade figcaption { margin-top: 4px; }

/* Words on one side, picture on the other. */
.dw-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.dw-split .dw-shot { margin: 0; }
.dw-phones { display: flex; justify-content: center; gap: clamp(16px, 2.5vw, 32px); }
.dw-shot-phone { flex: 0 1 15.5rem; }
.dw-shot-phone img { border-radius: 18px; border-color: var(--dw-ink); }
.dw-shot-phone figcaption { text-align: center; }

/* The closing band. */
.dw-section-ink { background: var(--dw-ink); color: #fff; }
.dw-section-ink .dw-points p { color: var(--dw-pale); }
.dw-section-ink .dw-actions { margin-top: clamp(28px, 5vh, 44px); max-width: none; }
.dw-button-light { background: #fff; border-color: #fff; color: var(--dw-ink); }
.dw-button-light:hover { background: var(--dw-mist); border-color: var(--dw-mist); }
.dw-text-link { color: #fff; font-weight: 500; text-underline-offset: 5px; }
/* The footer follows the dark band, so it gets the same faint line as on
   the home page. */
.dw-product + .dw-footer .dw-footer-inner { border-top: 1px solid rgba(255, 255, 255, 0.16); }

/* ----- Portal (page-portal.php) ------------------------------------------ */
.dw-portal-who { margin: -12px 0 28px; color: var(--dw-muted); }
.dw-portal-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.dw-portal-list li {
  padding: 22px 24px 24px;
  background: var(--dw-mist);
  border: 1px solid var(--dw-line);
  border-left: 5px solid var(--dw-olive);
  border-radius: 4px;
}
.dw-portal-list h2 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 600; }
.dw-portal-list p { margin: 0 0 14px; color: var(--dw-muted); }
.dw-portal-status { font-size: 0.9rem; font-weight: 600; color: #6b5a1f; }

/* ----- One screen on a desktop (home page only) --------------------------
   When the window is big enough, the HOME page fills exactly one screen:
   header on top, the three steps and footer pinned to the bottom, and the
   opening section takes whatever is left. If the window is too short for
   that, the middle scrolls instead of anything being cut off.
   Every other page, and every page on a phone, scrolls normally. */
@media (min-width: 960px) and (min-height: 600px) {
  body.home {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  body.home.admin-bar {
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
  }
  body.home .dw-header,
  body.home .dw-footer { flex: 0 0 auto; }

  body.home main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .dw-hero {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }
  .dw-steps { flex: 0 0 auto; }
}

/* ----- Phones and small tablets ---------------------------------------- */
@media (max-width: 959px) {
  html { font-size: 16px; }
  .dw-container { width: calc(100% - 40px); }
  /* Compact header, as on omnicase.org: small logo, then the menu on one
     tight row that wraps if it has to. */
  .dw-header-inner { position: relative; flex-direction: column; align-items: flex-start; min-height: 0; gap: 10px; padding: 12px 0 14px; }
  .dw-logo img { width: 160px; }
  .dw-nav { flex-wrap: wrap; gap: 6px 14px; font-size: 0.95rem; }
  /* Login / Logout sits top right, level with the logo. */
  .dw-nav .dw-button { position: absolute; top: 12px; right: 0; padding: 5px 12px; }
  .dw-portal-list { grid-template-columns: 1fr; }
  .dw-jump { grid-template-columns: 1fr; }
  .dw-split { grid-template-columns: 1fr; }
  .dw-points { grid-template-columns: 1fr; }
  .dw-hero-inner { grid-template-columns: 1fr; padding: 32px 0 36px; }
  .dw-weave svg { max-height: none; }
  .dw-steps ol { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
}