/* =========================================
   1. TOKENS & DESIGN VARIABLES
   ========================================= */

:root {
    /* Colors */
    --color-bg: #080808;
    --color-text: #ffffff;
    --color-text-muted: #aaaaaa;
    --color-primary: rgb(170, 0, 0);
    --color-primary-soft: rgba(170, 0, 0, 0.2);
    --color-primary-soft-strong: rgba(170, 0, 0, 0.19);
    --color-accent-red: rgb(255, 0, 0);
    --color-accent-red-soft: rgba(255, 0, 0, 0.19);
    --color-accent-red-strong: rgba(255, 0, 0, 0.5);

    /* Text shadows */
    --shadow-text-soft: 0 0 5px var(--color-primary);
    --shadow-text-strong: 0 0 12px var(--color-primary);
    --shadow-text-mobile: 0 0 7px var(--color-primary);

    /* Box shadows */
    --shadow-card-red: 0 4px 10px 0 var(--color-accent-red-strong),
        0 4px 20px 0 var(--color-accent-red-soft);
    --shadow-card-primary: 0 4px 10px 0 var(--color-primary-soft),
        0 4px 20px 0 var(--color-primary-soft-strong);
    --shadow-card-white: 0 4px 10px 0 rgba(255, 255, 255, 0.5),
        0 4px 20px 0 rgba(255, 255, 255, 0.19);

    /* Fonts */
    --font-family-base: 'ANNT', sans-serif;
    --font-size-h2: 1.5rem;
    --font-size-h3: 1.25rem;
    --font-size-h4: 1rem;

    /* Hero typing */
    --hero-main-font-size: 2rem;
    --hero-sub-font-size: 1.1rem;
    --hero-main-font-size-lg: 4rem;
    --hero-sub-font-size-lg: 2rem;

    /* Layout widths */
    --max-width-page: 1100px;
    --section-margin-top: 200px;
    --section-margin-bottom: 80px;

    /* Images */
    --bg-image-footer: url('../img/graph/footerBACK.avif');
    --bg-image-red: url('../img/graph/backRED.avif');

    /* Scroll watcher */
    --scrollwatcher-height: 5px;
}

/* =========================================
   2. FONT-FACE
   ========================================= */

@font-face {
    font-family: ANNT;
    src: url("font/ford-antenna-medium.otf") format("opentype");
}

/* =========================================
   3. BASE & TYPOGRAPHY
   ========================================= */

html,
body,
h1,
h2,
h3,
h4,
p {
    font-family: var(--font-family-base);
    color: var(--color-text);
}

body {
    background-color: var(--color-bg);
}

h1,
h2,
h3,
h4 {
    font-weight: 600;
    text-shadow: var(--shadow-text-strong);
}

h2 {
    font-size: var(--font-size-h2);
}

h3 {
    font-size: var(--font-size-h3);
}

h4 {
    font-size: var(--font-size-h4);
}

strong {
    letter-spacing: 0.05em;
}

/* Links & footer */

a:hover,
footer a:hover {
    color: var(--color-primary);
}

footer {
    background-image: var(--bg-image-footer);
}

footer p {
    color: var(--color-text);
}

footer a {
    color: var(--color-text-muted);
}

/* =========================================
   4. LAYOUT / GRID / UTILITIES
   ========================================= */

/* Basic layout helpers */

.break {
    padding-top: 15px;
    padding-bottom: 15px;
}

.page-content {
    max-width: var(--max-width-page);
    margin-top: var(--section-margin-top);
    margin-bottom: var(--section-margin-bottom);
}

.page-content-links {
    max-width: var(--max-width-page);
    margin-top: 150px;
    margin-bottom: 40px;
}

.width90 {
    width: 90%;
    margin-left: 5%;
}

.width100 {
    width: 100%;
}

/* Floats & grid-like widths */

.clocktower4 {
    width: 11.11%;
    float: left;
}

.p23-third,
.p23-third-text {
    width: 33.32%;
    float: left;
}

.p23-quarter,
.p23-quarter-text,
.p23-quarter-button {
    width: 24.99999%;
    float: left;
}

