/**
 * SHARED PAGE BASE STYLESHEET
 *
 * Globální layout styly sdílené napříč všemi sekcemi webu.
 * Obsahuje strukturální elementy bez specifické typografie.
 *
 * Dependencies:
 * - /assets/css/tokens/global-tokens.css (imported in layout)
 *
 * Used by:
 * - PageLayout.astro (univerzální parent layout)
 * - StoriesLayout, AppLayout (child layouts)
 *
 * Version: 1.0
 * Created: 2026-01-29
 */

/* ============================================
   GLOBAL RESET & BASE
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* Base pro rem jednotky */
}

body {
    background-color: var(--color-background-page);
    color: var(--color-text-primary);
}


/* ============================================
   SITE WRAPPER (Contains entire page layout)
   ============================================ */

.site-wrapper {
    max-width: var(--page-max-width); /* 1200px */
    margin: 0 auto;
    background-color: var(--color-background-page);
}


/* ============================================
   PAGE LAYOUT (Book-like Container)
   ============================================ */

.page-container {
    /* Width controlled by .site-wrapper */
    padding-top: var(--margin-top);

    /* Background texture */
    background-image: var(--background-texture-img);
    background-blend-mode: var(--background-blend-mode);
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    position: relative;
}

.content-wrapper {
    max-width: var(--page-width-content); /* 900px */
    margin: 0 auto;
    padding: 0 var(--margin-horizontal);
}


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

/* Breadcrumbs wrapper - outside page-container (no background texture) */
.breadcrumbs-wrapper {
    /* Width controlled by .site-wrapper */
    padding-top: var(--spacing-breadcrumb-top);
}

.breadcrumbs {
    padding: 0 var(--spacing-breadcrumb-horizontal);
    padding-bottom: var(--spacing-breadcrumb-to-header);
    font-family: var(--font-family-system);
    font-size: var(--font-size-breadcrumb);
    color: var(--color-text-meta);
}

.breadcrumbs nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--breadcrumb-separator-spacing);
}

.breadcrumbs a {
    color: var(--color-ui-primary);
    text-decoration: var(--breadcrumb-link-underline);
    transition: color 0.2s ease;
}

.breadcrumbs a:hover {
    color: var(--color-ui-hover);
    text-decoration: var(--breadcrumb-link-underline-hover);
}

.breadcrumb-separator {
    color: var(--color-text-meta);
    user-select: none;
}

.breadcrumb-current {
    color: var(--color-text-meta);
}


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

/* Footer wrapper - outside page-container (no background texture) */
.footer-wrapper {
    /* Width controlled by .site-wrapper */
    padding-top: var(--spacing-footer-top);
    padding-bottom: var(--spacing-footer-bottom);
}

.footer {
    padding: 0 var(--spacing-footer-horizontal);
    font-family: var(--font-family-system);
    font-size: var(--footer-font-size);
    color: var(--color-text-meta);
    text-align: center;
}

.footer__copyright {
    font-size: 1.5em;
    vertical-align: -0.3em;
}

.footer__link {
    color: var(--color-text-meta);
    text-decoration: none;
}

.footer__link:hover {
    text-decoration: underline;
}


/* ============================================
   ACCESSIBILITY (A11y)
   ============================================ */

/* Skip link (pro keyboard navigation) */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-ui-primary);
    color: var(--color-background-page);
    padding: 0.5em 1em;
    text-decoration: none;
    z-index: 100;
    font-family: var(--font-family-system);
}

.skip-link:focus {
    top: 0;
}

/* Focus indicators - visible only for keyboard navigation */
a:focus-visible,
button:focus-visible,
.nav-button:focus-visible {
    outline: 2px solid var(--color-ui-primary);
    outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
.nav-button:focus:not(:focus-visible) {
    outline: none;
}


/* ============================================
   RESPONSIVE DESIGN (Mobile)
   ============================================ */

@media (max-width: 768px) {
    .breadcrumbs-wrapper {
        padding-top: var(--spacing-breadcrumb-top-mobile);
    }

    .breadcrumbs {
        font-size: var(--font-size-breadcrumb-mobile);
        padding: 0 var(--margin-horizontal-mobile);
        padding-bottom: var(--spacing-breadcrumb-to-header);
    }

    .footer {
        padding: 0 var(--margin-horizontal-mobile);
    }

    /* Layout adjustments */
    .content-wrapper {
        padding: 0 var(--margin-horizontal-mobile); /* 1rem */
    }
}


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

@media print {
    .breadcrumbs,
    .footer-wrapper,
    .skip-link {
        display: none;
    }
}