/* ============================================================
   helmet-checkout.css — the Groundcraft checkout surface
   Scope: body.gc-page-checkout  (added by the mu-plugin body_class filter).
   Loaded only on the checkout page via groundcraft_site_page_helmet().

   Turns WooCommerce's default block checkout into a dedicated,
   distraction-free, *branded* payment surface:
     · widened two-column layout (kills the 704px post-content squoosh
       that letter-wrapped item names in the order summary)
     · real GC logo lockup in a clean bar + a "Secure checkout" badge
     · concierge / added-to-cart notice / cart icon / empty express box removed
     · warm sticky order-summary card, brand-green actions, SSL reassurance

   Pinned to the light brand canvas so the pay experience is calm and
   consistent regardless of the visitor's light/dark preference. (A fully
   theme-aware dark checkout is a deliberate future pass — not shipped half-done.)
   ============================================================ */

body.gc-page-checkout{
  /* Padlock glyph, stroke pre-coloured to --co-ink-2 (bg-image can't be recoloured). */
  --gc-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23525750' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11v-4a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  /* Pin the light brand surface (explicit values — stable under a dark toggle). */
  background:#f5f7f1!important;
  --co-surface:#ffffff; --co-canvas:#f5f7f1; --co-ink:#1b1e19; --co-ink-2:#525750;
  --co-muted:#787d74; --co-border:#e6e8df; --co-green:#527d21; --co-green-hov:#456c1c;
  --co-green-500:#9bd45f;
}

/* ---- 1 · Distraction-free: drop the concierge pill + the "added to cart" banner ---- */
body.gc-page-checkout telnyx-ai-agent{display:none!important}
body.gc-page-checkout .woocommerce-message{display:none!important}

/* ---- 2 · Branded checkout bar: logo left, secure badge right ---- */
body.gc-page-checkout header.wp-block-template-part{
  background:var(--co-surface);border-bottom:1px solid var(--co-border);
}
body.gc-page-checkout header .wp-block-group.is-content-justification-space-between{
  max-width:1120px;margin-inline:auto;align-items:center;
  padding-top:17px!important;padding-bottom:17px!important;
}
/* site-title text → the real GC logo lockup */
body.gc-page-checkout .wp-block-site-title{margin:0;font-size:0;line-height:0}
body.gc-page-checkout .wp-block-site-title a{
  display:block;width:168px;height:36px;text-indent:-9999px;overflow:hidden;white-space:nowrap;
  background:url("/wp-content/uploads/groundcraft-site/img/logo-lockup-light.svg") left center/contain no-repeat;
}
/* the cart icon is redundant once you're past the cart */
body.gc-page-checkout header .wp-block-woocommerce-cart-link{display:none!important}
/* secure-checkout badge (the flex row's ::after becomes the right-hand item) */
body.gc-page-checkout header .wp-block-group.is-content-justification-space-between::after{
  content:"Secure checkout";
  padding-left:21px;
  background:var(--gc-lock) left center/15px 15px no-repeat;
  font:600 12px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.01em;
  color:var(--co-ink-2);white-space:nowrap;
}

/* ---- 3 · Width: kill the 704px post-content cap; give the block room ---- */
body.gc-page-checkout .entry-content.wp-block-post-content{max-width:1120px!important}
body.gc-page-checkout .wc-block-checkout{
  max-width:1120px;margin-inline:auto;
  padding-block:clamp(24px,4vw,48px);
}
/* Own the desktop two-column layout explicitly. The columns live inside
   .wc-block-components-sidebar-layout, which only goes flex two-column when
   WooCommerce's resize-JS adds `.is-large`; at our widened width that class
   doesn't reliably attach, leaving it block (summary stacked 1000px below).
   Declare the row on the correct container so it can't depend on that class. */
@media (min-width:1000px){
  body.gc-page-checkout .wc-block-components-sidebar-layout{
    display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    align-items:flex-start;gap:clamp(28px,3.5vw,56px);
  }
  body.gc-page-checkout .wc-block-checkout__main{flex:1 1 auto!important;min-width:0!important;max-width:none!important}
  body.gc-page-checkout .wc-block-checkout__sidebar{flex:0 0 384px!important;width:384px!important;max-width:384px!important}
}

