/**
 * Typography Styles for WVHDF Website
 * Based on design system specifications
 * 
 * Primary Fonts:
 * - Latino Gothic CMP Thin (for h1)
 * - Redonda Black (for h2, h3)
 * - Redonda Medium (for h4)
 * - Redonda Condensed (for body, labels)
 */

/* ========================================
   Font Face Declarations - Adobe Fonts/Typekit
   ======================================== */

/* @import url("https://use.typekit.net/air5qak.css"); */

/* ========================================
   Base Typography
   ======================================== */

body {
    font-family: redonda-condensed, sans-serif;
    font-size: 1rem; /* 16px */
    font-style: normal;
    font-weight: 500;
    line-height: 1.5; /* 150% - 24px */
    letter-spacing: 0.03rem;
	text-wrap: pretty;
}

/* ========================================
   Headings
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-style: normal;
}

/* H1 - Latino Gothic Variable */
h1 {
    font-family: latino-gothic-variable, sans-serif;
    font-size: 3rem; /* 48px */
    font-weight: 250;
    line-height: 3.375rem; /* 112.5% - 54px */
    margin-bottom: 1.5rem;
	font-variation-settings: "slnt" 0, "wdth" 1, "wght" 250;
}

/* H1 Mobile */
@media (max-width: 768px) {
    h1 {
        font-size: 2.625rem; /* 42px */
        line-height: 3.25rem; /* 123.81% - 52px */
    }
}

