/*
Theme Name: DepEd Zambales Assessment ePortal
Theme URI: https://marinerslink.com/eportal
Author: MarinersLink
Author URI: https://marinerslink.com
Description: Public portal theme for the Schools Division of Zambales Assessment ePortal. Presents the division's landing site and hosts the ePlan / eAssess / eData plugin same-origin via the [eplan_app] shortcode. Classic PHP templates; institutional "official document" design.
Version: 2.14.0
Requires at least: 6.2
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zeportal
*/

/* ============================================================
   Design tokens — Schools Division of Zambales ePortal
   Civic / official-document identity. All UI classes: ze-*
   ============================================================ */
:root{
  --ink:#0A2540;        /* deep navy — primary text & official strips */
  --gov:#0B3D91;        /* institutional DepEd blue — links, accents  */
  --gov-700:#092E6E;
  --gov-050:#EAF0FB;
  /* The ground the office letterhead is printed on. Lighter than --ink, so
     the masthead reads as the letterhead rather than as a dark bar. */
  --gov-head:#04508C;
  --gold:#F4B31C;       /* Philippine flag gold — the single warm accent */
  --gold-ink:#7A5B00;
  --sea:#0E5F86;        /* Zambales coast — secondary (eAssess side)   */
  --paper:#F5F8FC;      /* cool institutional off-white background      */
  --surface:#FFFFFF;
  --line:#D9E2F0;       /* cool hairline                               */
  --muted:#586A83;      /* secondary text                             */
  --ok:#1E874B;         /* status tick                                */
  --radius:14px;
  --radius-sm:9px;
  --maxw:1140px;
  --gutter:22px;
  /* On a phone the gutter goes UP, not down.
     The instinct on a narrow screen is to reclaim width by trimming the
     margin, and it is the wrong way round: 22px is comfortable beside a
     1200px column and is nearly the edge of a 400px one. Text with no room
     to its left reads as though it is falling off the page. */
  --shadow-sm:0 1px 2px rgba(10,37,64,.06);
  --shadow:0 1px 2px rgba(10,37,64,.05), 0 10px 34px rgba(10,37,64,.09);
  --shadow-lg:0 24px 60px rgba(9,46,110,.16);
  --font-display:"Libre Franklin","Franklin Gothic Medium","Segoe UI",system-ui,sans-serif;
  /* A letterhead is set in a serif. A system stack: three families are already
     loaded and a fourth would be page weight spent on four lines of text. */
  --font-serif:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --font-body:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gov);text-decoration:none}
a:hover{color:var(--gov-700)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.1;margin:0 0 .5em;letter-spacing:-.012em;color:var(--ink)}
p{margin:0 0 1rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.ze-skip{position:absolute;left:-9999px}
.ze-skip:focus{left:12px;top:12px;z-index:1000;background:var(--surface);padding:10px 14px;border-radius:8px;box-shadow:var(--shadow)}

/* ---------- layout helpers ---------- */
/* The gutter has a floor. Text running to the very edge of a phone screen is
   the commonest way a page reads as broken, and a safe-area inset of zero
   — which is what a phone without a notch reports — must not be allowed to
   replace it. */
.ze-wrap{max-width:var(--maxw);margin:0 auto;
  padding-left:max(var(--gutter), env(safe-area-inset-left));
  padding-right:max(var(--gutter), env(safe-area-inset-right))}

/* Wider margins as the screen narrows, and a ceiling on line length so a
   paragraph does not run the full width of a tablet either. */
@media (max-width:900px){ :root{--gutter:26px} }
@media (max-width:560px){ :root{--gutter:26px} }
/* Only at the very narrowest does it come back a little, and only because
   below this the text column itself starts to suffer more than the margin
   helps. Still wider than the desktop value. */
@media (max-width:380px){ :root{--gutter:24px} }

/* Around 60 characters is where a line stops being easy to come back to.
   Without this the lede runs edge to edge and the eye loses its place on
   the return sweep, which is most of what "hard to read" means. */
.ze-hero__lede,.ze-hero p,.ze-sec p{max-width:62ch}
.ze-eyebrow{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gov);margin:0 0 14px;display:inline-flex;gap:9px;align-items:center;
}
.ze-eyebrow::before{content:"";width:22px;height:2px;background:var(--gold);display:inline-block}
.ze-section{padding:76px 0}
.ze-section--tight{padding:56px 0}
.ze-lede{font-size:19px;color:var(--muted);max-width:60ch}