/* ---- 4 · Order summary → warm, sticky, de-squooshed card ---- */
body.gc-page-checkout .wc-block-checkout__sidebar{
  background:var(--co-surface);border:1px solid var(--co-border);border-radius:16px;
  padding:22px 22px 24px!important;align-self:flex-start;position:sticky;top:24px;
  box-shadow:0 1px 2px rgba(23,23,23,.04),0 14px 32px -24px rgba(23,23,23,.22);
}
body.gc-page-checkout .wc-block-components-order-summary-item__description{
  padding-left:14px!important;word-break:normal!important;overflow-wrap:normal!important;
}
body.gc-page-checkout .wc-block-components-order-summary-item__total-price,
body.gc-page-checkout .wc-block-components-order-summary-item__individual-prices,
body.gc-page-checkout .wc-block-components-totals-item__value{white-space:nowrap}
/* brand-green order total */
body.gc-page-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  color:var(--co-green)!important;
}

/* ---- 5 · Hide the express-payment box + its "Or continue below" divider ----
   WooPayments renders an (empty on most desktops) Apple/Google-Pay iframe here;
   it reads as a dead box on a focused checkout. Hidden for calm; card payment
   (below) is the path. Re-enable deliberately if wallet express is configured. */
body.gc-page-checkout .wc-block-components-express-payment,
body.gc-page-checkout .wc-block-components-express-payment-continue-rule{display:none!important}

/* ---- 6 · Brand the Place Order button + focus rings ---- */
body.gc-page-checkout .wc-block-components-checkout-place-order-button{
  background:var(--co-green)!important;border-radius:10px!important;
  font-weight:700!important;padding:16px 24px!important;height:auto!important;
}
body.gc-page-checkout .wc-block-components-checkout-place-order-button:hover{background:var(--co-green-hov)!important}
body.gc-page-checkout .wc-block-components-text-input input:focus,
body.gc-page-checkout .wc-block-components-text-input textarea:focus,
body.gc-page-checkout .wc-block-components-select input:focus{
  box-shadow:0 0 0 2px var(--co-green-500)!important;border-color:var(--co-green)!important;
}

/* ---- 7 · SSL reassurance under the actions ---- */
body.gc-page-checkout .wc-block-checkout__actions::after{
  content:"Secure SSL checkout — your card details are encrypted end-to-end";
  display:block;margin-top:16px;padding-top:20px;text-align:center;
  background:var(--gc-lock) top center/15px 15px no-repeat;
  font:500 12px/1.5 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--co-muted);
}

/* ---- 8 · Small screens: unstick the summary, tidy the bar ---- */
@media (max-width:999px){
  body.gc-page-checkout .wc-block-checkout__sidebar{position:static;top:auto;margin-top:22px}
}
@media (max-width:519px){
  body.gc-page-checkout .wp-block-site-title a{width:138px;height:30px}
  body.gc-page-checkout header .wp-block-group.is-content-justification-space-between::after{
    content:"Secure";padding-left:19px;background-size:13px 13px;
  }
}

/* ============================================================================
 * 9 · ART DIRECTION PASS (2026-08-12)
 *
 * Everything above made the stock checkout tidy. This makes it ours.
 *
 * The brief, from watching how the page actually reads: it opens cold on a bare
 * email field with no sense of where you are or how far there is to go; the
 * thing you are buying is illustrated by a missing-image glyph; the payment
 * options are four competing logo rows; and nothing anywhere answers the only
 * question a buyer of a done-for-you service actually has, which is "I pay, and
 * then what?".
 *
 * So: numbered steps get real weight, the summary loses the placeholder and
 * gains a "what happens next" panel (rendered by groundcraft-site.php), the
 * money is the loudest thing on the page, and the payment methods calm down.
 * ==========================================================================*/

/* ---- 9.1 · Section headings in the display face ------------------------- */
/* WooCommerce sets these at body weight; they are the page's structure and
   should read as structure. With step numbers on, the number is part of the
   heading — so it gets the same face and a brand-green counter. */
body.gc-page-checkout .wc-block-components-checkout-step__title,
body.gc-page-checkout .wc-block-components-title{
  font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif!important;
  font-weight:700!important;font-size:17px!important;letter-spacing:-.01em!important;
  color:var(--co-ink)!important;
}
body.gc-page-checkout .wc-block-components-checkout-step__heading{
  margin-bottom:6px!important;align-items:baseline!important;
}
/* Woo prints the step number as a CSS counter on the title's ::before, not as an
   element. Left alone it inherits the heading and reads as part of the sentence
   ("1. Contact information"); as a mono, brand-green marker it reads as a step. */