.p23-fifth {
    width: 19.99999%;
    float: left;
}

.p23-sixth {
    width: 16.66665%;
    float: left;
}

/* W3 row padding – vráceno kvůli kartám s p23-card-4 */

.w3-row-padding,
.w3-row-padding>.p23-half,
.w3-row-padding>.p23-third,
.w3-row-padding>.p23-twothird,
.w3-row-padding>.p23-threequarter,
.w3-row-padding>.p23-quarter,
.w3-row-padding>.p23-col,
.w3-row-padding>.p23-quarter-button {
    padding: 0 8px;
}

/* Layout helpers */

.p23-center {
    text-align: center;
}

.p23-contact {
    font-size: 0.8rem;
}

.p23-hid {
    display: none;
}

.p23-hidDESKTOP {
    display: none;
}

.p23-hidPHONE {
    display: block;
}

.p23-marginBOTTOM {
    margin-bottom: 200px;
}

.ppad {
    margin-bottom: 15px;
}

.fdfpad {
    margin-top: 15px;
    margin-bottom: 25px;
}

/* Youtube / button widths */

.p23-button-width35 {
    margin-left: 37.5%;
    width: 25%;
    border-radius: 10px 10px 0 0;
}

.p23-button-width50 {
    margin-left: 25%;
    width: 50%;
    border-radius: 10px 10px 0 0;
}

.p23-button-width70 {
    margin-left: 15%;
    width: 70%;
    border-radius: 10px 10px 0 0;
}

.p23-yt-width24 {
    margin-left: 1%;
    width: 24%;
    float: left;
}

.p23-yt-width25 {
    margin-left: 25%;
    width: 50%;
    margin-bottom: 200px;
}

.p23-yt-width49 {
    margin-left: 1%;
    width: 49%;
    float: left;
}

.p23-yt-width50 {
    margin-left: 20%;
    width: 60%;
}

/* Flex helpers */

.test1 {
    display: flex;
}

.test2 {
    flex: 1;
}

/* =========================================
   5. HERO: TYPING EFFECT & CLAIM SLIDER
   ========================================= */

/* Hero typing wrapper */

.p23-hero-typing {
    width: 90%;
    margin: 0 auto;
    padding-bottom: 15px;
}

.p23-hero-typing-line {
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
    text-align: center;
}

.p23-hero-main,
.p23-hero-sub {
    display: inline-block;
}

/* Main word */

.p23-hero-main {
    font-size: var(--hero-main-font-size);
    transition: opacity 0.25s ease;
    text-shadow: var(--shadow-text-soft);
}

.p23-hero-main.is-hidden {
    opacity: 0;
}

/* Sub text */

.p23-hero-sub {
    font-size: var(--hero-sub-font-size);
    text-shadow: var(--shadow-text-soft);
}

/* Letters within typing effect */

.solo-letter {
    opacity: 0;
    display: inline-block;
    transition: opacity 0.15s ease;
}

.solo-letter.visible {
    opacity: 1;
}

/* Claim slider & overlays */

.claimPARENT {
    position: relative;
    top: 0;
    left: 0;
}

#claimOVER {
    position: absolute;
    overflow: hidden;
    left: -1%;
    z-index: 77;
    width: 102%;
}

#sliderCLAIM {
    overflow: hidden;
    max-height: 200px;
}

#sliderCLAIM figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation: 20s sliderCLAIM infinite;
}

#sliderCLAIM figure img {
    float: left;
    width: 20%;
}

@keyframes sliderCLAIM {
    0% {
        left: 0;
    }

    23% {
        left: 0;
    }

    27% {
        left: -100%;
    }

    48% {
        left: -100%;
    }

    52% {
        left: -200%;
    }

    73% {
        left: -200%;
    }

    77% {
        left: -300%;
    }

    98% {
        left: -300%;
    }

    100% {
        left: -400%;
    }
}

/* =========================================
   6. OBRÁZKY, FOTKY, LOGA
   ========================================= */

/* PA – překryvné obrázky */

