/*
Theme Name: Active Education Magazine
Theme URI: https://activeeducationmagazine.com/
Author: Active Education Magazine
Description: A wide-format editorial theme for Active Education Magazine. Bold risograph-inspired art direction, an asymmetric full-bleed article grid, and a dateless reading experience focused on teaching, childcare and education careers.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: activeedu-mag
Tags: blog, education, magazine, wide-blocks, custom-menu, featured-images, translation-ready
*/

:root{
  --ink:#1d2a44;
  --ink-soft:#3d4c69;
  --paper:#fbf7ec;
  --paper-2:#f3ecdc;
  --flame:#f04e17;
  --teal:#1b8a86;
  --mustard:#f0b323;
  --line:#1d2a44;
  --maxw:1680px;
  --serif:"Georgia","Iowan Old Style",serif;
  --sans:"Helvetica Neue",Arial,Helvetica,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.65;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--flame)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:99}

/* ---------- masthead ---------- */
.masthead{border-bottom:3px solid var(--line);background:var(--paper)}
.masthead .wrap{display:flex;align-items:flex-end;gap:clamp(16px,4vw,48px);padding-top:22px;padding-bottom:18px;flex-wrap:wrap}
.brand{font-family:var(--sans);font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(30px,4.4vw,64px);text-transform:uppercase;margin:0}
.brand a{display:block}
.brand em{font-style:normal;color:var(--flame)}
.tagline{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;color:var(--ink-soft);margin:0 0 6px;max-width:22ch}
.nav{margin-left:auto;font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:.16em}
.nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:22px;margin:0 0 8px;padding:0}
.nav a{padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover,.nav .current-menu-item>a{border-color:var(--flame)}
.rule{height:0;border-top:1px solid var(--line);opacity:.35}

/* ---------- hero ---------- */
.hero{border-bottom:3px solid var(--line);background:var(--paper-2)}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch}
.hero-text{padding:clamp(28px,5vw,72px) clamp(16px,4vw,56px);display:flex;flex-direction:column;justify-content:center}
.kicker{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--flame);margin:0 0 18px}
.hero h2{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:.98;
  font-size:clamp(34px,5.2vw,76px);margin:0 0 20px;max-width:24ch}
.hero p{margin:0;max-width:52ch;color:var(--ink-soft);font-size:clamp(17px,1.4vw,21px)}
.hero-art{position:relative;border-left:3px solid var(--line);min-height:100%;overflow:hidden}
.hero-art img{width:100%;height:100%;object-fit:cover}

/* ---------- section head ---------- */
.section-head{display:flex;align-items:baseline;gap:20px;padding:36px 0 10px}
.section-head h2{font-family:var(--sans);text-transform:uppercase;letter-spacing:.2em;font-size:12px;margin:0;white-space:nowrap}
.section-head span{flex:1;border-top:1px solid var(--line);opacity:.4}
.section-head b{font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--ink-soft);font-weight:500}

/* ---------- wide article grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);}
.card{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:clamp(22px,2.4vw,38px);display:flex;flex-direction:column;background:var(--paper);
  transition:background .25s ease}
.card:nth-child(3n){border-right:0}
.card:hover{background:var(--paper-2)}
.card-num{font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:var(--flame);margin-bottom:14px}
.card h3{font-family:var(--sans);font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(22px,1.9vw,30px);margin:0 0 14px}
.card .thumb{margin:0 0 18px;border:1px solid var(--line);overflow:hidden;aspect-ratio:16/10;background:var(--paper-2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .thumb img{transform:scale(1.04)}
.card .body{font-size:17px;line-height:1.6;color:var(--ink-soft)}
.card .body p{margin:0 0 14px}
.card-more{margin-top:auto;padding-top:18px;font-family:var(--sans);font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
.card-more span{border-bottom:2px solid var(--flame);padding-bottom:3px}

/* feature: first card spans two columns */
.grid .card.is-lead{grid-column:span 2}
.grid .card.is-lead h3{font-size:clamp(28px,3.2vw,48px)}
.grid .card.is-lead .lead-flex{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(18px,2.4vw,34px);align-items:start}
.grid .card.is-lead .thumb{margin:0;aspect-ratio:4/3}
.grid .card.is-lead .card-more{margin-top:30px}
.grid .card.is-lead .body{font-size:18.5px}

