/*
Theme Name: M3 Flow
Theme URI: https://dev.dgbay.com
Author: DGBay
Description: Material Design 3 (Material You) WordPress Theme for DGBay disc golf marketplace. WooCommerce + Dokan compatible.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Text Domain: m3-flow
*/

/* ==========================================================================
   Font Fallbacks — Prevent CLS during async Google Fonts load
   ========================================================================== */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Outfit Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 98%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* ==========================================================================
   M3 Design Token System — Light Defaults
   Brand Primary: #0787ea (DGBay Blue)
   ========================================================================== */
:root {
  /* ── Primary ─────────────────────────────────────── */
  --md-sys-color-primary:               #0787ea;
  --md-sys-color-on-primary:            #ffffff;
  --md-sys-color-primary-container:     #d8e2ff;
  --md-sys-color-on-primary-container:  #001a41;

  /* ── Secondary ───────────────────────────────────── */
  --md-sys-color-secondary:               #535f79;
  --md-sys-color-on-secondary:            #ffffff;
  --md-sys-color-secondary-container:     #d9e2ff;
  --md-sys-color-on-secondary-container:  #0f1b32;

  /* ── Tertiary / Accent ───────────────────────────── */
  --md-sys-color-tertiary:               #6b5778;
  --md-sys-color-on-tertiary:            #ffffff;
  --md-sys-color-tertiary-container:     #f3daff;
  --md-sys-color-on-tertiary-container:  #251431;

  /* ── Error ───────────────────────────────────────── */
  --md-sys-color-error:               #ba1a1a;
  --md-sys-color-on-error:            #ffffff;
  --md-sys-color-error-container:     #ffdad6;
  --md-sys-color-on-error-container:  #410002;

  /* ── Warning / Success ───────────────────────────── */
  --md-sys-color-warning:             #e37400;
  --md-sys-color-success:             #188038;
  --md-sys-color-success-bg:          #e6f4ea;

  /* ── Surface / Background ────────────────────────── */
  --md-sys-color-background:             #fdfbff;
  --md-sys-color-on-background:          #1a1b1f;
  --md-sys-color-surface:                #fdfbff;
  --md-sys-color-on-surface:             #1a1b1f;
  --md-sys-color-surface-variant:        #e1e2ec;
  --md-sys-color-on-surface-variant:     #44464f;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low:  #f3f3f8;
  --md-sys-color-surface-container:      #eeeeec;
  --md-sys-color-surface-container-high: #e3e2e6;
  --md-sys-color-surface-container-highest: #dcdce0;

  /* ── Outline ─────────────────────────────────────── */
  --md-sys-color-outline:              #74777f;
  --md-sys-color-outline-variant:      #c4c6d0;

  /* ── Inverse ─────────────────────────────────────── */
  --md-sys-color-inverse-surface:      #2f3033;
  --md-sys-color-inverse-on-surface:   #f2f0f4;
  --md-sys-color-inverse-primary:      #a8c8ff;

  /* ── Typography ──────────────────────────────────── */
  --md-sys-typescale-display-font:     'Outfit', 'Outfit Fallback', system-ui, sans-serif;
  --md-sys-typescale-body-font:        'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --md-sys-typescale-display-large:    3.5625rem;
  --md-sys-typescale-display-medium:   2.8125rem;
  --md-sys-typescale-headline-large:   2rem;
  --md-sys-typescale-headline-medium:  1.75rem;
  --md-sys-typescale-title-large:      1.375rem;
  --md-sys-typescale-title-medium:     1rem;
  --md-sys-typescale-body-large:       1rem;
  --md-sys-typescale-body-medium:      0.875rem;
  --md-sys-typescale-body-small:       0.75rem;
  --md-sys-typescale-label-large:      0.875rem;
  --md-sys-typescale-label-medium:     0.75rem;

  /* ── Shapes ──────────────────────────────────────── */
  --md-sys-shape-corner-none:          0px;
  --md-sys-shape-corner-extra-small:   4px;
  --md-sys-shape-corner-small:         8px;
  --md-sys-shape-corner-medium:        12px;
  --md-sys-shape-corner-large:         16px;
  --md-sys-shape-corner-extra-large:   24px;
  --md-sys-shape-corner-full:          9999px;

  /* ── Elevation (Shadows) ─────────────────────────── */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0px 1px 2px rgba(0,0,0,0.1), 0px 1px 3px 1px rgba(0,0,0,0.06);
  --md-sys-elevation-2: 0px 1px 2px rgba(0,0,0,0.1), 0px 2px 6px 2px rgba(0,0,0,0.08);
  --md-sys-elevation-3: 0px 4px 8px 3px rgba(0,0,0,0.08), 0px 1px 3px rgba(0,0,0,0.06);
  --md-sys-elevation-4: 0px 6px 10px 4px rgba(0,0,0,0.08), 0px 2px 3px rgba(0,0,0,0.06);
  --md-sys-elevation-5: 0px 8px 12px 6px rgba(0,0,0,0.08), 0px 4px 4px rgba(0,0,0,0.06);

  /* ── Transitions ─────────────────────────────────── */
  --md-sys-motion-fast:   0.15s cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-normal: 0.25s cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-slow:   0.35s cubic-bezier(0.2, 0, 0, 1);
}