.pa-parent {
    position: relative;
    top: 0;
    left: 0;
}

.pa-image1 {
    position: relative;
    top: 0;
    left: 0;
    transition: transform 250ms;
    filter: grayscale(0%);
    width: 100%;
    transform: scale(0.9);
}

.pa-image2 {
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 250ms;
    filter: grayscale(75%);
    width: 100%;
    transform: scale(0.8);
}

.pa-parent:hover .pa-image1 {
    transform: translateY(-30px) scale(0.75);
    filter: grayscale(75%);
}

.pa-parent:hover .pa-image2 {
    transform: translateY(10px) scale(1);
    filter: grayscale(0%);
}

.pa-half,
.pa-third {
    width: 19.9%;
    float: left;
}

/* Foto styly */

.foto-circle {
    padding-top: 10px;
    padding-bottom: 15px;
    border-radius: 50%;
    transition: border-radius 500ms;
}

.foto-circle:hover {
    border-radius: 27%;
}

.foto-width100 {
    width: 100%;
    border-radius: 27%;
}

.foto-clockTOWER {
    width: 96%;
    margin-left: 2%;
    border-radius: 5%;
}

.foto-width100team {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 15px;
    margin-bottom: 15px;
    border-radius: 10%;
    box-shadow: var(--shadow-card-white);
}

.foto-TEAM {
    filter: grayscale(100%) brightness(133%);
    transition: filter 500ms;
}

.foto-TEAM:hover {
    filter: grayscale(0%) brightness(100%);
}

.foto-TEAMcl {
    filter: grayscale(20%) brightness(133%);
    transform: skewY(0deg);
    transition: filter 500ms, transform 1000ms;
}

.foto-TEAMcl:hover {
    filter: grayscale(0%) brightness(100%);
    transform: skewY(-6.9deg);
}

/* Loga partnerů */

.logo-partner {
    filter: grayscale(100%) brightness(200%);
    transition: filter 500ms;
}

.logo-partner:hover {
    filter: grayscale(0%) brightness(100%);
}

.logo-partner2 {
    filter: grayscale(100%) brightness(125%);
    transition: filter 500ms;
}

.logo-partner2:hover {
    filter: grayscale(0%) brightness(100%);
}

/* Cover hover efekt */

.cover:hover {
    filter: grayscale(50%);
}

/* =========================================
   7. KARTY, BUTTONY, DROPDOWN
   ========================================= */

.p23-card-4,
.p23-card-4-text,
.w3-hover-shadow:hover {
    box-shadow: var(--shadow-card-red);
}

.p23-card-4-text {
    min-height: 100px;
}

.p23-btn,
.p23-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.p23-btn:hover {
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.p23-button:hover {
    color: var(--color-text) !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
}

.p23-disabled,
.p23-btn:disabled,
.p23-button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

/* Dropdown */

.p23-dropdown-content {
    cursor: auto;
    color: var(--color-text);
    background-image: var(--bg-image-red);
    display: none;
    position: absolute;
    min-width: 160px;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.w3-dropdown-hover:hover .p23-dropdown-content {
    display: block;
}

.w3-bar-block .w3-dropdown-hover .p23-dropdown-content,
.w3-bar-block .w3-dropdown-click .p23-dropdown-content {
    min-width: 100%;
}

/* =========================================
   8. FOOTER RED / CONTACT RED
   ========================================= */

.contactRED,
.footerRED {
    color: var(--color-text);
    background-image: var(--bg-image-red);
    filter: grayscale(0%) contrast(100%);
    transition: filter 500ms;
}

.footerRED:hover,
.contactRED:hover {
    filter: grayscale(25%) contrast(175%);
}

.footerRED a:hover {
    color: var(--color-text);
}

/* =========================================
   9. TOP/BACKGROUND ELEMENTY A FIXNÍ BUTTONY
   ========================================= */

.right0 {
    right: 0;
}

.logotyp-center {
    display: block;
    position: fixed;
    top: 15px;
    left: 33%;
    z-index: 92;
    border: none;
    outline: none;
    width: 33%;
    max-height: 100px;
}

.logotyp {
    display: block;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 92;
    border: none;
    outline: none;
    max-width: 250px;
    max-height: 100px;
}

#backTOP {
    display: block;
    position: fixed;
    top: 0;
    z-index: 88;
    overflow: clip;
    height: 170px;
}

/* Sdílený styl pro fixní buttony */

#linkaBTN,
#menuBTN,
#menuBTN2,
#sockyBTN,
#upBTN {
    position: fixed;
    border: none;
    outline: none;
    background-image: var(--bg-image-red);
    box-shadow: var(--shadow-card-primary);
    color: var(--color-text);
    cursor: pointer;
    border-radius: 5px;
    filter: grayscale(0%) contrast(100%);
    transition: filter 500ms;
}

