/* portal-base.css — Shared styles for index/portal pages (hub + per-directory)
 * Override :root colors in per-directory theme.css
 * Variables: --color-bg, --color-bg-secondary, --color-text-primary, --color-text-secondary,
 *            --color-primary-dark, --color-primary-medium, --color-primary-light,
 *            --color-border, --color-card-bg
 */

:root {
    /* Portal defaults (overridden per-brand via theme.css) */
    --color-bg: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-primary-dark: #2563eb;
    --color-primary-medium: #2563eb;
    --color-primary-light: #3b82f6;
    --color-border: #e5e7eb;
    --color-card-bg: #ffffff;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --content-width: 1200px;
    --font-size-h1: 2.5rem;
    --font-size-h1-md: 2rem;
    --font-size-h1-sm: 1.5rem;
    --font-size-subtitle: 1.0625rem;
    --font-size-subtitle-md: 0.9375rem;
    --font-size-subtitle-sm: 0.875rem;
    --font-size-section-title: 1.5rem;
    --font-size-section-title-md: 1.25rem;
    --font-size-section-title-sm: 1.125rem;
    --font-size-card-title: 1.1875rem;
    --font-size-card-desc: 0.9375rem;
    --font-size-card-category: 0.75rem;
    --font-size-card-link: 0.9375rem;
    --font-size-back-link: 0.9375rem;
    --font-size-footer: 0.875rem;
    --card-grid-min: 320px;
    --section-title-bar-width: 4px;
    --section-title-bar-height: 1.5rem;
    --card-top-bar-height: 3px;
    --focus-outline-width: 2px;
    --focus-outline-offset: 2px;
    --card-hover-lift: -2px;
    --card-link-arrow-shift: 4px;
    --transition-standard: 0.3s ease;
    --letter-spacing-h1: -0.02em;
    --letter-spacing-category: 0.05em;
    --line-height-snug: 1.5;
    --opacity-category: 0.9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f172a;
        --color-bg-secondary: #1e293b;
        --color-text-primary: #f5f7fa;
        --color-text-secondary: #e2e8f0;
        --color-primary-dark: #93c5fd;
        --color-primary-medium: #60a5fa;
        --color-primary-light: #3b82f6;
        --color-border: #334155;
        --color-card-bg: #1e293b;
    }
}

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

.skip-link {
    position: absolute;
    left: var(--offscreen-left);
    top: auto;
    width: var(--sr-only-size);
    height: var(--sr-only-size);
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    left: var(--spacing-sm);
    top: var(--spacing-sm);
    width: auto;
    height: auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--color-primary-dark, #2563eb);
    color: var(--color-white);
    border-radius: var(--radius-xs);
    z-index: var(--z-index-skip-link);
    font-weight: var(--font-weight-semibold);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font-portal, var(--font-sans));
    background-color: var(--color-bg, #ffffff);
    color: var(--color-text-primary, #1a1a1a);
    line-height: var(--line-height-base);
    transition: background-color var(--transition-standard), color var(--transition-standard);
}

/* Back navigation */
.back-nav { max-width: var(--content-width); margin: 0 auto; padding: var(--spacing-md) var(--spacing-lg) 0; }
.back-link {
    display: inline-flex; align-items: center; gap: var(--spacing-xs);
    color: var(--color-primary-medium); font-weight: var(--font-weight-semibold); font-size: var(--font-size-back-link);
    text-decoration: none; transition: gap var(--transition-fast);
}
.back-link:hover { gap: var(--spacing-sm); }

/* Header */
header {
    padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg);
    text-align: center;
    border-bottom: var(--border-width-1) solid var(--color-border);
    background-color: var(--color-bg-secondary);
}
.header-content { max-width: var(--content-width); margin: 0 auto; }

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
    letter-spacing: var(--letter-spacing-h1);
}
.subtitle {
    font-size: var(--font-size-subtitle);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-normal);
}

/* Main content */
main {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-lg);
}

/* Section titles */
section { margin-bottom: var(--spacing-xl); }
.section-title {
    font-size: var(--font-size-section-title);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-lg);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}
.section-title::before {
    content: '';
    display: inline-block;
    width: var(--section-title-bar-width);
    height: var(--section-title-bar-height);
    background-color: var(--color-primary-medium);
    border-radius: var(--radius-sm);
}

/* Card grid */
.card-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: repeat(auto-fit, minmax(var(--card-grid-min), 1fr));
}
.card {
    background-color: var(--color-card-bg);
    border: var(--border-width-1) solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-standard);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: var(--card-top-bar-height);
    background: linear-gradient(90deg, var(--color-primary-medium), var(--color-primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-standard);
}
.card:hover {
    border-color: var(--color-primary-medium);
    box-shadow: var(--shadow-lg);
    transform: translateY(var(--card-hover-lift));
}
.card:hover::before { transform: scaleX(1); }

.card-header { margin-bottom: var(--spacing-md); }
.card-category {
    display: inline-block;
    font-size: var(--font-size-card-category);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-category);
    text-transform: uppercase;
    color: var(--color-primary-medium);
    margin-bottom: var(--spacing-xs);
    opacity: var(--opacity-category);
}
.card-title {
    font-size: var(--font-size-card-title);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}
.card-description {
    font-size: var(--font-size-card-desc);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
    line-height: var(--line-height-snug);
}
.card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary-medium);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-card-link);
    transition: gap var(--transition-standard);
    width: fit-content;
    margin-top: auto;
}
.card-link::after { content: '\2192'; transition: transform var(--transition-standard); }
.card:hover .card-link::after { transform: translateX(var(--card-link-arrow-shift)); }

.card-links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-top: auto;
}
.card-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary-medium);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-card-link);
    text-decoration: none;
    width: fit-content;
}
.card-links a::after { content: '\2192'; transition: transform var(--transition-standard); }
.card-links a:hover::after { transform: translateX(var(--card-link-arrow-shift)); }

/* Footer */
footer {
    border-top: var(--border-width-1) solid var(--color-border);
    padding: var(--spacing-lg);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-footer);
    margin-top: var(--spacing-xl);
    background-color: var(--color-bg-secondary);
}
.footer-content { max-width: var(--content-width); margin: 0 auto; }
footer a { color: var(--color-primary-medium); text-decoration: none; }

/* Accessibility */
.sr-only {
    position: absolute;
    width: var(--sr-only-size);
    height: var(--sr-only-size);
    padding: 0;
    margin: var(--sr-only-margin);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.card:focus-visible { outline: var(--focus-outline-width) solid var(--color-primary-medium); outline-offset: var(--focus-outline-offset); }
a:focus-visible {
    outline: var(--focus-outline-width) solid var(--color-primary-medium);
    outline-offset: var(--focus-outline-offset);
    border-radius: var(--radius-sm);
}

/* Responsive */
@media (max-width: 768px) {
    h1 { font-size: var(--font-size-h1-md); }
    .subtitle { font-size: var(--font-size-subtitle-md); }
    header { padding: var(--spacing-lg) var(--spacing-md); }
    main { padding: var(--spacing-lg) var(--spacing-md); }
    .card-grid { grid-template-columns: 1fr; }
    .section-title { font-size: var(--font-size-section-title-md); }
}

@media (max-width: 480px) {
    h1 { font-size: var(--font-size-h1-sm); }
    .subtitle { font-size: var(--font-size-subtitle-sm); }
    header { padding: var(--spacing-md) var(--spacing-sm); }
    main { padding: var(--spacing-md) var(--spacing-sm); }
    .card { padding: var(--spacing-md); }
    .section-title { font-size: var(--font-size-section-title-sm); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}