/* =============================================================================
   typography.css - Centralized Typography Definitions (Scoped & Modular)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1) Global CSS Variables
   ----------------------------------------------------------------------------- */
:root {
  /* Font Families */
  --ff-base: 'Optima Nova LT Pro', Georgia, serif;
  --ff-head: 'Chronicle Display', Georgia, serif;

  /* Font Weights */
  --fw-light: 300;
  --fw-thin: 100;

  /* Colors & Spacing */
  --clr-text: #333;
  --clr-link: var(--clr-text);
  --clr-link-hover: #897358;
  --ls-wide: 0.3px;
  --lh-base: 1.6;
  --lh-head: 1.4;
}

/* -----------------------------------------------------------------------------
   2) Content Typography (only in .entry-content & WooCommerce summaries)
   ----------------------------------------------------------------------------- */
.entry-content,
.woocommerce div.product .entry-summary {
  font-family: var(--ff-base);
  font-weight: var(--fw-light);
  color: var(--clr-text);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-base);
}
.entry-content p,
.woocommerce div.product .entry-summary p {
  margin: 0 0 1rem;
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.woocommerce div.product .entry-summary h1,
.woocommerce div.product .entry-summary h2,
.woocommerce div.product .entry-summary h3 {
  font-family: var(--ff-head);
  font-weight: var(--fw-thin);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-head);
  margin: 0 0 1rem;
}
.entry-content a,
.woocommerce div.product .entry-summary a {
  font-family: var(--ff-base);
  font-weight: var(--fw-light);
  color: var(--clr-link);
  text-decoration: none;
  transition: color 0.3s;
}
.entry-content a:hover,
.woocommerce div.product .entry-summary a:hover {
  color: var(--clr-link-hover);
  text-decoration: underline;
}
.entry-content input,
.entry-content textarea,
.entry-content select,
.entry-content button,
.entry-content .button,
.woocommerce div.product .entry-summary input,
.woocommerce div.product .entry-summary button {
  font-family: var(--ff-base);
  font-weight: var(--fw-light);
  font-size: 1rem;
}

/* -----------------------------------------------------------------------------
   3) WooCommerce Catalog & Product Titles
   ----------------------------------------------------------------------------- */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ff-base);
  font-size: 1.1rem;
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-head);
  margin-bottom: 0.5rem;
}
.woocommerce div.product .product_title {
  font-family: var(--ff-head);
  font-size: 2rem;
  font-weight: var(--fw-thin);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-head);
  margin-bottom: 1rem;
}

/* -----------------------------------------------------------------------------
   4) Category & Archive Titles
   ----------------------------------------------------------------------------- */
.woocommerce-products-header__title,
.tax-product_cat .page-title,
.woocommerce .archive-header h1.page-title {
  font-family: var(--ff-head);
  font-weight: var(--fw-thin);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-head);
}
.woocommerce .archive-description p,
.tax-product_cat .term-description {
  font-family: var(--ff-base);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-base);
  color: var(--clr-text);
  margin-bottom: 1.5rem;
}

/* -----------------------------------------------------------------------------
   5) Site Header & Navigation
   ----------------------------------------------------------------------------- */
.site-header .main-navigation a,
.nav-menu li a,
.mobile-navigation > ul > li > a {
  font-family: var(--ff-base);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-transform: none;
}
.site-header .main-navigation li li a,
.mobile-navigation > ul > li.menu-item-has-children > a {
  font-weight: 400;
}
.site-header .main-navigation a:hover,
.mobile-navigation > ul > li > a:hover {
  color: var(--clr-link-hover);
}

/* -----------------------------------------------------------------------------
   6) Footer Typography
   ----------------------------------------------------------------------------- */
.site-footer,
.site-footer .widget,
.site-footer .site-info {
  font-family: var(--ff-base);
  font-weight: var(--fw-light);
  color: var(--clr-text);
  line-height: var(--lh-base);
}
.site-footer a {
  font-family: var(--ff-base);
  font-weight: 400;
  color: var(--clr-text);
  transition: color 0.3s;
}
.site-footer a:hover {
  color: var(--clr-link-hover);
}
.site-footer .widget-title,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
  font-family: var(--ff-head);
  font-weight: var(--fw-thin);
}

/* -----------------------------------------------------------------------------
   7) Responsive Font Sizes
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .entry-content h1 { font-size: 2rem; }
  .entry-content h2 { font-size: 1.75rem; }
}
@media (max-width: 768px) {
  .entry-content h1 { font-size: 1.75rem; }
  .entry-content h2 { font-size: 1.65rem; }
  .site-header .main-navigation a,
  .nav-menu li a,
  .mobile-navigation > ul > li > a {
    font-size: 1rem;
    letter-spacing: 0.2px;
  }
}