/*
 * Variant C — the Copilot prototype, followed closely.
 *
 * Matches ik_possible_layout/index.html: dark gradient logo strip and dark
 * page background, banner with the title over it, dark navbar with an orange
 * rule, main content as a white rounded card centred in the page (Bootstrap's
 * bg-white rounded shadow-sm, in a col-lg-10), an orange underline on every
 * h1 and an orange left rule on every h2, flush list groups with a 20px icon
 * column and hover, cards that lift 5px, dark gradient footer.
 *
 * Values are taken from the prototype's custom.css (colours, shadow depths,
 * hover transforms). What is not carried over is how it got there: the
 * original reached for !important in dozens of places, so nothing could be
 * adjusted afterwards without a fight — this reaches the same look through
 * Bootstrap's own variables.
 */

.v-c {
    --ik-primary: #333333;
    --ik-secondary: #ff8c00;
    --ik-accent-grey: #666666;

    --ik-accent: var(--ik-secondary);
    --ik-surface: #f8f9fa;
    --ik-muted: #6c757d;

    /*
     * NOT --bs-body-bg here, deliberately: that variable is what almost every
     * Bootstrap component (accordion, cards, dropdowns outside the dark navbar)
     * uses as ITS OWN background by default. Setting it dark once made the
     * accordion body render dark text on a dark background. The visible dark
     * backdrop comes only from the plain `background` property below; every
     * component keeps a normal light background unless a rule here says
     * otherwise.
     */
    --bs-body-color: #222222;
    --bs-border-color: #dee2e6;

    /* The prototype linked in orange, which fails contrast on white. Kept as
       the accent for rules and icons; link text is a darker shade of it. */
    --bs-link-color: #9a5200;
    --bs-link-hover-color: #c46900;

    --ik-radius: 4px;
    --ik-page-max: 100%;

    /* Page background is dark; only the content card underneath is white
       (see .ik-main below) — this is what reads as "background and rounded
       corners" against the surrounding page. */
    background: var(--ik-primary);
}

/* ----------------------------------------------------------------- header */

/*
 * The prototype's own custom.css declares 0.75rem/1rem padding here too — but
 * its markup wraps the logo in Bootstrap's py-3 utility class, which a later
 * `.header-main .py-3 { padding: 0 !important; }` reset cancels back to zero.
 * Measured on the live prototype: 23px total, essentially just the 20px logo
 * image. Matching that number directly rather than reproducing the two
 * cancelling rules that (accidentally) produce it.
 */
.v-c .ik-logo {
    background: linear-gradient(135deg, var(--ik-primary) 0%, #444444 100%);
    border-bottom: 3px solid var(--ik-secondary);
    text-align: center;
    padding: 0;
    line-height: 0;
}

.v-c .ik-logo a { display: inline-block; padding-block: 1px; }

.v-c .ik-logo img {
    height: 20px;
    width: auto;
    transition: transform 0.3s ease;
}

.v-c .ik-logo a:hover img { transform: scale(1.05); }

.v-c .ik-banner {
    position: relative;
    background: var(--ik-primary);
    overflow: hidden;
    min-height: 150px;
}

.v-c .ik-banner img {
    display: block;
    width: 100%;
    max-width: none;
    height: clamp(150px, 20vw, 200px);
    object-fit: cover;
}

.v-c .ik-banner__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    background: linear-gradient(135deg,
        rgba(51, 51, 51, 0.7) 0%, rgba(51, 51, 51, 0.3) 50%, rgba(51, 51, 51, 0.7) 100%);
    color: #ffffff;
}

.v-c .ik-banner__title {
    font-size: clamp(1.75rem, 1.1rem + 3vw, 3rem);
    font-weight: 700;
    margin: 0 0 1rem;
    color: #ffffff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    /* The underline every h1 gets on this site (see below) — the banner
       title is a <p>, not an <h1>, so it needs its own copy of the rule. */
    display: inline-block;
    border-bottom: 3px solid var(--ik-secondary);
    padding-bottom: 0.5rem;
}

.v-c .ik-banner__subtitle {
    font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.25rem);
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------- navigation */

