/**
 * TruOath Nutrition Global CSS
 * Base resets, CSS variables, and global typography
 * Design System inspired by Aesop (minimal, editorial, warm earthy tones)
 */

 :root {
	/* ===== AESOP-EXACT COLOR PALETTE (extracted from live site) ===== */
	--truoath-cream:      #fffef2;   /* Aesop page background — signature off-white */
	--truoath-bg-warm:    #f6f5e8;   /* Aesop secondary bg — slightly warmer cream */
	--truoath-black:      #252525;   /* Aesop dark charcoal — header, footer, text */
	--truoath-text:       #4f4f4c;   /* Aesop body text — warm charcoal, never pure black */
	--truoath-warm-grey:  #545450;   /* Secondary text — bumped for WCAG AA contrast */
	--truoath-brown:      #252525;   /* Kept as dark for headings (Aesop uses charcoal) */
	--truoath-tan:        #c2c2af;   /* Aesop muted border / accent — warm grey-green */
	--truoath-tan-warm:   #C4A882;   /* Our warm accent — use sparingly */
	--truoath-white:      #fffef2;   /* Same as cream — Aesop uses one tone */
	--truoath-olive:      #6b6b47;   /* Subtle botanical accent */
	--truoath-dark:       #252525;   /* Footer/header dark — pure Aesop charcoal */
	--truoath-border:     rgba(0, 0, 0, 0.08); /* Kept from phase 4 for clean lines */

	/* Typography */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  
	/* Type Scale */
	--text-xs:   0.75rem;   /* 12px */
	--text-sm:   0.875rem;  /* 14px */
	--text-base: 1rem;      /* 16px */
	--text-lg:   1.125rem;  /* 18px */
	--text-xl:   1.25rem;   /* 20px */
	--text-2xl:  1.5rem;    /* 24px */
	--text-3xl:  2rem;      /* 32px */
	--text-4xl:  2.75rem;   /* 44px */
	--text-5xl:  3.5rem;    /* 56px */
	--text-6xl:  4.5rem;    /* 72px */
  
	/* Spacing */
	--spacing-section-y: 120px;
	--spacing-section-y-mobile: 80px;
	--container-max-width: 1280px;
	--text-max-width: 680px;
  }
  
  /* ==========================================================================
	 Base Resets & Global Styles
	 ========================================================================== */
  
  *, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
  }

  /* ==========================================================================
	 Focus Visible — WCAG 2.4.7 Compliance
	 Suppress default :focus for mouse users, restore for keyboard users
	 ========================================================================== */

  /* Remove all outlines on mouse-click focus */
  :focus:not(:focus-visible) {
	outline: none;
  }

  /* Restore a branded, visible focus ring for keyboard navigation */
  :focus-visible {
	outline: 2px solid var(--truoath-tan-warm);
	outline-offset: 3px;
	border-radius: 1px;
  }

  /* WooCommerce inputs — bottom-border style needs special treatment */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
	outline: 2px solid var(--truoath-tan-warm);
	outline-offset: 2px;
  }

  /* Buttons — ensure ring is clearly visible */
  button:focus-visible,
  .button:focus-visible,
  .btn:focus-visible,
  a:focus-visible {
	outline: 2px solid var(--truoath-tan-warm);
	outline-offset: 3px;
  }
  
  body {
	background-color: var(--truoath-cream);
	color: var(--truoath-text);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: 0 !important;
	margin-top: 0 !important;
  }
  
  /* Site wrapper resets */
  #page {
	padding: 0 !important;
	margin: 0 !important;
  }
  .site-content {
	padding: 0 !important;
	margin: 0 !important;
  }

  /* WordPress admin bar compensation */
  .admin-bar #notification-bar {
	top: 32px !important;
	position: relative !important;
  }
  .admin-bar #masthead {
	top: 70px !important;
  }
  .admin-bar #masthead.is-scrolled {
	top: 32px !important;
  }
  
  /* Typography */
  h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--truoath-black);
	font-weight: 400;
	line-height: 1.15;
	margin-bottom: 1rem;
  }
  
  p {
	margin-bottom: 1.5rem;
	color: var(--truoath-text);
  }
  
  p:last-child {
	margin-bottom: 0;
  }
  
  a {
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease;
  }
  
  /* Clean link hovers - underline (site content only, not header/footer) */
  .site-content a:not(.btn):not(.no-underline) {
	position: relative;
	text-decoration: none;
	display: inline-block;
  }
  
  .site-content a:not(.btn):not(.no-underline)::after {
	content: '';
	position: absolute;
	width: 100%;
	transform: scaleX(0);
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: currentColor;
	transform-origin: bottom right;
	transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  }
  
  .site-content a:not(.btn):not(.no-underline):hover::after {
	transform: scaleX(1);
	transform-origin: bottom left;
  }
  
  img {
	max-width: 100%;
	height: auto;
	display: block;
  }
  
  /* Layout Classes */
  .truoath-container {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: 0 5%;
  }
  
  .truoath-section {
	padding: var(--spacing-section-y) 0;
  }
  
  .truoath-text-container {
	max-width: var(--text-max-width);
	margin: 0 auto;
  }
  
  /* Minimal UI Elements - overrides */
  button:not(.truoath-header__search-btn):not(.truoath-header__mobile-toggle):not(.truoath-mobile-overlay__close):not(.truoath-mobile-close), 
  .button,
  .btn {
	background: transparent;
	color: var(--truoath-black);
	font-family: var(--font-body);
	font-size: var(--text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 12px 24px;
	border: 1px solid var(--truoath-black);
	border-radius: 0 !important; /* NO rounded corners */
	cursor: pointer;
	box-shadow: none !important; /* NO box shadows */
	transition: all 0.3s ease;
	display: inline-block;
	text-align: center;
  }
  
  button:hover, 
  .button:hover,
  .btn:hover {
	background: var(--truoath-black);
	color: var(--truoath-cream);
	text-decoration: none;
  }
  
  .btn-dark {
	background: var(--truoath-brown);
	color: var(--truoath-cream);
	border-color: var(--truoath-brown);
  }
  
  .btn-dark:hover {
	background: var(--truoath-black);
	border-color: var(--truoath-black);
  }
  
  .btn-text {
	border: none;
	padding: 0;
	border-bottom: 1px solid var(--truoath-black);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--text-base);
  }
  
  .btn-text:hover {
	background: transparent;
	color: var(--truoath-black);
	border-bottom-width: 2px;
  }
  
  /* ==========================================================================
	 Global Animations & Micro-Interactions
	 ========================================================================== */
  
  .fade-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  
  .fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
  }

  /* Respect user motion preferences */
  @media (prefers-reduced-motion: reduce) {
	.fade-up {
	  opacity: 1;
	  transform: none;
	  transition: none;
	}
	*, *::before, *::after {
	  animation-duration: 0.01ms !important;
	  animation-iteration-count: 1 !important;
	  transition-duration: 0.01ms !important;
	}
  }
  
  /* Stagger delays for children */
  .stagger-1 { transition-delay: 0.1s; }
  .stagger-2 { transition-delay: 0.2s; }
  .stagger-3 { transition-delay: 0.3s; }
  .stagger-4 { transition-delay: 0.4s; }

  /* Mobile Responsiveness */
  @media (max-width: 768px) {
	.truoath-section {
	  padding: var(--spacing-section-y-mobile) 0;
	}
	
	h1 { font-size: var(--text-4xl); }
	h2 { font-size: var(--text-3xl); }
	h3 { font-size: var(--text-2xl); }
  }
