/* WordPress-only additions. The design itself is in style.css, pages.css, home.css and events.css,
   copied unchanged from the prototype; nothing here restyles it. */

/* Mailing list honeypot: off screen, out of the form's flex row. */
.ff-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* WooCommerce notices (for example "isn't on sale right now") above the cart and checkout. */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-error, .woocommerce-message, .woocommerce-info { list-style: none; margin: 0 0 var(--s5); padding: var(--s4) var(--s5); border: 2px solid var(--navy); border-radius: var(--radius-m); background: var(--white); font-weight: 700; }
.woocommerce-error { border-color: var(--error); }
.woocommerce-error li + li { margin-top: var(--s2); }

/* Checkout. WooCommerce wraps payment and Place order in #payment (its script refreshes that
   block); spacing them as the form's own grid does keeps the prototype's rhythm. */
#payment { display: grid; gap: var(--s7); }
wc-order-attribution-inputs { display: none; }
.express-btns > .wcpay-payment-request-wrapper, .express-btns > #wcpay-express-checkout-wrapper, .express-btns > .wcpay-express-checkout-wrapper { grid-column: 1 / -1; margin: 0 !important; }
#wcpay-payment-request-button-separator, #wcpay-express-checkout-button-separator { display: none !important; }
/* PayPal's v6 button is a web component whose radius and height PayPal sets inline: shape it like the
   theme's Place order pill, with PayPal's own gold inside. */
.co-form :is(paypal-button, venmo-button, paylater-button) { --paypal-button-border-radius: 999px !important; height: 52px !important; display: block; box-sizing: border-box; border: 2px solid var(--navy); border-radius: 999px; overflow: hidden; }
.co-form .woocommerce-NoticeGroup-checkout .woocommerce-error { margin: 0; }
.confirm-failed { display: grid; gap: var(--s5); max-width: 40rem; }
/* payment.php lists the choice cards as ul > li.wc_payment_method, which WooPayments looks for. */
.pay-choice { list-style: none; padding: 0; margin-top: 0; margin-left: 0; }
.pay-choice > li { margin: 0; padding: 0; background: none; border: 0; }
.pay-choice > li > .pay-opt { display: block; height: 100%; }
/* Tap areas. The design draws a few controls under 44x44 px on phones (footer links, the slideshow
   button, Remove in the cart, the desktop nav on a touch screen). An invisible ::after grows what you
   can tap to at least 44x44 and leaves the drawing as it is. */
@media (max-width: 640px), (pointer: coarse) {
  .foot-col a, .link-btn, .head-top .nav a { position: relative; }
  .foot-col a::after, .link-btn::after, .head-top .nav a::after, .slides-toggle::after {
    content: ""; position: absolute;
    top: min(0px, calc((100% - 44px) / 2)); bottom: min(0px, calc((100% - 44px) / 2));
    left: min(0px, calc((100% - 44px) / 2)); right: min(0px, calc((100% - 44px) / 2));
  }
}
/* WooPayments' card form inside the design's .pay-panel: no frame of its own, the test card note as panel text. */
.pay-panel .wcpay-upe-form { display: grid; gap: var(--s4); }
.pay-panel fieldset.wc-payment-form { border: 0; margin: 0; padding: 0 !important; min-width: 0; }
.pay-panel .testmode-info { margin: 0; font-size: var(--t-sm); }
.pay-panel .testmode-info button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.pay-panel .woocommerce-SavedPaymentMethods-saveNew { margin: var(--s4) 0 0; display: flex; gap: var(--s2); align-items: center; font-size: 1rem; }
/* Stripe keeps about 8px inside its iframe for focus rings; pull it out so the fields line up with the panel's text. */
.pay-panel .wcpay-upe-element { margin-inline: -8px; }
/* Chef pages (WordPress only; the prototype has no chef page). Built from the Featured chefs header,
   the About page's two columns and the Signature events grid; these rules only place them. */
.page-head.on-dark #chef-h, .chef-head .lede { color: var(--white); }
.chef-story { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6) var(--s8); align-items: start; }
.chef-story .chef-ph img { width: 100%; height: auto; object-fit: cover; }
.chef-bio { font-size: var(--t-base); line-height: 1.6; max-width: 62ch; }
.chef-bio > :first-child { margin-top: 0; }
.chef-bio a { color: var(--navy); }
.chef-back { padding-bottom: var(--band); margin-block: 0; font-weight: 700; max-width: none; }
.chef-back a { color: var(--navy); }
.chef-grid strong a { color: inherit; }
@media (max-width: 900px) { .chef-story { grid-template-columns: 1fr; } .chef-story .chef-ph { max-width: 26rem; } }
/* Blog posts and post lists (WordPress only). The chef page's header and white band, the Signature
   events grid and mailing list band; these rules only set the reading column for what the block editor writes. */
.post-head h1, .post-head .lede, .post-head .lede a { color: var(--white); }
.post-head h1 { font-size: var(--t-xl); line-height: 1.08; }
.post-head .page-head-grid > div { grid-column: 1 / span 9; }
.post-band, .post-head + .past-band { padding-top: calc(var(--band) * .5); }
.post-body { max-width: 46rem; font-size: var(--t-base); line-height: 1.6; }
.post-body > :first-child { margin-top: 0; }
.post-body a { color: var(--navy); }
.post-body :is(h2, h3, h4) { margin: var(--s7) 0 var(--s4); }
.post-body h2 { font-size: var(--t-lg); line-height: 1.15; }
.post-body :is(h3, h4) { font: 700 var(--t-md)/1.2 var(--display); }
.post-body :is(ul, ol) { margin: 0 0 var(--s4); padding-left: var(--s5); }
.post-body li + li { margin-top: var(--s2); }
.post-body :is(figure, .wp-caption) { margin: var(--s6) 0; max-width: 100%; }
.post-body img { border: 1px solid var(--navy); }
.post-body :is(figcaption, .wp-caption-text) { margin-top: var(--s2); font-size: var(--t-sm); }
.post-body .gb-grid-wrapper { margin-block: var(--s5); }
.post-body .gb-grid-wrapper figure { margin: 0; }
.post-body .has-small-font-size { font-size: var(--t-sm); }
.post-body hr { border: 0; border-top: 1px solid var(--navy); margin: var(--s7) 0; }
.post-body .wp-block-spacer { max-height: var(--s6); }
.post-back, .post-pages { margin: var(--s7) 0 0; font-weight: 700; display: flex; gap: var(--s6); }
.post-back a, .post-pages a { color: var(--navy); }
.post-noimg { display: grid; place-items: center; aspect-ratio: 1; background: #ff8dbd; /* the event pages' softer pink */ border: 1px solid var(--navy); }
.past-img.post-noimg img { width: 60%; aspect-ratio: auto; object-fit: contain; border: 0; }

/* Owner feedback, Nov 2: on phones and tablets the ticket art, the button and the slideshow sit centred in the event hero
   (Signature events and event pages), not against the left edge. Here so it comes after events.css. */
@media (max-width: 900px) {
  .event-hero :is(h1, h2).ticket-art { margin-inline: auto; }
  .event-hero .slides { justify-self: center; }
  .event-hero .cta-row { justify-content: center; }
}
/* Chef pages: the photos from the old chef posts, in the bio column like the blog's pictures. */
.chef-pic { margin: var(--s6) 0 0; }
.chef-pic img { width: 100%; height: auto; border: 1px solid var(--navy); }
.chef-pic figcaption { margin-top: var(--s2); font-size: var(--t-sm); }