/* =========== TOKENS =========== */
/* Global box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}
:root{
  /* colors (brand palette) */
  --brand-600:#3f7ec4;      /* blue (banner/accent) */
  --brand-500:#5e93ce;
  --gold-400:#f2c94c;       /* brighter, for later sections */
  --gold-500:#e0ab2a;  /* darker, higher contrast */
  --orange-accent:#f28c28;  /* orange rule under title */
  --slate-700:#3d3d3d;      /* headings/text */
  --ink:#1b1b1c;
  --paper:#ffffff;
  --shadow-rgba: 0 0 0 / .30;
  --shadow-drop: 0 3px 5px rgba(0,0,0,0.30);

  /* spacing, radii, max-width */
  --pad-sm: 12px;
  --pad: 20px;
  --pad-lg: 28px;
  --radius: 12px;
  --maxw: 1120px;
}

/* =========== PAGE =========== */
html { height: auto; }
body { min-height: 100dvh; }   /* dynamic viewport height; allows page to grow */
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family: 'Cabin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:400;
}
.page{
  max-width:var(--maxw);
  margin-inline:auto;
  padding: clamp(16px,3vw,32px);
}

/* =========== BANNER =========== */
.banner{
  width:100%;
  height:60px;
  background:var(--brand-600);
  box-shadow:var(--shadow-drop);
}

/* =========== HERO LAYOUT (left title / right login) =========== */
.hero-row{
  display:grid;
  grid-template-columns: minmax(320px, 1fr) minmax(320px, 480px);
  align-items:center;
  gap: clamp(16px, 4vw, 48px);
  padding-inline: clamp(16px, 4vw, 48px);
  max-width: min(var(--maxw), calc(100% - clamp(32px,8vw,120px))); /* same as other sections */
  margin: clamp(16px, 3vw, 32px) auto;  /* center the whole hero block */
}

/* Title block (left-aligned) */
.page-title{ text-align:left; }
.page-title h1{
  font-size: clamp(36px, 5vw, 64px);
  font-weight:700;
  color:var(--slate-700);
  margin:0 0 8px 0;
}
.title-separator{
  display:block;
  width: clamp(220px, 46%, 420px);
  height:4px;
  background:var(--orange-accent);
  box-shadow:var(--shadow-drop);
  margin: 0 0 8px 0;         /* start under the wordmark (left-aligned) */
}
.page-title p{
  margin:8px 0 0 0;
  font-style:italic;
  font-size: clamp(16px, 2.2vw, 20px);
  color:var(--slate-700);
}

/* === Overrides to match desired behavior === */
.page-title .wordmark{
  display:inline-block;
  width:max-content;
  max-width: clamp(280px, 48vw, 640px);
}
.page-title h1{
  white-space: nowrap;
}
.title-separator{
  width: calc(100% + 24px);
}
.page-title .subtitle{
  display:block;
  width: calc(100% + 24px);
  text-align: justify;
  text-justify: inter-word;
}
.page-title .subtitle::after{
  content:"";
  display:inline-block;
  width:100%;
}

/* Wordmark image: scales with viewport, never huge, keeps sharpness */
.wordmark-img{
  display:block;
  width: 100%;                 /* fill the width of its container */
  max-width: clamp(320px, 42vw, 600px);  /* min → fluid → max cap */
  height:auto;                 /* preserve aspect ratio */
  filter: drop-shadow(0 3px 5px rgba(0,0,0,0.30));
}

/* Title block container (left column) */
.page-title{
  text-align:left;
  /* The container defines the available width for the image above */
  max-width: 600px;            /* same as the max in .wordmark-img for harmony */
}

/* Optional: give the left column a bit more breathing room on large screens */
@media (min-width: 1100px){
  .hero-row{
    grid-template-columns: minmax(420px, 1fr) minmax(340px, 480px);
  }
}