/* ==========================================================================
   M3 Dark Mode — Explicit Toggle
   ========================================================================== */
html[data-theme="dark"] {
  --md-sys-color-primary:               #7dc3ff;
  --md-sys-color-on-primary:            #003062;
  --md-sys-color-primary-container:     #004786;
  --md-sys-color-on-primary-container:  #d8e2ff;

  --md-sys-color-secondary:               #bac8ea;
  --md-sys-color-on-secondary:            #253149;
  --md-sys-color-secondary-container:     #3b4760;
  --md-sys-color-on-secondary-container:  #d9e2ff;

  --md-sys-color-tertiary:               #d7bee4;
  --md-sys-color-on-tertiary:            #3b2948;
  --md-sys-color-tertiary-container:     #534060;
  --md-sys-color-on-tertiary-container:  #f3daff;

  --md-sys-color-error:               #ffb4ab;
  --md-sys-color-on-error:            #690005;
  --md-sys-color-error-container:     #93000a;
  --md-sys-color-on-error-container:  #ffdad6;

  --md-sys-color-warning:             #ffb77c;
  --md-sys-color-success:             #81c995;
  --md-sys-color-success-bg:          hsl(142, 40%, 18%);

  --md-sys-color-background:            #121318;
  --md-sys-color-on-background:         #e3e2e6;
  --md-sys-color-surface:               #121318;
  --md-sys-color-on-surface:            #e3e2e6;
  --md-sys-color-surface-variant:       #44464f;
  --md-sys-color-on-surface-variant:    #c4c6d0;
  --md-sys-color-surface-container-lowest: #0d0e12;
  --md-sys-color-surface-container-low:  #1e1e24;
  --md-sys-color-surface-container:      #23242a;
  --md-sys-color-surface-container-high: #2d2e36;
  --md-sys-color-surface-container-highest: #38393f;

  --md-sys-color-outline:              #8e9099;
  --md-sys-color-outline-variant:      #44464f;

  --md-sys-color-inverse-surface:      #e3e2e6;
  --md-sys-color-inverse-on-surface:   #2f3033;
  --md-sys-color-inverse-primary:      #0061a4;

  --md-sys-elevation-1: 0px 1px 3px rgba(0,0,0,0.3), 0px 1px 2px rgba(0,0,0,0.2);
  --md-sys-elevation-2: 0px 2px 6px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.2);
  --md-sys-elevation-3: 0px 4px 12px rgba(0,0,0,0.4), 0px 2px 4px rgba(0,0,0,0.25);
  --md-sys-elevation-4: 0px 6px 14px rgba(0,0,0,0.45), 0px 3px 5px rgba(0,0,0,0.3);
  --md-sys-elevation-5: 0px 8px 16px rgba(0,0,0,0.5), 0px 4px 6px rgba(0,0,0,0.35);
}

/* ==========================================================================
   M3 Dark Mode — System Preference Fallback
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --md-sys-color-primary:               #7dc3ff;
    --md-sys-color-on-primary:            #003062;
    --md-sys-color-primary-container:     #004786;
    --md-sys-color-on-primary-container:  #d8e2ff;

    --md-sys-color-secondary:               #bac8ea;
    --md-sys-color-on-secondary:            #253149;
    --md-sys-color-secondary-container:     #3b4760;
    --md-sys-color-on-secondary-container:  #d9e2ff;

    --md-sys-color-tertiary:               #d7bee4;
    --md-sys-color-on-tertiary:            #3b2948;
    --md-sys-color-tertiary-container:     #534060;
    --md-sys-color-on-tertiary-container:  #f3daff;

    --md-sys-color-error:               #ffb4ab;
    --md-sys-color-on-error:            #690005;
    --md-sys-color-error-container:     #93000a;
    --md-sys-color-on-error-container:  #ffdad6;

    --md-sys-color-warning:             #ffb77c;
    --md-sys-color-success:             #81c995;
    --md-sys-color-success-bg:          hsl(142, 40%, 18%);

    --md-sys-color-background:            #121318;
    --md-sys-color-on-background:         #e3e2e6;
    --md-sys-color-surface:               #121318;
    --md-sys-color-on-surface:            #e3e2e6;
    --md-sys-color-surface-variant:       #44464f;
    --md-sys-color-on-surface-variant:    #c4c6d0;
    --md-sys-color-surface-container-lowest: #0d0e12;
    --md-sys-color-surface-container-low:  #1e1e24;
    --md-sys-color-surface-container:      #23242a;
    --md-sys-color-surface-container-high: #2d2e36;
    --md-sys-color-surface-container-highest: #38393f;

    --md-sys-color-outline:              #8e9099;
    --md-sys-color-outline-variant:      #44464f;

    --md-sys-color-inverse-surface:      #e3e2e6;
    --md-sys-color-inverse-on-surface:   #2f3033;
    --md-sys-color-inverse-primary:      #0061a4;

    --md-sys-elevation-1: 0px 1px 3px rgba(0,0,0,0.3), 0px 1px 2px rgba(0,0,0,0.2);
    --md-sys-elevation-2: 0px 2px 6px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.2);
    --md-sys-elevation-3: 0px 4px 12px rgba(0,0,0,0.4), 0px 2px 4px rgba(0,0,0,0.25);
    --md-sys-elevation-4: 0px 6px 14px rgba(0,0,0,0.45), 0px 3px 5px rgba(0,0,0,0.3);
    --md-sys-elevation-5: 0px 8px 16px rgba(0,0,0,0.5), 0px 4px 6px rgba(0,0,0,0.35);
  }
}

/* ==========================================================================
   Resets & Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--md-sys-typescale-body-font);
  font-size: var(--md-sys-typescale-body-large);
  line-height: 1.5;
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color var(--md-sys-motion-normal), color var(--md-sys-motion-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--md-sys-typescale-display-font);
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--md-sys-color-primary); outline-offset: 2px; }

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Layout Containers
   ========================================================================== */
