/* =============================================================================
   app.css — MŠ Hokovce brand + custom-block overrides.
   Loaded AFTER the theme bundle (style.css / responsive.css). Never edit the
   theme files — keep all tenant tweaks here so theme updates stay painless.
   (see docs/frontend-integration-lessons.md §5.1)
   ============================================================================= */

:root {
    /* Text-safe brand shades — darkened so links/dates meet WCAG AA (4.5:1) on white.
       teal #0a9396→#0a8488 ≈4.6:1, coral #ee6c4d→#c4502f ≈4.7:1. */
    --ms-primary:   #0a8488; /* teal   */
    --ms-secondary: #c4502f; /* coral  */
    --ms-accent:    #ffb703; /* yellow — decorative only (borders/icons), never text on white */
    --ms-ink:       #2b2b2b;
}

/* --- Accessibility -------------------------------------------------------- */
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 2000;
    background: var(--ms-primary); color: #fff; padding: 10px 18px;
    border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; color: #fff; }

:focus-visible {
    outline: 3px solid var(--ms-secondary);
    outline-offset: 3px;
}
.main-footer :focus-visible,
.sticky-header :focus-visible { outline-color: var(--ms-accent); }

/* Keyboard access to dropdown submenus: the theme reveals them on :hover only,
   so a Tab-ing user would land on invisible links. Reveal on :focus-within too
   (display:block brings the hidden children back into the tab order). */
