/*
 * AtHealth — Global Design Tokens & Base Styles
 * Session A — Foundation
 *
 * All shortcodes and LMS screens consume these custom properties.
 * Do not hardcode hex values in component CSS; use vars from this file.
 */

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Brand colors */
  --ahs-purple:       #6B63AD;
  --ahs-purple-dk:    #4E4890;
  --ahs-purple-pale:  #EEEDF8;
  --ahs-purple-lt:    #9B95CC;
  --ahs-red:          #D94040;
  --ahs-red-dk:       #B02E2E;

  /* Dark section backgrounds */
  --ahs-navy:         #1E1A3A;   /* full-width dark sections */
  --ahs-card-navy:    #2D2A48;   /* format tile headers on course cards */

  /* Neutrals */
  --ahs-neutral-800:  #2D2D2D;
  --ahs-neutral-600:  #6B6B6B;
  --ahs-neutral-300:  #DDDDDD;
  --ahs-neutral-100:  #F5F5F5;
  --ahs-neutral-50:   #FAFAFA;
  --ahs-white:        #FFFFFF;

  /* Accent */
  --ahs-gold:         #F5A623;
  --ahs-green:        #2E8B57;

  /* Typography */
  --ahs-font-serif:   'Lora', Georgia, serif;
  --ahs-font-sans:    'Source Sans 3', Arial, sans-serif;

  /* Layout */
  --ahs-max-width:    1100px;

  /* Borders & radius */
  --ahs-radius-card:  6px;
  --ahs-radius-btn:   4px;
  --ahs-radius-input: 4px;
  --ahs-border:       1px solid var(--ahs-neutral-300);

  /* Shadows */
  --ahs-shadow-card:       0 1px 3px rgba(0, 0, 0, 0.07);
  --ahs-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  --ahs-shadow-elevated:   0 6px 24px rgba(107, 99, 173, 0.12);
  --ahs-shadow-search:     0 4px 20px rgba(107, 99, 173, 0.15);
  --ahs-focus-ring:        0 0 0 3px rgba(107, 99, 173, 0.15);

  /* Transitions */
  --ahs-transition: 150ms ease;
}

/* ── Global Base ────────────────────────────────────────────────────────── */

body {
  font-family: var(--ahs-font-sans);
  color: var(--ahs-neutral-800);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--ahs-font-serif);
}

a {
  color: var(--ahs-purple);
}
a:hover {
  color: var(--ahs-purple-dk);
}

/* ── Layout Helper ──────────────────────────────────────────────────────── */