/* ---------- single / page ---------- */
.article{padding:clamp(28px,4vw,64px) 0}
.article-head{max-width:1100px;margin:0 auto clamp(24px,3vw,44px)}
.article-head h1{font-family:var(--sans);font-weight:800;letter-spacing:-.035em;line-height:1.02;
  font-size:clamp(32px,4.6vw,68px);margin:14px 0 0}
.article-media{border:1px solid var(--line);margin:0 auto clamp(24px,3vw,44px);max-width:1400px;overflow:hidden}
.entry{max-width:44rem;margin:0 auto;font-size:20px;line-height:1.72}
.entry p{margin:0 0 1.3em}
.entry h2,.entry h3{font-family:var(--sans);letter-spacing:-.02em;line-height:1.15;margin:1.8em 0 .6em}
.entry a{border-bottom:2px solid var(--flame)}
.entry blockquote{margin:1.6em 0;padding:6px 0 6px 26px;border-left:4px solid var(--flame);
  font-size:24px;line-height:1.4}
.entry ul,.entry ol{padding-left:1.2em}
.entry img{margin:1.4em 0;border:1px solid var(--line)}
.entry code,.entry pre{font-family:ui-monospace,Menlo,monospace;background:var(--paper-2)}
.entry pre{padding:18px;overflow:auto;border:1px solid var(--line)}

.postnav{border-top:3px solid var(--line);display:grid;grid-template-columns:1fr 1fr}
.postnav a{padding:clamp(20px,3vw,40px);font-family:var(--sans);font-weight:800;
  letter-spacing:-.02em;font-size:clamp(18px,1.7vw,26px);line-height:1.15}
.postnav a:first-child{border-right:1px solid var(--line)}
.postnav small{display:block;font-weight:500;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--flame);margin-bottom:10px}

/* ---------- pagination ---------- */
.pager{display:flex;gap:10px;flex-wrap:wrap;padding:34px 0;font-family:var(--sans);font-size:13px}
.pager .page-numbers{border:1px solid var(--line);padding:9px 15px}
.pager .page-numbers.current,.pager .page-numbers:hover{background:var(--ink);color:var(--paper)}

/* ---------- footer ---------- */
.site-footer{border-top:3px solid var(--line);background:var(--ink);color:var(--paper);margin-top:0}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:24px;align-items:center;padding-top:34px;padding-bottom:34px}
.site-footer a{color:var(--paper)}
.site-footer a:hover{color:var(--mustard)}
.foot-brand{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(20px,2.4vw,34px)}
.foot-note{font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:#b9c3d6;margin-left:auto}
.widgets{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;
  border-top:1px solid rgba(251,247,236,.2);padding:32px 0}
.widgets h2,.widgets h3{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mustard)}
.widgets ul{list-style:none;padding:0;margin:0;font-size:16px}
.widgets li{padding:6px 0;border-bottom:1px solid rgba(251,247,236,.12)}

/* ---------- search / misc ---------- */
.searchform{display:flex;gap:0;font-family:var(--sans)}
.searchform input[type=search]{border:1px solid var(--line);background:var(--paper);padding:11px 13px;font:inherit;min-width:0;flex:1}
.searchform button{border:1px solid var(--line);border-left:0;background:var(--ink);color:var(--paper);padding:11px 18px;font:inherit;cursor:pointer}
.alignleft{float:left;margin:0 1.4em 1em 0}
.alignright{float:right;margin:0 0 1em 1.4em}
.aligncenter{margin-left:auto;margin-right:auto}
.screen-reader-text{position:absolute;left:-9999px}
.sticky{outline:0}

@media(max-width:1180px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .card:nth-child(3n){border-right:1px solid var(--line)}
  .card:nth-child(2n){border-right:0}
  .grid .card.is-lead{grid-column:span 2}
}
@media(max-width:820px){
  body{font-size:18px}
  .hero-inner{grid-template-columns:1fr}
  .hero-art{border-left:0;border-top:3px solid var(--line);aspect-ratio:16/9}
  .grid{grid-template-columns:1fr}
  .card,.card:nth-child(n){border-right:0}
  .grid .card.is-lead{grid-column:span 1}
  .grid .card.is-lead .lead-flex{grid-template-columns:1fr}
  .postnav{grid-template-columns:1fr}
  .postnav a:first-child{border-right:0;border-bottom:1px solid var(--line)}
  .nav{margin-left:0;width:100%}
}