/* Menu buttony */

#menuBTN,
#menuBTN2 {
    top: 23px;
    right: 0;
    padding: 5px;
    margin: 15px;
    height: 55px;
    font-size: 1em;
    z-index: 96;
}

#menuBTN button,
#menuBTN2 button {
    background-image: var(--bg-image-red);
}

#menuBTN:hover,
#menuBTN2:hover {
    filter: grayscale(25%) contrast(175%);
}

#menuBTN2 a:hover {
    color: var(--color-accent-red);
}

/* Scroll-up button */

#upBTN {
    display: none;
    bottom: 3.5em;
    right: 15px;
    padding: 10px;
    font-size: 1.5em;
    z-index: 97;
}

#upBTN:hover {
    filter: grayscale(25%) contrast(175%);
}

/* Linka button */

#linkaBTN {
    bottom: 15px;
    left: 15px;
    padding: 10px;
    font-size: 1.5em;
    z-index: 98;
}

#linkaBTN:hover {
    filter: grayscale(25%) contrast(175%);
}

/* Social button */

#sockyBTN {
    bottom: 15px;
    right: 15px;
    padding: 10px;
    font-size: 1.5em;
    z-index: 99;
}

#sockyBTN:hover {
    filter: grayscale(25%) contrast(175%);
}

#sockyBTN a:hover {
    color: var(--color-primary) !important;
}

/* =========================================
   10. TOPICS BLOK, SLIDESHOW, TAGY
   ========================================= */

.topics {
    width: 100%;
    filter: grayscale(0%) contrast(100%);
    transition: filter 500ms;
    border-radius: 2%;
}

.topics:hover {
    filter: grayscale(25%) contrast(200%);
}

.mySlides {
    display: none;
}

.w3-tag,
.fa {
    cursor: pointer;
}

.w3-tag {
    height: 15px;
    width: 15px;
    padding: 0;
    margin-top: 6px;
}

/* =========================================
   11. SEKCE – SCROLL MARGIN
   ========================================= */

#about,
#team,
#partners,
#topics,
#about-jm,
#about-kh,
#about-vm,
#about-rj,
#about-lp,
#about-vp,
#about-mb,
#about-as,
#about-mch,
#about-mnx,
#previously {
    scroll-margin-top: 160px;
}

/* =========================================
   12. SCROLLWATCHER
   ========================================= */

.scrollwatcher {
    height: var(--scrollwatcher-height);
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: var(--color-primary);
    width: 100%;
    scale: 0 1;
    transform-origin: left;
    animation: scroll-watcher linear;
    animation-timeline: scroll();
}

@keyframes scroll-watcher {
    to {
        scale: 1 1;
    }
}

/* =========================================
   13. RESPONSIVE BREAKPOINTS
   ========================================= */

/* >= 1024px – hero větší */

@media (min-width: 1024px) {
    .p23-hero-main {
        font-size: var(--hero-main-font-size-lg);
    }

    .p23-hero-sub {
        font-size: var(--hero-sub-font-size-lg);
    }
}

/* < 993px – layout přeskupení */

