/*
Theme Name: MFWD Store
Theme URI: https://myfavoritewebdesigns.com/
Description: Payment portal child theme for store.myfavoritewebdesigns.com. Strips Storefront back to one job: land on an invoice, see the amount, pay it. No category navigation, cart always visible, footer carries contact and links back to the main site.
Author: My Favorite Web Designs
Author URI: https://myfavoritewebdesigns.com/
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mfwd-store
Tags: e-commerce
*/

/* ==========================================================================
   Brand tokens. Identical to the main Astro site (src/styles/global.css).
   ========================================================================== */
:root {
  --mfwd-navy-deep: #051a4a;
  --mfwd-navy: #00294f;
  --mfwd-tan: #c69c6d;
  /* Tan fails WCAG on white at ~2.3:1. Use this for tan TEXT, never --mfwd-tan. */
  --mfwd-tan-text: #856025;
  --mfwd-faint: #f6f6f6;
  --mfwd-ink: #333;
  --mfwd-line: #e3e6ec;
  --mfwd-ok: #1c7c4a;
  --mfwd-display: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --mfwd-sans: "Lato", "Segoe UI", system-ui, sans-serif;
}

body,
button, input, select, textarea {
  font-family: var(--mfwd-sans);
  color: var(--mfwd-ink);
}
h1, h2, h3, h4,
.entry-title, .product_title {
  font-family: var(--mfwd-display);
  color: var(--mfwd-navy-deep);
}

/* ==========================================================================
   Header. Storefront's own selectors, not invented ones.
   Nav is removed in functions.php; this styles what is left.
   ========================================================================== */
