/*
Theme Name: SpraySmart
Author: Leul
Version: 4.0.0
Text Domain: spraysmart
Description: Portal page for the SmartSpray sprayer control system.
*/

/* A classic theme, not a block theme: the site runs WordPress 5.0.0, and block
   themes (templates/*.html plus theme.json) need WordPress 5.9 or newer.

   Layout follows the International Typographic Style: a strict grid, hairline
   rules doing all the dividing, no rounded corners, no shadows, no decoration.
   Two colours and one accent. */

:root{
  --ink:#0A0A0A;
  --grey:#6E6E6E;
  --rule:#D8D8D8;
  --paper:#FFFFFF;
  --accent:#0F6B3F;
  --shell:1080px;
  --gutter:28px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:15px/1.6 "Helvetica Neue",Helvetica,ui-sans-serif,system-ui,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; }
a{ color:inherit; }

h1,h2,h3{ margin:0; letter-spacing:-0.028em; line-height:1.08; font-weight:600; }

.ss-shell{ max-width:var(--shell); margin:0 auto; padding:0 var(--gutter); }

/* Small uppercase label type, used for structure rather than decoration. */
.ss-label{
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}

/* ---------------------------------------------------------------- header -- */
.ss-header{ border-bottom:1px solid var(--rule); }
.ss-header .ss-shell{ display:flex; align-items:center; min-height:64px; }
.ss-brand{
  font-size:15px; font-weight:700; letter-spacing:-.01em; text-decoration:none;
}

/* ------------------------------------------------------------------ hero -- */
.ss-hero{ padding:104px 0 88px; border-bottom:1px solid var(--rule); }
.ss-hero h1{
  margin:0 0 14px;
  font-size:clamp(34px,4.4vw,52px); line-height:1.02; letter-spacing:-.035em;
}
.ss-hero .ss-lede{ margin:0; font-size:16px; color:var(--grey); }

/* --------------------------------------------------------------- section -- */
.ss-section{ padding:72px 0 96px; }

/* Label in the first column, content in the second: the grid does the work,
   nothing is centred. */
.ss-split{
  display:grid; gap:32px 64px; align-items:start;
  grid-template-columns:minmax(0,4fr) minmax(0,8fr);
}
.ss-split > .ss-label{ padding-top:8px; }

/* ---- portal entries ---- */
.ss-portal{ list-style:none; margin:0; padding:0; }
.ss-portal li{ border-top:1px solid var(--rule); }
.ss-portal li:last-child{ border-bottom:1px solid var(--rule); }

.ss-portal a{
  display:flex; align-items:baseline; gap:24px; flex-wrap:wrap;
  padding:22px 0; text-decoration:none;
  transition:padding-left .14s ease;
}
.ss-portal a:hover{ padding-left:6px; }

.ss-portal .ss-name{
  font-size:17px; font-weight:600; letter-spacing:-.012em;
  min-width:132px; transition:color .14s ease;
}
.ss-portal a:hover .ss-name{ color:var(--accent); }
.ss-portal .ss-desc{ color:var(--grey); font-size:14.5px; }

/* ---------------------------------------------------------------- footer -- */
.ss-footer{ border-top:1px solid var(--rule); }
.ss-footer .ss-shell{ padding-top:28px; padding-bottom:28px; }
.ss-copy{ font-size:12px; color:var(--grey); }

/* ------------------------------------------------------------- responsive -- */
@media (max-width:820px){
  .ss-split{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width:700px){
  :root{ --gutter:20px; }
  .ss-hero{ padding:64px 0 52px; }
  .ss-section{ padding:52px 0 64px; }
  .ss-portal a{ gap:4px; }
  .ss-portal .ss-name{ min-width:0; }
}