/*
Theme Name: Platform ZA Venture Academy
Theme URI: https://platformzaventureacademy.co.za
Author: Platform ZA Venture Academy
Description: Custom institutional theme for Platform ZA Venture Academy, built from the approved homepage design prototype.
Version: 1.0.0
Text Domain: pzva
*/

:root{
  --ivory: #F4F1EA;
  --ivory-deep: #EAE5D8;
  --paper: #FBFAF6;
  --forest: #1E3B32;
  --forest-deep: #142A23;
  --brass: #B08A35;
  --brass-light: #D9BC73;
  --ink: #15231E;
  --ink-soft: #46524D;
  --ochre: #7A5E1C;
  --line: #CFC8B6;
  --line-soft: #D9D3C4;
  --footer-line: #3F5C51;
  --footer-text: #C9C4B6;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

body{
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }
a:hover{ opacity: .82; }

img{ max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4{
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.1;
  margin: 0;
}

.wrap{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 80px;
}
@media (max-width: 900px){
  .wrap{ padding: 0 24px; }
}

.eyebrow{
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--ochre);
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.btn-primary{ background: var(--forest); color: var(--ivory); }
.btn-primary:hover{ opacity: .92; }
.btn-outline{ border-color: var(--forest); color: var(--forest); background: transparent; }
.btn-outline:hover{ background: rgba(30,59,50,0.06); opacity: 1; }

/* ---------- Endorsement strip ---------- */
.pzva-endorsement{
  background: var(--forest);
  color: var(--ivory);
}
.pzva-endorsement .wrap{
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pzva-endorsement span, .pzva-endorsement a{
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #E8E3D6;
}

/* ---------- Masthead ---------- */
.pzva-masthead .wrap{
  padding: 36px 80px 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 900px){
  .pzva-masthead .wrap{ padding: 24px; align-items: flex-start; }
}
.pzva-masthead-name{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.1em;
  line-height: 1.15;
  color: var(--forest);
  margin: 0 0 10px;
}
.pzva-masthead-tagline{
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--ochre);
}

/* ---------- Primary nav ---------- */
.pzva-nav{
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pzva-nav .wrap{
  display: flex;
  gap: 40px;
  height: 56px;
  align-items: center;
  flex-wrap: wrap;
}
.pzva-nav a{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.pzva-nav-toggle{
  display: none;
  position: absolute;
  top: 4px;
  right: 24px;
  width: 48px;
  height: 48px;
  background: var(--ivory);
  border: 1.5px solid var(--forest);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  z-index: 2;
}
.pzva-nav-toggle span{ display: block; width: 20px; height: 2px; background: var(--forest); }
@media (max-width: 900px){
  .pzva-nav .wrap{ display: none; }
  .pzva-nav-toggle{ display: flex; }
  .pzva-nav.is-open .wrap{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: 16px 24px 24px;
    gap: 4px;
  }
  .pzva-nav.is-open .wrap a{ padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line-soft); }
}

/* ---------- Generic section rhythm ---------- */
.section{ padding: 104px 0; }
.section-tint{ background: var(--ivory-deep); }
.section-forest{ background: var(--forest); color: var(--ivory); }
.section-forest .eyebrow{ color: var(--brass-light); }
.section-forest h2{ color: var(--ivory); }
.section-forest p{ color: var(--footer-text); }
@media (max-width: 900px){
  .section{ padding: 56px 0; }
}

.section-head{
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  margin-bottom: 56px;
}
.section-head h2{
  font-size: clamp(32px, 4vw, 50px);
  line-height: 1.08;
}

/* ---------- Pillar / card grid ---------- */
.pzva-grid-4{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 900px){
  .pzva-grid-4{ grid-template-columns: 1fr; }
}
.pzva-card{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pzva-card-num{ font-family: var(--font-serif); font-size: 40px; color: var(--ochre); }
.pzva-card-title{ font-family: var(--font-serif); font-weight: 600; font-size: 28px; letter-spacing: 0.03em; }
.pzva-card-sub{ font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--ink-soft); }
.pzva-card-link{
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--forest);
  border-bottom: 1.5px solid var(--brass);
  align-self: flex-start;
  padding-bottom: 2px;
}

/* ---------- Two-column split (About, Admissions) ---------- */
.pzva-split{
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.pzva-split-label{
  flex: 1 1 380px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.pzva-split-content{
  flex: 1.4 1 420px;
  min-width: 0;
}
.pzva-split-row{
  display: flex;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.pzva-split-row:last-child{ border-bottom: 1px solid var(--line); }
.pzva-split-row .num{
  flex: 0 0 40px;
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ochre);
}
.pzva-split-row .body{ flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
.pzva-split-row .body-title{ font-family: var(--font-serif); font-size: 24px; }
.pzva-split-row .body-text{ font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.section-forest .pzva-split-row{ border-top-color: var(--footer-line); }
.section-forest .pzva-split-row:last-child{ border-bottom-color: var(--footer-line); }
.section-forest .pzva-split-row .num{ color: var(--brass-light); }
.section-forest .pzva-split-row .body-title{ color: var(--ivory); }
.section-forest .pzva-split-row .body-text{ color: var(--footer-text); }

/* ---------- Hero split (asymmetric, image/mosaic on the right) ---------- */
.pzva-hero-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}
.pzva-hero-grid > .pzva-hero-main{ flex: 1.4 1 480px; display: flex; flex-direction: column; gap: 32px; }
.pzva-hero-grid > .pzva-hero-mosaic{ flex: 1 1 340px; display: flex; flex-direction: column; gap: 10px; }

/* ---------- Section header with a supporting side note ---------- */
.pzva-head-split{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding-bottom: 56px;
}
.pzva-head-split > .main{ flex: 1.2 1 420px; display: flex; flex-direction: column; gap: 20px; }
.pzva-head-split > .side{ flex: 1 1 320px; align-self: flex-end; font-size: 18px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* ---------- Hero mosaic (LEAD + 4-up pillar strip) ---------- */
.pzva-mosaic-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.pzva-mosaic-cell{
  min-height: 220px;
  min-width: 0;
  background: var(--forest);
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.pzva-mosaic-cell .num{
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--brass-light);
}
.pzva-mosaic-cell .label{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  color: var(--ivory);
  overflow-wrap: break-word;
}
@media (max-width: 480px){
  .pzva-mosaic-cell{ min-height: 160px; padding: 10px 6px; }
  .pzva-mosaic-cell .num{ font-size: 22px; }
  .pzva-mosaic-cell .label{ font-size: 9.5px; letter-spacing: 0.04em; }
}

/* ---------- Three-up card grid (Ways to Learn, Library) ---------- */
.pzva-grid-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pzva-grid-gap, 24px);
}

/* ---------- Universal fix: grid/flex children must be allowed to
   shrink below their content's natural width, or they overflow into
   their siblings instead of wrapping text or stacking on narrow
   screens. This is the root cause behind every "overlapping text on
   mobile" symptom in this theme. ---------- */
.pzva-hero-grid > *,
.pzva-head-split > *,
.pzva-split > *,
.pzva-grid-3 > *,
.pzva-grid-4 > *,
.pzva-mosaic-grid > * {
  min-width: 0;
}

/* ---------- Force single-column stacking below tablet width, rather
   than relying on flex-wrap's shrink-before-wrap behaviour, which is
   unreliable with long headings at large type sizes. ---------- */
@media (max-width: 760px){
  .pzva-hero-grid,
  .pzva-head-split,
  .pzva-split{
    flex-direction: column;
  }
  .pzva-hero-grid > .pzva-hero-main,
  .pzva-hero-grid > .pzva-hero-mosaic,
  .pzva-head-split > .main,
  .pzva-head-split > .side,
  .pzva-split > .pzva-split-label,
  .pzva-split > .pzva-split-content{
    flex: 1 1 auto;
    width: 100%;
  }
  .pzva-head-split{ padding-bottom: 40px; }
  .pzva-head-split > .side{ align-self: flex-start; }
  .pzva-split{ gap: 32px; }
  .pzva-grid-3{ grid-template-columns: 1fr; }
  .pzva-mosaic-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Footer ---------- */
.pzva-footer{
  background: var(--forest-deep);
  color: var(--footer-text);
  padding: 88px 0 48px;
}
.pzva-footer-top{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 64px;
}
.pzva-footer-brand{ grid-column: span 5; display: flex; flex-direction: column; gap: 14px; }
.pzva-footer-brand-name{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: var(--ivory);
}
.pzva-footer-col{ grid-column: span 2; display: flex; flex-direction: column; gap: 12px; }
.pzva-footer-col-head{ font-size: 12px; font-weight: 600; letter-spacing: 0.2em; color: var(--brass-light); margin-bottom: 4px; }
.pzva-footer-col a{ font-size: 15px; color: var(--ivory); }
@media (max-width: 900px){
  .pzva-footer-top{ grid-template-columns: 1fr 1fr; }
  .pzva-footer-brand{ grid-column: span 2; }
}
.pzva-footer-legal{
  border-top: 1px solid var(--footer-line);
  padding-top: 24px;
  font-size: 12px;
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Simple content page (About, Contact, Legal, etc.) ---------- */
.pzva-page-hero{
  padding: 80px 0 48px;
  border-bottom: 1px solid var(--line);
}
.pzva-page-hero h1{
  font-size: clamp(32px, 5vw, 54px);
  color: var(--forest);
  margin-top: 12px;
}
.pzva-page-body{
  padding: 56px 0;
  max-width: 800px;
}
.pzva-page-body p{ margin: 0 0 20px; font-size: 17px; line-height: 1.7; color: var(--ink-soft); }
.pzva-page-body h2{ font-size: 28px; color: var(--forest); margin: 40px 0 16px; }
.pzva-page-body h2:first-child{ margin-top: 0; }