body.gc-page-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step__title::before{
  font-family:var(--font-mono),ui-monospace,monospace!important;
  font-size:12px!important;font-weight:400!important;
  color:var(--co-green)!important;letter-spacing:.04em;
}
body.gc-page-checkout .wc-block-components-checkout-step__description{
  color:var(--co-muted)!important;font-size:13px!important;
}
body.gc-page-checkout .wc-block-components-checkout-step:not(:first-child){
  margin-top:34px!important;padding-top:0!important;
}

/* ---- 9.2 · Inputs: one consistent field ---------------------------------- */
body.gc-page-checkout .wc-block-components-text-input input[type=text],
body.gc-page-checkout .wc-block-components-text-input input[type=email],
body.gc-page-checkout .wc-block-components-text-input input[type=tel],
body.gc-page-checkout .wc-block-components-combobox-control input,
body.gc-page-checkout .wc-blocks-components-select__select{
  border:1px solid var(--co-border)!important;border-radius:10px!important;
  background:var(--co-surface)!important;
  font-size:15px!important;color:var(--co-ink)!important;
  transition:border-color .14s,box-shadow .14s;
}
body.gc-page-checkout .wc-block-components-text-input.is-active label,
body.gc-page-checkout .wc-block-components-text-input label{color:var(--co-muted)!important}

/* ---- 9.3 · Payment methods: card leads, the rest stay quiet -------------- */
/* Four full-width logo rows of equal weight turn a payment choice into a
   comparison exercise. The selected method keeps the brand tint; the others
   recede until chosen. */
body.gc-page-checkout .wc-block-components-radio-control-accordion-option{
  border:1px solid var(--co-border)!important;border-radius:12px!important;
  margin-bottom:8px!important;background:var(--co-surface)!important;
  transition:border-color .14s,background .14s;
}
body.gc-page-checkout .wc-block-components-radio-control-accordion-option:hover{
  border-color:color-mix(in srgb,var(--co-green) 45%,var(--co-border))!important;
}
body.gc-page-checkout .wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color:var(--co-green)!important;
  background:color-mix(in srgb,var(--co-green-500) 9%,var(--co-surface))!important;
}
body.gc-page-checkout .wc-block-components-radio-control__option{padding:14px 16px!important}
body.gc-page-checkout .wc-block-components-radio-control__label{
  font-weight:600!important;color:var(--co-ink)!important;
}
/* Third-party marks sit at a supporting size, not a competing one. */
body.gc-page-checkout .wc-block-components-payment-method-icons img,
body.gc-page-checkout .wc-block-components-payment-method-label img{
  max-height:19px!important;width:auto!important;opacity:.9;
}

/* ---- 9.4 · Order summary: drop the placeholder, lift the money ----------- */
/* Every bundle renders a grey "no image" square. A $399 purchase illustrated by
   a broken-image glyph is the worst detail on the page; the item name and its
   description carry it better than a placeholder ever could. */
body.gc-page-checkout .wc-block-components-order-summary-item__image{display:none!important}
body.gc-page-checkout .wc-block-components-order-summary-item__description{padding-left:0!important}
body.gc-page-checkout .wc-block-components-order-summary-item{
  padding:0 0 18px!important;border-bottom:1px solid var(--co-border);margin-bottom:18px!important;
}
body.gc-page-checkout .wc-block-components-product-name{
  font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif!important;
  font-weight:700!important;font-size:15.5px!important;color:var(--co-ink)!important;
  line-height:1.3!important;
}
/* The "was" price stays honest: struck, quiet, next to what you actually pay. */
body.gc-page-checkout .wc-block-components-sale-badge{
  background:color-mix(in srgb,var(--co-green-500) 22%,transparent)!important;
  color:var(--co-green)!important;border-radius:6px!important;
  font-weight:700!important;font-size:11px!important;letter-spacing:.02em!important;
}
body.gc-page-checkout .wc-block-components-order-summary__title{
  font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif!important;
  font-weight:700!important;font-size:15px!important;color:var(--co-ink)!important;
}
/* Coupons are a utility, not a headline. */
body.gc-page-checkout .wc-block-components-totals-coupon .wc-block-components-panel__button{
  font-size:13px!important;color:var(--co-muted)!important;font-weight:500!important;
}
/* The total is the loudest thing in the sidebar. */
body.gc-page-checkout .wc-block-components-totals-footer-item{
  border-top:1px solid var(--co-border)!important;margin-top:6px!important;padding-top:16px!important;
}
body.gc-page-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label{
  font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif!important;
  font-weight:700!important;font-size:17px!important;color:var(--co-ink)!important;
}
body.gc-page-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif!important;
  font-weight:700!important;font-size:26px!important;letter-spacing:-.02em!important;
}