@media (max-width: 993px) {
    .clocktower4 {
        width: 33.32%;
        float: left;
    }

    .p23-card-4-text {
        min-height: 200px;
    }

    .p23-contact {
        font-size: 0.7rem;
    }

    .p23-fifth,
    .p23-quarter,
    .p23-sixth {
        width: 49.99999%;
        float: left;
    }

    .p23-third {
        width: 49.99999%;
        float: left;
    }

    .p23-third-text,
    .p23-quarter-text {
        width: 90%;
        margin-left: 5%;
    }

    .p23-button-width50 {
        margin-left: 15%;
        width: 70%;
    }

    .p23-hidPHONE {
        display: none;
    }

    .p23-hidDESKTOP {
        display: block;
    }

    .pa-third {
        width: 33.32%;
        float: left;
    }

    .pa-half {
        width: 49.99999%;
        float: left;
    }

    .p23-yt-width50 {
        margin-left: 10%;
        width: 80%;
    }

    .test1 {
        display: initial;
    }

    h1,
    h3 {
        font-weight: 900;
        text-shadow: var(--shadow-text-mobile);
    }

    h2 {
        width: 90%;
        margin-left: 5%;
    }
}

/* < 700px – hero main/sub na dva řádky */

@media (max-width: 700px) {

    .p23-hero-main,
    .p23-hero-sub {
        display: block;
        text-align: center;
    }

    .p23-hero-main {
        margin-bottom: 0.3em;
    }
}

/* < 601px – mobilní úpravy */

@media (max-width: 601px) {
    .p23-button-width35 {
        margin-left: 32.5%;
        width: 35%;
    }

    .p23-button-width50,
    .p23-button-width70 {
        margin-left: 15%;
        width: 70%;
    }

    .p23-contact {
        font-size: 0.65rem;
    }

    .p23-quarter-button {
        width: 49.999%;
    }

    .p23-yt-width24 {
        margin-left: 1%;
        width: 49%;
        float: left;
    }

    .p23-yt-width49 {
        margin-left: 1%;
        width: 98%;
    }

    .p23-yt-width50 {
        margin-left: 5%;
        width: 90%;
    }

    .foto-TEAM,
    .foto-TEAMcl {
        filter: grayscale(0%) brightness(100%);
    }

    .foto-width100team {
        width: 50%;
        margin-left: 25%;
        margin-top: 15px;
        border-radius: 10%;
        box-shadow: var(--shadow-card-white);
    }

    h3 {
        font-size: 1.25em;
        font-weight: 900;
        text-shadow: var(--shadow-text-mobile);
    }

    #linkaBTN {
        font-size: 1.3em;
    }

    #sockyBTN a {
        font-size: 0.8em;
    }

    .p23-center {
        text-align: center;
    }
}

/* assets/css/style.250215.css */

:root {
    --p23-bg: #111111;
    --p23-bg-alt: #181818;
    --p23-text: #f5f5f5;
    --p23-accent: #ff3b3b;
    --p23-muted: #999999;
    --p23-border: #333333;
    --p23-radius: 8px;
    --p23-max-width: 960px;
    --p23-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.p23-body {
    margin: 0;
    padding: 0;
    background: var(--p23-bg);
    color: var(--p23-text);
    font-family: var(--p23-font);
}

/* Header */

.p23-header {
    border-bottom: 1px solid var(--p23-border);
    background: #000;
}

.p23-header-inner {
    max-width: var(--p23-max-width);
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.p23-logo img {
    height: 32px;
}

.p23-nav {
    display: flex;
    gap: 1rem;
}

.p23-nav-link {
    color: var(--p23-text);
    text-decoration: none;
    font-size: 0.95rem;
}

.p23-nav-link:hover {
    color: var(--p23-accent);
}

/* Layout */

.p23-main {
    max-width: var(--p23-max-width);
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.p23-main--narrow {
    max-width: 720px;
}

/* Hero */

.p23-hero {
    margin-bottom: 2rem;
}

.p23-hero h1 {
    margin: 0 0 0.5rem;
    font-size: 2rem;
}

.p23-hero p {
    margin: 0;
    color: var(--p23-muted);
}

/* Sections */

.p23-section {
    margin-bottom: 2rem;
}

/* Article list */

.p23-article-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p23-article-teaser {
    padding: 1rem 0;
    border-bottom: 1px solid var(--p23-border);
}

.p23-article-teaser__title {
    font-size: 1.1rem;
    color: var(--p23-text);
    text-decoration: none;
}

.p23-article-teaser__title:hover {
    color: var(--p23-accent);
}

.p23-article-teaser__desc {
    margin: 0.25rem 0 0.5rem;
    color: var(--p23-muted);
    font-size: 0.95rem;
}

/* Meta */

.p23-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--p23-muted);
}

.p23-meta-pill {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--p23-bg-alt);
    border: 1px solid var(--p23-border);
}

