/*
Theme Name: CSL 2025
Template: twentytwentyfive
Version: 1.0.0
Description: Center for Sustainable Living main site theme (child of Twenty Twenty-Five), built on the CSL design system.
Text Domain: csl-2025
*/
:root { --csl-radius:8px; }
html { scroll-behavior:smooth; }
body { margin:0; }
.wp-site-blocks > * { margin-block-start:0; }
:where(a,button,input,summary,select,textarea):focus-visible { outline:2px solid var(--wp--preset--color--focus)!important; outline-offset:2px!important; }
a:hover { text-decoration-thickness:2px; }
a { text-underline-offset:.18em; }
.wp-block-button__link { min-height:44px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; box-shadow:none!important; }
.csl-draft { padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); background:var(--wp--preset--color--accent-1); text-align:center; font-size:var(--wp--preset--font-size--small); }
.csl-header { padding-block:var(--wp--preset--spacing--30); border-bottom:1px solid var(--wp--preset--color--line); }
.csl-brand { width:240px; flex-shrink:0; margin:0; }
.csl-brand img { width:240px; height:auto; border-radius:0; display:block; }
.csl-header .wp-block-navigation-item__content { min-height:44px; display:flex; align-items:center; }
.csl-header .wp-block-navigation__container { gap:var(--wp--preset--spacing--40); }
.csl-header .csl-donate a { background:var(--wp--preset--color--accent-3); color:var(--wp--preset--color--base); padding:var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); border-radius:4px; }
.csl-section { margin-block:var(--wp--preset--spacing--50)!important; }
.csl-hero { padding-block:var(--wp--preset--spacing--40); }
.csl-hero h1 { max-width:15ch; }
.csl-eyebrow { font-size:var(--wp--preset--font-size--small); font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.csl-hero-photo img { aspect-ratio:4/3; width:100%; object-fit:cover; border-radius:8px; }
.csl-hero-photo figcaption { text-align:left; }
.csl-intro { max-width:720px; }
.csl-grid { display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--wp--preset--spacing--40); align-items:stretch; }
.csl-card { border:1px solid var(--wp--preset--color--line); border-radius:8px; overflow:visible; margin:0!important; padding:var(--wp--preset--spacing--40); display:flex; flex-direction:column; gap:var(--wp--preset--spacing--30); }
.csl-card > * { margin:0!important; }
.csl-card figure img { aspect-ratio:4/3; width:100%; object-fit:cover; display:block; border-radius:8px; }
.csl-card > p:last-child { margin-top:auto!important; }
.csl-card > p:last-child a { display:inline-block; min-height:44px; padding-top:var(--wp--preset--spacing--20); }
.csl-callout { background:var(--wp--preset--color--accent-5); border-radius:8px; padding:var(--wp--preset--spacing--60); }
.csl-footer { padding-block:var(--wp--preset--spacing--50); border-top:1px solid var(--wp--preset--color--line); }
.csl-footer p { font-size:var(--wp--preset--font-size--small); }
.csl-note { border-left:4px solid var(--wp--preset--color--accent-2); padding-left:var(--wp--preset--spacing--30); color:var(--wp--preset--color--accent-4); font-size:var(--wp--preset--font-size--small); }
.csl-project-logo img { width:120px; height:120px; object-fit:contain; }
.csl-detail-title h1 { max-width:21ch; }
.csl-detail-photo img { width:100%; height:auto; }
.csl-step { border-top:4px solid var(--wp--preset--color--accent-2); padding-top:var(--wp--preset--spacing--40); }
@media(max-width:900px){ .csl-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .csl-header .wp-block-navigation__container{gap:var(--wp--preset--spacing--30);} .csl-brand,.csl-brand img{width:200px;} }
@media(max-width:600px){ .csl-grid{grid-template-columns:1fr;} .csl-callout{padding:var(--wp--preset--spacing--40);} .csl-hero{padding-block:var(--wp--preset--spacing--20);} .csl-hero h1{max-width:none;} .csl-header{gap:var(--wp--preset--spacing--30);} .csl-header .wp-block-navigation__responsive-container-open{min-width:44px;min-height:44px;} }
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* Template parts do not inherit a constrained layout from the root. */
.csl-header,.csl-footer { max-width:var(--wp--style--global--wide-size); margin-inline:auto; padding-inline:var(--wp--preset--spacing--40); }
.csl-draft { margin:0; }
.csl-header .csl-donate .wp-block-navigation-item__content { color:var(--wp--preset--color--base)!important; }
.csl-card small { font-size:var(--wp--preset--font-size--small); color:var(--wp--preset--color--accent-4); }
.wp-block-navigation__submenu-container:has(.csl-mega-menu) { min-width:680px!important; width:auto!important; max-width:min(760px,90vw)!important; padding:var(--wp--preset--spacing--40); }
.csl-mega-menu .wp-block-columns { gap:var(--wp--preset--spacing--40); margin-bottom:0; }
.csl-mega-tile { align-items:center!important; gap:var(--wp--preset--spacing--20)!important; margin:0 0 var(--wp--preset--spacing--30) 0!important; }
.csl-mega-thumb { flex-shrink:0; margin:0!important; }
.csl-mega-thumb img { width:48px; height:48px; object-fit:cover; border-radius:6px; display:block; }
.csl-mega-thumb-mark img { object-fit:contain; background:var(--wp--preset--color--accent-5); padding:6px; box-sizing:border-box; }
.csl-mega-tile p { margin:0!important; font-size:var(--wp--preset--font-size--small); font-weight:600; line-height:1.3; }
.csl-mega-tile a { color:inherit; text-decoration:none; }
.csl-mega-tile a:hover { text-decoration:underline; }
.csl-mega-footer { margin-top:var(--wp--preset--spacing--20)!important; padding-top:var(--wp--preset--spacing--30); border-top:1px solid var(--wp--preset--color--line); }
@media(max-width:900px){ .wp-block-navigation__submenu-container:has(.csl-mega-menu){min-width:0!important;width:auto!important;max-width:100%!important;} .csl-mega-menu .wp-block-columns{flex-wrap:wrap;} }
.csl-mega-menu .wp-block-column { min-width:180px!important; }
.csl-footer-address { line-height:1.6; }
.csl-footer-projects-list { column-count:2; column-gap:var(--wp--preset--spacing--30); line-height:1.9; }
@media(max-width:480px){ .csl-footer-projects-list{column-count:1;} }
.csl-header a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:2px; font-weight:600; }
.csl-header .csl-nav-ancestor > a { text-decoration:underline; text-decoration-style:dotted; }
.csl-map-embed { position:relative; width:100%; aspect-ratio:4/3; border-radius:8px; overflow:hidden; }
.csl-map-embed iframe { position:absolute; inset:0; width:100%; height:100%; }
@media(min-width:600px){ .csl-map-embed { aspect-ratio:16/9; } }
.csl-news-item { border-top:1px solid var(--wp--preset--color--line); padding-top:var(--wp--preset--spacing--40); margin-top:var(--wp--preset--spacing--40)!important; }
.csl-news-item:first-child { border-top:0; padding-top:0; margin-top:0!important; }
.csl-news-item .wp-block-post-featured-image img { aspect-ratio:16/9; width:100%; object-fit:cover; border-radius:8px; }
.csl-news-terms { color:var(--wp--preset--color--accent-3); }
.csl-news-terms a { color:inherit; }
.csl-news-item h2 { margin-top:var(--wp--preset--spacing--20); }
.csl-news-item h2 a { color:var(--wp--preset--color--contrast); text-decoration:none; }
.csl-news-item h2 a:hover { text-decoration:underline; }