/* ---- 9.5 · "What happens next" ------------------------------------------ */
/* Rendered by groundcraft-site.php off the totals block. The one question a
   buyer of a done-for-you service actually has, answered where they are about
   to pay — and answered with what the system genuinely does. */
.gc-co-next{
  margin-top:22px;padding-top:20px;border-top:1px solid var(--co-border);
}
.gc-co-next__h{
  margin:0 0 14px!important;
  font-family:var(--font-display),'Space Grotesk',system-ui,sans-serif;
  font-weight:700;font-size:14px;color:var(--co-ink);
}
.gc-co-next__list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.gc-co-next__list li{display:flex;gap:11px;align-items:flex-start;margin:0}
.gc-co-next__n{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--co-green-500) 30%,transparent);
  color:var(--co-green);
  font-family:var(--font-mono),ui-monospace,monospace;font-size:11px;line-height:1;
}
.gc-co-next__t{font-size:13px;line-height:1.5;color:var(--co-ink-2)}
.gc-co-next__t b{display:block;font-weight:700;color:var(--co-ink);font-size:13.5px}
.gc-co-next__foot{
  margin:16px 0 0;font-size:12.5px;line-height:1.5;color:var(--co-muted);
}
.gc-co-next__foot a{color:var(--co-green);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ---- 9.6 · The pay button ----------------------------------------------- */
body.gc-page-checkout .wc-block-components-checkout-place-order-button{
  font-size:16px!important;letter-spacing:.01em!important;
  box-shadow:0 10px 24px -14px rgba(82,125,33,.9);
  transition:background .14s,transform .14s,box-shadow .14s;
}
body.gc-page-checkout .wc-block-components-checkout-place-order-button:hover{
  transform:translateY(-1px);box-shadow:0 14px 28px -14px rgba(82,125,33,.95);
}
body.gc-page-checkout .wc-block-components-checkout-place-order-button:active{transform:none}
/* The terms line sits right above the button, where it is actually read. */
body.gc-page-checkout .wc-block-checkout__terms{
  font-size:12.5px!important;color:var(--co-muted)!important;margin-bottom:16px!important;
}
body.gc-page-checkout .wc-block-checkout__terms a{
  color:var(--co-green)!important;font-weight:600;text-underline-offset:2px;
}

/* ---- 9.7 · Notices: informative, not alarming ---------------------------- */
/* "You cannot add another of these to your cart" is not an emergency. Full-bleed
   red for a duplicate-item message trains people to distrust the page. */
body.gc-page-checkout .wc-block-components-notice-banner{
  border-radius:12px!important;border-width:1px!important;
  font-size:13.5px!important;align-items:center!important;
}
body.gc-page-checkout .wc-block-components-notice-banner.is-error{
  background:#fff8f6!important;border-color:#f0c7bb!important;color:var(--co-ink)!important;
}
body.gc-page-checkout .wc-block-components-notice-banner.is-error>svg{
  fill:#b4441f!important;width:20px!important;height:20px!important;
}
body.gc-page-checkout .wc-block-components-notice-banner.is-info{
  background:#f6faf0!important;border-color:#cfe3b4!important;
}

/* ---- 9.8 · Narrow: the summary comes first ------------------------------- */
/* On a phone the sidebar renders below a long form, so the buyer scrolls a
   whole checkout before seeing what they are buying. Order it first. */
@media (max-width:999px){
  body.gc-page-checkout .wc-block-components-sidebar-layout{display:flex!important;flex-direction:column!important}
  body.gc-page-checkout .wc-block-checkout__sidebar{order:-1;margin-top:0!important;margin-bottom:24px!important}
  body.gc-page-checkout .wc-block-checkout__main{order:1}
  body.gc-page-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:23px!important}
}

/* ---- 9.9 · Rules that separate nothing ---------------------------------- */
/* Woo's summary toggle carries a border top AND bottom. At the top of the card
   the upper rule sits a few pixels under the card edge and separates nothing;
   on a phone, where the summary starts collapsed, the lower one lands right
   above the "what happens next" rule and reads as a double line. */
body.gc-page-checkout .wc-block-components-checkout-order-summary__title{border-top:0!important}
@media (max-width:999px){
  .gc-co-next{border-top:0;padding-top:2px;margin-top:18px}
}