/**
 * Karuna Commons - Base Styles
 * 
 * CSS reset + typography foundation.
 * No layout or components here—just the basics.
 */

/* =========================
   Reset
   ========================= */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove list styles on ul, ol with role="list" */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Images */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Form elements */
input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

/* Remove animations for reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}


/* =========================
   Typography
   ========================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text);
}

h1 {
    font-size: var(--text-4xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-6);
}

h2 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-4);
}

h3 {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-3);
}

h4 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}

h5 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

h6 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

p {
    margin-bottom: var(--space-4);
}

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

/* Lead text - for introductions */
.lead {
    font-size: var(--text-lg);
    color: var(--color-text-light);
    line-height: var(--leading-relaxed);
}

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

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

.text-muted {
    color: var(--color-text-muted);
}

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Lists */
ul,
ol {
    margin-bottom: var(--space-4);
    padding-left: var(--space-6);
}

li {
    margin-bottom: var(--space-2);
}

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

/* Blockquotes */
blockquote {
    border-left: 3px solid var(--color-primary);
    padding-left: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--color-text-light);
    font-style: italic;
}

/* Code */
code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
    background-color: var(--color-bg-subtle);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
}

pre {
    background-color: var(--color-bg-subtle);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

pre code {
    background: none;
    padding: 0;
}

/* Horizontal rule */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-8) 0;
}

/* Selection */
::selection {
    background-color: var(--color-primary-lighter);
    color: var(--color-primary-darker);
}


/* =========================
   Accessibility
   ========================= */

/* Skip link */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-md);
    z-index: var(--z-tooltip);
    transition: top var(--transition-fast);
}

.skip-link:focus {
    top: var(--space-4);
    text-decoration: none;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* =========================
   External Link Indicator
   ========================= */

/* Add an icon to links opening in new tab */
.article-body a[target="_blank"]::after {
    content: "\f08e";
    /* FontAwesome external link icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.7em;
    margin-left: 4px;
    vertical-align: baseline;
    opacity: 0.7;
    position: relative;
    top: -1px;
}



/* =========================
   Print Styles
   ========================= */

@media print {

    /* Reset background and text colors */
    body {
        background: white !important;
        color: black !important;
        font-size: 11pt !important;
    }

    /* Hide non-essential elements */
    .site-header,
    .main-nav,
    .breadcrumb,
    .btn,
    .nav-toggle,
    .skip-link,
    .share-button-container,
    iframe,
    footer,
    .callout-primary {
        /* Often callouts are "Looking for something else?" */
        display: none !important;
    }

    /* Typography adjustments for print */
    .page-content {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .article-header h1 {
        font-size: 24pt !important;
        margin-bottom: 0.5cm !important;
    }

    h2,
    h3 {
        color: black !important;
        page-break-after: avoid;
        margin-top: 1cm !important;
    }

    p,
    ul,
    ol {
        color: #000 !important;
        page-break-inside: avoid;
    }

    /* Expand links */
    a {
        text-decoration: underline !important;
        color: black !important;
    }

    /* Show URL only for external links to save space */
    .article-body a[target="_blank"]::after {
        content: " ("attr(href) ")" !important;
        font-size: 0.8em;
        color: #555;
        font-weight: normal;
        vertical-align: baseline;
        top: 0;
    }

    /* Layout */
    .card {
        border: 1px solid #ddd !important;
        box-shadow: none !important;
        break-inside: avoid;
        margin-bottom: 1cm !important;
    }

    img {
        max-width: 100% !important;
        print-color-adjust: exact;
    }
}