/* ============================================
   IAmGrace Theme — Critical CSS
   Above-the-fold styles.
   NOTE: Google Fonts must be loaded via BO → Design → Custom Code → HEAD
   with: <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Cormorant+Garamond:wght@400;500;600;700&display=swap">
   (System fallbacks Helvetica/Georgia kick in if not configured.)
   ============================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display headings (override Classic) */
h1, h2, h3, .h1, .h2, .h3,
.page-header h1,
.product-title,
.featured-products .title {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: var(--line-height-tight);
  color: var(--color-secondary);
}

h4, h5, h6, .h4, .h5, .h6 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
}

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

a:hover { color: var(--color-link-hover); }

/* Brand accent buttons (override Classic .btn-primary) */
.btn-primary,
.btn.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-contrast);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--letter-spacing-wide);
  transition: all var(--transition-normal);
}

.btn-primary:hover,
.btn.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-gold);
  transform: translateY(-1px);
}

/* Header (overrides Classic #header) */
#header {
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

#header .header-top {
  padding: var(--spacing-md) 0;
}

#header .logo {
  font-family: var(--font-family-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-secondary);
  letter-spacing: var(--letter-spacing-tight);
}

/* Footer (overrides Classic .footer-container) */
.footer-container {
  background-color: var(--color-secondary);
  color: var(--color-text-inverse);
  padding-top: var(--spacing-3xl);
  margin-top: var(--spacing-3xl);
}

.footer-container h3,
.footer-container .h3 {
  color: var(--color-primary);
  font-family: var(--font-family-display);
  font-size: var(--font-size-lg);
  letter-spacing: var(--letter-spacing-wide);
  margin-bottom: var(--spacing-md);
}

.footer-container a {
  color: var(--color-text-inverse);
  opacity: 0.85;
}

.footer-container a:hover {
  color: var(--color-primary);
  opacity: 1;
}