.main-menu .navigation li:focus-within > ul {
    display: block;
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Brand accents on the theme ------------------------------------------ */
a { color: var(--ms-primary); }
a:hover { color: var(--ms-secondary); }

.theme-btn.btn-style-one,
.scroll-to-top { background-color: var(--ms-secondary) !important; }
.theme-btn.btn-style-one:hover { background-color: var(--ms-primary) !important; }

/* Sticky header: enforce a solid brand background on scroll (lessons §5.4) */
.sticky-header { background: #ffffff !important; box-shadow: 0 4px 18px rgba(0,0,0,.08); }
.sticky-header .navigation > li > a { color: var(--ms-ink) !important; }
.sticky-header .navigation > li > a:hover { color: var(--ms-secondary) !important; }

/* Header logo sizing for the SVG placeholder */
.main-header .logo img,
.responsive-logo img,
.sticky-header .logo img { max-height: 64px; width: auto; }
.responsive-logo img { max-height: 46px; }

/* Page-title banner overlay tint */
.page-title { position: relative; background-size: cover; background-position: center; }
.page-title::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.15));
}
.page-title .auto-container { position: relative; z-index: 1; }
.page-title h1.ms-home-claim { color: var(--ms-primary, #00425a); font-weight: 700; margin: 0 0 8px; text-shadow: 0 1px 6px rgba(255,255,255,.7); }
.page-title .bread-crumb li,
.page-title .bread-crumb li a { color: #1d3b46; font-weight: 600; text-shadow: 0 1px 5px rgba(255,255,255,.7); }

/* --- Home hero: real <img>, full container width, natural ratio ----------- */
.ms-hero { padding: 22px 0 6px; }
.ms-hero__frame { position: relative; margin: 0; line-height: 0; }
.ms-hero__img {
    display: block;
    width: 100%;            /* = auto-container width, never full screen */
    height: auto;           /* keep aspect ratio — no crop, no distortion */
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.ms-hero__overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center; padding: 4%;
    line-height: normal;
    border-radius: 18px;
    /* soft scrim so the heading stays readable on any photo */
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.35));
}
.ms-hero__overlay .ms-home-claim {
    color: var(--ms-primary, #00425a); font-weight: 700; margin: 0 0 8px;
    text-shadow: 0 1px 8px rgba(255,255,255,.85);
}
.ms-hero__overlay .bread-crumb { margin: 0; }
.ms-hero__overlay .bread-crumb li {
    color: #1d3b46; font-weight: 600; text-shadow: 0 1px 6px rgba(255,255,255,.85);
}
@media (max-width: 575px) {
    .ms-hero__img,
    .ms-hero__overlay { border-radius: 12px; }
}

/* --- Home: section titles + intro ---------------------------------------- */
.ms-section-title {
    color: var(--ms-primary); font-weight: 700; margin: 28px 0 18px;
    padding-bottom: 8px; border-bottom: 3px dotted var(--ms-accent);
}
.ms-section-title .fa { color: var(--ms-secondary); margin-right: 8px; }
.ms-intro { font-size: 1.05rem; line-height: 1.7; }
.ms-empty { color: #6a6a6a; font-style: italic; padding: 16px 0; }

/* --- Home: announcements -------------------------------------------------- */
.ms-announcements {
    background: #f4fbfb; border: 1px solid #d8efef; border-radius: 14px;
    padding: 18px 22px; margin: 18px 0 8px;
}
.ms-announce-list { list-style: none; margin: 0; padding: 0; }
.ms-announce-list li { padding: 10px 0; border-bottom: 1px dashed #cfe7e7; }
.ms-announce-list li:last-child { border-bottom: 0; }
.ms-announce-list li a { font-weight: 700; font-size: 1.05rem; }
.ms-announce-list time { display: inline-block; margin-left: 8px; font-size: .85rem; color: var(--ms-secondary); }
.ms-announce-list p { margin: 4px 0 0; color: #555; }

/* --- Home: blog grid ("Zo života našej škôlky") --------------------------- */
#home_blog { display: grid; grid-template-columns: 1fr; gap: 16px; }
.home-blog-item { background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.05); }
.home-blog-item .inner-box { margin: 0; align-items: center; }
.home-blog-item .image-box { padding: 0; }
.home-blog-item .image-box .image { aspect-ratio: 1/1; overflow: hidden; margin: 0; height: 100%; }
.home-blog-item .image-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-blog-item--nophoto .image-box img { object-fit: contain; background: #f4fbfb; padding: 14px; }
.home-blog-item .post-info-box { padding: 14px 18px; }
.home-blog-item h3 { margin: 6px 0; font-size: 1.15rem; }
.home-blog-item .post-info { margin: 0; padding: 0; list-style: none; }
.home-blog-item .post-info li { color: var(--ms-secondary); font-size: .85rem; }
.home-blog-item .text { color: #555; }

/* --- Article detail ------------------------------------------------------- */
.ms-article__title { color: var(--ms-primary); font-weight: 700; }
.ms-article__lead { font-size: 1.1rem; color: #555; font-weight: 600; }
.ms-article__photo { margin: 18px 0; }
.ms-article__photo img { width: 100%; border-radius: 14px; }
.ms-article__body { line-height: 1.75; font-size: 1.02rem; }
.ms-article__body img { max-width: 100%; height: auto; border-radius: 10px; }
.ms-article__credit { color: #6a6a6a; font-size: .9rem; font-style: italic; }
.ms-article .post-info { list-style: none; padding: 0; margin: 6px 0 14px; }
.ms-article .post-info li { display: inline-block; margin-right: 16px; color: var(--ms-secondary); font-size: .9rem; }

/* --- Gallery (BEM partial) ------------------------------------------------ */
.gallery { margin: 26px 0; }
.gallery__title { color: var(--ms-primary); font-weight: 700; margin-bottom: 14px; }
.gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gallery__item { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; max-width: 100%; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 10px; font-size: .8rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.6)); }

/* --- Documents table (BEM partial) --------------------------------------- */
.documents { margin: 26px 0; }
.documents__title { color: var(--ms-primary); font-weight: 700; margin-bottom: 14px; }
.documents__table { width: 100%; border-collapse: collapse; }
.documents__table th, .documents__table td { padding: 10px 12px; border-bottom: 1px solid #e6e6e6; text-align: left; }
.documents__table thead th { background: #f4fbfb; color: var(--ms-primary); }
.documents__table tbody tr:hover { background: #fafdfd; }
.documents__table a { font-weight: 600; }
.documents__table a::before { content: "\f15b"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--ms-secondary); margin-right: 8px; }

/* --- Sidebar widgets ------------------------------------------------------ */
.sidebar-side { margin-top: 10px; }
.sidebar-widget { background: #fff; border: 1px solid #eee; border-radius: 14px; padding: 18px 20px; margin-bottom: 24px; box-shadow: 0 4px 14px rgba(0,0,0,.04); }
.sidebar-title { color: var(--ms-primary); font-weight: 700; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 3px dotted var(--ms-accent); }
.sidebar-blog-post .post { padding: 8px 0; border-bottom: 1px dashed #e6e6e6; }
.sidebar-blog-post .post:last-child { border-bottom: 0; }
.sidebar-blog-post .post h5 { margin: 0 0 2px; font-size: 1rem; }
.sidebar-blog-post .post p { margin: 0; color: var(--ms-secondary); font-size: .8rem; }
.sidebar-contact .contact-info { list-style: none; padding: 0; margin: 0; }
.sidebar-contact .contact-info li { padding: 6px 0; }
.sidebar-contact .contact-info .fa { color: var(--ms-secondary); margin-right: 6px; }
.sidebar-nav-list { list-style: none; padding: 0; margin: 0; }
.sidebar-nav-list li { padding: 6px 0; border-bottom: 1px dashed #e6e6e6; }
.sidebar-nav-list li:last-child { border-bottom: 0; }
.sidebar-nav-list ul { list-style: none; padding-left: 16px; }

/* --- Search & generic listing -------------------------------------------- */
.ms-listing { padding: 30px 0; }
.ms-listing .auto-container > h1 { color: var(--ms-primary); font-weight: 700; margin-bottom: 20px; }
.ms-result { padding: 12px 0; border-bottom: 1px dashed #e0e0e0; }
.ms-result a { font-weight: 700; font-size: 1.1rem; }
.ms-result time { color: var(--ms-secondary); font-size: .85rem; margin-left: 8px; }

/* --- Error / maintenance page -------------------------------------------- */
.ms-error { padding: 70px 0; text-align: center; }
.ms-error__code { font-size: 4rem; line-height: 1; color: var(--ms-primary); font-weight: 800; margin: 0 0 6px; }
.ms-error h1 { font-size: 2rem; color: var(--ms-primary); font-weight: 800; }
.ms-error p { font-size: 1.1rem; color: #666; }
.ms-error .theme-btn { margin-top: 18px; }

/* --- Article cards (listings) -------------------------------------------- */
.ms-card { background: #fff; border: 1px solid #eee; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.06); margin-bottom: 26px; height: calc(100% - 26px); display: flex; flex-direction: column; }
.ms-card__photo { display: block; aspect-ratio: 1/1; overflow: hidden; }
.ms-card__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ms-card:hover .ms-card__photo img { transform: scale(1.05); }
.ms-card--nophoto .ms-card__photo img { object-fit: contain; background: #f4fbfb; padding: 22px; }
.ms-card__body { padding: 16px 18px; }
.ms-card__title { font-size: 1.12rem; margin: 0 0 6px; }
.ms-card__date { color: var(--ms-secondary); font-size: .82rem; }
.ms-card__lead { color: #555; margin: 8px 0 0; }

/* --- Search form ---------------------------------------------------------- */
.ms-search-form { display: flex; gap: 10px; margin: 14px 0 24px; flex-wrap: wrap; }
.ms-search-form input[type="search"] { flex: 1 1 240px; padding: 10px 16px; border: 2px solid #d8efef; border-radius: 30px; font-size: 1rem; }
.ms-search-form input[type="search"]:focus { border-color: var(--ms-primary); outline: none; }
.ms-listing-meta { color: #6a6a6a; margin-bottom: 18px; }

/* Decorative theme overlays must not swallow clicks (lessons §1.4) */
.image-anime::after, .image-anime::before { pointer-events: none; }