/**
 * Typography Styles
 * 
 * Complete typography system following theme design outline:
 * - 2 fonts maximum (primary sans-serif, secondary serif)
 * - Explicit H1-H6 scale
 * - ONE H1 per page rule (enforced in structure)
 * 
 * @package Commerce_Elite
 */

/* ============================================
   FONT SYSTEM (2 Fonts Max)
   ============================================ */

body {
    font-family: var(--font-primary);  /* Inter - clean, modern */
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);  /* Now #2c2222 (brand brown) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings use Playfair Display - elegant serif for LaNoira brand */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);  /* Playfair Display */
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);  /* Now #2c2222 (brand brown) */
    margin-bottom: 1rem;
}

/* ============================================
   HEADING HIERARCHY (H1-H6)
   ONE H1 PER PAGE RULE - Enforced in templates
   ============================================ */

/**
 * CRITICAL: Only ONE H1 per page
 * - Homepage: Site title or hero heading
 * - Category pages: Custom H1 (from taxonomy meta)
 * - Product pages: Product title
 * - Blog posts: Post title
 * - Pages: Page title
 * 
 * Header/menu/footer do NOT contain H1 - they use div/span
 */

/* H1 - Page Title (Only ONE per page) */
h1,
.h1 {
    font-size: var(--font-size-3xl);    /* 40px */
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

/* H2 - Major Sections */
h2,
.h2 {
    font-size: var(--font-size-2xl);    /* 32px */
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 1.25rem;
}

/* H3 - Subsections */
h3,
.h3 {
    font-size: var(--font-size-xl);     /* 24px */
    font-weight: var(--font-weight-semibold);
    line-height: 1.3;
    margin-bottom: 1rem;
}

/* H4 - Minor Headings */
h4,
.h4 {
    font-size: var(--font-size-lg);     /* 20px */
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

/* H5 - Small Headings */
h5,
.h5 {
    font-size: var(--font-size-md);     /* 18px */
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

/* H6 - Smallest Headings */
h6,
.h6 {
    font-size: var(--font-size-base);   /* 16px */
    font-weight: var(--font-weight-medium);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   RESPONSIVE HEADINGS
   ============================================ */

@media (max-width: 768px) {
    h1, .h1 {
        font-size: var(--font-size-2xl);    /* 32px on mobile */
    }
    
    h2, .h2 {
        font-size: var(--font-size-xl);     /* 24px on mobile */
    }
    
    h3, .h3 {
        font-size: var(--font-size-lg);     /* 20px on mobile */
    }
    
    h4, .h4 {
        font-size: var(--font-size-base);   /* 16px on mobile */
    }
}

/* ============================================
   BODY TEXT
   ============================================ */

p {
    margin-bottom: 1rem;
    line-height: var(--line-height-normal);
}

/* Lead paragraph (intro text) */
.lead,
.intro-text {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
    margin-bottom: 1.5rem;
}

/* Small text */
.small,
small {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

/* Extra small text */
.text-xs {
    font-size: var(--font-size-xs);
}

/* ============================================
   TEXT STYLES
   ============================================ */

/* Bold */
strong,
b,
.bold {
    font-weight: var(--font-weight-bold);
}

/* Italic */
em,
i,
.italic {
    font-style: italic;
}

/* Underline */
u,
.underline {
    text-decoration: underline;
}

/* Strikethrough */
del,
s,
.strikethrough {
    text-decoration: line-through;
}

/* Highlighted text */
mark,
.highlight {
    background-color: rgba(255, 235, 59, 0.3);
    padding: 0.125rem 0.25rem;
    border-radius: 2px;
}

/* Code/Monospace */
code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
}

code {
    background: var(--color-surface);
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    color: var(--color-accent);
}

pre {
    background: var(--color-surface);
    padding: 1rem;
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: 1rem;
}

pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ============================================
   BLOCKQUOTES
   ============================================ */

blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-size: var(--font-size-md);
    font-style: italic;
    color: var(--color-text-light);
}

blockquote cite {
    display: block;
    margin-top: 0.5rem;
    font-size: var(--font-size-sm);
    font-style: normal;
    color: var(--color-text-muted);
}

blockquote cite::before {
    content: "— ";
}

/* ============================================
   LISTS
   ============================================ */

ul,
ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

ul li,
ol li {
    margin-bottom: 0.5rem;
    line-height: var(--line-height-normal);
}

/* Nested lists */
ul ul,
ol ul,
ul ol,
ol ol {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Unstyled list */
.list-unstyled {
    list-style: none;
    padding-left: 0;
}

.list-unstyled li {
    margin-bottom: 0.25rem;
}

/* Inline list */
.list-inline {
    list-style: none;
    padding-left: 0;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ============================================
   LINKS
   ============================================ */

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

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

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

/* External links (opens in new tab) */
a[target="_blank"]::after {
    content: " ↗";
    font-size: 0.8em;
    opacity: 0.6;
}

/* Skip external icon for images and buttons */
a[target="_blank"] img::after,
.button[target="_blank"]::after {
    content: none;
}

/* ============================================
   TEXT ALIGNMENT
   ============================================ */

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-justify {
    text-align: justify;
}

/* ============================================
   TEXT COLOR UTILITIES
   ============================================ */

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

.text-accent {
    color: var(--color-accent);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-light {
    color: var(--color-text-light);
}

.text-success {
    color: var(--color-success);
}

.text-error {
    color: var(--color-error);
}

.text-warning {
    color: var(--color-warning);
}

/* ============================================
   TEXT TRANSFORM
   ============================================ */

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.text-lowercase {
    text-transform: lowercase;
}

.text-capitalize {
    text-transform: capitalize;
}

/* ============================================
   FONT WEIGHT UTILITIES
   ============================================ */

.font-normal {
    font-weight: var(--font-weight-normal);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* ============================================
   LINE HEIGHT UTILITIES
   ============================================ */

.leading-tight {
    line-height: var(--line-height-tight);
}

.leading-normal {
    line-height: var(--line-height-normal);
}

.leading-relaxed {
    line-height: var(--line-height-relaxed);
}

/* ============================================
   WORDPRESS EDITOR STYLES
   ============================================ */

/* Gutenberg blocks alignment */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignwide {
    max-width: 1200px;
}

.alignfull {
    max-width: 100%;
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* ============================================
   CATEGORY/BRAND H1 + INTRO CONTENT
   (Custom fields from taxonomy meta)
   ============================================ */

/* Custom H1 on category/brand pages */
.custom-category-h1,
.custom-brand-h1 {
    font-size: var(--font-size-4xl);    /* 48px - larger than normal H1 */
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    color: var(--color-text);
}

/* Intro content sits immediately below H1 */
.category-intro-content,
.brand-intro-content {
    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-light);
    margin-bottom: 2rem;
    max-width: 800px;
}

/* Long-form SEO content (appears after products) */
.category-long-content,
.brand-long-content {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid var(--color-border);
}

.category-long-content h2,
.brand-long-content h2 {
    margin-top: 2rem;
}

/* ============================================
   RESPONSIVE TYPOGRAPHY
   ============================================ */

@media (max-width: 768px) {
    body {
        font-size: 15px; /* Slightly smaller base on mobile */
    }
    
    .custom-category-h1,
    .custom-brand-h1 {
        font-size: var(--font-size-2xl); /* 32px on mobile */
    }
    
    .category-intro-content,
    .brand-intro-content {
        font-size: var(--font-size-base);
    }
}