/* Fix page content hiding behind header */

body:not(.home):not(.woocommerce-checkout) .entry-hero,
body:not(.home):not(.woocommerce-checkout) .woocommerce-products-header,
body:not(.home):not(.woocommerce-checkout) .truoath-page-hero,
body:not(.home):not(.woocommerce-checkout) main {
    margin-top: 180px !important;
}
/* ==========================================================================
   PREMIUM REFINEMENTS — Aesop-level spacing & typography polish
   ========================================================================== */

/* Tighter, more editorial body text */
body {
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — tighter tracking, slightly reduced weight feel (Aesop style) */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* Section vertical rhythm — breathe more on desktop */
@media (min-width: 1025px) {
  :root {
    --spacing-section-y: 140px;
  }
}

/* Buttons — consistent premium feel */
.truoath-btn,
button.button,
input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button {
  letter-spacing: 0.12em !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;  /* flat edges = premium */
  padding: 16px 32px !important;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease !important;
}

/* Inputs — unified look (scoped to light pages only, not dark footer) */
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="password"],
.woocommerce input[type="search"],
.woocommerce textarea,
.woocommerce select,
.checkout input[type="text"],
.checkout input[type="email"] {
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  font-size: 14px !important;
  padding: 14px 16px !important;
  font-family: var(--font-body) !important;
}

.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus,
.woocommerce input[type="password"]:focus,
.woocommerce textarea:focus {
  border-color: rgba(0,0,0,0.3) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Remove WooCommerce rounded corners everywhere */
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  border-radius: 0 !important;
}