@media (max-width: 720px){
  .hero-row{
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }
  .login-card{ margin: 0; width: min(420px, 92%); }
}

/* Login card (right‑aligned) */
.login-card{
  margin-left:auto;          /* pushes to the right column edge */
  max-width:480px;
  background:#fff;
  border:2px solid var(--brand-600);
  border-radius:6px;
  padding:20px;
  box-shadow:var(--shadow-drop);
}
.login-card label{
  display:block;
  font-weight:600;
  margin:0 0 6px 0;
  color:var(--slate-700);
}
.input{
  width:100%;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid var(--brand-600);
  outline:none;
  box-sizing: border-box; /* ensures padding & border are included in width */
}
.input:focus{
  border-color:var(--brand-500);
  box-shadow:0 0 0 3px rgba(63,126,196,0.28);
}
.form{ display:grid; gap:12px; }
.button{
  padding:10px 14px;
  border-radius:8px;
  border:0;
  cursor:pointer;
  background:var(--brand-600);
  color:#fff;
  font-weight:700;
}

/* Grey full-width line below hero */
.full-separator{
  width:100%;
  height:3px;
  background:#cfcfcf;
  box-shadow:var(--shadow-drop);
  border:0;
  margin: clamp(12px,2.5vw,24px) 0 0 0;
}

/* ===== (Keep these for later layered sections) ===== */
.block{ position:relative; margin: clamp(16px,2.5vw,28px) 0; }
.block__sheet{
  position:absolute; inset:0; border-radius:var(--radius);
  box-shadow: 0 6px 18px var(--shadow-rgba);
}
.block__content{
  position:relative; z-index:2; border-radius:var(--radius);
  padding: clamp(var(--pad), 2.5vw, var(--pad-lg));
  color:var(--ink);
}
.sheet--blue{ background:var(--brand-600); }
.sheet--gold{ background:var(--gold-400); }
.sheet--white{ background:#fff; }
.sheet--ghost{ background: rgba(255,255,255,.75); }
.sheet--blue-ghost{ background: color-mix(in srgb, var(--brand-600) 82%, transparent); }
.sheet--peek-down{ transform: translateY(10px); }
.sheet--peek-right{ transform: translateX(10px); }
.sheet--peek-both{ transform: translate(10px,10px); }
.block--raised .block__content{ box-shadow:0 6px 18px var(--shadow-rgba); background:#fff;
}

/* ===== Wireframe 2: Welcome + Updates section ===== */

/* Helpers for body text (Calibri per wireframe) */
.body-copy{
  font-family: Calibri, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
}
/* Yellow container (centered, comfy gutters, not full-width) */
.section-welcome{
  position: relative;
  background: color-mix(in srgb, var(--gold-400) 60%, white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-drop);
  padding: clamp(20px, 3.5vw, 36px);

  /* center the block and limit width */
  max-width: min(var(--maxw), calc(100% - clamp(32px, 8vw, 120px)));
  margin: clamp(20px, 4vw, 44px) auto;

  overflow: visible; /* white cards can overlap if we ever want */
}

/* Heading + subheading spacing inside the yellow block */
.section-welcome .welcome-head{
  margin-bottom: clamp(12px, 2.2vw, 18px);
}

/* The thin blue line under the subheading */
.section-welcome .welcome-rule{
  height: 4px;
  background: var(--brand-600);
  box-shadow: var(--shadow-drop);
  border-radius: 3px;
  /* keep it inside the panel edges even on huge screens */
  margin: 0 clamp(8px, 1.8vw, 20px) clamp(12px, 2vw, 16px);
}

/* WF2 – stronger pill + tighter bottom spacing */
/* 1) Bigger text + pill */
.section-welcome .welcome-lead{
  font-size: clamp(20px, 3vw, 25px);
  padding: clamp(14px, 2.2vw, 18px) clamp(18px, 3vw, 26px);
  width: clamp(520px, 86%, 1040px);   /* grow wider while staying inside the panel */
  max-width: 1040px;                  /* lift the old 960px cap */
  margin-top: clamp(10px, 1.6vw, 14px);
  margin-bottom: clamp(8px, 1.2vw, 12px); /* reduces the gap under the pill */
}

/* 2) Reduce yellow panel’s bottom padding (this drives the big gap) */
.section-welcome{
  padding-bottom: clamp(16px, 2.8vw, 24px); /* was 28–40px */
}

/* Cards grid – keep your current behavior (no hanging) */
.cards{
  display: grid;
  gap: clamp(12px, 2vw, 20px);
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(14px, 2.4vw, 22px);
}
@media (max-width: 980px){
  .cards{ grid-template-columns: 1fr; }
}
.card{
  background:#fff;
  border-radius: 10px;
  box-shadow: var(--shadow-drop);
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid rgba(0,0,0,.06);
}
.card h3{
  margin:0 0 6px 0;
  font-weight: 700;
  color: var(--slate-700);
}
.card p{ margin:0; }

/* Inner constraint matches your page max width */
.section-welcome__inner{
  max-width: var(--maxw);
  margin-inline: auto;
}

/* Headings at top of yellow block */
.welcome-heading{
  margin: 0 0 clamp(12px, 2vw, 18px) 0;
}
.welcome-heading .h2{
  margin: 0 0 4px 0;
  font-size: clamp(20px, 3.6vw, 30px);
  font-weight: 700;
  color: var(--slate-700);
  font-family: 'Cabin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.welcome-heading .tagline{
  margin: 0;
  color: var(--slate-700);
  font-style: italic;
  font-size: clamp(14px, 2.1vw, 18px);
}

/* Blue rule separating headings from blurb */
.welcome-rule{
  height: 4px;
  background: var(--brand-600);
  box-shadow: var(--shadow-drop);
  border-radius: 2px;
  margin: clamp(10px, 2vw, 14px) 0 clamp(12px, 2.2vw, 16px) 0;
}

/* Blue blurb box */
.welcome-blurb{
  background: var(--brand-600);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-drop);
  padding: clamp(14px, 2.4vw, 18px);
  margin-bottom: clamp(16px, 2.6vw, 20px);
}
.welcome-blurb p{
  margin: 0;
  line-height: 1.5;
}