/* H2 - Redonda Condensed Black */
h2 {
    font-family: redonda-condensed, sans-serif;
    font-size: 1.875rem; /* 30px */
    font-weight: 900;
    line-height: 2.5rem; /* 133.33% - 40px */
    letter-spacing: 0.28125rem; /* 4.5px */
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

/* H3 - Redonda Condensed Medium */
h3 {
    font-family: redonda-condensed, sans-serif;
    font-size: 1.375rem; /* 22px */
    font-weight: 500;
    line-height: 2rem; /* 145.45% - 32px */
    letter-spacing: 0.165rem; /* 2.64px */
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

/* H4 - Redonda Condensed Medium */
h4 {
    font-family: redonda-condensed, sans-serif;
    font-size: 1.25rem; /* 20px */
    font-weight: 500;
    line-height: 1.875rem; /* 150% - 30px */
    letter-spacing: 0.05rem;
    text-transform: capitalize;
    margin-bottom: 1rem;
}

/* H5 - Redonda Condensed Medium */
h5 {
    font-family: redonda-condensed, sans-serif;
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    line-height: 1.6875rem; /* 150% - 27px */
    margin-bottom: 0.875rem;
}

/* H6 - Redonda Condensed Medium */
h6 {
    font-family: redonda-condensed, sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.5rem; /* 150% - 24px */
    margin-bottom: 0.75rem;
}

/* ========================================
   Body Text & Paragraphs
   ======================================== */

p {
    margin-top: 0;
    margin-bottom: 1.5rem; /* 24px - paragraph spacing */
}

/* Body text default */
.body-text,
article p,
.content p {
    font-family: redonda-condensed, sans-serif;
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.5rem; /* 150% - 24px */
    letter-spacing: 0.03rem;
}

/* Lead text / Intro text */
.lead,
.intro-text {
    font-size: 1.125rem; /* 18px */
    line-height: 1.6875rem; /* 150% - 27px */
    font-weight: 500;
}

/* Small text */
small,
.small-text {
    font-size: 0.875rem; /* 14px */
    line-height: 1.3125rem; /* 150% - 21px */
}

/* Table header text */
th {
    font-family: redonda-condensed, sans-serif;
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 500;
    line-height: 1.6875rem; /* 150% - 27px */
    letter-spacing: 0.0225rem; /* 0.36px */
}

/* ========================================
   Labels & UI Elements
   ======================================== */

label,
.label,
.form-label {
    font-family: redonda-condensed, sans-serif;
    font-size: 1.125rem; /* 18px */
    font-weight: 500;
    line-height: 1.6875rem; /* 150% - 27px */
    letter-spacing: 0.02813rem; /* 0.45px */
    display: block;
    margin-bottom: 0.5rem;
}

/* Input & Textarea base styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
    font-family: redonda-condensed, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.03rem;
}

/* ========================================
   Links
   ======================================== */

:where(main a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden) {
    color: var(--custom-navy);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--custom-navy);
    font-weight: 500;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

:where(main a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):visited {
    color: var(--custom-navy);
}

:where(footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):not(.social-icon),
:where(footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):not(.social-icon):visited {
    color: var(--custom-white);
    cursor: pointer;
}

:where(main a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):hover {
    color: var(--custom-jade);
    cursor: pointer !important;
    text-decoration: underline;
    text-decoration-color: var(--custom-jade);
}

:where(footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):not(.social-icon):hover {
    color: var(--custom-sunflower);
    cursor: pointer !important;
    text-decoration-color: var(--custom-sunflower);
}

footer .footer-social a,
footer .social-icon a,
footer .footer-social a:visited,
footer .social-icon a:visited,
footer a.social-icon,
footer a.social-icon:visited {
    color: var(--custom-white);
}

footer .footer-social a:hover,
footer .social-icon a:hover,
footer .footer-social a:focus-visible,
footer .social-icon a:focus-visible,
footer a.social-icon:hover,
footer a.social-icon:focus-visible {
    color: var(--custom-sunflower);
}

footer .footer-social a svg path,
footer .social-icon a svg path,
footer .footer-social a svg circle,
footer .social-icon a svg circle,
footer .footer-social a svg rect,
footer .social-icon a svg rect,
footer .footer-social a svg polygon,
footer .social-icon a svg polygon,
footer .footer-social a svg use,
footer .social-icon a svg use,
footer a.social-icon svg path,
footer a.social-icon svg circle,
footer a.social-icon svg rect,
footer a.social-icon svg polygon,
footer a.social-icon svg use {
    fill: currentColor !important;
    transition: fill 0.2s ease;
}

footer .footer-social a svg [stroke]:not([stroke="none"]),
footer .social-icon a svg [stroke]:not([stroke="none"]),
footer a.social-icon svg [stroke]:not([stroke="none"]) {
    stroke: currentColor !important;
    transition: stroke 0.2s ease;
}

/* Force icon glyph color changes for inline SVG sets that do not inherit currentColor */
footer .footer-social a:hover svg *,
footer .social-icon a:hover svg *,
footer .footer-social a:focus-visible svg *,
footer .social-icon a:focus-visible svg *,
footer a.social-icon:hover svg *,
footer a.social-icon:focus-visible svg * {
    fill: var(--custom-sunflower) !important;
    stroke: var(--custom-sunflower) !important;
}

footer .footer-social a svg [fill="none"],
footer .social-icon a svg [fill="none"],
footer .footer-social a:hover svg [fill="none"],
footer .social-icon a:hover svg [fill="none"],
footer .footer-social a:focus-visible svg [fill="none"],
footer .social-icon a:focus-visible svg [fill="none"],
footer a.social-icon svg [fill="none"],
footer a.social-icon:hover svg [fill="none"],
footer a.social-icon:focus-visible svg [fill="none"] {
    fill: none !important;
}

:where(main a, footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):hover * {
    cursor: pointer !important;
}

:where(main a, footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden)::before,
:where(main a, footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden)::after,
:where(main a, footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):hover::before,
:where(main a, footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):hover::after {
    cursor: pointer !important;
}

:where(main a, footer a):not(.primary-button):not(.secondary-button):not(.tertiary-button):not(.reverse-button):not(.news-posts__item):not(.news-posts__item--hidden):focus-visible {
    box-shadow: 0 0 0 2px var(--custom-sunflower), 0 0 0 4px var(--custom-deeper-blue), var(--button-shadow-hover);
}

/* ========================================
   Lists
   ======================================== */


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



/* Remove margin from last list item */
li:last-child {
    margin-bottom: 0;
}

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

/* ========================================
   Utility Classes
   ======================================== */

/* Font Weight Utilities */
.font-light {
    font-weight: 250;
}

.font-normal {
    font-weight: 500;
}

.font-bold {
    font-weight: 900;
}

/* Text Transform Utilities */
.text-uppercase {
    text-transform: uppercase;
}

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

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

.text-normal {
    text-transform: none;
}

/* Text Alignment */
.text-left {
    text-align: left;
}

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

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

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

/* Letter Spacing Utilities */
.letter-spacing-tight {
    letter-spacing: -0.02rem;
}

.letter-spacing-normal {
    letter-spacing: 0;
}

.letter-spacing-wide {
    letter-spacing: 0.05rem;
}

.letter-spacing-wider {
    letter-spacing: 0.1rem;
}

/* Line Height Utilities */
.leading-none {
    line-height: 1;
}

.leading-tight {
    line-height: 1.25;
}

.leading-normal {
    line-height: 1.5;
}

.leading-loose {
    line-height: 1.75;
}

/* ========================================
   Responsive Typography
   ======================================== */

/* Tablet */
@media (max-width: 1024px) {
    h1 {
        font-size: 2.75rem; /* 44px */
        line-height: 3rem; /* 48px */
    }
    
    h2 {
        font-size: 1.75rem; /* 28px */
        line-height: 2.25rem; /* 36px */
    }
    
    h3 {
        font-size: 1.25rem; /* 20px */
        line-height: 1.75rem; /* 28px */
    }
}

/* Mobile */
@media (max-width: 768px) {
    body {
        font-size: 0.9375rem; /* 15px */
        line-height: 1.4375rem; /* 23px */
    }
    
    h1 {
        font-size: 2.25rem; /* 36px */
        line-height: 2.625rem; /* 42px */
    }
    
    h2 {
        font-size: 1.5rem; /* 24px */
        line-height: 2rem; /* 32px */
        letter-spacing: 0.2rem;
    }
    
    h3 {
        font-size: 1.125rem; /* 18px */
        line-height: 1.5rem; /* 24px */
        letter-spacing: 0.12rem;
    }
    
    h4 {
        font-size: 1.0625rem; /* 17px */
        line-height: 1.5rem; /* 24px */
    }
    
    .lead,
    .intro-text {
        font-size: 1rem;
        line-height: 1.5rem;
    }
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
    }
    
    h1 {
        font-size: 24pt;
        page-break-after: avoid;
    }
    
    h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    p, li {
        orphans: 3;
        widows: 3;
    }
    
    a {
        color: #000;
        text-decoration: underline;
    }
    
    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.875em;
    }
}

/* ========================================
   Accessibility
   ======================================== */

/* Focus styles for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-blue-dark, #1A4D7E);
    outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-blue-dark, #1A4D7E);
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* ========================================
   WordPress Editor Compatibility
   ======================================== */

.editor-styles-wrapper {
    font-family: redonda, sans-serif;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    /* Inherit heading styles defined above */
}

.editor-styles-wrapper p {
    /* Inherit paragraph styles defined above */
}