/* Design critique fix: mobile overlay flattens all submenus open (core behavior,
   not something we can toggle) — a 12-tile image grid inline is too much scroll
   before reaching Get Involved/About/Donate, so collapse it to a single link there. */
.wp-block-navigation__responsive-container.is-menu-open .csl-mega-menu .wp-block-columns { display:none; }
.wp-block-navigation__responsive-container.is-menu-open .csl-mega-footer { margin-top:0!important; padding-top:0; border-top:0; }

/* Design critique fix: on mobile, hero image columns stack after their text by
   DOM order; move the image first so the visual leads instead of a wall of text. */
@media(max-width:781px){
  .wp-block-column:has(> .csl-hero-photo),
  .wp-block-column:has(> .csl-detail-photo) { order:-1; }
}

/* Mobile menu overlay. The desktop nav is right-aligned, and core carries that
   into the overlay, so items hugged the right edge and were clipped. Lay the
   overlay out as a left-aligned list with section labels and indented sub-links. */
.wp-block-navigation__responsive-container.is-menu-open {
  --navigation-layout-justification-setting: flex-start;
  --navigation-layout-justify: flex-start;
  padding: var(--wp--preset--spacing--40) !important;
  text-align: left;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: stretch !important;
  padding-top: var(--wp--preset--spacing--50) !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  align-items: stretch !important;
  width: 100%;
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding-block: var(--wp--preset--spacing--20);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  min-height: 44px;
  padding: 0 !important;
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  padding: 0 0 0 var(--wp--preset--spacing--30) !important;
  gap: 0 !important;
  align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
  border-bottom: 0;
  padding-block: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
}
/* Projects panel: hide the desktop label; show "Browse all projects" as a normal sub-link. */
.wp-block-navigation__responsive-container.is-menu-open .csl-mega-menu { padding: 0 !important; }
.wp-block-navigation__responsive-container.is-menu-open .csl-mega-menu .csl-eyebrow { display: none; }
.wp-block-navigation__responsive-container.is-menu-open .csl-mega-footer .wp-block-button__link {
  background: none; color: inherit; padding: 0; min-height: 44px; border: 0; border-radius: 0;
  font-size: var(--wp--preset--font-size--medium); font-weight: 400; justify-content: flex-start;
}
/* Donate stays a button, sized to its label rather than the full width. */
.wp-block-navigation__responsive-container.is-menu-open .csl-donate { border-bottom: 0; padding-top: var(--wp--preset--spacing--40); }
.wp-block-navigation__responsive-container.is-menu-open .csl-donate a { align-self: flex-start; padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important; }
/* Focus stays clearly visible for keyboard users, as a heavy underline rather than
   a box (core focuses the first link when the menu opens, which drew a full-width box). */
.wp-block-navigation__responsive-container.is-menu-open a:focus { outline: none !important; }
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible { outline: none !important; text-decoration: underline !important; text-decoration-thickness: 3px !important; text-underline-offset: .25em; }