/* ==========================================================================
   INAIVOM - Typography
   File: app/static/css/typography.css
   Premium Matrimony Platform
   Theme: Maroon #800020 | Gold #D4AF37 | White
   ========================================================================== */


/* ==========================================================================
   1. TYPOGRAPHY VARIABLES
   ========================================================================== */

:root {
    --font-primary:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-heading:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif;

    --font-system:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --font-monospace:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.2;
    --line-height-snug: 1.35;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;
    --line-height-loose: 1.8;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
}


/* ==========================================================================
   2. BASE TYPOGRAPHY
   ========================================================================== */

html {
    font-size: 16px;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    text-rendering: optimizeLegibility;
}

body {
    color: var(--inaivom-text, #2e292c);

    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
}


/* ==========================================================================
   3. HEADINGS
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.75rem;

    color: var(--inaivom-text, #2e292c);

    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);

    letter-spacing: var(--letter-spacing-tight);
}

h1 {
    font-size: clamp(2rem, 4vw, 3rem);
}

h2 {
    font-size: clamp(1.65rem, 3vw, 2.25rem);
}

h3 {
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.075rem;
}

h6 {
    font-size: 0.95rem;
}


/* ==========================================================================
   4. PREMIUM DISPLAY HEADINGS
   ========================================================================== */

.display-heading,
.hero-heading,
.editorial-heading,
.premium-heading {
    color: var(--inaivom-primary, #800020);

    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: 1.08;

    letter-spacing: -0.035em;
}

.display-1 {
    font-size: clamp(2.75rem, 6vw, 5rem);
}

.display-2 {
    font-size: clamp(2.35rem, 5vw, 4rem);
}

.display-3 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.display-4 {
    font-size: clamp(1.75rem, 3.5vw, 2.65rem);
}


/* ==========================================================================
   5. BRAND TYPOGRAPHY
   ========================================================================== */

.brand-text,
.logo-text {
    color: var(--inaivom-primary, #800020);

    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);

    letter-spacing: -0.025em;
}

.brand-text-accent {
    color: var(--inaivom-gold, #d4af37);
}


/* ==========================================================================
   6. PARAGRAPHS
   ========================================================================== */

p {
    margin-top: 0;
    margin-bottom: 1rem;

    color: inherit;

    line-height: var(--line-height-relaxed);
}

p:last-child {
    margin-bottom: 0;
}

.lead {
    color: var(--inaivom-text-soft, #554d51);

    font-size: 1.125rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.75;
}

.small,
small {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-base {
    font-size: var(--font-size-base);
}

.text-md {
    font-size: var(--font-size-md);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

.text-4xl {
    font-size: var(--font-size-4xl);
}


/* ==========================================================================
   7. LINKS
   ========================================================================== */

a {
    color: var(--inaivom-primary, #800020);

    text-decoration: none;

    transition:
        color 180ms ease,
        opacity 180ms ease;
}

a:hover {
    color: var(--inaivom-primary-dark, #650019);
}

a:focus-visible {
    outline: 2px solid var(--inaivom-gold, #d4af37);
    outline-offset: 3px;

    border-radius: 3px;
}

.text-link {
    color: var(--inaivom-primary, #800020);

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

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

.link-subtle {
    color: var(--inaivom-muted, #7b7277);
}

.link-subtle:hover {
    color: var(--inaivom-primary, #800020);
}


/* ==========================================================================
   8. EMPHASIS
   ========================================================================== */

strong,
b {
    font-weight: var(--font-weight-bold);
}

em,
i {
    font-style: italic;
}

mark {
    padding: 0.08em 0.22em;

    border-radius: 3px;

    background: rgba(212, 175, 55, 0.22);
    color: var(--inaivom-text, #2e292c);
}

del,
s {
    text-decoration: line-through;
}

ins {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ==========================================================================
   9. TEXT COLORS
   ========================================================================== */

.text-primary {
    color: var(--inaivom-primary, #800020) !important;
}

.text-primary-dark {
    color: var(--inaivom-primary-dark, #650019) !important;
}

.text-gold {
    color: #8b6b0d !important;
}

.text-dark {
    color: var(--inaivom-text, #2e292c) !important;
}

.text-body {
    color: var(--inaivom-text-soft, #554d51) !important;
}

.text-muted {
    color: var(--inaivom-muted, #7b7277) !important;
}

.text-light-muted {
    color: var(--inaivom-light-muted, #a59ca1) !important;
}

.text-white {
    color: #ffffff !important;
}

.text-success {
    color: var(--inaivom-success, #198754) !important;
}

.text-danger {
    color: var(--inaivom-danger, #dc3545) !important;
}

.text-warning {
    color: var(--inaivom-warning, #c48700) !important;
}

.text-info {
    color: var(--inaivom-info, #2878a5) !important;
}


/* ==========================================================================
   10. FONT WEIGHTS
   ========================================================================== */

.fw-light,
.font-light {
    font-weight: var(--font-weight-light) !important;
}

.fw-normal,
.font-normal {
    font-weight: var(--font-weight-normal) !important;
}

.fw-medium,
.font-medium {
    font-weight: var(--font-weight-medium) !important;
}

.fw-semibold,
.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

.fw-bold,
.font-bold {
    font-weight: var(--font-weight-bold) !important;
}

.fw-extrabold,
.font-extrabold {
    font-weight: var(--font-weight-extrabold) !important;
}


/* ==========================================================================
   11. FONT FAMILIES
   ========================================================================== */

.font-primary {
    font-family: var(--font-primary) !important;
}

.font-heading,
.font-serif {
    font-family: var(--font-heading) !important;
}

.font-system {
    font-family: var(--font-system) !important;
}

.font-monospace,
.font-mono,
code,
kbd,
samp,
pre {
    font-family: var(--font-monospace);
}


/* ==========================================================================
   12. TEXT ALIGNMENT
   ========================================================================== */

.text-start,
.text-left {
    text-align: left !important;
}

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

.text-end,
.text-right {
    text-align: right !important;
}


/* ==========================================================================
   13. TEXT TRANSFORMATION
   ========================================================================== */

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

.text-uppercase {
    text-transform: uppercase !important;
}

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

.text-normal-case {
    text-transform: none !important;
}


/* ==========================================================================
   14. LETTER SPACING
   ========================================================================== */

.tracking-tight {
    letter-spacing: var(--letter-spacing-tight) !important;
}

.tracking-normal {
    letter-spacing: var(--letter-spacing-normal) !important;
}

.tracking-wide {
    letter-spacing: var(--letter-spacing-wide) !important;
}

.tracking-wider {
    letter-spacing: var(--letter-spacing-wider) !important;
}


/* ==========================================================================
   15. LINE HEIGHT
   ========================================================================== */

.lh-1,
.leading-tight {
    line-height: var(--line-height-tight) !important;
}

.leading-snug {
    line-height: var(--line-height-snug) !important;
}

.lh-base,
.leading-normal {
    line-height: var(--line-height-normal) !important;
}

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

.leading-loose {
    line-height: var(--line-height-loose) !important;
}


/* ==========================================================================
   16. SECTION TYPOGRAPHY
   ========================================================================== */

.section-label,
.eyebrow,
.overline {
    display: inline-block;

    color: var(--inaivom-primary, #800020);

    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.section-heading {
    margin-bottom: 0.75rem;

    color: var(--inaivom-primary, #800020);

    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;

    letter-spacing: -0.03em;
}

.section-heading-serif {
    font-family: var(--font-heading);
}

.section-subtitle {
    max-width: 700px;

    color: var(--inaivom-muted, #7b7277);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* ==========================================================================
   17. PAGE TYPOGRAPHY
   ========================================================================== */

.page-heading {
    color: var(--inaivom-primary, #800020);

    font-size: clamp(1.7rem, 3vw, 2.4rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.18;

    letter-spacing: -0.03em;
}

.page-description {
    max-width: 720px;

    color: var(--inaivom-muted, #7b7277);

    font-size: 0.9rem;
    line-height: 1.7;
}


/* ==========================================================================
   18. CARD TYPOGRAPHY
   ========================================================================== */

.card-title {
    color: var(--inaivom-text, #2e292c);

    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.35;

    letter-spacing: -0.01em;
}

.card-subtitle {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.78rem;
    font-weight: var(--font-weight-normal);
    line-height: 1.5;
}

.card-text {
    color: var(--inaivom-text-soft, #554d51);

    font-size: 0.875rem;
    line-height: 1.65;
}

.card-meta {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.75rem;
    line-height: 1.45;
}


/* ==========================================================================
   19. PROFILE TYPOGRAPHY
   ========================================================================== */

.profile-name {
    color: var(--inaivom-text, #2e292c);

    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;

    letter-spacing: -0.015em;
}

.profile-id {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);

    letter-spacing: 0.02em;
}

.profile-meta {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.8rem;
    line-height: 1.55;
}

.profile-detail-label {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
}

.profile-detail-value {
    color: var(--inaivom-text, #2e292c);

    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   20. FORM TYPOGRAPHY
   ========================================================================== */

label,
.form-label {
    color: var(--inaivom-text, #2e292c);

    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.form-text,
.form-help,
.help-text {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.72rem;
    line-height: 1.5;
}

.form-error,
.invalid-feedback {
    color: var(--inaivom-danger, #dc3545);

    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.45;
}

.required {
    color: var(--inaivom-danger, #dc3545);
}


/* ==========================================================================
   21. BUTTON TYPOGRAPHY
   ========================================================================== */

button,
.btn,
.button {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0;
}

.btn-sm {
    font-size: 0.78rem;
}

.btn-lg {
    font-size: 0.95rem;
}


/* ==========================================================================
   22. NAVIGATION TYPOGRAPHY
   ========================================================================== */

.nav-link,
.navbar-link,
.menu-link {
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
}

.nav-link.active,
.navbar-link.active,
.menu-link.active {
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   23. TABLE TYPOGRAPHY
   ========================================================================== */

table {
    font-size: 0.875rem;
}

th {
    color: var(--inaivom-text-soft, #554d51);

    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.025em;
    text-transform: uppercase;
}

td {
    color: var(--inaivom-text-soft, #554d51);

    line-height: 1.5;
}


/* ==========================================================================
   24. PRICE TYPOGRAPHY
   ========================================================================== */

.price {
    color: var(--inaivom-primary, #800020);

    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;

    letter-spacing: -0.04em;
}

.price-currency {
    font-size: 0.55em;
    font-weight: var(--font-weight-semibold);

    vertical-align: top;
}

.price-period {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.75rem;
    font-weight: var(--font-weight-normal);
}


/* ==========================================================================
   25. STATISTICS TYPOGRAPHY
   ========================================================================== */

.stat-number,
.metric-value {
    color: var(--inaivom-primary, #800020);

    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;

    letter-spacing: -0.035em;
}

.stat-label,
.metric-label {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}


/* ==========================================================================
   26. STATUS TYPOGRAPHY
   ========================================================================== */

.status-text {
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
}

.status-success {
    color: var(--inaivom-success, #198754);
}

.status-warning {
    color: var(--inaivom-warning, #c48700);
}

.status-danger {
    color: var(--inaivom-danger, #dc3545);
}

.status-info {
    color: var(--inaivom-info, #2878a5);
}


/* ==========================================================================
   27. BADGE TYPOGRAPHY
   ========================================================================== */

.badge {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.01em;
}


/* ==========================================================================
   28. QUOTES
   ========================================================================== */

blockquote {
    position: relative;

    margin: 1.5rem 0;
    padding: 1rem 1.25rem;

    border-left: 3px solid var(--inaivom-gold, #d4af37);

    background: var(--inaivom-background-soft, #fdfafb);
    color: var(--inaivom-text-soft, #554d51);

    font-family: var(--font-heading);
    font-size: 1.075rem;
    font-style: italic;
    line-height: 1.7;
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote cite {
    display: block;

    margin-top: 0.65rem;

    color: var(--inaivom-muted, #7b7277);

    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: var(--font-weight-semibold);
}


/* ==========================================================================
   29. LISTS
   ========================================================================== */

.content-list,
.article-content ul,
.article-content ol,
.static-content ul,
.static-content ol {
    margin: 1rem 0;
    padding-left: 1.35rem;

    color: var(--inaivom-text-soft, #554d51);
}

.content-list li,
.article-content li,
.static-content li {
    margin-bottom: 0.45rem;

    line-height: var(--line-height-relaxed);
}

.content-list li::marker,
.article-content li::marker,
.static-content li::marker {
    color: var(--inaivom-primary, #800020);
}


/* ==========================================================================
   30. CODE
   ========================================================================== */

code {
    padding: 0.15rem 0.3rem;

    border-radius: 4px;

    background: #f3eff1;
    color: var(--inaivom-primary, #800020);

    font-size: 0.875em;
}

pre {
    max-width: 100%;

    margin: 1rem 0;
    padding: 1rem;

    overflow-x: auto;

    border: 1px solid var(--inaivom-border, #ebe4e7);
    border-radius: 10px;

    background: #2b2427;
    color: #f7f3f4;

    font-size: 0.8rem;
    line-height: 1.6;

    white-space: pre;
}

pre code {
    padding: 0;

    background: transparent;
    color: inherit;
}


/* ==========================================================================
   31. ABBREVIATIONS
   ========================================================================== */

abbr[title] {
    cursor: help;

    text-decoration:
        underline dotted;
    text-underline-offset: 3px;
}


/* ==========================================================================
   32. ADDRESS
   ========================================================================== */

address {
    margin-bottom: 1rem;

    color: var(--inaivom-text-soft, #554d51);

    font-style: normal;
    line-height: var(--line-height-relaxed);
}


/* ==========================================================================
   33. HORIZONTAL RULE
   ========================================================================== */

hr {
    margin: 1.5rem 0;

    border: 0;
    border-top: 1px solid var(--inaivom-border, #ebe4e7);
}


/* ==========================================================================
   34. TEXT TRUNCATION
   ========================================================================== */

.text-truncate {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.text-clamp-1 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.text-clamp-2 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.text-clamp-3 {
    display: -webkit-box;

    overflow: hidden;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


/* ==========================================================================
   35. WORD WRAPPING
   ========================================================================== */

.break-word,
.text-break {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.text-nowrap {
    white-space: nowrap !important;
}


/* ==========================================================================
   36. DECORATION
   ========================================================================== */

.text-decoration-none {
    text-decoration: none !important;
}

.text-decoration-underline {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.text-decoration-line-through {
    text-decoration: line-through !important;
}


/* ==========================================================================
   37. GRADIENT TYPOGRAPHY
   ========================================================================== */

.text-gradient,
.gradient-heading {
    background:
        linear-gradient(
            135deg,
            var(--inaivom-primary, #800020) 0%,
            #a11f42 55%,
            #9a7613 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ==========================================================================
   38. GOLD ACCENT TYPOGRAPHY
   ========================================================================== */

.gold-accent {
    color: #8b6b0d;

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

.gold-label {
    color: #765b09;

    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: 0.075em;
    text-transform: uppercase;
}


/* ==========================================================================
   39. PREMIUM PROFILE HEADING
   ========================================================================== */

.profile-display-name {
    color: var(--inaivom-primary, #800020);

    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 3vw, 2.35rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;

    letter-spacing: -0.03em;
}


/* ==========================================================================
   40. SUCCESS STORY TYPOGRAPHY
   ========================================================================== */

.story-title,
.success-story-heading {
    color: var(--inaivom-primary, #800020);

    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
}

.story-quote {
    color: var(--inaivom-text-soft, #554d51);

    font-family: var(--font-heading);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
}


/* ==========================================================================
   41. TESTIMONIAL TYPOGRAPHY
   ========================================================================== */

.testimonial-text {
    color: var(--inaivom-text-soft, #554d51);

    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.7;
}

.testimonial-author-name {
    color: var(--inaivom-text, #2e292c);

    font-size: 0.82rem;
    font-weight: var(--font-weight-bold);
}

.testimonial-author-meta {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.72rem;
}


/* ==========================================================================
   42. BLOG TYPOGRAPHY
   ========================================================================== */

.article-title,
.blog-title {
    color: var(--inaivom-primary, #800020);

    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.12;

    letter-spacing: -0.035em;
}

.article-meta,
.blog-meta {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.75rem;
    line-height: 1.5;
}

.article-body,
.blog-content {
    color: var(--inaivom-text-soft, #554d51);

    font-size: 1rem;
    line-height: 1.8;
}

.article-body h2,
.blog-content h2 {
    margin-top: 2rem;

    color: var(--inaivom-primary, #800020);

    font-family: var(--font-heading);
    font-size: 1.65rem;
}

.article-body h3,
.blog-content h3 {
    margin-top: 1.6rem;

    color: var(--inaivom-text, #2e292c);

    font-size: 1.25rem;
}


/* ==========================================================================
   43. AUTHENTICATION TYPOGRAPHY
   ========================================================================== */

.auth-title {
    color: var(--inaivom-primary, #800020);

    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;

    text-align: center;
}

.auth-subtitle {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.875rem;
    line-height: 1.65;

    text-align: center;
}


/* ==========================================================================
   44. ADMIN TYPOGRAPHY
   ========================================================================== */

.admin-page-title {
    color: var(--inaivom-primary, #800020);

    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);

    letter-spacing: -0.025em;
}

.admin-section-title {
    color: var(--inaivom-text, #2e292c);

    font-size: 1rem;
    font-weight: var(--font-weight-bold);
}

.admin-meta {
    color: var(--inaivom-muted, #7b7277);

    font-size: 0.72rem;
}


/* ==========================================================================
   45. FORM PLACEHOLDER TYPOGRAPHY
   ========================================================================== */

input::placeholder,
textarea::placeholder {
    color: var(--inaivom-light-muted, #a59ca1);

    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);

    opacity: 1;
}


/* ==========================================================================
   46. SELECTION
   ========================================================================== */

::selection {
    background: rgba(128, 0, 32, 0.16);
    color: var(--inaivom-primary-dark, #650019);
}


/* ==========================================================================
   47. ACCESSIBILITY
   ========================================================================== */

.visually-hidden {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    padding: 0 !important;
    margin: -1px !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* ==========================================================================
   48. RESPONSIVE TYPOGRAPHY
   ========================================================================== */

@media (max-width: 991.98px) {

    html {
        font-size: 15.5px;
    }

    .lead {
        font-size: 1.075rem;
    }

    .article-body,
    .blog-content {
        font-size: 0.975rem;
    }
}

@media (max-width: 767.98px) {

    html {
        font-size: 15px;
    }

    .section-heading,
    .page-heading {
        letter-spacing: -0.02em;
    }

    .lead {
        font-size: 1rem;
    }

    .article-body,
    .blog-content {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    blockquote {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {

    .display-1 {
        font-size: 2.5rem;
    }

    .display-2 {
        font-size: 2.2rem;
    }

    .display-3 {
        font-size: 1.95rem;
    }

    .display-4 {
        font-size: 1.7rem;
    }

    .article-title,
    .blog-title {
        font-size: 2rem;
    }

    .profile-display-name {
        font-size: 1.7rem;
    }
}


/* ==========================================================================
   49. PRINT TYPOGRAPHY
   ========================================================================== */

@media print {

    body {
        color: #000000;

        font-family:
            Arial,
            Helvetica,
            sans-serif;

        font-size: 11pt;
        line-height: 1.45;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #000000;

        break-after: avoid;
    }

    p,
    blockquote,
    table {
        orphans: 3;
        widows: 3;
    }

    a {
        color: #000000;

        text-decoration: none;
    }

    .text-muted,
    .text-light-muted {
        color: #555555 !important;
    }
}


/* ==========================================================================
   50. REDUCED MOTION / SYSTEM COMPATIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    a {
        transition: none;
    }
}


/* ==========================================================================
   51. FINAL TYPOGRAPHY SAFETY
   ========================================================================== */

button,
input,
select,
textarea {
    font: inherit;
}

input,
textarea,
select,
button {
    letter-spacing: inherit;
}

svg,
.icon,
i[class*="fa-"],
i[class*="bi-"] {
    line-height: 1;
}

body,
p,
li,
td,
th,
label,
input,
textarea,
select,
button {
    overflow-wrap: break-word;
}

pre,
code,
kbd,
samp {
    overflow-wrap: normal;
    word-break: normal;
}