/* “Updates and Announcements” label */
.updates-title{
  margin: clamp(12px, 2.2vw, 18px) 0 0 0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--slate-700);
  font-family: 'Cabin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Cards row (3 equal columns on desktop) */
.updates-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2.2vw, 18px);
  margin-top: clamp(12px, 2vw, 16px);
  position: relative;
}

/* White cards that “hang” below the yellow block */
.update-card{
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-drop);
  padding: clamp(14px, 2.2vw, 18px);
  transform: translateY(14px); /* hangs past the bottom */
  border: 1px solid rgba(0,0,0,0.06);
}
.update-card h3{
  margin: 0 0 6px 0;
  font-size: clamp(16px, 2.4vw, 18px);
  font-weight: 700;
  color: var(--slate-700);
  font-family: 'Cabin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.update-card p{
  margin: 0;
  color: var(--ink);
}

/* Add bottom space so the hanging cards don’t collide with what follows */
.section-welcome{ padding-bottom: clamp(28px, 4vw, 40px); }

/* Responsive stacks for smaller screens */
@media (max-width: 980px){
  .updates-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .hero-row{ grid-template-columns: 1fr; }          /* already looks good from WF1 */
  .updates-grid{ grid-template-columns: 1fr; }
  .update-card{ transform: translateY(10px); }
}

/* Mobile layout: stack and truly center */
@media (max-width: 720px){
  .hero-row{
    grid-template-columns: 1fr;
    justify-items: center;        /* centers children (logo + card) */
    gap: 20px;
  }

  /* center the logo container too */
  .page-title{
    margin-inline: auto;
  }

  /* center the card regardless of any desktop margin rules */
  .login-card{
    margin: 0 auto;               /* overrides margin-left:auto */
    width: min(480px, 92%);       /* comfy width on phones */
  }
}

