/*
Theme Name: We Grow Magic
Theme URI: https://wegrowmagic.com
Author: We Grow Magic
Author URI: https://wegrowmagic.com
Description: A custom WordPress + WooCommerce theme for We Grow Magic - premium microdosing mushroom supplements. Built with ACF Pro for full dynamic content management.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: we-grow-magic
Tags: woocommerce, custom-logo, custom-menu, featured-images, theme-options

This theme is designed specifically for We Grow Magic and requires:
- Advanced Custom Fields Pro
- WooCommerce
*/
/*
 * Checkout UI improvements
 *
 * This stylesheet implements a clean, modern layout for the WooCommerce checkout
 * modelled loosely on Shopify’s two‑column structure and AG1’s styling. It
 * assumes that the PHP template uses the classes defined in form‑checkout.php
 * (e.g. wgm‑checkout__container, wgm‑checkout__layout, wgm‑checkout__main,
 * and wgm‑checkout__sidebar). Import this file in your theme or enqueue it
 * specifically on the checkout page to apply the styles.
 */

/* Overall page background */
body.woocommerce-checkout {
  background: #f7f7f7;
}

/* Container to constrain content width and center it */
.wgm-checkout__container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}

/* Two‑column layout using CSS Grid */
.wgm-checkout__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
}

/* Mobile: stack the columns */
@media (max-width: 900px) {
  .wgm-checkout__layout {
    grid-template-columns: 1fr;
  }
}

/* Main (left) column styling */
.wgm-checkout__main {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
}

/* Sidebar (right) column positioning */
.wgm-checkout__sidebar {
  position: sticky;
  top: 100px; /* adjust to header height */
  align-self: start;
  height: fit-content;
}

/* Order summary card */
.wgm-checkout__summary {
  background: #ffffff;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
}

/* Section titles */
.wgm-checkout__contact h2,
.wgm-checkout__shipping h2,
.wgm-checkout__shipping-method h2,
.wgm-checkout__payment h2,
.wgm-checkout__summary-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* Inputs and selects */
.woocommerce-checkout input,
.woocommerce-checkout select {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #fff;
  transition: border-color 0.2s ease;
}

.woocommerce-checkout input:focus,
.woocommerce-checkout select:focus {
  outline: none;
  border-color: #0f2e2e;
}

/* Payment box styling */
#payment {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  padding: 20px;
  margin-top: 20px;
}

/* Place order button */
#place_order {
  width: 100%;
  background: #0f2e2e;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 14px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#place_order:hover,
#place_order:focus {
  background: #144242;
}

/* Coupon box */
.wgm-checkout__coupon-box {
  background: #0f2e2e;
  color: #ffffff;
  padding: 24px;
  border-radius: 12px;
  margin-top: 30px;
}

.wgm-checkout__coupon-box a {
  color: #ffffff;
  text-decoration: underline;
}

.wgm-checkout__coupon-form input {
  flex: 1 1 auto;
  margin-right: 8px;
}

.wgm-checkout__coupon-form button {
  background: #ffffff;
  color: #0f2e2e;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.wgm-checkout__coupon-form button:hover,
.wgm-checkout__coupon-form button:focus {
  background: #e5e5e5;
}

/* Totals rows */
.wgm-checkout__totals-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}

.wgm-checkout__totals-row--subtotal {
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 8px;
}

.wgm-checkout__totals-row--total {
  font-weight: 600;
  font-size: 16px;
  border-top: 1px solid #e5e5e5;
  padding-top: 12px;
}

/* Express checkout section */
.wgm-checkout__express {
  margin-bottom: 24px;
}

.wgm-checkout__express-label {
  margin-bottom: 8px;
  font-weight: 600;
}

/* Divider between express checkout and details */
.wgm-checkout__divider {
  text-align: center;
  margin: 24px 0;
  position: relative;
}

