/* Layout */
.f12-container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: var(--f12-space-6);
}

/* Typography Reset */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

.f12-section-header {
    font-size: var(--f12-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--f12-tracking-caps);
    margin: 0 0 var(--f12-space-8);
    color: var(--f12-color-muted);
    font-weight: var(--f12-weight-bold);
    display: flex;
    align-items: center;
    gap: var(--f12-space-4);
    padding-bottom: var(--f12-space-4);
    border-bottom: 1px solid var(--f12-color-border);
}

.f12-eyebrow {
    display: block;
    font-size: var(--f12-text-xs);
    font-weight: var(--f12-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--f12-tracking-caps);
    line-height: var(--f12-leading-tight);
    color: var(--f12-color-muted);
    /* Base default */
}

/* For sidebar/section headings */
.f12-eyebrow--section {
    font-size: var(--f12-text-sm);
    /* Increased for structure */
    letter-spacing: var(--f12-tracking-editorial);
}

/* For item/card metadata */
.f12-eyebrow--card {
    font-size: var(--f12-text-2xs);
    letter-spacing: var(--f12-tracking-editorial);
    margin-bottom: var(--f12-space-2);
    /* Default 8px gap for breathability */
    color: var(--f12-color-accent);
    /* Red is now the default for metadata */
}

/* Color Overrides (when needed) */
.f12-eyebrow--accent {
    color: var(--f12-color-accent);
}

.f12-eyebrow--muted {
    color: var(--f12-color-muted);
}

.f12-eyebrow--on-dark {
    color: var(--f12-type-hero-excerpt-color);
}

.f12-on-dark {
    --f12-color-heading: var(--f12-color-bg);
    --f12-color-text: var(--f12-color-bg);
    --f12-color-muted: rgba(255, 255, 255, 0.9);
}

/* Context helper: wrap content on dark backgrounds in `.f12-on-dark`.
   This keeps typography + components consistent without one-off overrides (e.g. soft buttons become white). */
.f12-on-dark .f12-btn--soft {
    color: var(--f12-color-bg);
}

.f12-on-dark .f12-btn--soft::after {
    background: var(--f12-color-bg);
}

/* Titles */
.f12-title {
    display: block;
    margin: 0;
    color: var(--f12-color-heading);
    font-weight: var(--f12-weight-bold);
    letter-spacing: var(--f12-tracking-tight);
    line-height: var(--f12-leading-tight);
}

/* Small card titles (Announcements / Partner Updates) */
.f12-title--card-sm {
    font-size: var(--f12-type-card-title-sm-size);
    line-height: var(--f12-type-card-title-sm-leading);
    font-weight: var(--f12-type-card-title-sm-weight);
    letter-spacing: var(--f12-type-card-title-sm-tracking);
}

/* Story titles (center column) */
.f12-title--story {
    font-size: var(--f12-type-story-title-size);
    line-height: var(--f12-type-story-title-leading);
    font-weight: var(--f12-type-story-title-weight);
    letter-spacing: var(--f12-type-story-title-tracking);
}

/* Hero titles (featured hero card) */
.f12-title--hero {
    font-size: var(--f12-type-hero-title-size);
    line-height: var(--f12-type-hero-title-leading);
    font-weight: var(--f12-type-hero-title-weight);
    letter-spacing: var(--f12-type-hero-title-tracking);
    color: #ffffff;
}

/* Body text */
.f12-body {
    margin: 0;
    font-size: var(--f12-type-body-md-size);
    font-weight: var(--f12-type-body-md-weight);
    line-height: var(--f12-type-body-md-leading);
    color: var(--f12-color-text);
}

.f12-body--sm {
    font-size: var(--f12-type-body-sm-size);
    font-weight: var(--f12-type-body-sm-weight);
    line-height: var(--f12-type-body-sm-leading);
}

.f12-body--muted {
    color: var(--f12-type-body-muted-color);
}