.ahs-container {
  max-width: var(--ahs-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── Button Classes ─────────────────────────────────────────────────────── */
/*
 * Usage: class="ahs-btn ahs-btn-primary"
 * These are intentionally low-specificity so component CSS can override
 * padding/size without needing !important.
 */

.ahs-btn {
  display: inline-block;
  padding: 10px 20px;
  font-family: var(--ahs-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--ahs-radius-btn);
  cursor: pointer;
  transition: background-color var(--ahs-transition), color var(--ahs-transition);
}

.ahs-btn-primary {
  background: var(--ahs-purple);
  color: var(--ahs-white) !important;
}
.ahs-btn-primary:hover,
.ahs-btn-primary:focus {
  background: var(--ahs-purple-dk);
  color: var(--ahs-white) !important;
}

.ahs-btn-red {
  background: var(--ahs-red);
  color: var(--ahs-white) !important;
}
.ahs-btn-red:hover,
.ahs-btn-red:focus {
  background: var(--ahs-red-dk);
  color: var(--ahs-white) !important;
}

.ahs-btn-outline {
  background: transparent;
  color: var(--ahs-purple);
  border: 1px solid var(--ahs-purple);
}
.ahs-btn-outline:hover,
.ahs-btn-outline:focus {
  background: var(--ahs-purple-pale);
  color: var(--ahs-purple-dk);
  border-color: var(--ahs-purple-dk);
}

.ahs-btn:disabled,
.ahs-btn[disabled] {
  background: var(--ahs-neutral-300);
  color: var(--ahs-neutral-600) !important;
  cursor: not-allowed;
}

/* ── Card Base ──────────────────────────────────────────────────────────── */

.ahs-card {
  background: var(--ahs-white);
  border: var(--ahs-border);
  border-radius: var(--ahs-radius-card);
  box-shadow: var(--ahs-shadow-card);
  transition: box-shadow var(--ahs-transition);
}
.ahs-card:hover {
  box-shadow: var(--ahs-shadow-card-hover);
}

/* ── Form Inputs ────────────────────────────────────────────────────────── */

.ahs-input {
  font-family: var(--ahs-font-sans);
  font-size: 14px;
  color: var(--ahs-neutral-800);
  border: var(--ahs-border);
  border-radius: var(--ahs-radius-input);
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--ahs-transition), box-shadow var(--ahs-transition);
}
.ahs-input:focus {
  border-color: var(--ahs-purple);
  box-shadow: var(--ahs-focus-ring);
}

/* ── Select ─────────────────────────────────────────────────────────────── */

.ahs-select {
  font-family: var(--ahs-font-sans);
  font-size: 14px;
  color: var(--ahs-neutral-800);
  border: var(--ahs-border);
  border-radius: var(--ahs-radius-input);
  padding: 9px 32px 9px 12px;
  width: 100%;
  box-sizing: border-box;
  background: var(--ahs-white);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6B6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  outline: none;
  transition: border-color var(--ahs-transition), box-shadow var(--ahs-transition);
}
.ahs-select:focus {
  border-color: var(--ahs-purple);
  box-shadow: var(--ahs-focus-ring);
}

/* ── Star Ratings ───────────────────────────────────────────────────────── */

.ahs-stars {
  color: var(--ahs-gold);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

/* ── Section Utility ────────────────────────────────────────────────────── */

.ahs-section {
  padding: 56px 0;
}
.ahs-section--sm {
  padding: 32px 0;
}
.ahs-section--lg {
  padding: 72px 0;
}
.ahs-section--pale {
  background: var(--ahs-purple-pale);
}
.ahs-section--light {
  background: var(--ahs-neutral-100);
}
.ahs-section--dark {
  background: var(--ahs-navy);
  color: var(--ahs-white);
}

/* ── Full-Bleed Site Layout ──────────────────────────────────────────────── */
/*
 * 'ahs-fullbleed' is added to <body> by AHS_Layout only on pages that need
 * viewport-wide section backgrounds: home, catalog (shop/category/tag), and
 * course detail. All other pages — plain CMS pages, account, cart, checkout —
 * use Astra's default bounded container with no overrides needed.
 *
 * Content bounding on full-bleed pages:
 *   - Shortcode pages (home) → .ahs-container inside each .ahs-section
 *   - Catalog grid           → explicit max-width on ul.products (class-ahs-shop.php)
 *   - Course detail          → div.product rule below
 */

/* Remove Astra's container constraint on full-bleed pages only. */
.ahs-fullbleed .site-content > .ast-container {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.ahs-fullbleed #primary {
  max-width: none;
  width: 100%;
}

/* Astra's page.php template wraps content in article.ast-article-single with
 * ~85px horizontal padding. Zero it out on full-bleed pages so .ahs-section
 * backgrounds reach the viewport edge.                                      */
.ahs-fullbleed article.ast-article-single {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Course detail: sticky anchor nav stays full-width; bound the WC product
 * summary + tabs layout that sits below it.                                */
.ahs-fullbleed.single-product div.product {
  max-width: var(--ahs-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* ── Category / Format Badge Pills ─────────────────────────────────────── */

.ahs-badge {
  display: inline-block;
  font-family: var(--ahs-font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
}
.ahs-badge-purple {
  background: var(--ahs-purple-pale);
  color: var(--ahs-purple);
}
.ahs-badge-dark {
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 255, 255, 0.85);
}