/* ---------- buttons ---------- */
.ze-btn{
  display:inline-flex;align-items:center;gap:.55em;font-family:var(--font-display);font-weight:600;
  font-size:16px;line-height:1;padding:14px 22px;border-radius:11px;border:1px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;
}
.ze-btn svg{width:17px;height:17px}
.ze-btn--primary{background:var(--gov);color:#fff;box-shadow:0 8px 20px rgba(11,61,145,.26)}
.ze-btn--primary:hover{background:var(--gov-700);color:#fff;transform:translateY(-1px);box-shadow:0 12px 26px rgba(11,61,145,.32)}
.ze-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.ze-btn--ghost:hover{border-color:var(--gov);color:var(--gov);background:#fff}
.ze-btn--gold{background:var(--gold);color:#2a2000;box-shadow:0 8px 20px rgba(244,179,28,.3)}
.ze-btn--gold:hover{transform:translateY(-1px);color:#2a2000;filter:brightness(1.03)}
.ze-btn--sm{padding:10px 16px;font-size:14.5px;border-radius:9px}

/* ============================================================
   Utility bar (Republic of the Philippines convention)
   ============================================================ */
.ze-gov{background:var(--ink);color:#cfe0f7}
.ze-gov__in{display:flex;align-items:center;gap:12px;min-height:38px;font-size:12.5px;letter-spacing:.02em}
.ze-gov__seal{width:18px;height:18px;border-radius:50%;background:
  radial-gradient(circle at 50% 42%,var(--gold) 0 34%,transparent 35%),var(--gov);
  border:1.5px solid var(--gold);flex:0 0 auto}
.ze-gov__txt{opacity:.92}
.ze-gov__txt b{color:#fff;font-weight:600}
.ze-gov__spacer{margin-left:auto}
.ze-gov__link{color:#bcd3f5;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.ze-gov__link:hover{color:#fff}

/* ============================================================
   Site header + navigation
   ============================================================ */
/* The masthead carries the office letterhead, so it takes the letterhead's
   own ground rather than a translucent white. */

/* ---------- the header's own two actions ----------
   Stated for the blue they sit on. One secondary, one primary, and the
   primary plainly the thing to press: two buttons of equal weight split
   the eye. */
.ze-head__cta{display:flex;align-items:center;gap:10px}
.ze-head__cta .ze-btn--ghost{
  background:transparent;border-color:rgba(255,255,255,.45);color:#fff;font-weight:600;white-space:nowrap}
.ze-head__cta .ze-btn--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}
.ze-head__cta .ze-btn--primary{
  background:#fff;border-color:#fff;color:var(--gov-head);font-weight:700;white-space:nowrap;box-shadow:none}
.ze-head__cta .ze-btn--primary:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ze-burger{color:#fff;border-color:rgba(255,255,255,.55)}

.ze-head{position:sticky;top:0;z-index:60;background:var(--gov-head);border-bottom:0}
.ze-head__in{display:flex;align-items:center;gap:20px;min-height:72px;min-width:0}
/* Neither of these may shrink.
   min-width:0 on the nav was meant to let it give way gracefully. It cannot:
   its links are white-space:nowrap, so a narrower box does not reflow them, it
   just lets them spill across the buttons to its right — which is the overlap
   this caused. It also made the fit test in nav.js lie, because the nav then
   measured as its squeezed box rather than its real contents, so the row
   "fitted" at every width and never collapsed.

   Both keep their natural width. The row either fits or it collapses to the
   drawer; there is no in-between state worth having. */
.ze-head__cta{flex:0 0 auto}
.ze-nav{flex:0 0 auto}
.ze-brand{display:flex;align-items:center;gap:18px;color:#fff;min-width:0;flex:0 0 auto;text-decoration:none}
.ze-brand:hover{color:var(--ink)}
.ze-seal{width:44px;height:44px;flex:0 0 auto;border:0;border-radius:0;
  background:url(assets/img/sdoz-seal-128.png) center/contain no-repeat;
  /* The seal is the mark; the placeholder word that used to sit inside it is
     gone from the markup, and this keeps any other from surfacing. */
  font-size:0;line-height:0;color:transparent;box-shadow:none}
/* Any image inside the brand lockup is capped, whatever class it arrives with —
   a logo set in the Customizer used to render at its full pixel size. */
/* A logo set in the Customizer is capped; the seal is not, because the seal
   IS the lockup rather than an image beside it. Stated here rather than
   overridden later — an override on the class alone loses to this selector
   and the size silently does nothing. */
.ze-logo,.ze-brand .custom-logo,.ze-foot__brand img{
  height:38px;width:auto;max-width:220px;flex:0 0 auto;display:block;object-fit:contain}
.ze-brand__seal{width:92px;height:92px;flex:0 0 auto;display:block;object-fit:contain}
.ze-brand__txt{min-width:0}
.ze-foot__brand img,.ze-foot__brand .ze-logo{height:30px;max-width:180px}
@media(max-width:600px){.ze-logo,.ze-brand .custom-logo{height:32px;max-width:150px}}
.ze-brand__txt{display:flex;flex-direction:column;line-height:1.05}
/* Whatever the width, a line that will not fit ends with an ellipsis rather
   than at the edge of its box. A cut word reads as a broken page. */
.ze-brand__rep span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* On a government site the office is the name, so the division leads and the
   product line is not in the masthead at all. */
.ze-brand__rep{display:flex;flex-direction:column;font-family:var(--font-serif);
  font-size:15px;line-height:1.32;color:#fff;padding-bottom:5px;
  border-bottom:1.5px solid rgba(255,255,255,.92)}
.ze-brand__rep span{display:block}
.ze-brand__k{font-family:var(--font-serif);font-size:25px;font-weight:400;
  font-variant:small-caps;text-transform:lowercase;letter-spacing:.012em;
  line-height:1.15;color:#fff;margin-top:5px;text-align:left}
/* A letterhead names the office, not the product. */
.ze-brand__n{display:none}
.ze-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.ze-nav a,.ze-nav li{white-space:nowrap}
.ze-head__in{gap:18px}
.ze-nav ul{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
.ze-nav a{
  display:block;padding:9px 13px;border-radius:6px;color:#E4EEF8;font-weight:500;font-size:14.5px;
  font-family:var(--font-display);transition:background .15s,color .15s;background:transparent;
}
/* On a coloured ground a hover belongs to the ground — more light in the
   same blue, not a different colour laid over it. The current page is marked
   by the gold rule alone; a fill plus a rule is two marks doing one job. */
.ze-nav a:hover{background:rgba(255,255,255,.13);color:#fff}
/* ---------- submenus ----------
   The theme had no rule for these at all, so a menu with children rendered
   its child list inline: visible on the page, unpositioned, pushing the row
   apart. A menu that cannot hold a submenu quietly limits what the division
   can put in its navigation, which is not a decision a stylesheet should be
   making. */
.ze-nav li{position:relative}
.ze-nav .sub-menu{
  /* `.ze-nav ul` lays items in a row, and a submenu is a ul inside .ze-nav —
     so without this it inherited the row and the children came out sideways.
     Stated rather than assumed: setting position and background on something
     says nothing about how it stacks. */
  display:block;
  position:absolute;top:100%;left:0;z-index:70;
  min-width:220px;margin:0;padding:6px 0;
  list-style:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(10,37,64,.14);
  /* Hidden without display:none, so a screen reader still reaches it and the
     transition has something to animate. */
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.ze-nav li:hover>.sub-menu,
.ze-nav li:focus-within>.sub-menu{opacity:1;visibility:visible;transform:none}

/* On the blue masthead the parent is white; inside the panel it is not. */
.ze-nav .sub-menu a{
  display:block;padding:9px 16px;border-radius:0;
  color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;
}
.ze-nav .sub-menu a:hover,.ze-nav .sub-menu a:focus-visible{
  background:var(--gov-050);color:var(--gov);
}

/* A parent says it has children. Without this the only way to find out is to
   hover, which a touch screen cannot do. */
.ze-nav .menu-item-has-children>a::after{
  content:"";display:inline-block;margin-left:7px;
  width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);
}

@media (max-width:900px){
  /* In the drawer a submenu is not a dropdown: it is simply the next items,
     indented. Hovering does not exist here. */
  .ze-nav.is-open .sub-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;border-left:2px solid var(--line);
    border-radius:0;margin:0 0 4px 20px;padding:0;min-width:0;background:transparent;
  }
  .ze-nav.is-open .sub-menu a{padding:11px 20px;font-size:15px}
  .ze-nav.is-open .menu-item-has-children>a::after{display:none}
}

/* The gold rule marks the page somebody is on.

   WordPress also marks a custom link whose target is the current page — so
   three anchors to sections of the home page all claimed to be current at
   once, and the rule stopped meaning "you are here". An anchor to part of a
   page is not a page. */
.ze-nav .menu-item-type-custom>a{box-shadow:none}
.ze-nav .current-menu-item>a,.ze-nav .current_page_item>a{
  background:transparent;color:#fff;font-weight:650;box-shadow:inset 0 -2px 0 var(--gold)}
.ze-head__cta{display:flex;align-items:center;gap:10px;margin-left:6px}
.ze-burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;width:44px;height:42px;cursor:pointer;color:var(--ink)}
.ze-burger svg{width:22px;height:22px;margin:auto}

/* ============================================================
   Hero
   ============================================================ */
.ze-hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 460px at 88% -8%,rgba(11,61,145,.10),transparent 60%),
  linear-gradient(180deg,#fff 0%,var(--paper) 100%)}
.ze-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.ze-hero__in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding:70px 0 84px}
.ze-hero h1{font-size:clamp(34px,4.4vw,54px);font-weight:800;letter-spacing:-.02em;
  margin-bottom:18px;color:var(--ink)}
.ze-hero h1 .ze-u{color:var(--gov);position:relative;white-space:nowrap}
.ze-hero h1 .ze-u::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.14em;background:var(--gold);opacity:.55;border-radius:2px}
.ze-hero__lede{font-size:20px;color:var(--muted);max-width:52ch;margin-bottom:26px}
.ze-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.ze-hero__trust{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.ze-hero__trust .ze-dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* ---------- SIGNATURE: official Learning & Assessment Record ---------- */
.ze-record{
  margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);overflow:hidden;position:relative;
}
.ze-record::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold)}
.ze-record__head{display:flex;align-items:center;gap:11px;padding:15px 20px 15px 24px;background:var(--ink);color:#fff}
.ze-record__dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:0 0 auto;box-shadow:0 0 0 3px rgba(244,179,28,.25)}
.ze-record__title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.01em}
.ze-record__ref{margin-left:auto;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;color:#a9c4ee}
.ze-record__grid{padding:8px 8px 6px}
.ze-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 14px;padding:15px 16px;border-bottom:1px dashed var(--line);position:relative}
.ze-row:last-child{border-bottom:0}
.ze-row__label{grid-column:1;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--gov)}
.ze-row__val{grid-column:1;grid-row:2;font-size:15.5px;color:var(--ink);font-weight:500;margin-top:-6px}
.ze-terms{grid-column:1;grid-row:2;display:flex;gap:6px;margin-top:-2px}
.ze-terms b{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--gov-700);background:var(--gov-050);border:1px solid var(--line);border-radius:6px;padding:4px 9px;letter-spacing:.03em}
.ze-tick{grid-column:2;grid-row:1/3;width:26px;height:26px;border-radius:50%;background:rgba(30,135,75,.12);color:var(--ok);display:grid;place-items:center;font-size:14px;font-weight:800;
  transform:scale(.3);opacity:0;animation:ze-pop .5s cubic-bezier(.2,1.3,.4,1) forwards}
.ze-tick[data-i="1"]{animation-delay:.25s}
.ze-tick[data-i="2"]{animation-delay:.45s}
.ze-tick[data-i="3"]{animation-delay:.65s}
.ze-tick[data-i="4"]{animation-delay:.85s}
@keyframes ze-pop{to{transform:scale(1);opacity:1}}
.ze-record__foot{display:flex;align-items:center;justify-content:flex-end;padding:12px 20px;border-top:1px solid var(--line);background:linear-gradient(180deg,#fff,#fbfcfe)}
.ze-stamp{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1.5px solid var(--line);border-radius:7px;padding:6px 11px;transform:rotate(-1.5deg);opacity:.85}

/* ============================================================
   Modules (ePlan / eAssess)
   ============================================================ */
.ze-modules{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ze-modules__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:22px;margin-top:34px}
.ze-mod{border:1px solid var(--line);border-radius:var(--radius);padding:30px 30px 26px;background:linear-gradient(180deg,#fff,#fcfdff);position:relative;overflow:hidden;transition:box-shadow .18s,transform .18s,border-color .18s}
.ze-mod:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#c6d5ec}
.ze-mod__tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border-radius:999px;margin-bottom:16px}
.ze-mod--plan .ze-mod__tag{color:var(--gov);background:var(--gov-050)}
.ze-mod--assess .ze-mod__tag{color:#0b4d6e;background:#e6f1f7}
.ze-mod--data .ze-mod__tag{color:var(--gold-ink);background:#fff5db}
/* The three added when the front page caught up with the application. Each
   takes a hue of its own so the grid reads as six areas rather than three
   pairs, and all sit in the same family as the first three. */
.ze-mod--dev .ze-mod__tag{color:#1E874B;background:#E8F5EE}
.ze-mod--rbi .ze-mod__tag{color:#7A3E00;background:#FBEEE0}
.ze-mod--qa .ze-mod__tag{color:#5B3A8E;background:#F0EAF9}
.ze-mod__tag i{width:7px;height:7px;border-radius:50%;background:currentColor;font-style:normal}
.ze-mod h3{font-size:24px;margin-bottom:6px}
.ze-mod__sub{color:var(--muted);font-size:16px;margin-bottom:18px}
.ze-feats{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.ze-feats li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:#22364f}
.ze-feats svg{width:19px;height:19px;flex:0 0 auto;margin-top:1px;color:var(--ok)}
.ze-feats b{font-weight:600;color:var(--ink)}
.ze-mod__watermark{position:absolute;right:-14px;bottom:-22px;font-family:var(--font-display);font-weight:800;font-size:120px;line-height:1;color:var(--gov);opacity:.04;pointer-events:none;letter-spacing:-.04em}

/* ============================================================
   How it works (a genuine sequence → numbered)
   ============================================================ */
.ze-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;counter-reset:step}
.ze-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;position:relative}
.ze-step__n{font-family:var(--font-mono);font-weight:600;font-size:13px;color:var(--gold-ink);background:#fff5db;border:1px solid #f0e0a8;border-radius:8px;padding:4px 10px;display:inline-block;margin-bottom:14px;letter-spacing:.06em}
.ze-step h3{font-size:19px;margin-bottom:6px}
.ze-step p{margin:0;color:var(--muted);font-size:15.5px}
.ze-step__line{position:absolute;top:38px;right:-10px;width:20px;height:2px;background:var(--line)}
.ze-steps .ze-step:last-child .ze-step__line{display:none}

/* ============================================================
   Audiences
   ============================================================ */
.ze-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px}
.ze-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;transition:box-shadow .18s,transform .18s}
.ze-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.ze-card__ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:var(--gov-050);color:var(--gov);margin-bottom:15px}
.ze-card__ic svg{width:23px;height:23px}
.ze-card h3{font-size:19px;margin-bottom:6px}
.ze-card p{margin:0;color:var(--muted);font-size:15.5px}

/* ============================================================
   CTA band
   ============================================================ */
.ze-cta{background:
  radial-gradient(700px 300px at 15% 0%,rgba(244,179,28,.14),transparent 55%),
  linear-gradient(120deg,var(--gov-700),var(--ink));color:#fff}
.ze-cta__in{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:52px 0}
.ze-cta h2{color:#fff;font-size:clamp(26px,3vw,36px);margin-bottom:8px}
.ze-cta p{color:#c6d8f4;margin:0;max-width:52ch}
.ze-cta__act{display:flex;gap:12px;flex-wrap:wrap;flex:0 0 auto}

/* ============================================================
   Footer
   ============================================================ */
.ze-foot{background:var(--ink);color:#b7cbe8;font-size:14.5px}
.ze-foot__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;padding:52px 0 34px}
.ze-foot h4{color:#fff;font-size:13px;font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;font-weight:600}
.ze-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ze-foot a{color:#b7cbe8}
.ze-foot a:hover{color:#fff}
.ze-foot__brand{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.ze-foot__brand .ze-seal{width:40px;height:40px}
.ze-foot__brand b{color:#fff;font-family:var(--font-display);font-size:16px;font-weight:800}
.ze-foot__brand span{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#8fb0dd}
.ze-foot p{color:#93add4;max-width:42ch}
.ze-foot__bar{border-top:1px solid rgba(255,255,255,.09);padding:18px 0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;font-size:13px;color:#89a5cf}
.ze-foot__legal{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.ze-foot__legal a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ze-foot__legal a:hover{color:var(--gold)}

.ze-foot__bar .ze-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em}

/* ============================================================
   Generic page / posts / 404
   ============================================================ */
.ze-page{padding:60px 0}
.ze-page__head{max-width:var(--maxw);margin:0 auto 24px;padding:0 var(--gutter)}
.ze-page__head h1{font-size:clamp(28px,3.4vw,40px)}
.ze-prose{max-width:76ch}
.ze-prose h2{font-size:26px;margin-top:1.6em}
.ze-prose h3{font-size:20px;margin-top:1.3em}
.ze-prose ul,.ze-prose ol{padding-left:1.25em}
.ze-prose li{margin:.3em 0}
.ze-prose blockquote{border-left:3px solid var(--gold);margin:1.2em 0;padding:.2em 1em;color:var(--muted)}
.ze-post{border-bottom:1px solid var(--line);padding:26px 0}
.ze-post h2{font-size:23px;margin-bottom:6px}
.ze-post__meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-bottom:10px}
.ze-404{text-align:center;padding:90px 0}
.ze-404 .ze-big{font-family:var(--font-display);font-weight:800;font-size:96px;color:var(--gov);opacity:.14;letter-spacing:-.03em;line-height:1}

/* ============================================================
   Portal (hosts the [eplan_app] plugin) + activation notice
   ============================================================ */
.ze-portal{min-height:60vh;padding:26px 0 60px}
.ze-portal__in{max-width:1200px;margin:0 auto;padding:0 16px}
.ze-notice{max-width:640px;margin:60px auto;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow)}
.ze-notice h2{font-size:22px;margin-bottom:8px}
.ze-notice p{color:var(--muted)}
.ze-notice code{font-family:var(--font-mono);font-size:13px;background:var(--gov-050);color:var(--gov-700);padding:2px 7px;border-radius:6px}

/* ============================================================
   Reveal-on-load (progressive; JS adds .is-in). No-JS = visible.
   ============================================================ */
/* Content is visible unless the script has said it will animate it.

   This was the other way round: everything with .ze-reveal sat at opacity 0
   and nav.js brought it back. Anything that stopped that script — an error
   above it, a blocked file, an observer that never fired on a slow phone —
   left the page's own words invisible, which is what the washed-out hero was.
   The fade is worth having; it is not worth the page. */
.ze-reveal{opacity:1;transform:none}
html.ze-js-reveal .ze-reveal{opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s ease}
html.ze-js-reveal .ze-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.ze-js-reveal .ze-reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:940px){
  .ze-hero__in{grid-template-columns:1fr;gap:38px;padding:48px 0 60px}
  .ze-record{max-width:520px}
  .ze-modules__grid,.ze-steps,.ze-aud{grid-template-columns:1fr}
  .ze-foot__top{grid-template-columns:1fr 1fr}
  .ze-cta__in{flex-direction:column;align-items:flex-start}
  .ze-step__line{display:none}
}
/* The drawer.

   Reachable two ways. .is-collapsed is set by nav.js when it has measured the
   row and found the menu no longer fits — which is the honest test, because
   the menu is edited in wp-admin and no fixed width can know how long it will
   get. The media query below is the same thing for a browser with no
   JavaScript, set where a three-item menu stops fitting. */
.ze-head.is-collapsed .ze-nav{
  display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
  border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;
  padding:10px 14px 16px;box-shadow:var(--shadow)}
.ze-head.is-collapsed .ze-nav.is-open{display:flex}
.ze-head.is-collapsed .ze-nav ul{flex-direction:column;align-items:stretch;gap:2px;width:100%}
.ze-head.is-collapsed .ze-nav a{padding:12px 12px;color:var(--ink)}
.ze-head.is-collapsed .ze-nav .current-menu-item>a,
.ze-head.is-collapsed .ze-nav .current_page_item>a{
  color:var(--gov);background:var(--paper);box-shadow:inset 3px 0 0 var(--gold)}
.ze-head.is-collapsed .ze-head__cta .ze-btn--ghost{display:none}
/* One step before the burger: the secondary button steps aside so the menu can
   stay on the row. Sign in is the way into the portal and never moves. */
.ze-head.is-tight .ze-head__cta .ze-btn--ghost{display:none}

/* Before that again: everything tightens.
   The seal is the biggest single item on the row at 92px, and a letterhead
   reads perfectly well at 68. Losing the whole menu to a burger on a desktop
   costs far more than a slightly smaller mark, so this is tried first. */
.ze-head.is-snug .ze-head__in{gap:14px}
.ze-head.is-snug .ze-brand__seal{width:68px;height:68px}
.ze-head.is-snug .ze-brand__rep{font-size:12.5px}
.ze-head.is-snug .ze-brand__k{font-size:17px}
.ze-head.is-snug .ze-nav ul{gap:2px}
.ze-head.is-snug .ze-nav a{padding:8px 9px;font-size:14px}
.ze-head.is-snug .ze-head__cta{gap:8px}
.ze-head.is-snug .ze-head__cta .ze-btn{padding:9px 14px;font-size:14px}
.ze-head.is-collapsed .ze-burger{display:grid;place-items:center;margin-left:auto}

@media(max-width:720px){
  .ze-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;padding:10px 14px 16px;box-shadow:var(--shadow)}
  .ze-nav.is-open{display:flex}
  .ze-nav ul{flex-direction:column;align-items:stretch;gap:2px;width:100%}
  .ze-nav a{padding:12px 12px}
  .ze-head__cta .ze-btn--ghost{display:none}
  .ze-burger{display:grid;place-items:center;margin-left:auto}
  .ze-gov__txt .ze-gov__long{display:none}
  .ze-foot__top{grid-template-columns:1fr}
  .ze-section{padding:56px 0}
}
@media(max-width:420px){
  .ze-brand__n{font-size:15px}
  body{font-size:16px}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .ze-reveal{opacity:1;transform:none}
  .ze-tick{opacity:1;transform:none}
}


/* ============================================================
   Phones and tablets
   ------------------------------------------------------------
   Written once, here, rather than as a second stylesheet layered
   on top. Every rule in this file states a thing once; if a
   change is needed it is an edit, not another layer that has to
   win a specificity argument with the layer beneath it.
   ============================================================ */

/* The lockup steps down with the screen; the one thing it must not do is
   wrap. A seal on one line and the office on the next is not a letterhead. */
@media (max-width:1080px){
  .ze-brand__seal{width:80px;height:80px}
  .ze-brand__rep{font-size:13.5px}
  .ze-brand__k{font-size:21px}
}
@media (max-width:760px){
  .ze-brand{gap:12px}
  .ze-brand__seal{width:62px;height:62px}
  .ze-brand__rep{font-size:11px;padding-bottom:3px}
  /* Of the three lines, the region is the one a reader can spare. */
  .ze-brand__region{display:none}
  .ze-brand__k{font-size:16px;margin-top:3px}
}
@media (max-width:520px){
  .ze-brand__seal{width:52px;height:52px}
  .ze-brand__k{font-size:14.5px}
}

@media (max-width:900px){
  /* The row is brand, then menu, then the portal button, and it must not
     run past the right edge. Giving the actions width:100% did exactly that
     — it pushed the button off the screen, which is why only "Op" showed.
     The brand shrinks instead; it is the one thing here that can. */
  .ze-head__in{gap:8px;flex-wrap:nowrap}
  /* The brand shrinks, but it must not be sliced.
     overflow:hidden alone cut the letterhead mid-word — "Department of
     Educatio", "SCHOOLS DIVISI" — because nothing told the text how to give
     way, so the box simply ended. Below this width the three Republic lines
     step aside instead: the seal already carries "Department of Education"
     and "Schools Division of Zambales" around its rim, so nothing is lost by
     letting the office name stand on its own. */
  .ze-brand{min-width:0;flex:1 1 auto;overflow:hidden}
  .ze-brand__txt{min-width:0;overflow:hidden}
  .ze-brand__rep{display:none}
  .ze-brand__k{
    font-size:17px;margin-top:0;line-height:1.12;
    white-space:normal;overflow-wrap:anywhere;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .ze-head__cta{flex:0 0 auto;width:auto;justify-content:flex-end;margin-left:0;gap:8px}

  .ze-burger{order:-1;margin-left:0;margin-right:auto;min-width:44px;min-height:44px}
  .ze-head__cta .ze-btn--primary{
    order:2;font-size:13px;padding:8px 12px;border-radius:8px;
    max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  /* A button whose words wrap looks broken; the secondary steps aside. */
  .ze-head__cta .ze-btn--ghost{display:none}

  /* The drawer drops out of the blue onto its own white panel. .ze-nav is
     coloured for the masthead, so without this the words go white on white
     — the open state has to say its own colour rather than inherit the
     closed one. This was missing from the rebuild. */
  .ze-nav.is-open{background:#fff;border-top:1px solid var(--line);
    box-shadow:0 12px 28px rgba(10,37,64,.12);padding:4px 0 8px}
  .ze-nav.is-open a{color:var(--ink);font-size:16px;font-weight:600;
    padding:14px 20px;border-radius:0;background:transparent}
  .ze-nav.is-open a:hover,.ze-nav.is-open a:focus-visible{
    background:var(--gov-050);color:var(--gov)}
  .ze-nav.is-open .current-menu-item>a,.ze-nav.is-open .current_page_item>a{
    color:var(--gov);background:var(--paper);box-shadow:inset 3px 0 0 var(--gold)}
}

@media (max-width:420px){
  /* Below this the words will not fit beside the seal at a size worth
     reading. The arrow alone still says go. */
  .ze-head__cta .ze-btn--primary{font-size:0;padding:9px 11px}
  .ze-head__cta .ze-btn--primary::after{content:"\2192";font-size:16px;font-weight:700}
}

/* Anything pressed with a thumb needs a target that can be hit. */
@media (pointer:coarse){
  .ze-nav a{min-height:44px;display:flex;align-items:center}
  .ze-head__cta .ze-btn{min-height:44px}
}

/* The page reaches under a notch and a home indicator; only what is inside
   the coloured bands is inset, so the colour still runs to the edge. */
.ze-head__in,.ze-foot .ze-wrap{
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}
.ze-foot{padding-bottom:max(18px, env(safe-area-inset-bottom))}

@supports (-webkit-touch-callout: none){
  /* iOS zooms when a control smaller than 16px takes focus, and does not
     zoom back. */
  input,select,textarea{font-size:16px}
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button{-webkit-tap-highlight-color:rgba(11,61,145,.14)}