/**
 * BienHabillé - Typography
 * 
 * Styles typographiques du thème
 * Polices, titres, paragraphes, liens
 * 
 * @package BienHabille
 * @since 1.0.0
 */

/* ========================================================================== */
/* IMPORT GOOGLE FONTS */
/* ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ========================================================================== */
/* BASE */
/* ========================================================================== */

body {
    font-family: var(--bh-font-primary);
    font-size: var(--bh-font-size-base);
    font-weight: var(--bh-font-weight-normal);
    line-height: var(--bh-line-height-normal);
    color: var(--bh-text-primary);
    background-color: var(--bh-bg-primary);
}

/* ========================================================================== */
/* TITRES */
/* ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--bh-font-primary);
    font-weight: var(--bh-font-weight-semibold);
    line-height: var(--bh-line-height-tight);
    color: var(--bh-text-primary);
    margin-bottom: 0.5em;
}

h1,
.h1 {
    font-size: var(--bh-font-size-4xl);
    font-weight: var(--bh-font-weight-bold);
    letter-spacing: var(--bh-letter-spacing-tight);
}

h2,
.h2 {
    font-size: var(--bh-font-size-3xl);
    font-weight: var(--bh-font-weight-semibold);
}

h3,
.h3 {
    font-size: var(--bh-font-size-2xl);
}

h4,
.h4 {
    font-size: var(--bh-font-size-xl);
}

h5,
.h5 {
    font-size: var(--bh-font-size-lg);
}

h6,
.h6 {
    font-size: var(--bh-font-size-base);
    font-weight: var(--bh-font-weight-semibold);
}

/* ========================================================================== */
/* PARAGRAPHES */
/* ========================================================================== */

p {
    margin-bottom: 1em;
}

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

/* Lead paragraph (texte d'introduction plus grand) */
.lead {
    font-size: var(--bh-font-size-lg);
    font-weight: var(--bh-font-weight-normal);
    line-height: var(--bh-line-height-relaxed);
    color: var(--bh-text-secondary);
}

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

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

/* ========================================================================== */
/* LIENS */
/* ========================================================================== */

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

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

/* Lien avec soulignement */
.link-underline {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.link-underline:hover {
    text-decoration-thickness: 2px;
}

/* Lien avec soulignement au hover */
.link-hover-underline {
    text-decoration: none;
}

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

/* Lien accent (rouge) */
.link-accent {
    color: var(--bh-color-accent);
}

.link-accent:hover {
    color: var(--bh-color-accent-hover);
}

/* ========================================================================== */
/* LISTES DANS LE CONTENU */
/* ========================================================================== */

.content ul,
.content ol,
.entry-content ul,
.entry-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.content ul,
.entry-content ul {
    list-style-type: disc;
}

.content ol,
.entry-content ol {
    list-style-type: decimal;
}

.content li,
.entry-content li {
    margin-bottom: 0.5em;
}

.content li:last-child,
.entry-content li:last-child {
    margin-bottom: 0;
}

/* Nested lists */
.content ul ul,
.content ol ol,
.content ul ol,
.content ol ul,
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
    margin-top: 0.5em;
    margin-bottom: 0;
}

/* ========================================================================== */
/* BLOCKQUOTE */
/* ========================================================================== */

blockquote,
.blockquote {
    margin: 1.5em 0;
    padding: 1em 1.5em;
    border-left: 4px solid var(--bh-color-primary);
    background-color: var(--bh-bg-secondary);
    font-style: italic;
}

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

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

/* ========================================================================== */
/* CODE */
/* ========================================================================== */

code {
    padding: 0.125em 0.375em;
    font-family: var(--bh-font-mono);
    font-size: 0.875em;
    background-color: var(--bh-bg-tertiary);
    border-radius: var(--bh-border-radius-sm);
}

pre {
    margin: 1.5em 0;
    padding: 1em;
    font-family: var(--bh-font-mono);
    font-size: var(--bh-font-size-sm);
    background-color: var(--bh-gray-900);
    color: var(--bh-gray-100);
    border-radius: var(--bh-border-radius);
    overflow-x: auto;
}

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

/* ========================================================================== */
/* HORIZONTAL RULE */
/* ========================================================================== */

hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--bh-border-color);
}

/* ========================================================================== */
/* MISE EN FORME TEXTE */
/* ========================================================================== */

/* Poids */
.font-light { font-weight: var(--bh-font-weight-light); }
.font-normal { font-weight: var(--bh-font-weight-normal); }
.font-medium { font-weight: var(--bh-font-weight-medium); }
.font-semibold { font-weight: var(--bh-font-weight-semibold); }
.font-bold { font-weight: var(--bh-font-weight-bold); }

/* Style */
.italic { font-style: italic; }
.not-italic { font-style: normal; }

/* Transformation */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* Alignement */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Couleurs de texte */
.text-primary { color: var(--bh-text-primary); }
.text-secondary { color: var(--bh-text-secondary); }
.text-tertiary { color: var(--bh-text-tertiary); }
.text-accent { color: var(--bh-color-accent); }
.text-success { color: var(--bh-color-success); }
.text-error { color: var(--bh-color-error); }
.text-white { color: var(--bh-color-white); }

/* Decoration */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* Letter spacing */
.tracking-tight { letter-spacing: var(--bh-letter-spacing-tight); }
.tracking-normal { letter-spacing: var(--bh-letter-spacing-normal); }
.tracking-wide { letter-spacing: var(--bh-letter-spacing-wide); }
.tracking-wider { letter-spacing: var(--bh-letter-spacing-wider); }
.tracking-widest { letter-spacing: var(--bh-letter-spacing-widest); }

/* Line height */
.leading-tight { line-height: var(--bh-line-height-tight); }
.leading-snug { line-height: var(--bh-line-height-snug); }
.leading-normal { line-height: var(--bh-line-height-normal); }
.leading-relaxed { line-height: var(--bh-line-height-relaxed); }
.leading-loose { line-height: var(--bh-line-height-loose); }

/* ========================================================================== */
/* TRUNCATE */
/* ========================================================================== */

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

@media (max-width: 768px) {
    h1,
    .h1 {
        font-size: var(--bh-font-size-3xl);
    }
    
    h2,
    .h2 {
        font-size: var(--bh-font-size-2xl);
    }
    
    h3,
    .h3 {
        font-size: var(--bh-font-size-xl);
    }
    
    h4,
    .h4 {
        font-size: var(--bh-font-size-lg);
    }
    
    .lead {
        font-size: var(--bh-font-size-base);
    }
}