/* Tags */

.p23-tag {
    display: inline-block;
    margin: 0 0.25rem 0.25rem 0;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--p23-text);
    background: #222;
    border: 1px solid var(--p23-border);
}

/* Article */

.p23-article-header h1 {
    margin-top: 0;
}

.p23-article-content {
    margin-top: 1.5rem;
}

.p23-article-content p {
    line-height: 1.6;
}

/* Box */

.p23-box {
    padding: 1rem;
    border-radius: var(--p23-radius);
    margin: 1.25rem 0;
    border: 1px solid var(--p23-border);
    background: #141414;
}

.p23-box--info {
    border-color: #3b82f6;
}

.p23-box--warning {
    border-color: #facc15;
}

.p23-box--success {
    border-color: #22c55e;
}

.p23-box--danger {
    border-color: #ef4444;
}

/* Button */

.p23-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
}

.p23-button--primary {
    background: var(--p23-accent);
    color: #fff;
}

.p23-button--secondary {
    background: transparent;
    color: var(--p23-text);
    border-color: var(--p23-accent);
}

.p23-button:hover {
    opacity: 0.9;
}

/* Video */

.p23-video {
    margin: 1.5rem 0;
    position: relative;
}

.p23-video-play {
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
    display: block;
}

.p23-video-thumb {
    display: block;
    width: 100%;
    border-radius: var(--p23-radius);
}

.p23-video-play-icon {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.p23-video-title {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--p23-muted);
}

/* Gallery */

.p23-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.p23-gallery-item {
    flex: 1 1 150px;
    max-width: 200px;
}

.p23-gallery-item img {
    width: 100%;
    display: block;
    border-radius: var(--p23-radius);
    cursor: pointer;
}

/* Audio */

.p23-audio {
    margin: 1.5rem 0;
}

.p23-audio-title {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

/* Search */

.p23-search-form {
    margin: 1rem 0 1.5rem;
}

.p23-search-row {
    display: flex;
    gap: 0.5rem;
}

.p23-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    border: 1px solid var(--p23-border);
    background: var(--p23-bg-alt);
    color: var(--p23-text);
}

.p23-search-results {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p23-search-item {
    border-bottom: 1px solid var(--p23-border);
    padding: 0.75rem 0;
}

.p23-search-item__title {
    text-decoration: none;
    color: var(--p23-text);
    font-weight: 600;
}

/* Breadcrumbs */

.p23-breadcrumbs {
    font-size: 0.8rem;
    margin-bottom: 1rem;
    color: var(--p23-muted);
}

.p23-breadcrumbs ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.p23-breadcrumbs-item+.p23-breadcrumbs-item::before {
    content: ">";
    margin: 0 0.25rem;
    color: var(--p23-muted);
}

/* Footer */

.p23-footer {
    border-top: 1px solid var(--p23-border);
    background: #000;
}

.p23-footer-inner {
    max-width: var(--p23-max-width);
    margin: 0 auto;
    padding: 1rem;
    font-size: 0.8rem;
    color: var(--p23-muted);
}

.p23-footer-inner a {
    color: var(--p23-muted);
}

/* Links page */

.p23-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.p23-links-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--p23-border);
}

.p23-links-item__title {
    text-decoration: none;
    color: var(--p23-text);
}

.p23-links-item__title:hover {
    color: var(--p23-accent);
}

.p23-links-item__desc {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--p23-muted);
}

/* Responsive */

@media (max-width: 640px) {
    .p23-header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .p23-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .p23-nav {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}