.v-c .ik-nav .navbar {
    background: var(--ik-primary);
    border-bottom: 1px solid var(--ik-secondary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.v-c .ik-nav .navbar-nav {
    margin-inline: auto;
    justify-content: center;
    /* Extra room between top-level items — at the shared padding alone they
       read as more cramped than the prototype, even with the same numbers,
       because the smaller nav font (site.css) leaves more visible gap either
       side of each label. */
    column-gap: 0.4rem;
}

.v-c .ik-nav .nav-link {
    color: #ffffff;
    font-weight: 500;
    border-radius: var(--ik-radius);
    transition: all 0.3s ease;
}

.v-c .ik-nav .nav-link:hover,
.v-c .ik-nav .nav-link:focus-visible {
    color: var(--ik-secondary);
    background: var(--ik-accent-grey);
}

/* No active-page indicator here — the prototype's own navbar doesn't mark
   one either, and every page in this menu links to real content the
   current one belongs under, so a highlighted "current" item added noise
   without pointing at anything useful. */
.v-c .ik-nav .nav-link[aria-current="page"] { box-shadow: none; }

/* A clicked/open dropdown DOES get a visible marker — this says which menu
   is currently open, which is a different, useful signal from "which page
   am I on". */
.v-c .ik-nav .nav-link[aria-expanded="true"] {
    box-shadow: inset 0 -3px 0 var(--ik-secondary);
}

/*
 * Hover inside the dropdown — every level, not just the top bar. Bootstrap's
 * own dark-theme scope (data-bs-theme="dark" on <nav>) gives dropdown-item a
 * translucent white hover by default; that applied at the top level too until
 * the rule above overrode it, but nested items (2nd level onward) kept the
 * default and never got the accent.
 */
.v-c .ik-nav .dropdown-item:hover,
.v-c .ik-nav .dropdown-item:focus-visible {
    color: var(--ik-secondary);
    background: var(--ik-accent-grey);
}

.v-c .ik-nav .dropdown-divider { border-color: rgba(255, 255, 255, 0.15); }
.v-c .ik-nav .dropdown-header { color: var(--ik-secondary); }

/* ---------------------------------------------------------------- content */

/*
 * Main content as a floating card: white, rounded, shadowed, centred at
 * roughly Bootstrap's col-lg-10 width — the prototype's
 * <div class="bg-white rounded shadow-sm p-4"> wrapping every page.
 */
.v-c .ik-main {
    background: #ffffff;
    color: var(--bs-body-color);
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    width: min(92%, 84rem);
    margin-inline: auto;
    /* The card floats clear of the navbar's orange rule rather than
       touching it — the prototype's own py-4 wrapper around the whole
       row does the same. */
    margin-block: 1.5rem;
    padding: 1.5rem;
}

@media (min-width: 576px) {
    .v-c .ik-main { padding: 2rem; margin-block: 2rem; }
}

/* Every h1 is underlined, every h2 has a left rule — site-wide, exactly as
   the prototype's global typography rules do (banner title included, via
   .ik-banner__title above). */
.v-c h1 {
    border-bottom: 3px solid var(--ik-secondary);
    padding-bottom: 0.5rem;
}

.v-c h2 {
    border-left: 4px solid var(--ik-secondary);
    padding-left: 1rem;
}

/*
 * An icon beside the page heading, as the prototype's <h1><i>...</i> Úvod</h1>
 * pattern does — inheriting the heading's own dark colour, not the orange
 * accent. The prototype's own CSS never colours these icons; adding orange
 * here was mine, and with every rule on the page already carrying the accent
 * (borders, hover, active state, list bullets), one more orange element per
 * heading read as cluttered rather than pointed. currentColor is the default
 * anyway — this rule only exists to say so explicitly, in case something else
 * on the page tries to colour icons generally.
 */
.v-c h1 .bi,
.v-c h2 .bi { color: currentColor; }

/*
 * "Tipy, kde začít" — same accent the prototype's own "Novinky" accordion
 * carried (the section heading it sat under used the site's orange rule via
 * the shared h2 style above); a coloured left edge on the open item plus an
 * orange focus ring keeps that accent without recolouring the whole button.
 */
/*
 * "Tipy, kde začít" — the prototype's own "Novinky" accordion, colour for
 * colour: each item is its own rounded, separated box (not Bootstrap's
 * default connected stack), the closed header sits on the same light grey
 * as the rest of the page's panels, and the open one is a solid orange bar,
 * not just an outline.
 */
.v-c .accordion {
    --bs-accordion-btn-bg: var(--ik-surface);
    --bs-accordion-active-bg: var(--ik-secondary);
    --bs-accordion-active-color: #ffffff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(255, 140, 0, 0.25);
}

/* Bootstrap connects accordion items into one seamless stack by dropping the
   border between them and rounding only the first/last corners; the
   prototype's items are independent boxes with a gap between them instead. */
.v-c .accordion-item {
    border: 1px solid var(--bs-border-color) !important;
    border-radius: 6px !important;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.v-c .accordion-item:last-of-type { margin-bottom: 0; }

.v-c .accordion-button:not(.collapsed) {
    box-shadow: none;
}

/* The active icon ships coloured for Bootstrap's default light background;
   on the solid orange bar it needs to be white to stay visible. */
.v-c .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.v-c .ik-card {
    background: #ffffff;
    border: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.v-c a.ik-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.v-c .ik-card__title { color: var(--ik-primary); font-weight: 600; }

/* Flush list group with a fixed icon column and hover, as in the prototype.
   Applies to real links and to the intro list's plain rows alike. */
.v-c .ik-list a,
.v-c .ik-list .ik-line {
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s ease;
}

.v-c .ik-list a:hover,
.v-c .ik-list li:hover > .ik-line {
    background: var(--ik-surface);
    border-radius: 0;
}

/* No colour here either — the prototype's own list-group-item icons inherit
   the text colour, they aren't accented. Between the h1/h2 icons above, this
   one, the nav icons, borders and hover states, orange everywhere stopped
   pointing at anything and just looked busy. */
.v-c .ik-list .bi {
    margin-right: 0.5rem;
    width: 20px;
    text-align: center;
}

.v-c .ik-panel {
    border: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

.v-c .ik-eyebrow,
.v-c .ik-muted { color: var(--ik-accent-grey); }

/* -------------------------------------------------------------------foot */

.v-c .ik-foot {
    background: linear-gradient(135deg, var(--ik-primary) 0%, #444444 100%);
    border-top: 3px solid var(--ik-secondary);
    color: #ffffff;
    text-align: center;
    margin-top: 2rem;
    padding-block: 1rem;
}