/*
Theme Name: ASC Forecasts
Description: The design Nakita approved in July 2026, as a WordPress theme. The stylesheet below is lifted verbatim from code/build_site.py so the site matches the pages she signed off rather than approximating them.
Author: Zhengzhe Peng, Jean Golding Institute
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: asc-theme
*/

/* ------------------------------------------------------------------
 * Shell only.
 *
 * The seven approved pages bring their own stylesheets (pages.css, scoped per
 * page), so this file must NOT restyle their content — an earlier version kept
 * the whole shared BASE_CSS here and it fought the scoped rules, adding 10px
 * to the front-page buttons and 14px to every figure card.
 *
 * What is left is the frame around the content plus WooCommerce, which has no
 * approved design of its own and would otherwise be unstyled.
 * ---------------------------------------------------------------- */
:root{
  --navy:#051d55; --purple:#45026d; --teal:#01777b; --gold:#c99700;
}
*{box-sizing:border-box;}
body{margin:0; font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
     color:#23262e; background:#fff;}
.wrap{max-width:1150px; margin:0 auto; padding:18px 26px 40px;}
.hdr{display:flex; align-items:center; justify-content:space-between; padding:6px 0 18px;}
.hdr img.logo{height:46px;}
.nav{display:flex; gap:22px; flex-wrap:wrap;}
.nav ul.nav-list{list-style:none; margin:0; padding:0; display:flex; gap:22px; flex-wrap:wrap;}
.nav ul.nav-list li{margin:0;}
.nav a{color:#374151; text-decoration:none; font-weight:600; font-size:.95rem;}
.nav a:hover{color:var(--purple); text-decoration:underline;}
.nav a.active{color:var(--navy); border-bottom:3px solid var(--purple); padding-bottom:4px;}
.foot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
      margin-top:38px; padding-top:14px; border-top:1px solid #e6e6ee;
      color:#6b7280; font-size:.78rem;}
.foot a{color:#6b7280;}
a:focus-visible, button:focus-visible, select:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; background:#fff; padding:10px 16px; z-index:10;
            border:2px solid var(--purple); border-radius:8px;}
.page-title{color:var(--navy); font-size:3rem; font-weight:800; line-height:1.1; margin:0 0 14px;}
@media (max-width:760px){
  .hdr{flex-direction:column; align-items:flex-start; gap:12px;}
  .page-title{font-size:2.1rem;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}

/* ---- WordPress and WooCommerce additions --------------------------- */
/* WordPress renders the menu as a list; the approved design is a plain row of
   links, so the list furniture is removed rather than restyled. */
.nav ul.nav-list{list-style:none; margin:0; padding:0; display:flex; gap:22px; flex-wrap:wrap;}
.nav ul.nav-list li{margin:0;}

/* Both emit their own markup; keep it inside the same measure and type as the
   approved pages instead of leaving it at browser defaults. */
.entry-content > *:first-child{margin-top:0;}
.page-title{color:var(--navy); font-size:3rem; font-weight:800; line-height:1.1; margin:0 0 14px;}

.wp-block-buttons{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 6px;}
.wp-block-button__link{display:inline-block; border-radius:8px; padding:12px 22px;
  font-weight:700; font-size:.95rem; text-decoration:none; background:var(--purple); color:#fff;}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;
  border:2px solid var(--purple); color:var(--purple);}

.woocommerce .button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button, .woocommerce #respond input#submit{
  background:var(--purple) !important; color:#fff !important; border-radius:8px !important;
  font-weight:700 !important; padding:12px 22px !important; border:0 !important;}
.woocommerce .button:hover, .woocommerce a.button:hover{background:#5a0d87 !important;}
.woocommerce div.product .price, .woocommerce ul.products li.product .price{
  color:var(--navy) !important; font-weight:800;}
.woocommerce form .form-row label{font-weight:600; color:var(--navy);}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select{
  padding:11px 12px; border:1.5px solid #d8d8e4; border-radius:9px; font-family:inherit;}
.woocommerce-info, .woocommerce-message{border-top-color:var(--teal) !important;}
.woocommerce-info::before, .woocommerce-message::before{color:var(--teal) !important;}

/* The extra checkout questions, grouped so they read as one block. */
#asc_checkout_questions{border:1.5px solid #e6e6ee; border-radius:16px;
  padding:16px 18px 4px; margin:18px 0;}
#asc_checkout_questions h3{margin:0 0 4px; color:var(--navy); font-size:1.08rem;}
#asc_checkout_questions .asc-why{color:#4b5563; font-size:.88rem; margin:0 0 12px;}


/* ---------------------------------------------------------------------------
   WooCommerce single product.

   WooCommerce lays the product out with floats — image left, summary right —
   and nothing after it clears them, so the site footer rode up into the middle
   of the page and printed on top of the price and the Add to cart button.
   Screenshotted on 20 August: the copyright line sat across the description.

   Fixed with a grid rather than by patching the clear, so the two columns are
   laid out deliberately and the footer cannot be pulled up into them at all.
   --------------------------------------------------------------------------- */
.woocommerce div.product{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:34px; align-items:start; margin-bottom:30px;
}
.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .summary{float:none !important; width:auto !important; margin:0 !important;}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:12px; border:1px solid #e6e6ee;}
.woocommerce div.product .product_title{font-size:1.9rem; line-height:1.2; margin:0 0 10px;}
.woocommerce div.product .price{font-size:1.5rem !important; margin:0 0 14px;}
.woocommerce div.product form.cart{display:flex; gap:12px; align-items:center; margin:18px 0 0;}
.woocommerce div.product form.cart .quantity{margin:0;}

/* The footer belongs after the content, on every template. */
.foot{clear:both;}

@media (max-width:760px){
  .woocommerce div.product{grid-template-columns:1fr; gap:22px;}
}