/*
Theme Name: CEDO Intercultural
Theme URI: https://cedo.org
Author: Magnet Marketing SEO
Description: Bilingual theme for CEDO Intercultural, the Intercultural Center for the Study of Deserts and Oceans. Design lives here, all content lives in WordPress pages so CEDO staff can edit it without a developer.
Version: 1.0.0
License: Proprietary
Text Domain: cedo
*/

/* ============================================================ FONTS
   🔴 These are CEDO'S OWN fonts, not a choice of mine. Their live site loads
   Jost 500/600 for headings and Poppins for body from Google Fonts. Bryce's
   brief was explicit: match their branding, do not pitch a rebrand. Self-hosted
   here so the site does not depend on a third-party CDN.
   All faces verified to carry the full Spanish set before use.               */
@font-face{font-family:Jost;src:url(assets/fonts/jost-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(assets/fonts/jost-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Jost;src:url(assets/fonts/jost-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/poppins-700.woff2)format("woff2");font-weight:700;font-display:swap}

/* ============================================================ TOKENS
   🔴 Sampled from cedo.org itself, not invented. Their steel blue #5682B1,
   their warm taupe #D9CFC7, their Bootstrap-derived ink #212529 and muted
   #757575. The job is a better-performing, editable site in THEIR brand,
   not a new identity.                                                        */
:root{
  --blue:#5682B1;         /* their accent */
  --blue-d:#3E6389;
  --blue-l:#7BA3CC;
  --ink:#212529;          /* their body text */
  --ink-2:#222222;
  --muted:#757575;        /* their secondary text */
  --taupe:#D9CFC7;        /* their warm neutral */
  --taupe-l:#EFEAE5;
  --grey:#F2F2F2;
  --line:rgba(33,37,41,.13);
  --line-d:rgba(255,255,255,.20);
  --scrim:rgba(0,0,0,.66); /* they scrim photos. .42 left white body copy unreadable over a bright image, measured, not guessed */
  --wrap:1180px;
  --r:4px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--ink);background:#fff;font-size:17.5px;line-height:1.65;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-l);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,h4{font-family:Jost,'Helvetica Neue',Arial,sans-serif;font-weight:600;line-height:1.14;letter-spacing:0;color:var(--ink)}
h1{font-size:clamp(36px,5vw,60px)}
h2{font-size:clamp(28px,3.6vw,42px);margin-bottom:16px}
h3{font-size:clamp(21px,2.2vw,27px);margin-bottom:10px}
p{margin-bottom:1.05em}
.eyebrow{font-family:Poppins;font-weight:600;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-d);margin-bottom:12px;display:block}

/* ============================================================ BUTTONS */
.btn,.wp-block-button__link{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:Poppins,sans-serif;font-weight:600;font-size:16.5px;letter-spacing:.02em;
  padding:15px 28px;border-radius:var(--r);border:2px solid transparent;
  background:var(--blue);color:#fff;transition:background .15s,transform .12s,color .15s;
  text-decoration:none;cursor:pointer;
}
.btn:hover,.wp-block-button__link:hover{background:var(--ink-2);color:#fff;text-decoration:none;transform:translateY(-1px)}
.btn-clay{background:var(--blue-d)}
.btn-clay:hover{background:var(--blue-d)}
.btn-ghost{background:transparent;border-color:currentColor;color:#fff}
.btn-ghost:hover{background:#fff;color:var(--ink-2);border-color:#fff}
.is-style-outline .wp-block-button__link{background:transparent;color:var(--blue);border-color:var(--blue)}

/* ============================================================ TOPBAR */
.topbar{background:var(--ink-2);color:rgba(255,255,255,.86);font-size:13.5px}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;padding-top:7px;padding-bottom:7px;flex-wrap:wrap}
.topbar a{color:inherit}
.topbar a:hover{color:#fff;text-decoration:none}
.topbar .l{display:flex;gap:20px;flex-wrap:wrap}
.topbar .r{display:flex;gap:18px;align-items:center}
.topsocial{display:flex;gap:4px;align-items:center}
.topsocial a{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:3px}
.topsocial a:hover{background:rgba(255,255,255,.12)}
.topsocial svg{width:17px;height:17px;fill:currentColor;display:block}
@media(max-width:700px){.topsocial{display:none}}
.langs{display:flex;gap:8px;align-items:center}
.langs a{padding:3px 9px;border:1px solid var(--line-d);border-radius:2px;font-weight:600;letter-spacing:.06em;font-size:12px}
.langs a.on{background:var(--taupe-l);color:var(--ink-2);border-color:var(--taupe-l)}

/* ============================================================ HEADER */
.site-hd{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:70}
.site-hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:82px}
.brand{display:flex;align-items:center;gap:13px;flex:0 0 auto}
.brand img{height:52px;width:auto}
.brand .txt{font-family:Jost,Arial,sans-serif;font-weight:700;font-size:20px;line-height:1.05;color:var(--ink-2)}
.brand .txt span{display:block;font-family:Poppins,sans-serif;font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
.mainnav{display:flex;align-items:center;gap:22px}
.mainnav a{white-space:nowrap}   /* a wrapped nav label is the ugliest thing on a header */
/* wp_nav_menu with items_wrap '%3$s' emits bare <li> with no <ul>, and browsers
   draw list markers on them. Kill the markers rather than re-wrapping. */
.mainnav li{list-style:none;display:block;margin:0}
.mainnav a{font-weight:600;font-size:15.5px;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.mainnav a:hover,.mainnav a.on{color:var(--blue);border-bottom-color:var(--blue-d);text-decoration:none}
.hd-cta{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.navtoggle{display:none;background:none;border:1px solid var(--line);border-radius:var(--r);padding:9px 13px;font-size:15px;font-weight:600;cursor:pointer}
@media(max-width:1240px){
  .mainnav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 0;
    box-shadow:0 14px 30px rgba(33,37,41,.10)}
  .mainnav.open{display:flex}
  .mainnav a{padding:13px 24px;border-bottom:1px solid var(--line)}
  .navtoggle{display:block}
  .site-hd .wrap{position:relative;min-height:72px}
}
@media(max-width:560px){.hd-cta .btn{display:none}.brand .txt{font-size:17px}}

/* ============================================================ HERO */
.hero{position:relative;background:var(--ink-2);color:var(--taupe-l);overflow:hidden;min-height:540px;display:flex;align-items:center}
.hero .bg{position:absolute;inset:0}
.hero .bg img{width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.58) 42%,rgba(0,0,0,.28) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:76px;padding-bottom:76px}
.hero-in{max-width:680px}
.hero h1{color:#fff;margin-bottom:18px}
.hero .lead{font-size:20px;line-height:1.55;color:rgba(255,255,255,.93);margin-bottom:28px;max-width:600px}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap}
.hero .eyebrow{color:#CFE0F0}
@media(max-width:640px){.hero{min-height:auto}.hero .wrap{padding-top:52px;padding-bottom:52px}.hero .acts .btn{width:100%}}

/* ============================================================ SECTIONS */
.sec{padding:86px 0}
.entry > section.sec:first-child{padding-top:0}   /* page.php already pads the top */
.sec.tight{padding:60px 0}
.sec.sand{background:var(--taupe-l)}
.sec.sand2{background:var(--taupe)}
.sec.sea{background:var(--blue);color:var(--taupe-l)}
.sec.sea h2,.sec.sea h3{color:#fff}
.sec.sea .eyebrow{color:#CFE0F0}
.sec.sea a{color:#CFE0F0}
.sec-head{max-width:780px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{font-size:19px;color:var(--muted)}
.sec.sea .sec-head p{color:rgba(255,255,255,.82)}
@media(max-width:760px){.sec{padding:58px 0}}


/* ============================================================ PHOTO BANDS
   🔴 The thing Bryce asked for: cedo.org runs full-bleed photography behind
   sections with a dark scrim over it, and my first pass was white everywhere.
   `.sec.photo` takes a background image, scrims it, and flips the type to light. */
.sec.photo{position:relative;color:#fff;background-size:cover;background-position:center;
  background-attachment:scroll}
.sec.photo::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,var(--scrim) 45%,rgba(0,0,0,.68) 100%)}
.sec.photo > *{position:relative;z-index:1}
.sec.photo h2,.sec.photo h3{color:#fff}
.sec.photo p{color:rgba(255,255,255,.92)}
.sec.photo .sec-head p{color:rgba(255,255,255,.88)}
.sec.photo .eyebrow{color:#CFE0F0}
.sec.photo a{color:#fff}
.sec.photo .hours td{border-bottom-color:rgba(255,255,255,.22)}
.sec.photo .hours tr.closed td{color:rgba(255,255,255,.7)}
/* a slim full-bleed image strip used purely as a breath between sections */
.imgband{height:340px;background-size:cover;background-position:center;position:relative}
.imgband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.05))}
@media(max-width:760px){.imgband{height:200px}}

/* the horizon rule: desert meets sea, the organisation's own name as a device */
.horizon{height:4px;background:linear-gradient(90deg,var(--taupe) 0%,var(--blue-l) 45%,var(--blue) 100%)}


/* ============================================================ 🔴 BLOCK GROUP WRAPPER
   WordPress renders a group block as
     <div class="wp-block-group MYCLASS"><div class="wp-block-group__inner-container">…children…</div></div>
   so `display:grid` on MYCLASS only ever sees ONE child and everything stacks in a
   single column. `display:contents` removes the wrapper from layout so the real
   children participate in the grid. It also neutralises WP's is-layout-flow margins.
   Scoped to the classes this theme creates, so ordinary editor groups are untouched. */
.wrap > .wp-block-group__inner-container,
.sec > .wp-block-group__inner-container,
.grid > .wp-block-group__inner-container,
.sec-head > .wp-block-group__inner-container,
.team > .wp-block-group__inner-container{display:contents}

/* ============================================================ CARD GRIDS */
.grid{display:grid;gap:22px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid.g3,.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(33,37,41,.09)}
.card .ph{aspect-ratio:16/10;overflow:hidden;background:var(--taupe)}
.card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .ph img{transform:scale(1.05)}
.card .bd{padding:24px 24px 26px;flex:1 1 auto}
.card h3{margin-bottom:8px}
.card p{font-size:16px;color:var(--muted);margin-bottom:0}
.card .tag{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-d);font-weight:600;margin-bottom:9px;display:block}

/* ============================================================ TEAM */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:20px}
.person{text-align:center}
.person img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;margin-bottom:12px;background:var(--taupe)}
.person .n{font-family:Jost,Arial,sans-serif;font-weight:700;font-size:17px;line-height:1.2;color:var(--ink)}
.person .r{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.3}

/* ============================================================ STATS */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-d)}
.stats .s{background:var(--blue);padding:30px 22px}
.stats .n{font-family:Jost,Arial,sans-serif;font-weight:700;font-size:46px;line-height:1;color:#fff}
.stats .l{font-size:14.5px;color:rgba(255,255,255,.8);margin-top:8px;line-height:1.35}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,1fr)}}

