/* 
 * assets/css/custom.css
 * Custom overrides for McKinsey-style editorial design 
 */

/* Subtle Noise Texture Overlay */
.bg-noise {
    position: relative;
}
.bg-noise::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.05"/%3E%3C/svg%3E');
    pointer-events: none;
    z-index: 10;
}

/* Custom Text Selection (McKinsey Blue) */
::selection {
    background-color: #002C6C;
    color: #ffffff;
}

/* Smooth Scroll */
html {
    scroll-behavior: smooth;
}

/* Custom Thin Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #F8F9FA; 
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8; 
}

/* Editorial Blockquote Style */
.editorial-quote {
    border-left: 4px solid #9B7A2F;
    padding-left: 1.5rem;
    font-style: italic;
    background: linear-gradient(to right, #F8F9FA, transparent);
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin: 2rem 0;
}

/* Animated Underline for Links */
.hover-underline-anim {
    position: relative;
    text-decoration: none;
}
.hover-underline-anim::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transform-origin: bottom right;
    transition: transform 0.3s cubic-bezier(0.86, 0, 0.07, 1);
}
.hover-underline-anim:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Media Grade Article Formatting (.prose overrides) */
.article-content p {
    margin-bottom: 1.5em;
    line-height: 1.8;
}
.article-content h2 {
    margin-top: 2.5em;
    margin-bottom: 1em;
    border-bottom: 1px solid #E2E8F0;
    padding-bottom: 0.5em;
}
.article-content h3 {
    margin-top: 2em;
    margin-bottom: 0.75em;
}
.article-content img {
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}
.article-content .caption {
    font-size: 0.875rem;
    color: #64748B;
    font-style: italic;
    margin-bottom: 2rem;
}