/**
 * Patriot University — Brand Utilities
 *
 * Reusable classes for branded list bullets, rule lines, and background patterns.
 * Governed by BRAND-GUIDE.md and DESIGN.md — do not add utilities without updating both.
 * Load AFTER tokens.pu.css and components.css.
 */

/* ── Custom List Bullets ──────────────────────────────────────────────── */

.pu-list--branded {
    list-style: none;
    padding-left: var(--iti-space-lg);
}

.pu-list--branded li {
    position: relative;
    padding-left: var(--iti-space-md);
    margin-bottom: var(--iti-space-sm);
}

.pu-list--branded li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: var(--pu-gold);
    transform: rotate(45deg);
}

.pu-list--check {
    list-style: none;
    padding-left: var(--iti-space-lg);
}

.pu-list--check li {
    position: relative;
    padding-left: var(--iti-space-lg);
    margin-bottom: var(--iti-space-sm);
}

.pu-list--check li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2327ae60' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain;
}

.pu-list--nav {
    list-style: none;
    padding-left: 0;
}

.pu-list--nav li {
    position: relative;
    padding-left: var(--iti-space-md);
    margin-bottom: var(--iti-space-xs);
}

.pu-list--nav li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid var(--pu-navy);
}

/* ── Rule Lines / Dividers ────────────────────────────────────────────── */

.pu-rule {
    border: none;
    height: 2px;
    background: var(--pu-gold);
    margin: var(--iti-space-xl) 0;
}

.pu-rule--heavy {
    border: none;
    height: 4px;
    background: var(--pu-navy);
    margin: var(--iti-space-2xl) 0;
}

.pu-rule--light {
    border: none;
    height: 1px;
    background: var(--iti-border);
    margin: var(--iti-space-lg) 0;
}

.pu-rule--section {
    border: none;
    height: 6px;
    background:
        linear-gradient(to bottom,
            var(--pu-navy) 0px,
            var(--pu-navy) 2px,
            transparent 2px,
            transparent 4px,
            var(--pu-gold) 4px,
            var(--pu-gold) 6px
        );
    margin: var(--iti-space-3xl) 0;
}

.pu-rule--gold-center {
    border: none;
    height: 2px;
    max-width: 120px;
    margin: var(--iti-space-lg) auto;
    background: var(--pu-gold);
    border-radius: 1px;
}

/* ── Background Patterns ──────────────────────────────────────────────── */

.pu-bg--parchment {
    background-color: var(--pu-parchment);
}

.pu-bg--navy {
    background-color: var(--pu-navy-dark);
    color: var(--pu-parchment);
}

.pu-bg--navy-light {
    background-color: var(--pu-navy-light);
}

.pu-bg--grain {
    background-color: var(--pu-parchment);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}

.pu-bg--surface {
    background-color: var(--iti-surface);
}

/* ── Brand Mark Utilities ─────────────────────────────────────────────── */

.pu-logo {
    display: inline-block;
    vertical-align: middle;
}

.pu-logo--sm {
    width: 32px;
    height: 32px;
}

.pu-logo--md {
    width: 48px;
    height: 48px;
}

.pu-logo--lg {
    width: 64px;
    height: 64px;
}

.pu-logo--xl {
    width: 96px;
    height: 96px;
}

/* ── Pull Quote Accent ────────────────────────────────────────────────── */

.pu-pullquote {
    border-left: 3px solid var(--pu-gold);
    padding-left: var(--iti-space-lg);
    margin: var(--iti-space-xl) 0;
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--pu-navy-dark);
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    .pu-pullquote {
        color: var(--pu-navy);
    }
}