/* ===========================================================================
 * Brand palette — Tolk for Cisco UC
 *   Ink        #12161D   near-black — dark background / text on light accents
 *   Cloud      #F3F1EA   cream — light page background
 *   Wire (UC)  #1FB8A6   teal — primary brand color
 *   Ember (IA) #FF7A45   orange — accent / interactive highlights
 * ========================================================================= */
:root {
    --md-primary-fg-color:        #1FB8A6;  /* Wire (UC) */
    --md-primary-fg-color--light: #4ecdbd;
    --md-primary-fg-color--dark:  #178f81;
    /* Foreground (text + icons) on the Cloud header/tabs bar — Ink for contrast. */
    --md-primary-bg-color:        #12161D;
    --md-primary-bg-color--light: rgba(18, 22, 29, 0.72);

    --md-accent-fg-color:              #FF7A45;  /* Ember (IA) */
    --md-accent-fg-color--transparent: rgba(255, 122, 69, 0.10);

    --md-default-bg-color: #F3F1EA;  /* Cloud */
    --md-typeset-a-color:  #178f81;  /* darker teal — links stay legible on cream */
}

/* Dark scheme (slate) — Ink canvas, brighter teal accents for legibility */
[data-md-color-scheme="slate"] {
    --md-primary-fg-color:        #1FB8A6;  /* Wire (UC) */
    --md-primary-fg-color--light: #4ecdbd;
    --md-primary-fg-color--dark:  #178f81;
    --md-primary-bg-color:        #F3F1EA;
    --md-primary-bg-color--light: rgba(243, 241, 234, 0.72);

    --md-accent-fg-color:              #FF7A45;  /* Ember (IA) */
    --md-accent-fg-color--transparent: rgba(255, 122, 69, 0.15);

    --md-default-bg-color: #12161D;  /* Ink */
    --md-typeset-a-color:  #4ecdbd;  /* lighter teal on dark */
}

/* ---------------------------------------------------------------------------
 * Header logo — enlarged from the mkdocs-material default (~24 px) to 96 px
 * to match the inline logo previously rendered at the top of index.{md,fr.md}.
 *
 * The header is sized in `rem`; without `height: auto` + `max-height: none`
 * the theme would clamp the SVG/PNG back to the default. The header bar
 * itself stretches naturally to accommodate the taller logo, but we cap
 * `min-height` to keep the right-hand nav controls vertically centered.
 * ------------------------------------------------------------------------- */
.md-header__button.md-logo {
    /* No vertical padding: the logo should sit flush against the tabs bar
     * below so there is no visible empty band between them. */
    padding: 0 0.4rem;
    margin: 0;
    line-height: 0;
    /* Stick the logo to the bottom of the header so it touches the tabs bar */
    align-self: flex-end;
    /* The banner is rendered as a background image so it can swap per color
     * scheme (Material only supports a single <img> logo). The banner is 3:1,
     * so a 192px height maps to a 576px width. */
    width: 576px;
    height: 192px;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
}

/* Hide Material's single <img> logo — the banner is supplied via the anchor's
 * background-image below so it can differ between the light and dark schemes. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    display: none;
}

/* Scheme-specific banner: dark wordmark for the light theme, light wordmark
 * for the dark theme. Paths are relative to this stylesheet (docs/assets/). */
[data-md-color-scheme="default"] .md-header__button.md-logo {
    background-image: url("banner-light.png");
}
[data-md-color-scheme="slate"] .md-header__button.md-logo {
    background-image: url("banner-dark.png");
}

/* The banner already carries the "tolk" wordmark, so hide the redundant text
 * title — but keep the element in the layout: its flex-grow acts as the spacer
 * that pushes the search, palette and language controls to the right edge. */
.md-header__title {
    font-size: 0;
    flex-grow: 1;
}

/* Header + tabs background follows the active color scheme so the transparent
 * banner sits on a matching canvas: Cloud in light mode, Ink in dark mode. */
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-tabs {
    background-color: #F3F1EA; /* Cloud */
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
    background-color: #12161D; /* Ink */
}

/* Header height matches the logo exactly so the tabs navigation sits
 * immediately under the logo, with no extra gap. */
.md-header {
    min-height: 192px;
}

.md-header__inner {
    min-height: 192px;
    padding-top: 0;
    padding-bottom: 0;
    /* Anchor every header item at the bottom edge so nothing floats above
     * the logo baseline — eliminates the visual gap above the tabs bar. */
    align-items: flex-end;
}

/* On narrow screens shrink the banner so it doesn't crowd the header. */
@media screen and (max-width: 76.1875em) {
    .md-header__button.md-logo {
        width: 315px;
        height: 105px;
    }
    .md-header,
    .md-header__inner {
        min-height: 105px;
    }
}

/* Pull the tabs bar tight against the header — Material adds a small
 * top padding which, combined with the tall logo, made the links look
 * visually disconnected from the brand. */
.md-tabs {
    margin-top: 0;
    padding-top: 0;
    /* Default Material height ≈ 2.4rem with link padding pushing the text
     * to the middle. Shrink the bar and remove that extra spacing so the
     * link labels sit right under the logo baseline. */
    min-height: 1.8rem;
    line-height: 1.8rem;
}

.md-tabs__list {
    margin-top: 0;
    padding-top: 0;
    min-height: 1.8rem;
}

.md-tabs__item {
    height: 1.8rem;
    padding-top: 0;
    padding-bottom: 0;
}

.md-tabs__link {
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.8rem;
}

/* Contact page - photo and certification badges */
.contact-photo {
    border-radius: 50%;
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 3px solid var(--md-primary-fg-color);
}

.cert-badges {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.cert-badges img {
    width: 200px;
    height: 200px;
    object-fit: contain;
}

/* Contact page - justify text */
.md-content p {
    text-align: justify;
}

/* Image slideshow - one image at a time with fade */
.image-slideshow {
    position: relative;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1672 / 941;
    margin: 2rem auto;
    background: var(--md-code-bg-color, #f5f5f5);
    border-radius: 8px;
    overflow: hidden;
}

.image-slideshow img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.image-slideshow img.active {
    opacity: 1;
}

.image-slideshow .slideshow-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    font-size: 2rem;
    padding: 0.3rem 0.7rem;
    cursor: pointer;
    border-radius: 4px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}

.image-slideshow:hover .slideshow-arrow {
    opacity: 1;
}

.image-slideshow .slideshow-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
}

.image-slideshow .slideshow-arrow.prev {
    left: 10px;
}

.image-slideshow .slideshow-arrow.next {
    right: 10px;
}