/* === WF2 final overrides (keep these LAST) === */
.section-welcome .welcome-lead{
  background: var(--brand-600);
  color: #fff;
  border-radius: 12px;
  font-size: clamp(19px, 2.6vw, 24px);      /* bigger text */
  padding: clamp(14px, 2.2vw, 18px) clamp(18px, 3vw, 26px); /* bigger pill */
  width: clamp(540px, 88%, 1040px);
  max-width: 1040px;
  margin-top: clamp(10px, 1.6vw, 14px);
  margin-bottom: clamp(8px, 1.2vw, 12px);   /* small gap under pill */
}

/* reduce yellow panel bottom padding so the overall gap is tight */
.section-welcome{
  padding-bottom: clamp(14px, 2.2vw, 22px);
}

/* WF2 — increase text size only inside the blue blurb */
.section-welcome .welcome-lead,
.section-welcome .welcome-blurb p{
  font-size: clamp(20px, 2.1vw, 22px);
}

/* ===== Wireframe 3: Two stacked panels ===== */

.section-panels{
  margin: clamp(20px,4vw,48px) auto;
  max-width: min(var(--maxw), calc(100% - clamp(32px,8vw,120px)));
  display: grid;
  gap: clamp(18px,3vw,28px);
}

/* Two-column layout for the WF4 panels on wide screens */
.section-panels{
  display: grid;
  grid-template-columns: 1fr;           /* stack by default (mobile-first) */
  gap: clamp(18px,3vw,28px);
  margin: clamp(20px,4vw,48px) auto;
  max-width: min(var(--maxw), calc(100% - clamp(32px,8vw,120px)));
}

@media (min-width: 980px){
  .section-panels{ grid-template-columns: 1fr 1fr; }   /* two columns */
}

/* Same height/title sizing for the two orange bars */
:root{
  --panel-title-h: clamp(48px, 6.2vw, 64px); /* shared bar height */
}

.panel-info .panel-title{
  display:flex;
  align-items:center;
  min-height: var(--panel-title-h);
  padding: 8px 16px;           /* consistent inset */
}

/* Keep titles one-line on wide screens; scale text to fit */
.panel-info .panel-title h3{
  font-weight: 700;
  font-size: clamp(18px, 1.55vw, 21px);  /* shrinks a bit as columns get narrower */
  white-space: nowrap;                   /* prevents 2-line wrap on desktop */
}

/* On small screens (stacked), allow natural wrapping again */
@media (max-width: 700px){
  .panel-info .panel-title h3{ white-space: normal; }
}

/* Blue container (same brand blue, very low opacity) */
.panel-info{
  position: relative;
  background: color-mix(in srgb, var(--brand-600) 14%, white); /* soft blue */
  border: 1px solid color-mix(in srgb, var(--brand-600) 30%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-drop);
  /* extra top padding so the orange title bar can overlap without hiding text */
  padding: clamp(18px,2.2vw,22px) clamp(16px,2.4vw,24px) clamp(18px,2.2vw,22px);
  padding-top: clamp(38px, 5.2vw, 58px);
}

/* Orange title bar that rides near the top edge */
.panel-title{
  position: absolute;
  left: clamp(12px,2vw,24px);
  right: clamp(12px,2vw,24px);
  top: 0;
  transform: translateY(-45%); /* lifts the bar so it overlaps the top border */
  background: var(--orange-accent);
  border-radius: 8px;
  box-shadow: var(--shadow-drop);
  padding: clamp(8px,1.4vw,10px) clamp(12px,2vw,16px);
}

/* Title typography (Cabin, bold, dark slate) */
.panel-title h3{
  margin: 0;
  font-family: 'Cabin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2.6vw, 28px);
  color: var(--slate-700);
}

/* Body copy inside the blue panel */
.panel-info p{
  margin: 0;
  font-family: Calibri, "Helvetica Neue", Arial, sans-serif; /* per wireframe */
  line-height: 1.55;
  color: var(--slate-700);
}

/* ===== Wireframe 4: Defining ORMIS‑PD CDSS ===== */

/* Blue panel, same width logic as yellow section */
.section-define{
  background: var(--brand-600);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-drop);
  margin: clamp(20px,4vw,48px) auto;
  max-width: min(var(--maxw), calc(100% - clamp(32px,8vw,120px)));
}
.section-define__inner{ padding: clamp(20px,3.2vw,32px); }

/* Header + orange rule */
.define-title{
  margin: 0;
  font-family: 'Cabin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 3.2vw, 34px);
}
.define-rule{
  display:block;
  height:4px;
  width: clamp(160px, 30%, 320px);
  background: var(--orange-accent);
  box-shadow: var(--shadow-drop);
  border-radius: 3px;
  margin: 6px 0 14px 0;
}

/* Layout: left questions, right answer (answer column vertically centered) */
.define-grid{
  display:grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: clamp(16px, 2.6vw, 28px);
  align-items: stretch;                 /* same column heights */
}

/* Right column centers its bubble */
.define-answers{
  align-self: stretch;
  display:grid;
  place-items: center;                  /* centers answer vertically & horizontally */
}
.answer-panel{
  width: min(760px, 100%);
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-drop);
  padding: clamp(14px, 2.2vw, 18px);
}
.answer-panel[hidden]{ display:none; }

/* Questions – darker yellow by default for readability */
.qbtn{
  display:block;
  width:100%;
  text-align:left;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.25;
  color: #fff;                       /* dark slate text */
  background: var(--gold-500);          /* darker yellow (you added in :root) */
  border: 2px solid color-mix(in srgb, var(--gold-500) 60%, transparent);
  box-shadow: 0 2px 4px rgba(0,0,0,.18);
  cursor:pointer;
  transition:
    background-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease,
    font-size .18s ease;

    margin-bottom: clamp(8px, 1.2vw, 16px);
}

/* Hover → brighter yellow */
.qbtn:hover{
  background: var(--gold-400);          /* brighter yellow (already in :root) */
}

/* Active (selected) → white bubble + darker‑yellow text, bigger font */
.qbtn.is-active,
.qbtn[aria-selected="true"]{
  background:#fff;
  color: var(--gold-500);
  box-shadow: 0 3px 8px rgba(0,0,0,.22);
  transform: translateX(2px) scale(1.03);
  font-size: clamp(16px, 1.22vw, 20px);
  border-color: color-mix(in srgb, var(--gold-500) 40%, transparent);
}

/* Responsive stack (questions above answers) */
@media (max-width: 820px){
  .define-grid{ grid-template-columns: 1fr; }
  .qbtn{ font-size: clamp(15px, 3.8vw, 18px); }
}

/* ===== Wireframe 5 ===== */

/* Outer stack container (no boxes, comfy gutters) */
.section-stack{
  margin: clamp(20px,4vw,48px) auto;
  max-width: min(var(--maxw), calc(100% - clamp(32px,8vw,120px)));
}
.section-stack__inner{ max-width: var(--maxw); margin-inline: auto; }

/* WF5 header PNGs — smaller, equal height, responsive */
.section-wordmark{
  display:block;
  height: clamp(54px, 7.5vw, 88px); /* ~25–30% smaller than before */
  width: auto;                      /* all three keep their aspect ratios */
  max-width: 100%;
  object-fit: contain;
  margin: 0 0 clamp(12px, 2vw, 18px) 0;
  filter: none;
}

/* Body copy spacing */
.section-stack p.body-copy{ margin: 0 0 clamp(12px,2.2vw,16px) 0; }
.section-spacer{ height: clamp(18px, 3.2vw, 28px); }

/* Overview "PMDO + list" row — three columns: left / plus / right */
.overview-combine{
  display:grid;
  grid-template-columns: 1fr auto 1.2fr;
  align-items: start;
  gap: clamp(10px, 2.4vw, 28px);
  margin: clamp(8px, 2vw, 16px) 0 clamp(12px, 2.4vw, 20px) 0;
}
.overview-left{
  margin: 0;
  align-self: center;   /* ⟵ centers the PMDO line vertically */
}
.overview-plus{
  font-weight: 800;
  font-family: 'Cabin', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(24px, 4.5vw, 44px);
  line-height: 1;
  color: var(--slate-700);
  align-self: center;
}
.overview-right{
  list-style: none;
  margin: 0;
  padding: 0;
}
.overview-right li{ margin: 0 0 6px 0; }
.overview-right li:last-child{ margin-bottom: 0; }

/* Nudge the body text that immediately follows a WF4 wordmark */
.section-wordmark + .body-copy + .overview-intro + .overview-left,
.section-wordmark + ul{
  padding-left: clamp(12px, 2vw, 28px);
}

/* Applications bullets – simple, roomy list */
.apps-list{
  margin: 0;
  padding-left: 1.15em;   /* nice indent for default discs */
}
.apps-list li{ margin: 0 0 8px 0; }
.apps-list li:last-child{ margin-bottom: 0; }

/* Responsive: stack the overview trio on narrow screens */
@media (max-width: 760px){
  .overview-combine{
    grid-template-columns: 1fr;
    justify-items: start;
    align-items: center;
    text-align: left;
    gap: clamp(8px, 3vw, 14px);
  }

  .overview-left,
  .overview-right{
    align-self: center;
  }

  .overview-right{ padding: 0; }

  .overview-plus{
    margin: 6px 0;
  }
}

/* ===== WF3: center wordmarks on the top border + tighten paddings ===== */

/* use the same visual height the wordmarks already have */
:root {
  --wf3-wordmark-h: clamp(54px, 7.5vw, 88px);
}

/* make each blue card the positioning context */
.section-panels .panel-info {
  position: relative;
  /* top padding = half the wordmark height + a small breathing gap */
  padding-top: calc(var(--wf3-wordmark-h) / 2 + 8px);
  /* keep side padding as-is; trim the bottom so there's no big blue slab */
  padding-bottom: clamp(12px, 1.8vw, 16px);
}

/* place the PNG exactly centered on the top border */
.section-panels .panel-info .section-wordmark {
  position: absolute;
  top: 0;                 /* sit on the top edge of the card */
  left: 50%;
  transform: translate(-50%, -50%);   /* half above / half below the border */
  height: var(--wf3-wordmark-h);
  width: auto;
  margin: 0;              /* remove any flow margin */
}

/* optional: nudge the first paragraph up a touch under the tab */
.section-panels .panel-info .body-copy:first-child {
  margin-top: 4px;        /* small tweak so copy tucks closer to the tab */
}

/* mobile: keep the behavior but add a hair more top padding if needed */
@media (max-width: 700px){
  .section-panels .panel-info{
    padding-top: calc(var(--wf3-wordmark-h) / 2 + 10px);
  }
}

/* ===== Global, uniform vertical spacing between major sections ===== */
:root{
  --section-gap: clamp(28px, 5vw, 64px);  /* tweak to taste */
}

/* Apply the same top/bottom gap to every wireframe section wrapper */
.section-welcome,
.section-panels,
.section-define,
.section-stack{
  margin: var(--section-gap) auto;
}

body {
  padding-bottom: clamp(24px, 5vw, 60px);
}

/* Extra breathing room below this section so it never kisses the footer */
.section-panels{ margin-bottom: clamp(28px, 6vw, 72px); }