.f12-body--hero {
    font-size: var(--f12-type-hero-excerpt-size);
    line-height: var(--f12-type-hero-excerpt-leading);
    color: var(--f12-type-hero-excerpt-color);
}

/* Surfaces */
.f12-card {
    background: var(--f12-color-surface);
    border: 1px solid var(--f12-color-border);
    border-radius: var(--f12-radius-3);
    box-shadow: var(--f12-shadow-1);
}

.f12-card--flat {
    box-shadow: none;
}

/* Buttons */
.f12-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--f12-radius-pill);
    padding: 0.6rem 1rem;
    font-weight: var(--f12-weight-bold);
    font-size: var(--f12-text-sm);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--f12-space-2);
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--f12-duration-normal) var(--f12-ease-standard),
        background var(--f12-duration-normal) var(--f12-ease-standard),
        border-color var(--f12-duration-normal) var(--f12-ease-standard),
        color var(--f12-duration-normal) var(--f12-ease-standard);
}

.f12-btn:hover {
    transform: translateY(-1px);
}

.f12-btn--primary {
    background: var(--f12-color-accent);
    color: var(--f12-color-accent-contrast);
}

.f12-btn--ghost {
    background: transparent;
    border-color: var(--f12-color-border);
    color: var(--f12-color-heading);
}

.f12-btn--soft {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0 0 var(--f12-space-2) 0;
    /* Increased to 8px for elegance */
    color: var(--f12-color-heading);
    /* Dark grey text */
    text-transform: uppercase;
    font-weight: var(--f12-weight-bold);
    font-size: var(--f12-text-xs);
    letter-spacing: var(--f12-tracking-caps);
    position: relative;
    width: fit-content;
}

.f12-btn--soft::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--f12-color-accent);
    /* Red underline */
    transition: width var(--f12-duration-normal) var(--f12-ease-standard);
}

.f12-btn--soft:hover::after {
    width: 100%;
}

/* Editorial List / Feed (Balanced Rhythm) */
.f12-feed--editorial {
    display: flex;
    flex-direction: column;
    gap: var(--f12-space-5);
    /* 20px gap */
}

.f12-feed--editorial .f12-feed-item {
    padding-bottom: var(--f12-space-5);
    /* 20px padding */
    border-bottom: 1px solid var(--f12-color-border);
}

.f12-feed--editorial .f12-feed-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Tight rhythm removed to allow system default (8px) to take over */

/* Inputs */
.f12-input {
    width: 100%;
    border: 1px solid var(--f12-color-border);
    border-radius: var(--f12-radius-2);
    padding: 0.75rem 0.9rem;
    font-size: var(--f12-text-md);
    line-height: var(--f12-leading-normal);
    color: var(--f12-color-text);
    background: var(--f12-color-surface);
    transition:
        border-color var(--f12-duration-fast) var(--f12-ease-standard),
        box-shadow var(--f12-duration-fast) var(--f12-ease-standard);
}

.f12-input::placeholder {
    color: var(--f12-color-muted);
    opacity: 0.85;
}

.f12-input:focus {
    outline: none;
    border-color: var(--f12-color-focus);
    box-shadow: 0 0 0 4px var(--f12-color-focus-ring);
}

/* Chips / tags */
.f12-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--f12-space-2);
    padding: 0.35rem 0.7rem;
    border-radius: var(--f12-radius-pill);
    background: var(--f12-color-accent-soft);
    color: var(--f12-color-accent);
    font-size: var(--f12-text-xs);
    font-weight: var(--f12-weight-bold);
    text-decoration: none;
    border: 1px solid transparent;
}

.f12-chip--neutral {
    background: rgba(45, 45, 45, 0.04);
    color: var(--f12-color-heading);
    border-color: var(--f12-color-border);
}

/* Links */
.f12-link {
    color: var(--f12-color-accent);
    text-decoration: none;
    font-weight: var(--f12-weight-bold);
}

.f12-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}