/*
Theme Name: UniMerse
Theme URI: https://unimerse.co.uk
Author: UniMerse
Description: Launch theme for UniMerse — Home, Platform, and Register interest, built from the UniMerse brand framework. Three-page structure with an Education-led hero, vertical cards for Education/Heritage/Professional, a platform explainer with a real example mission, and a working vertical-segmented register-interest form.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicense
Text Domain: unimerse
*/

:root{
  --ink:#0b1c24;
  --ink-soft:#2c4450;
  --ground:#f4f7f6;
  --surface:#e7eeec;
  --surface-2:#dbe6e3;
  --line:#c6d4d1;
  --teal:#127e96;
  --teal-strong:#0c5c6f;
  --deep:#0f3b52;
  --ochre:#c96a2e;
  --ochre-soft:#f0dcc9;
  --focus:#127e96;
  --shadow: 0 1px 2px rgba(11,28,36,.06), 0 8px 24px -12px rgba(11,28,36,.18);
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef4f3;
    --ink-soft:#aec3c5;
    --ground:#0a161c;
    --surface:#0f242b;
    --surface-2:#152e35;
    --line:#254047;
    --teal:#49c6dd;
    --teal-strong:#7fdbec;
    --deep:#123444;
    --ochre:#eb9b5a;
    --ochre-soft:#3a2c1c;
    --focus:#49c6dd;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px -12px rgba(0,0,0,.55);
  }
  .badge-founder{ color:#f3c495; }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Public Sans', ui-sans-serif, system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--teal); color:#fff;}
a{color:inherit;}
h1,h2,h3{font-family:'Archivo', ui-sans-serif, sans-serif; text-wrap:balance; margin:0; letter-spacing:-.01em;}
p{margin:0;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
img,svg{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(20px,4vw,48px);}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--focus); outline-offset:3px; border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

/* ---------- site nav ---------- */
.skip-link{position:absolute; left:-999px; top:0; background:var(--deep); color:#fff; padding:10px 16px; z-index:100;}
.skip-link:focus{left:10px; top:10px;}

.sitenav{position:sticky; top:0; z-index:40; background:color-mix(in srgb, #f4f7f6 92%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid #c6d4d1;}
.sitenav .wrap{display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:20px;}
.brand{display:flex; align-items:center; gap:10px; font-family:'Archivo'; font-weight:700; font-size:19px; letter-spacing:-.01em; text-decoration:none;}
.brand .mark{width:30px; height:30px; flex:none;}
.brand .uni{color:#0c5c6f;}
.brand.custom-logo-wrap img{height:42.5px; width:auto; max-width:220px; object-fit:contain;}
.brand .custom-logo-link{display:flex; align-items:center;}
.pagenav{display:flex; gap:4px; background:#e7eeec; border:1px solid #c6d4d1; border-radius:999px; padding:4px;}
.pagenav a{
  font-family:'Archivo'; font-weight:600; font-size:13.5px; letter-spacing:.01em; color:#2c4450;
  padding:8px 16px; border-radius:999px; text-decoration:none; transition:background .15s, color .15s; display:inline-block;
}
.pagenav a.is-active{background:#0f3b52; color:#eaf6f8;}
.pagenav a:not(.is-active):hover{color:#0b1c24; background:#dbe6e3;}
.nav-cta{font-family:'Archivo'; font-weight:700; font-size:13.5px; background:#c96a2e; color:#2a1305; padding:9px 18px; border-radius:999px; text-decoration:none; white-space:nowrap;}
.nav-cta:hover{background:#dd7c3c;}
@media (max-width: 760px){ .pagenav{order:3; width:100%; justify-content:center;} }

/* ---------- generic blocks ---------- */
section{padding-block:clamp(56px,9vw,108px);}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono'; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-strong);}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--ochre); display:inline-block;}
.lede{font-size:clamp(17px,1.6vw,19px); color:var(--ink-soft); max-width:60ch;}

.btn{display:inline-flex; align-items:center; gap:8px; font-family:'Archivo'; font-weight:700; font-size:15px; padding:13px 26px; border-radius:8px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:transform .15s ease, background .15s ease;}
.btn-primary{background:var(--ochre); color:#2a1305;}
.btn-primary:hover{transform:translateY(-1px); background:#dd7c3c;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-strong);}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; background:linear-gradient(180deg, var(--ground) 0%, var(--surface) 100%); border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;} }
.hero h1{font-size:clamp(34px,4.6vw,58px); line-height:1.06; margin-block:18px 20px;}
.hero-ctas{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}
.hero-figure{position:relative; aspect-ratio:1/1; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:var(--deep); box-shadow:var(--shadow);}
.dissolve{position:absolute; inset:0;}
.dissolve svg{position:absolute; inset:0; width:100%; height:100%;}
.cloud-layer{
  position:absolute; inset:0;
  background-image:radial-gradient(circle, var(--teal-strong) 1.4px, transparent 1.6px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(115deg, transparent 0%, transparent 38%, black 66%, black 100%);
  mask-image:linear-gradient(115deg, transparent 0%, transparent 38%, black 66%, black 100%);
  opacity:.85;
}
.hero-figure .caption{position:absolute; left:16px; bottom:14px; right:16px; display:flex; justify-content:space-between; font-family:'IBM Plex Mono'; font-size:11px; color:#cfeaf0; letter-spacing:.03em;}

.trust{border-bottom:1px solid var(--line); background:var(--surface);}
.trust .wrap{padding-block:22px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; font-size:14px; color:var(--ink-soft);}
.trust strong{color:var(--ink); font-family:'Archivo'; font-weight:700;}

/* ---------- vertical cards ---------- */
.verticals-head{max-width:62ch; margin-bottom:40px;}
.verticals-head h2{font-size:clamp(26px,3vw,36px); margin-top:10px;}
.vgrid{display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:20px;}
@media (max-width:900px){ .vgrid{grid-template-columns:1fr;} }
.vcard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:28px 26px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow);}
.vcard.lead{background:var(--deep); border-color:var(--deep); color:#eef7f8;}
.vcard.lead .lede{color:#bfe0e6;}
.vtag{font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-strong);}
.vcard.lead .vtag{color:#7fdbec;}
.vcard h3{font-size:19px; margin:2px 0 2px;}
.vcampaign{font-family:'Archivo'; font-style:italic; font-weight:600; font-size:15px; color:var(--teal-strong);}
.vcard.lead .vcampaign{color:#8fe3f2;}
.vcard .lede{font-size:14.5px; color:var(--ink-soft); flex:1;}
.vlink{font-family:'Archivo'; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:6px; text-decoration:none; color:var(--teal-strong);}
.vcard.lead .vlink{color:#eaf6f8;}
.vlink:hover{text-decoration:underline;}
.badge-founder{align-self:flex-start; font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.04em; background:var(--ochre-soft); color:#7a3d13; padding:3px 9px; border-radius:20px;}

/* ---------- how it works ---------- */
.steps{background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:16px; overflow:hidden;}
@media (max-width:820px){ .steps-grid{grid-template-columns:1fr;} }
.step{background:var(--ground); padding:30px 26px;}
.step .num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ochre);}
.step h3{font-size:18px; margin:10px 0 8px;}
.step p{font-size:14.5px; color:var(--ink-soft);}

/* ---------- values ---------- */
.values-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:900px){ .values-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .values-grid{grid-template-columns:1fr;} }
.value h3{font-size:17px; margin-bottom:8px;}
.value p{font-size:14px; color:var(--ink-soft);}
.value .num{font-family:'IBM Plex Mono'; font-size:12px; color:var(--teal-strong); display:block; margin-bottom:10px;}

/* ---------- backers ---------- */
.backers{border-top:1px solid var(--line); background:var(--deep);}
.backers .wrap{padding-block:26px;}
.backers .blabel{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#7fa8b4; display:block; margin-bottom:18px;}
.backers .brow{display:flex; gap:clamp(20px,3vw,40px); flex-wrap:wrap;}
.backer{display:flex; align-items:flex-start; gap:12px; flex:1 1 240px; max-width:320px; min-width:0;}
.backer .blogo{flex:none; width:56px; height:56px; border-radius:4px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.backer .blogo img{width:100%; height:100%; object-fit:cover;}
.backer .btext{display:flex; flex-direction:column; gap:3px; padding-top:2px; min-width:0;}
.backer .bname{font-family:'Archivo'; font-weight:700; font-size:14.5px; color:#eaf6f8;}
.backer .bdesc{font-size:12.5px; color:#9fc2c9; line-height:1.5;}

/* ---------- footer main (brand / legal / contact) ---------- */
.footer-main{border-top:1px solid var(--line); background:var(--deep);}
.footer-main .wrap{padding-block:40px; display:flex; gap:clamp(30px,6vw,60px); flex-wrap:wrap;}

.col-brand{flex:1 1 240px; max-width:320px;}
.fbrand{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.fbrand img{width:32px; height:32px; flex:none;}
.fbrand span{font-family:'Archivo'; font-weight:700; font-size:18px; color:#eaf6f8;}
.fbrand .uni{color:var(--teal-strong);}
.ftagline{font-family:'Archivo'; font-style:italic; font-weight:600; color:#bcdce2; font-size:13.5px; line-height:1.5; max-width:26ch;}

.col-legal, .col-contact{flex:0 0 190px;}
.fheading{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-strong); margin-bottom:14px; display:block;}
.flinks{list-style:none; display:flex; flex-direction:column; gap:11px;}
.flinks a{font-family:'Archivo'; color:#dceef1; text-decoration:none; font-size:13.5px; font-weight:600; line-height:1.4;}
.flinks a:hover{text-decoration:underline;}

.fcontact-line{font-size:12.5px; color:#9fc2c9; line-height:1.6; margin-bottom:14px; max-width:24ch;}
.fcontact-btn{display:inline-block; font-family:'Archivo'; background:var(--ochre); color:#2a1305; font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; text-decoration:none; white-space:nowrap;}
.fcontact-btn:hover{background:#dd7c3c;}

/* ---------- footer credit bar ---------- */
.site-footer{display:block; border-top:1px solid var(--line); background:var(--deep); color:#8fb3ba;}
.site-footer .wrap{padding-block:20px; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; font-size:12.5px;}
.site-footer a{text-decoration:none; opacity:.85;}
.site-footer a:hover{opacity:1; text-decoration:underline;}

/* ---------- platform page ---------- */
.page-head{padding-top:64px;}
.page-head h1{font-size:clamp(30px,4vw,46px); margin-top:12px; max-width:22ch;}

.model{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:18px; overflow:hidden; margin-top:44px;}
@media (max-width:860px){ .model{grid-template-columns:1fr;} }
.model .cell{background:var(--ground); padding:32px 28px;}
.model .cell.mid{background:var(--surface);}
.model .cell h3{font-size:20px; margin:12px 0 10px;}
.model .cell p{font-size:14.5px; color:var(--ink-soft);}
.model .tag{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ochre);}

.mission{margin-top:56px; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface);}
.mission-head{background:var(--deep); color:#eaf6f8; padding:22px 28px; display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:10px;}
.mission-head .arc{font-family:'IBM Plex Mono'; font-size:12px; color:#9fe0ec; letter-spacing:.05em;}
.mission-head .arc b{color:#eaf6f8; font-weight:500;}
.mission-body{padding:28px;}
.mission-body h3{font-size:20px; margin-bottom:4px;}
.mission-sub{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-soft); margin-bottom:20px; display:block;}
.mission-quote{font-size:15px; color:var(--ink-soft); border-left:3px solid var(--teal); padding-left:16px; margin-bottom:20px;}
.challenge{background:var(--ground); border:1px solid var(--line); border-radius:12px; padding:18px 20px;}
.challenge .clabel{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ochre); text-transform:uppercase; letter-spacing:.05em;}
.challenge p{margin-top:8px; font-size:14.5px;}
.readout{display:flex; gap:24px; margin-top:16px; flex-wrap:wrap;}
.readout div{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-soft);}
.readout b{color:var(--ink); font-weight:500;}

.posn{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:50px;}
@media (max-width:760px){ .posn{grid-template-columns:1fr;} }
.posn .col{border-radius:16px; padding:26px; border:1px solid var(--line);}
.posn .is{background:var(--surface);}
.posn h4{font-family:'IBM Plex Mono'; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--teal-strong); margin-bottom:14px;}
.posn .isnot h4{color:var(--ochre);}
.posn li{font-size:14.5px; color:var(--ink-soft); margin-bottom:10px; list-style:none;}
.posn ul{margin:0; padding:0;}

/* ---------- register page ---------- */
.register-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,60px); align-items:start;}
@media (max-width:900px){ .register-grid{grid-template-columns:1fr;} }
.vselect{display:flex; flex-direction:column; gap:10px;}
.vopt{text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:16px 18px; cursor:pointer; font-family:inherit; color:var(--ink); width:100%;}
.vopt .vtag{margin-bottom:4px; display:block;}
.vopt h4{font-family:'Archivo'; font-size:16px; margin:0 0 2px;}
.vopt p{font-size:13px; color:var(--ink-soft);}
.vopt[aria-pressed="true"]{border-color:var(--teal); background:color-mix(in srgb, var(--teal) 10%, var(--surface));}

.founder-box{margin-top:22px; padding:16px 18px; border-radius:12px; background:var(--ochre-soft); font-size:13.5px;}
.founder-box b{font-family:'Archivo';}

form.register-form{display:flex; flex-direction:column; gap:16px; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,3vw,32px); box-shadow:var(--shadow);}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-family:'Archivo'; font-weight:600; font-size:13px;}
.field .req{color:var(--ochre);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .row2{grid-template-columns:1fr;} }
input, textarea, select{font:inherit; font-family:'Public Sans'; font-size:15px; padding:11px 13px; border-radius:8px; border:1px solid var(--line); background:var(--ground); color:var(--ink);}
textarea{resize:vertical; min-height:96px;}
.selected-line{font-family:'IBM Plex Mono'; font-size:12px; color:var(--ink-soft);}
.selected-line b{color:var(--teal-strong);}
.hp-field{position:absolute; left:-9999px; top:-9999px;}
.form-notice{font-size:13.5px; padding:12px 14px; border-radius:8px; margin-bottom:6px;}
.form-notice.success{background:var(--ochre-soft); border:1px solid var(--ochre);}
.form-notice.error{background:var(--surface-2); border:1px dashed var(--line);}