/*
 * Checkout summary items and discount code styling
 *
 * The following rules enhance the order summary to match the reference design:
 *  - Display product thumbnails with a quantity badge
 *  - Bold product names and show variant details below
 *  - Position prices to the right
 *  - Provide an inline discount code form
 *  - Add separators and a community discount message
 */

/* Layout for each item in the summary */
.wgm-checkout__item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Thumbnail wrapper with quantity badge */
.wgm-checkout__item-image-wrapper {
  position: relative;
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}
.wgm-checkout__item-image-wrapper img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}
/* Quantity badge overlay */
.wgm-checkout__item-qty {
  position: absolute;
  top: -6px;
  left: -6px;
  background: #0f2e2e;
  color: #ffffff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

/* Details next to the image */
.wgm-checkout__item-details {
  flex: 1;
}
.wgm-checkout__item-name {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.wgm-checkout__item-variant {
  display: block;
  font-size: 12px;
  color: #6C757D;
}
.wgm-checkout__item-price {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
}

/* Inline discount code form */
.wgm-checkout__discount-form {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.wgm-checkout__discount-form input.input-text {
  flex: 1;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
}
.wgm-checkout__discount-form button {
  padding: 12px 20px;
  background: #0f2e2e;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.wgm-checkout__discount-form button:hover,
.wgm-checkout__discount-form button:focus {
  background: #144242;
}

/* Separator line inside summary */
.wgm-checkout__separator {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 24px 0;
}

/* Community discount message box */
.wgm-checkout__community-discount {
  background: #F9FAFB;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 20px;
  margin-top: 24px;
  text-align: center;
}
.wgm-checkout__community-discount p {
  margin-bottom: 12px;
  font-size: 14px;
  color: #333;
}
.wgm-checkout__community-discount .wgm-btn--primary {
  background-color: #0f2e2e;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.wgm-checkout__community-discount .wgm-btn--primary:hover,
.wgm-checkout__community-discount .wgm-btn--primary:focus {
  background-color: #144242;
}

/* Summary headings and totals row emphasised */
.wgm-checkout__summary-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}
.wgm-checkout__totals-row {
  font-size: 14px;
}
.wgm-checkout__totals-row--total {
  font-size: 18px;
  font-weight: 700;
  border-top: 1px solid #e5e5e5;
  margin-top: 8px;
  padding-top: 16px;
}

@media (max-width: 900px) {
  .wgm-checkout__item-image-wrapper {
    width: 48px;
    height: 48px;
  }
}

.wgm-checkout__divider span {
  background: #ffffff;
  padding: 0 12px;
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: #555555;
}

.wgm-checkout__divider:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #e5e5e5;
  transform: translateY(-50%);
  z-index: 0;
}

/* Mobile summary toggle: optional implementation left to JS */
/* Add your own styles if you implement a collapsing summary bar on mobile */
/* CSS Variables - Populated dynamically from ACF Theme Options */
:root {
    /* Colors */
    --wgm-primary: #0A3149;
    --wgm-secondary: #1A5276;
    --wgm-accent: #2E86AB;
    --wgm-background: #FFFFFF;
    --wgm-background-alt: #F8F9FA;
    --wgm-text: #1A1A1A;
    --wgm-text-light: #6C757D;
    --wgm-border: #E5E7EB;
    --wgm-success: #10B981;
    --wgm-error: #EF4444;
    --wgm-warning: #F59E0B;
    
    /* Typography */
    --wgm-font-heading: 'ITC Clearface Std';
    --wgm-font-body: 'General Sans';
    --wgm-font-accent: 'ITC Clearface Std';
    
    /* Font Sizes */
    --wgm-text-xs: 0.75rem;
    --wgm-text-sm: 0.875rem;
    --wgm-text-base: 1rem;
    --wgm-text-lg: 1.125rem;
    --wgm-text-xl: 1.25rem;
    --wgm-text-2xl: 1.5rem;
    --wgm-text-3xl: 1.875rem;
    --wgm-text-4xl: 2.25rem;
    --wgm-text-5xl: 3rem;
    --wgm-text-6xl: 3.75rem;
    
    /* Spacing */
    --wgm-container-max: 1400px;
    --wgm-container-narrow: 800px;
    --wgm-container-wide: 1600px;
    --wgm-section-padding: 80px;
    --wgm-section-padding-mobile: 48px;
    --wgm-gap: 24px;
    --wgm-gap-sm: 16px;
    --wgm-gap-lg: 32px;
    
    /* Border Radius */
    --wgm-radius-sm: 4px;
    --wgm-radius: 8px;
    --wgm-radius-lg: 16px;
    --wgm-radius-full: 9999px;
    
    /* Shadows */
    --wgm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wgm-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --wgm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --wgm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --wgm-transition: 0.3s ease;
    --wgm-transition-fast: 0.15s ease;
    
    /* Header */
    --wgm-header-height: 80px;
    --wgm-header-height-sticky: 64px;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--wgm-font-body);
    font-size: var(--wgm-text-base);
    line-height: 1.6;
    color: var(--wgm-text);
    background-color: var(--wgm-background);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--wgm-font-heading);
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

h1 { font-size: var(--wgm-text-5xl); }
h2 { font-size: var(--wgm-text-4xl); }
h3 { font-size: var(--wgm-text-3xl); }
h4 { font-size: var(--wgm-text-2xl); }
h5 { font-size: var(--wgm-text-xl); }
h6 { font-size: var(--wgm-text-lg); }

p {
    margin-bottom: 1em;
}

a {
    color: var(--wgm-primary);
    text-decoration: none;
    transition: color var(--wgm-transition-fast);
}


img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container */
.wgm-container {
    width: 100%;
    max-width: var(--wgm-container-max) !important;
    margin: 0 auto !important;
    padding: 0 var(--wgm-gap) !important;
}

/* Override container for shop page - remove constraints */
.wgm-shop-page .wgm-container,
.wgm-woocommerce-main .wgm-container,
.wgm-shop-page ~ .wgm-container {
    max-width: 100% !important;
    padding: 0 !important;
    width: 100% !important;
    margin: 0 !important;
}

.wgm-container--narrow {
    max-width: var(--wgm-container-narrow);
}

.wgm-container--wide {
    max-width: var(--wgm-container-wide);
}

/* Sections */
.wgm-section {
    padding: var(--wgm-section-padding) 0;
}

@media (max-width: 768px) {
    .wgm-section {
        padding: var(--wgm-section-padding-mobile) 0;
    }
    
    
    h1 { font-size: var(--wgm-text-4xl); }
    h2 { font-size: var(--wgm-text-3xl); }
    h3 { font-size: var(--wgm-text-2xl); }
}

/* Buttons */
.wgm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: var(--wgm-font-body);
    font-size: var(--wgm-text-base);
    font-weight: 500;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--wgm-radius);
    cursor: pointer;
    transition: all var(--wgm-transition);
    text-decoration: none;
}

.wgm-btn--primary {
    background-color: var(--wgm-primary);
    color: #fff;
    border-color: var(--wgm-primary);
}

.wgm-btn--primary:hover {
    background-color: var(--wgm-secondary);
    border-color: var(--wgm-secondary);
    color: #fff;
}

.wgm-btn--secondary {
    background-color: transparent;
    color: var(--wgm-primary);
    border-color: var(--wgm-primary);
}

.wgm-btn--secondary:hover {
    background-color: var(--wgm-primary);
    color: #fff;
}

.wgm-btn--white {
    background-color: #fff;
    color: var(--wgm-primary);
    border-color: #fff;
}

.wgm-btn--white:hover {
    background-color: transparent;
    color: #fff;
}

/* Screen Reader Text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Skip Link */
.skip-link {
    position: fixed;
    top: -100%;
    left: 0;
    background: var(--wgm-primary);
    color: #fff;
    padding: 8px 16px;
    z-index: 99999;
    transition: top var(--wgm-transition-fast);
}

.skip-link:focus {
    top: 0;
}