.m3-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) {
  .m3-container { padding-inline: 24px; }
}

/* ==========================================================================
   Top App Bar & Theme Toggle
   ========================================================================== */
.m3-top-app-bar {
  background-color: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  min-height: 64px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  position: sticky;
  top: 0;
  z-index: 40;
  transition: background-color var(--md-sys-motion-normal), border-color var(--md-sys-motion-normal);
}
.m3-top-app-bar .m3-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.m3-primary-nav ul {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.m3-primary-nav a {
  color: var(--md-sys-color-on-surface);
  font-weight: 500;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: var(--md-sys-shape-corner-full);
  transition: background-color 0.2s;
}
.m3-primary-nav a:hover, .m3-primary-nav a:focus {
  background-color: var(--md-sys-color-surface-container);
  text-decoration: none;
}

/* Theme Toggle Button */
.m3-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--md-sys-color-on-surface);
  padding: 8px;
  border-radius: 50%;
  transition: background-color 0.2s;
}
.m3-icon-button:hover { background-color: var(--md-sys-color-surface-container); }

/* SVG Icon display logic */
.m3-sun, .m3-moon { display: none; }
html[data-theme="dark"] .m3-sun { display: block; }
html[data-theme="light"] .m3-moon { display: block; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .m3-sun { display: block; }
  html:not([data-theme="light"]) .m3-moon { display: none; }
}
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]) .m3-moon { display: block; }
  html:not([data-theme="dark"]) .m3-sun { display: none; }
}

/* ==========================================================================
   Components: Cards & Post Grids
   ========================================================================== */
.m3-post-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding-block: 32px;
}
@media (min-width: 600px) { .m3-post-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 900px) { .m3-post-grid { grid-template-columns: repeat(3, 1fr); } }

.m3-card {
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, background-color var(--md-sys-motion-normal);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.m3-card:hover {
  box-shadow: var(--md-sys-elevation-2);
  transform: translateY(-2px);
}
.m3-card__media img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.m3-card__content { padding: 16px; flex-grow: 1; }
.m3-card__title { margin-top: 0; font-size: var(--md-sys-typescale-title-large); margin-bottom: 8px; }
.m3-card__title a { color: var(--md-sys-color-on-surface); }
.m3-card__title a:hover { color: var(--md-sys-color-primary); }

/* ==========================================================================
   WooCommerce M3 Integration
   ========================================================================== */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 24px !important;
  margin: 32px 0 !important;
}
.woocommerce ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  background-color: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-medium);
  padding: 16px !important;
  text-align: center;
  transition: box-shadow 0.2s, background-color var(--md-sys-motion-normal);
  border: 1px solid var(--md-sys-color-outline-variant);
}
.woocommerce ul.products li.product:hover { box-shadow: var(--md-sys-elevation-1); }

/* M3 Filled Button for Add to Cart */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.add_to_cart_button {
  background-color: var(--md-sys-color-primary) !important;
  color: var(--md-sys-color-on-primary) !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  transition: opacity 0.2s, box-shadow 0.2s !important;
  border: none !important;
}
.woocommerce a.button.add_to_cart_button:hover {
  opacity: 0.9 !important;
  box-shadow: var(--md-sys-elevation-1) !important;
}

/* ==========================================================================
   M3 Filled Button (Global)
   ========================================================================== */
.m3-btn-filled {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-body-font);
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-fast), box-shadow var(--md-sys-motion-fast), transform var(--md-sys-motion-fast);
  letter-spacing: 0.02em;
}
.m3-btn-filled:hover {
  box-shadow: var(--md-sys-elevation-1);
  text-decoration: none;
}
.m3-btn-filled:active { transform: scale(0.98); }
.m3-btn-filled:focus-visible {
  outline: 3px solid var(--md-sys-color-primary);
  outline-offset: 3px;
}

/* M3 Outlined Button (Global) */
.m3-btn-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  background: transparent;
  color: var(--md-sys-color-primary);
  border: 1.5px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-body-font);
  font-size: var(--md-sys-typescale-label-large);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--md-sys-motion-fast), border-color var(--md-sys-motion-fast);
}
.m3-btn-outlined:hover {
  background-color: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
}