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

 :root {
	/* Color Palette */
	--truoath-cream:      #F5F0E8;   /* Main background */
	--truoath-black:      #1A1A1A;   /* Primary text */
	--truoath-warm-grey:  #6B6455;   /* Secondary text, captions */
	--truoath-brown:      #3D2B1F;   /* Dark accent, headings */
	--truoath-tan:        #C4A882;   /* Highlight, borders, accents */
	--truoath-white:      #FDFAF5;   /* Card backgrounds */
	--truoath-olive:      #6B6B47;   /* Subtle accent */
  
	/* Typography */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
  
	/* 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;
  }
  
  body {
	background-color: var(--truoath-cream);
	color: var(--truoath-black);
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: 0 !important;   /* Override Kadence body padding */
	margin-top: 0 !important;
  }
  
  /* Site wrapper resets — Kadence adds padding/margin to #page */
  #page {
	padding: 0 !important;
	margin: 0 !important;
  }
  
  /* Kadence sometimes wraps content in .site-content with padding */
  .site-content {
	padding: 0 !important;
	margin: 0 !important;
  }

  /* WordPress admin bar shifts everything — account for it */
  .admin-bar #notification-bar {
	top: 32px !important;
	position: relative !important;
  }
  .admin-bar #masthead {
	top: 70px !important; /* 32px admin bar + 38px notification bar */
  }
  .admin-bar #masthead.is-scrolled {
	top: 32px !important;
  }
  
  /* Typography */
  h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--truoath-brown);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 1rem;
  }
  
  p {
	margin-bottom: 1.5rem;
  }
  
  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):hover {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
  }
  
  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;
  }
  
  /* 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); }
  }