/* ============================================
   CAIS 2026 - Design System
   Color Palette: Terracotta + Olive + Warm Monochrome
   Philosophy: "Less, but better" - Dieter Rams
   ============================================ */

:root {
    /* Terracotta System (Primary Accent - 20-25% max) */
    --terracotta-deep: #B8593E;
    --terracotta-medium: #C4735A;
    --terracotta-light: #D89380;

    /* Olive System (CMPND Connection - 10-15%) */
    --olive-moss: #6B7F5A;
    --olive-clay: #956C58;
    --olive-sage: #8A9E78;

    /* Warm Monochrome Foundation (60-70%) */
    --seasalt: #FAFAF8;
    --eerie-black: #252523;
    --davys-gray: #5E5D59;
    --silver: #C7C6C5;
    --platinum: #e8e7e7;

    /* Legacy aliases for compatibility */
    --cais-accent: var(--terracotta-deep);
    --cais-text: var(--eerie-black);
    --cais-bg-white: var(--seasalt);
    --cais-bg-light: var(--platinum);
    --cais-border: var(--silver);
    --cais-border-light: var(--platinum);
}

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

body {
    color: var(--eerie-black);
    background-color: var(--seasalt);
    font-synthesis-weight: none;
}

h1, h2, h3, h4, h5, h6, p {
    color: var(--eerie-black);
}

/* ============================================
   ACCESSIBILITY - Skip Link
   ============================================ */

.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-within {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

.navbar {
    background-color: var(--seasalt) !important;
    border-bottom: 1px solid var(--platinum);
}

.navbar-brand {
    padding: 0;
    padding-top: 2px; /* Offset nav-link border-bottom */
}

.nav-link {
    color: var(--eerie-black) !important;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: border-color 200ms linear;
}

.nav-link:hover {
    color: var(--eerie-black) !important;
    border-bottom: 2px solid var(--terracotta-deep);
}

.nav-link.active {
    color: var(--eerie-black) !important;
    border-bottom: 2px solid var(--terracotta-deep);
}

.nav-link.disabled {
    color: var(--silver) !important;
    border-bottom: 2px solid transparent;
}

/* ============================================
   HERO SECTIONS
   ============================================ */

.hero, .coc-hero, .cfp-hero {
    position: relative;
    background: url('../images/hero ultralight gradient.png') center/cover no-repeat;
    color: var(--eerie-black);
    padding: 4.5rem 0;
}

.hero h1, .hero p,
.coc-hero h1, .coc-hero p,
.cfp-hero h1, .cfp-hero p {
    color: var(--eerie-black);
}

/* ACM Mark */
.acm-mark {
    max-height: 90px;
    width: auto;
    opacity: 0.7;
    display: block;
    filter: grayscale(100%);
}

.acm-mark-link {
    display: inline-block;
    margin-bottom: 1.0rem;
    padding: 12px;
    margin: -24px;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .acm-mark {
        height: 12px;
    }

    .acm-mark-link {
        padding: 5px;
        margin: -18px;
        margin-bottom: 0;
    }
}

/* ============================================
   BUTTONS - Outlined by default, filled on hover
   ============================================ */

/* Primary CTA - Terracotta outlined */
.btn-primary {
    background: transparent;
    border: 2px solid var(--terracotta-deep);
    color: var(--terracotta-deep);
    border-radius: 0;
    font-weight: 600;
    transition: background-color 200ms linear, color 200ms linear;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--terracotta-deep);
    border-color: var(--terracotta-deep);
    color: var(--seasalt);
}

.btn-primary:active {
    background-color: var(--terracotta-deep);
    border: 3px solid var(--terracotta-deep);
    color: var(--seasalt);
}

/* Outline Primary - Same as primary (both outlined) */
.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--terracotta-deep);
    color: var(--terracotta-deep);
    border-radius: 0;
    font-weight: 600;
    transition: background-color 200ms linear, color 200ms linear;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--terracotta-deep);
    border-color: var(--terracotta-deep);
    color: var(--seasalt);
}

/* Secondary CTA - Silver outlined */
.btn-secondary {
    background: transparent;
    border: 1px solid var(--silver);
    color: var(--eerie-black);
    border-radius: 0;
    transition: border-color 200ms linear;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background: transparent;
    border-color: var(--olive-moss);
    color: var(--eerie-black);
}

/* Light button (used in CTA band) */
.btn-light {
    background: transparent;
    border: 2px solid var(--eerie-black);
    color: var(--eerie-black);
    border-radius: 0;
    font-weight: 600;
    transition: background-color 200ms linear, color 200ms linear;
}

.btn-light:hover,
.btn-light:focus {
    background-color: var(--eerie-black);
    border-color: var(--eerie-black);
    color: var(--seasalt);
}

/* Ghost/Tertiary */
.btn-ghost {
    border: none;
    color: var(--davys-gray);
    text-decoration: underline;
    background: transparent;
}

.btn-ghost:hover {
    color: var(--olive-moss);
}

/* ============================================
   CARDS - Silver borders, olive hover
   ============================================ */

.card, .card-quiet, .info-card {
    border: 1px solid var(--silver);
    border-radius: 0;
    padding: 1.5rem;
    background: var(--seasalt);
    transition: border-color 200ms linear;
}

.card:hover, .card-quiet:hover, .info-card:hover {
    border-color: var(--olive-moss);
    /* No transform or shadow */
}

/* Emphasis card (keynote speakers, featured content) */
.card-emphasis {
    border: 1px solid var(--terracotta-deep);
    border-radius: 0;
    padding: 1.5rem;
    background: linear-gradient(
        to bottom,
        rgba(216, 147, 128, 0.08),
        transparent 30%
    );
}

.card-title {
    color: var(--eerie-black);
    font-weight: 700;
}

/* Dates card - Terracotta border for emphasis */
.dates-card {
    border: 2px solid var(--terracotta-deep);
    border-radius: 0;
}

/* Program card images */
.program-card .ratio {
    background: var(--platinum);
    border-radius: 0;
    overflow: hidden;
}

.program-card img.program-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%);
    opacity: 0.85;
}

.program-card img.program-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ============================================
   HIGHLIGHT & CALLOUT BOXES
   ============================================ */

.highlight-box {
    background: rgba(149, 108, 88, 0.05); /* clay at 5% */
    padding: 1.5rem;
    border-radius: 0;
    height: 100%;
    border: 1px solid var(--platinum);
}

.quick-links-callout {
    background: var(--platinum);
    border-radius: 0;
    padding: 1.5rem;
    border: 1px solid var(--silver);
}

.banded {
    background: var(--platinum);
    padding: 2rem;
    border-radius: 0;
}

/* ============================================
   CTA BAND - Terracotta outlined container
   ============================================ */

.cta-band {
    background: transparent;
    border: 2px solid var(--terracotta-deep);
    color: var(--eerie-black);
    border-radius: 0;
}

.cta-band h2, .cta-band p {
    color: var(--eerie-black);
}

/* ============================================
   LINKS
   ============================================ */

a {
    color: var(--terracotta-deep);
    text-decoration: none;
    transition: color 200ms linear;
}

a:hover {
    color: var(--terracotta-medium);
    text-decoration: underline;
}

/* Footer links - different treatment */
footer a {
    color: var(--eerie-black);
    text-decoration: none;
}

footer a:hover {
    color: var(--olive-moss);
    text-decoration: underline;
}

/* ============================================
   SECTION ELEMENTS
   ============================================ */

.section-title {
    font-weight: 700;
    letter-spacing: .2px;
    margin-top: 0;
    color: var(--eerie-black);
}

.anchor {
    scroll-margin-top: 84px;
}

/* Section dividers */
.section-divider {
    width: 100%;
    height: 2px;
    background: var(--terracotta-deep);
    margin: 64px 0;
    border: none;
}

.section-divider-subtle {
    width: 100%;
    height: 1px;
    background: var(--olive-clay);
    margin: 48px 0;
    border: none;
}

/* ============================================
   BADGES
   ============================================ */

.badge {
    background-color: var(--davys-gray);
    color: var(--seasalt);
    border-radius: 0;
    font-weight: 600;
}

.badge-cais, .bg-primary {
    background-color: var(--terracotta-deep) !important;
    color: var(--seasalt);
}

.badge.bg-secondary {
    background-color: var(--davys-gray) !important;
    color: var(--seasalt);
}

/* ============================================
   ALERTS
   ============================================ */

.alert-info {
    background-color: rgba(138, 158, 120, 0.08); /* sage at 8% */
    border: 1px solid var(--silver);
    border-radius: 0;
    color: var(--eerie-black);
}

.alert-warning {
    background-color: rgba(216, 147, 128, 0.08); /* terracotta-light at 8% */
    border: 1px solid var(--terracotta-deep);
    border-radius: 0;
    color: var(--eerie-black);
}

/* ============================================
   FOOTER
   ============================================ */

footer {
    background-color: var(--platinum);
    color: var(--eerie-black);
    border-top: 1px solid var(--silver);
}

/* ============================================
   TABLES
   ============================================ */

table {
    color: var(--eerie-black);
}

th, .table-header {
    background: rgba(149, 108, 88, 0.08); /* clay at 8% */
    border-bottom: 2px solid var(--silver);
    color: var(--eerie-black);
    font-weight: 700;
}

.table-row {
    border-bottom: 1px solid var(--platinum);
}

.table-row:hover {
    background: rgba(138, 158, 120, 0.05); /* sage at 5% */
}

/* ============================================
   FORMS
   ============================================ */

.form-control, .input-field {
    background-color: var(--seasalt);
    border: 1px solid var(--silver);
    border-radius: 0;
    color: var(--eerie-black);
    padding: 16px;
    transition: border-color 200ms linear;
}

.form-control:focus, .input-field:focus {
    border: 2px solid var(--terracotta-deep);
    box-shadow: none;
    outline: none;
}

.form-control.error, .input-field.error {
    border: 2px solid #C84630;
}

/* ============================================
   LIST GROUPS
   ============================================ */

.list-group-item {
    background-color: var(--seasalt);
    border-color: var(--platinum);
    border-radius: 0;
    color: var(--eerie-black);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.bg-light {
    background-color: var(--platinum) !important;
}

.bg-white {
    background-color: var(--seasalt) !important;
}

.text-primary {
    color: var(--terracotta-deep) !important;
}

.text-muted {
    color: var(--davys-gray) !important;
}

.border-primary {
    border-color: var(--terracotta-deep) !important;
}

.border-top {
    border-top: 1px solid var(--platinum) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--platinum) !important;
}

.border-start {
    border-left-width: 3px !important;
}

/* ============================================
   FOCUS STATES - Accessibility
   ============================================ */

a:focus, button:focus, .btn:focus {
    outline: 2px solid var(--terracotta-deep);
    outline-offset: 2px;
}

/* ============================================
   BOOTSTRAP OVERRIDES - Subtle border radius (4px)
   ============================================ */

.card, .alert, .badge, .btn, .form-control, 
.input-group-text, .modal-content, .dropdown-menu,
.nav-pills .nav-link, .navbar-toggler,
.card-quiet, .info-card, .highlight-box, .dates-card,
.cta-band, .list-group-item {
    border-radius: 4px !important;
}

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

@media (max-width: 768px) {
    .hero, .coc-hero, .cfp-hero {
        padding: 3rem 0;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .navbar, footer, .btn, .cta-band {
        display: none;
    }

    body {
        color: var(--eerie-black);
        background: var(--seasalt);
    }

    a {
        text-decoration: none;
        color: var(--eerie-black);
    }

    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 90%;
    }
}