/* ============================================================ HOURS TABLE */
.hours{width:100%;border-collapse:collapse;font-size:16px;max-width:420px}
.hours td{padding:9px 0;border-bottom:1px solid var(--line)}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tr.closed td{color:var(--muted)}

/* ============================================================ DONATE BAND */
.band{background:var(--blue-d);color:#fff;padding:64px 0}
.band h2{color:#fff}
.band p{color:rgba(255,255,255,.93);font-size:18.5px;max-width:620px}
.band .wrap{display:flex;gap:34px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.band .btn{background:#fff;color:var(--blue-d)}
.band .btn:hover{background:var(--taupe-l);color:var(--blue-d)}

/* ============================================================ FOOTER */
.site-ft{background:var(--ink-2);color:rgba(255,255,255,.74);padding:64px 0 0;font-size:15.5px}
.site-ft a{color:rgba(255,255,255,.74)}
.site-ft a:hover{color:#fff;text-decoration:none}
.ft-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:38px;padding-bottom:44px}
.site-ft h5{font-family:Poppins,sans-serif;font-weight:600;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin-bottom:15px}
.site-ft ul{list-style:none}
.site-ft li{padding:4px 0;list-style:none}
.site-ft .menu{list-style:none;margin:0;padding:0}
.site-ft .brand img{height:48px;margin-bottom:16px}
.ft-bot{border-top:1px solid var(--line-d);padding:20px 0;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-size:14px}
@media(max-width:900px){.ft-cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ft-cols{grid-template-columns:1fr}}

/* ============================================================ BLOCK EDITOR CONTENT
   Pages are built from real WordPress blocks so staff can edit them.
   These rules make ordinary block output look like the design.            */
.entry > *{max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
/* 🔴 Full-bleed anything that brings its own .wrap. A wp:html block renders raw, so a
   <section> lands as a DIRECT child of .entry and would otherwise be boxed to --wrap
   twice: once by this rule and again by its own .wrap. */
.entry > section,
.entry > .alignfull,
.entry > .wp-block-group.alignfull{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.entry > .alignwide{max-width:1320px}
.entry h2{margin-top:1.6em}
.entry h3{margin-top:1.3em}
.entry ul,.entry ol{margin:0 0 1.1em 1.2em}
.entry li{margin-bottom:.4em}
.entry .wp-block-image img{border-radius:var(--r)}
.entry .wp-block-quote{border-left:4px solid var(--blue-d);padding-left:20px;font-style:normal;
  font-family:Jost,Arial,sans-serif;font-size:21px;line-height:1.4}
.entry .wp-block-table table{width:100%;border-collapse:collapse}
.entry .wp-block-table td,.entry .wp-block-table th{border:1px solid var(--line);padding:10px 12px}
.entry .wp-block-columns{gap:34px}

/* page hero for interior pages */
.pagehead{background:var(--blue);color:var(--taupe-l);padding:66px 0 58px}
.pagehead h1{color:#fff}
.pagehead p{font-size:19px;color:rgba(255,255,255,.86);max-width:620px;margin-top:12px;margin-bottom:0}
.crumbs{font-size:13.5px;color:rgba(255,255,255,.66);margin-bottom:14px}
.crumbs a{color:rgba(255,255,255,.66)}

/* skip link, focus, reduced motion */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:#fff;color:var(--ink-2);padding:11px 16px;border-radius:var(--r)}
a:focus-visible,button:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px}
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
  .card:hover,.btn:hover{transform:none}
}