.site-header {
  background-color: var(--mfwd-navy-deep);
  border-bottom: 0;
  /* Josh asked for more room above and below the wordmark. */
  padding-top: 2.2em;
  padding-bottom: 2.2em;
}
.site-header .site-branding { margin-bottom: .9em; }
.site-header .site-branding img,
.site-header .custom-logo-link img { max-height: 46px; width: auto; }
.site-header a { color: #fff; }

/* Kill Storefront's search toggle chrome; the invoice search sits in the page. */
.storefront-primary-navigation { background-color: transparent; padding: 0; }
.main-navigation, .storefront-handheld-footer-bar .my-account { display: none; }

/* Cart: the brightest object on every page. */
.site-header-cart { margin: 0; }
.site-header-cart .cart-contents {
  display: inline-flex; align-items: center; gap: .55em;
  background: var(--mfwd-tan);
  color: var(--mfwd-navy-deep) !important;
  font-family: var(--mfwd-display);
  font-weight: 800; font-size: .8125em;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .7em 1.1em; border-radius: 2px; text-decoration: none;
}
.site-header-cart .cart-contents:hover { background: #d9b183; }
.site-header-cart .count {
  background: var(--mfwd-navy-deep); color: #fff;
  min-width: 20px; height: 20px; border-radius: 10px;
  font-size: 12px; line-height: 20px; text-align: center; padding: 0 6px;
}
.mfwd-header-links { display: inline-flex; align-items: center; gap: 1.4em; margin-right: 1.4em; }
.mfwd-header-links a {
  font-family: var(--mfwd-display); font-size: .8125em; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-decoration: none; opacity: .85;
}
.mfwd-header-links a:hover { opacity: 1; }


/* Desktop: contact on the left, Login stacked directly ABOVE the cart on the
   right. Grid rather than flex because the three blocks are siblings emitted by
   separate hooks (mine at 55, Storefront's cart at 60) and cannot be wrapped in
   a shared container without overriding the parent template. */
@media (min-width: 768px) {
  /* One row: wordmark left, Login stacked over the cart on the right, both
     vertically centred. Storefront renders branding and the nav block as two
     stacked full-width rows, which left a tall empty column under the logo. */
  .site-header {
    display: flex;
    align-items: center;
    /* flex-start + margin-left:auto on the nav block, NOT space-between.
       Storefront emits two visually-hidden skip links as extra flex children, so
       space-between distributed the free space across four items and left the
       wordmark floating ~236px in from the edge instead of on the margin. */
    justify-content: flex-start;
    gap: 0;
    /* Align the header to the SAME column as the page content, so the wordmark
       sits on the content's left margin and the cart on its right. Storefront's
       .col-full is 1063.98px auto-centred; matching that with padding keeps the
       navy bar full-bleed while the items inside line up with the body copy.
       max() keeps a sane gutter once the viewport is narrower than the column. */
    padding-top: 1.4em;
    padding-bottom: 1.4em;
    padding-left: max(1.5em, calc((100% - 1063.98px) / 2));
    padding-right: max(1.5em, calc((100% - 1063.98px) / 2));
  }
  .site-header > .col-full {
    width: auto; max-width: none; margin: 0; padding: 0; flex: 0 0 auto;
  }
  .site-header .site-branding { margin-bottom: 0; }
  .site-header .storefront-primary-navigation {
    width: auto; padding: 0; flex: 0 0 auto;
    margin: 0 0 0 auto !important;
  }
  /* Skip links must not consume flex space. */
  .site-header > .skip-link { position: absolute; }
  .storefront-primary-navigation .col-full {
    width: auto; max-width: none; margin: 0; padding: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      ". links"
      ". cart";
    align-items: center;
    row-gap: .5em;
    column-gap: 1.5em;
  }
  .mfwd-header-links   { grid-area: links; justify-self: end; margin: 0 !important; }
  .site-header-cart    { grid-area: cart; justify-self: end; float: none !important; width: auto !important; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
button, input[type="button"], input[type="submit"],
.button, .woocommerce #respond input#submit, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button {
  background-color: var(--mfwd-tan);
  color: var(--mfwd-navy-deep);
  font-family: var(--mfwd-display);
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  border-radius: 2px;
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: #d9b183;
  color: var(--mfwd-navy-deep);
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  background-color: var(--mfwd-tan);
  color: var(--mfwd-navy-deep);
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover { background-color: #d9b183; color: var(--mfwd-navy-deep); }

/* The pay button on a single invoice should be unmissable. */
.single-product .single_add_to_cart_button {
  width: 100%; padding: 1.1em 1.5em; font-size: 1em;
}

/* ==========================================================================
   Single product = an invoice. Storefront/Woo selectors.
   ========================================================================== */
.single-product div.product .product_title { font-size: 1.75em; font-weight: 800; }
.single-product div.product .price,
.single-product div.product .summary .amount {
  font-family: var(--mfwd-display);
  font-weight: 800;
  font-size: 2.4em;
  color: var(--mfwd-navy-deep);
}
.single-product div.product .summary {
  border: 1px solid var(--mfwd-line);
  border-radius: 3px;
  padding: 1.6em;
}
.mfwd-amount-label {
  display: block; font-family: var(--mfwd-display); font-size: .7em; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #6b7280; margin-bottom: .2em;
}
.mfwd-secure {
  display: flex; align-items: center; gap: .5em;
  font-size: .875em; color: #5a6270; margin-top: 1em;
}
.mfwd-invoice-help {
  font-size: .875em; color: #6b7280; margin: 1em 0 0;
  padding-top: 1em; border-top: 1px solid var(--mfwd-line);
}

/* No product images anywhere. Josh, 2026-08-12: none of the products have a
   featured image worth showing, so this applies to ALL products, not just
   invoices. Storefront floats .summary next to the gallery at 50% width, so
   with the gallery gone the float and width both have to be cleared or the
   content is stranded in the left half of the page. */
.single-product div.product .woocommerce-product-gallery { display: none !important; }
.single-product div.product .summary {
  float: none !important;
  width: 100% !important;
  max-width: 720px;
  /* auto on BOTH sides with !important: Storefront sets an explicit
     margin-left, so a plain `margin: 0 auto` lost and the card sat right of
     centre by ~164px. */
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Sidebar is removed in functions.php on transactional pages; this keeps the
   content column from inheriting Storefront's 640px sidebar width. */
.woocommerce.storefront-full-width-content .content-area { width: 100%; float: none; margin-right: 0; }
.single-product div.product { display: block; }

/* ==========================================================================
   Cart / checkout / account
   ========================================================================== */
.woocommerce table.shop_table { border-radius: 3px; }
.woocommerce table.shop_table th {
  font-family: var(--mfwd-display); font-size: .75em; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: #6b7280;
}
.woocommerce .cart_totals h2, .woocommerce-checkout h3 {
  font-family: var(--mfwd-display); font-weight: 800;
}
.woocommerce .cart_totals .order-total .amount { font-size: 1.4em; color: var(--mfwd-navy-deep); }
.woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; }
.woocommerce-MyAccount-navigation li a {
  display: block; padding: .6em 0; text-decoration: none;
  font-family: var(--mfwd-display); font-weight: 700; font-size: .875em;
}
.woocommerce-info, .woocommerce-message {
  background: #fff8ec; border-top-color: var(--mfwd-tan); color: var(--mfwd-ink);
}
.woocommerce-info::before, .woocommerce-message::before { color: var(--mfwd-tan-text); }

/* ==========================================================================
   Footer: contact + back to the main site. No nav.
   ========================================================================== */
/* Storefront wraps the footer in .col-full, which is capped at ~1064px and
   auto-centred. That inset the whole footer against a full-bleed header, so the
   cap has to be lifted here, not just on our own grid. */
.site-footer { padding: 0; }
.site-footer .col-full { max-width: none !important; margin: 0 !important; padding: 0 !important; }

.mfwd-footer { background: var(--mfwd-navy-deep); color: rgba(255,255,255,.75); padding: 2.8em 0 1.6em; }
/* Storefront's own link colour (#333) was winning here, which on the navy
   footer rendered the phone, email and site links almost invisible. */
.mfwd-footer a,
.site-footer .mfwd-footer a,
.mfwd-footer__bar a { color: #fff !important; }
.mfwd-footer a:hover,
.site-footer .mfwd-footer a:hover { color: #fff !important; opacity: .8; }
/* Full width, matching the header. Was capped at 1080px, which made the
   footer look inset against a full-bleed header. */
.mfwd-footer__grid {
  max-width: none; margin: 0; padding: 0 2.5em;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.9em;
}
.mfwd-footer h3 {
  color: #fff; font-size: .75em; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 .8em;
}
.mfwd-footer p { margin: 0 0 .25em; font-size: .95em; }
.mfwd-footer__logo img { height: 54px; width: auto; margin-bottom: .8em; }
.mfwd-footer__bar {
  max-width: none; margin: 1.9em 0 0; padding: 1.1em 2.5em 0;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex; justify-content: space-between; gap: 1em; flex-wrap: wrap; font-size: .8125em;
}


/* ==========================================================================
   Mobile header: logo above cart, both centred.
   Written against the real Storefront DOM, which is:
     .site-header > .col-full > .site-branding[float:left] > a.custom-logo-link > img
     .site-header > .storefront-primary-navigation > .col-full
        > .mfwd-header-links
        > ul.site-header-cart > li > a.cart-contents
   The branding floats left and the cart button is an inline-flex anchor inside a
   list item, so centring needs the float cleared AND text-align on the ancestors.
   ========================================================================== */
@media (max-width: 767px) {
  .site-header .col-full { text-align: center; }

  .site-header .site-branding {
    float: none !important;
    width: auto !important;
    margin: 0 auto .7em !important;
    text-align: center;
  }
  .site-header .custom-logo-link { display: block; text-align: center; }
  .site-header .custom-logo { display: inline-block; margin: 0 auto; }

  .mfwd-header-links {
    display: flex !important;
    justify-content: center;
    margin: 0 auto .6em !important;
  }


  .site-header-cart,
  .site-header-cart li { text-align: center; float: none; width: auto; }
  .site-header-cart .cart-contents { margin: 0 auto; }
}

/* ==========================================================================
   Checkout
   ========================================================================== */
/* The payment block ships with a 3px solid blue border that boxes the whole
   card form. It reads as a stray frame, and at 390px it wraps the fields
   edge-to-edge and looks broken. Nothing depends on it. */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
  border: 0 !important;
  border-radius: 0;
  background: transparent;
}
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--mfwd-line);
  padding-left: 0;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--mfwd-faint);
  border-radius: 2px;
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }