/* CoNaObiad theme styles — extends the shared Tailwind-based design system */

/* Default design tokens. Per-site values are injected by the ThemeStyle view component, which
   overrides these on :root. Colors are stored as space-separated RGB channels so they compose with
   Tailwind's alpha utilities, e.g. rgb(var(--color-rust) / 0.9). */
:root {
    --color-rust: 193 68 14;
    --color-cream: 253 248 240;
    --font-serif: "Playfair Display";
    --font-sans: "Inter";
}

body {
    font-family: var(--font-sans), 'Inter', system-ui, sans-serif;
    background-color: rgb(var(--color-cream));
    color: #1c1917;
}

h1, h2, h3, h4 {
    font-family: var(--font-serif), 'Playfair Display', Georgia, serif;
}

.theme-logo-mark {
    font-family: var(--font-serif), 'Playfair Display', serif;
}

.theme-logo-mark--lg {
    font-size: 1.1rem;
}

/* Sliding hover underline for the STOCK header's nav links.
 *
 * ⚠️ The `ttt-` prefix is load-bearing, not decoration. This used to be `.nav-link`, which is also
 * the class name our pass-1 prompt shows the AI — so every AI-designed nav inherited this underline
 * whether the design wanted one or not, painted in that site's own --color-rust. The owner spotted it
 * on a generated site in July 2026: "when I tell in prompt please make fancy menu the AI should not
 * add underscore on hover".
 *
 * CustomCssValidator.TargetsReservedChrome drops any AI custom-CSS selector containing `ttt-`, so the
 * prefix makes the isolation mutual: platform styling cannot leak onto AI markup, and AI CSS cannot
 * reach platform chrome. Keep it when adding rules here. */
.ttt-nav-link {
    position: relative;
}

.ttt-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: rgb(var(--color-rust));
    transition: width 0.3s ease;
}

.ttt-nav-link:hover::after {
    width: 100%;
}

.card-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.video-thumb {
    position: relative;
    overflow: hidden;
}

.video-thumb::after {
    content: '▶';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: white;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-thumb:hover::after {
    opacity: 1;
}

.hero-gradient {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 100%);
}

input:focus, textarea:focus {
    outline: none;
    border-color: rgb(var(--color-rust));
    box-shadow: 0 0 0 3px rgb(var(--color-rust) / 0.15);
}

.section-label {
    font-family: var(--font-sans), 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgb(var(--color-rust));
}