/* ==========================================================================
   Baltic Champs — styles for the parts the legacy theme does NOT cover.

   IMPORTANT (client requirement): this file must not restyle the base of the
   site. The typography, colours, content width and spacing all come from the
   theme's frontend.css, exactly as on champs.lt:
       body  = lucida_granderegular, 14px, #414042
       links = #509e2e ·  borders = #d5d5d5 ·  secondary text = #666
       container width = 1170px ·  flat corners, no shadows
   So: no rules for html/body/a/p/h1–h4/img and no global resets here (the
   theme already sets `* { box-sizing: border-box }`). Only the components we
   added ourselves — Leaflet maps, the padaliniai dropdown, the search page,
   prose pages (Projektai / Privatumo politika), our forms, recipe detail and
   the error page — are styled below, using the theme's palette.
   ========================================================================== */

:root {
    /* Theme palette, so our components blend in instead of introducing a new one. */
    --green: #509e2e;
    --green-dark: #3f7f24;
    --green-darker: #356a1e;
    --green-soft: #f2f4f1;
    --green-line: #d5d5d5;
    --ink: #414042;
    --muted: #666;
    --bg-alt: #f7f7f7;
    --white: #fff;
    /* Flat, like the old site. */
    --radius: 0;
    --radius-sm: 0;
    --shadow: none;
    --container: 1200px;   /* 1170px of content + 15px gutters */
}

/* Layout helpers used by our own templates ------------------------------ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 15px; }
.section { padding: 48px 0; }
.section--alt { background: var(--bg-alt); }

/* Buttons on our own forms/CTAs — rectangular and uppercase like the theme's
   own buttons (.accept-button / .btn-recipes), not rounded pills. */
.btn {
    display: inline-block; padding: 15px 20px; border: 1px solid var(--ink);
    background: none; color: var(--ink); font-size: 10px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
    cursor: pointer; transition: background .3s, color .3s;
}
.btn:hover { background: var(--ink); color: #fff; }

/* Breadcrumbs ---------------------------------------------------------- */
.breadcrumbs { padding: 16px 0; font-size: 12px; color: var(--muted); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--green); }
.breadcrumbs .sep { margin: 0 .5em; opacity: .5; }

/* Prose pages (Projektai, Privatumo politika) --------------------------- */
.article { padding: 8px 0 60px; }
.article__crumbs { font-size: 12px; color: var(--muted); margin: 18px 0 22px; }
.article__crumbs a { color: var(--muted); text-decoration: none; }
.article__crumbs a:hover { color: var(--green); }
.article__crumbs .sep { margin: 0 .5em; opacity: .5; }
.article__title { font-size: 30px; line-height: 1.2; color: var(--ink); font-weight: 400; margin: 0 0 30px; }

.prose { max-width: 800px; line-height: 1.7; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { font-size: 18px; line-height: 1.3; color: var(--ink); font-weight: 600; margin: 2.2em 0 .7em; }
.prose h3 { font-size: 15px; color: var(--ink); font-weight: 600; margin: 1.8em 0 .6em; }
.prose p { margin: 0 0 1.2em; }
.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.prose li { margin: 0 0 .55em; }
.prose a { color: var(--green); text-decoration: underline; }
.prose a:hover { color: var(--green-dark); }
.prose img { margin: 0 0 1.6em; max-width: 100%; height: auto; }
.prose hr { border: 0; border-top: 1px solid var(--green-line); margin: 2em 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; table-layout: fixed; }
.prose thead th { background: var(--green-soft); font-weight: 600; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid var(--green-line); word-break: break-word; }
@media (max-width: 600px) { .prose th, .prose td { padding: 8px 10px; } }

/* StreamField blocks ---------------------------------------------------- */
.block-image { margin: 1.8rem 0; }
/* display:block — an inline img sits on the text baseline and leaves ~8px of
   descender space below it, which threw the spacing off against champs.lt. */
.block-image img { display: block; max-width: 100%; height: auto; }
.block-image figcaption { color: var(--muted); font-size: 12px; margin-top: .5rem; }
.block-heading { margin-top: 1.6em; }
.block-video { margin: 1.8rem 0; }
.block-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.card__meta { color: var(--muted); font-size: 12px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.8rem 0; }
.gallery img { width: 100%; height: auto; display: block; }
.block-docs ul { list-style: none; padding: 0; }
.block-docs li { padding: 10px 0; border-bottom: 1px solid var(--green-line); }

/* Forms (job application only — champs.lt has no contact form) --------- */
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-weight: 600; margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
    width: 100%; padding: 12px 14px; border: 1px solid var(--green-line);
    font: inherit; background: #fff;
}
.form-field input:focus, .form-field textarea:focus { outline: 1px solid var(--green); border-color: var(--green); }
.form-error { display: block; margin-top: 6px; color: #c0392b; font-size: 12px; }

.career-form-wrap { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--green-line); max-width: 640px; }
.career-form-wrap h2 { margin-bottom: 22px; }
.career-form input[type="file"] { padding: 10px 14px; background: var(--green-soft); border-style: dashed; cursor: pointer; }
.career-form input[type="file"]::file-selector-button {
    margin-right: 14px; padding: 8px 14px; border: 1px solid var(--ink);
    background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.career-form .btn { margin-top: 10px; }
.career-form-success { color: var(--green-dark); font-weight: 600; }

/* Company presentation block (About us > Veiklos): logo + text left, free
   OpenStreetMap (Leaflet) map right — as on champs.lt. */
.company-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: stretch; padding: 24px 0; }
.company-layout--no-map { grid-template-columns: 1fr; }
.company-layout__info { align-self: center; }
.company-presentation__logo { margin-bottom: 28px; }
.company-presentation__logo img { width: auto; height: auto; max-width: 210px; }
.company-presentation__name { font-size: 30px; margin-bottom: 16px; }
.company-presentation__desc { line-height: 1.7; }
.company-presentation__desc p { margin: 0 0 1rem; }
.company-presentation__desc a { color: var(--green); }
.company-layout__map { position: relative; min-height: 460px; overflow: hidden; }
.company-layout__map .company-map { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }

@media (max-width: 860px) {
    .company-layout { grid-template-columns: 1fr; gap: 28px; }
    .company-layout__info { text-align: center; }
    .company-presentation__desc { text-align: left; }
    .company-presentation__logo { margin: 0 auto 20px; }
    .company-layout__map { min-height: 360px; }
}

/* Contacts page — Leaflet map with the mushroom pin fills the theme's map
   column (replaces the old Google Maps embed). */
/* The theme's .company-block-map is the positioned box; the div Leaflet
   mounts on has to fill it or it collapses to zero height. */
.company-block-map .champs-map,
.company-block-map .padaliniai-map { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 0; }
@media (min-width: 861px) { .company-block { min-height: 480px; } }

/* Baltic Champs padaliniai — dropdown that swaps the company panel + map. */
.padaliniai__bar { margin-bottom: 20px; }
.padaliniai__select-wrap { position: relative; display: inline-block; width: 100%; max-width: 440px; }
.padaliniai__select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    width: 100%; padding: 14px 44px 14px 18px; font: inherit; font-weight: 600;
    color: var(--ink); background: #fff; border: 1px solid var(--green-line); cursor: pointer;
}
.padaliniai__select:hover, .padaliniai__select:focus { border-color: var(--green); outline: none; }
.padaliniai__select-wrap .svg-icon-arrow-down {
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    width: 13px; height: 13px; color: var(--green); pointer-events: none;
}
.padaliniai__panel[hidden] { display: none; }
.padaliniai__panel .company-presentation__name { margin-bottom: 16px; }

/* Search results page --------------------------------------------------- */
.search-page { padding: 48px 0 72px; min-height: 58vh; }
.search-page__title { font-size: 30px; font-weight: 400; margin: 0 0 24px; color: var(--ink); }
.search-page__form { display: flex; gap: 12px; max-width: 640px; margin: 0 0 28px; }
.search-page__form input {
    flex: 1 1 auto; min-width: 0; padding: 13px 18px; font: inherit;
    border: 1px solid var(--green-line); background: #fff; color: var(--ink);
}
.search-page__form input:focus { outline: none; border-color: var(--green); }
.search-page__form button {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap;
    padding: 13px 26px; border: 1px solid var(--ink); background: none; color: var(--ink);
    font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    transition: background .3s, color .3s;
}
.search-page__form button:hover { background: var(--ink); color: #fff; }
.search-page__form button .svg-icon { width: 16px; height: 16px; fill: currentColor; }
.search-page__count { color: var(--muted); margin: 0 0 8px; }
.search-page__empty { color: var(--muted); padding: 16px 0; }

.search-results { display: grid; gap: 1px; margin-top: 4px; }
.search-result {
    display: flex; align-items: center; gap: 16px; padding: 16px 18px;
    border: 1px solid var(--green-line); background: #fff; text-decoration: none; color: inherit;
    transition: background .2s;
}
.search-result + .search-result { margin-top: -1px; }
.search-result:hover { background: var(--bg-alt); }
.search-result__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.search-result__icon .svg-icon { width: 20px; height: 20px; fill: currentColor; }
.search-result__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.search-result__crumb { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--green); }
.search-result__title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.search-result__desc { color: var(--muted); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.search-result__arrow { flex: none; color: var(--green-line); transition: transform .2s, color .2s; }
.search-result:hover .search-result__arrow { color: var(--green); transform: translateX(4px); }
.search-result__arrow .svg-icon { width: 20px; height: 20px; fill: currentColor; }

.search-pagination { display: flex; align-items: center; gap: 22px; margin-top: 36px; }
.search-pagination__link { color: var(--green); font-weight: 600; text-decoration: none; }
.search-pagination__link:hover { text-decoration: underline; }
.search-pagination__status { color: var(--muted); }

@media (max-width: 600px) {
    .search-page__form { flex-direction: column; }
    .search-page__form button { justify-content: center; }
}

/* Recipe detail (legacy "Cooked" plugin markup) ------------------------- */
/* champs.lt built this page from a WordPress recipe plugin whose stylesheet we
   do not ship — the theme's frontend.css has no .cooked-* rule at all. These
   reproduce the original's measurements (spacing in rem against a 16px root,
   as the plugin used) without carrying a third-party stylesheet into the repo. */
.cooked-recipe-info { display: block; padding: 0; margin: 0 0 1rem; }
.cooked-clearfix::after { content: ""; display: table; clear: both; }
.cooked-recipe-info > section.cooked-left > span {
    position: relative; box-sizing: border-box; display: inline-block;
    width: auto; vertical-align: top; line-height: 1.25rem; margin: 0 2rem 1rem 0;
}
.cooked-recipe-info > section.cooked-left > span:last-child { margin-right: 0; }
/* The little all-caps label above each value ("KATEGORIJA", "KIEKIS:"). */
.cooked-recipe-info strong.cooked-meta-title {
    display: block; font-size: .75rem; font-weight: 800;
    letter-spacing: .03rem; text-transform: uppercase;
}
.cooked-recipe-info a { text-decoration: none; color: var(--green); }
.cooked-recipe-info a:hover { text-decoration: underline; }

/* Quantity switcher and total time, each with its icon in the left gutter. */
.cooked-recipe-info span.cooked-servings,
.cooked-recipe-info span.cooked-time { padding-left: 3rem; }
.cooked-recipe-info span.cooked-servings-icon,
.cooked-recipe-info span.cooked-time-icon {
    position: absolute; top: 50%; left: 0; display: block;
    width: 2.2rem; height: 2.2rem; margin: -1.1rem 0 0; opacity: .5;
}
.cooked-recipe-info span.cooked-servings-icon svg,
.cooked-recipe-info span.cooked-time-icon svg { width: 100%; height: 100%; display: block; }
/* champs.lt lays a transparent <select> over the visible "1 x" link, so the
   control is a normal dropdown while the page shows the theme's own type. */
.cooked-recipe-info span.cooked-servings select.cooked-servings-changer {
    position: absolute; bottom: 0; left: 0; width: 100%; padding: 0; margin: 0;
    appearance: none; -webkit-appearance: none; border: none; background: none;
    opacity: 0; cursor: pointer;
}

.cooked-post-featured-image { margin: 0 0 2rem; }
.cooked-post-featured-image img { width: 100%; height: auto; display: block; }

.cooked-recipe-ingredients { display: block; padding: 0; margin: 0 0 2rem; }
.cooked-recipe-ingredients .cooked-ingredient {
    position: relative; margin: 0; padding: .5rem 0 0 2rem; font-size: inherit;
}
/* No tick boxes here (client's decision), so the row loses their indent too. */
.cooked-recipe-ingredients .cooked-ingredient.cooked-ing-no-checkbox { padding-left: 0; }
.cooked-recipe-ingredients .cooked-ingredient .cooked-ing-name { line-height: 1.4rem; padding: 1px 0; }

.cooked-recipe-directions { display: block; padding: 0; margin: 0 0 2rem; }
.cooked-recipe-directions .cooked-direction { position: relative; margin: 0; padding: 0; font-size: inherit; }
/* The steps are one flowing block on champs.lt — the theme's 40px paragraph
   gap would otherwise tear each numbered line apart. */
.cooked-recipe-directions .cooked-dir-content p { margin-bottom: 0; }
.cooked-recipe-directions .cooked-direction + .cooked-direction { margin-top: 1.5rem; }

/* Recipe grid (legacy "Cooked" plugin markup) --------------------------- */
.cooked-recipe-grid {
    position: relative; box-sizing: border-box; display: flex; flex-wrap: wrap;
    width: 103%; margin: 3% -1.5%; padding: 0;
}
.cooked-recipe-grid .cooked-recipe {
    box-sizing: border-box; display: block;
    width: 30.333%; min-width: 30.333%; margin: 0 1.5% 3%; padding: 0;
}
.cooked-recipe-card {
    display: block; overflow: hidden; margin: 0 auto 1rem; background: #fff;
    text-align: center; border-radius: 10px; color: inherit;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .04), inset 0 0 0 1px rgba(0, 0, 0, .1);
    transition: transform .3s, box-shadow .3s;
}
.cooked-recipe-card:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: 0 5px 5px rgba(0, 0, 0, .05), inset 0 0 0 1px rgba(0, 0, 0, .1);
}
.cooked-recipe-card-image, .cooked-recipe-image-empty {
    position: relative; display: block; width: 100%; height: 250px; margin: 0; padding: 0;
    background-size: cover; background-position: center;
}
.cooked-recipe-image-empty { background-color: #eaf3e6; }
.cooked-recipe-card-content { display: block; padding: 1.25rem 1.5rem; margin: 0; }
.cooked-recipe-card-title {
    /* 4px, not the plugin stylesheet's .5rem — that is what champs.lt actually
       renders, and it is what makes the cards come out the same height. */
    display: block; margin: 4px 0; font-weight: 600;
    font-size: 1.25rem; line-height: 1.65rem; color: inherit; text-decoration: none;
}
.cooked-recipe-card-title:hover { text-decoration: none; }
@media (max-width: 1024px) {
    .cooked-recipe-grid .cooked-recipe { width: 47%; min-width: 47%; }
}
@media (max-width: 680px) {
    .cooked-recipe-grid { width: 100%; margin: 3% 0; }
    .cooked-recipe-grid .cooked-recipe { width: 100%; min-width: 100%; margin: 0 0 5%; }
}
/* Below 768px the theme pins .product-list to a 250px column — right for the
   product cards it was written for, far too narrow for a recipe grid. On
   champs.lt that collision is what squeezes the recipe cards to 80px and makes
   the page scroll sideways on a phone; we keep the container and widen only the
   recipes page, which is why the list div carries its own class. */
@media (max-width: 767px) {
    .product-list.recipes-list { width: auto; margin: 0 25px; }
}

/* Recipe list filter bar (Rinktis dropdown + search) -------------------- */
/* Sits inside .page-main-content with the grid, as on champs.lt — see the
   comment in recipe_index_page.html for why that container matters. */
.cooked-recipe-search form { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; }
/* 50px tall, as measured on champs.lt's filter row. */
.recipe-filter-select { position: relative; min-width: 220px; }
.recipe-filter-select select {
    appearance: none; -webkit-appearance: none; width: 100%; height: 50px;
    padding: 0 44px 0 18px; border: 1px solid var(--green-line);
    background: #fff; font: inherit; color: var(--ink); cursor: pointer;
}
.recipe-filter-select .svg-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; pointer-events: none; fill: var(--muted); }
.recipe-filter-input {
    flex: 1; min-width: 200px; height: 50px; padding: 0 18px;
    border: 1px solid var(--green-line); font: inherit; background: #fff;
}
.recipe-filter-input:focus, .recipe-filter-select select:focus { outline: none; border-color: var(--green); }
/* champs.lt fills this button with the recipe plugin's accent blue. */
.recipe-filter-btn {
    border: 1px solid #1e73be; background: #1e73be; color: #fff;
    height: 50px; padding: 0 22px; cursor: pointer; display: grid; place-items: center;
    transition: background .3s, border-color .3s;
}
.recipe-filter-btn:hover { background: #185d99; border-color: #185d99; }
.recipe-filter-btn .svg-icon { width: 18px; height: 18px; fill: currentColor; }

/* Footer: our additions to the theme's footer (contacts text + nav list) */
.page-footer a { color: rgba(255, 255, 255, .85); }
.page-footer a:hover { color: #fff; }
/* Keep the extra bottom-row nav links on one line each. */
.nav-header-bottom .nav-header-bottom-link { white-space: nowrap; }

/* champs.lt marks up the single-post title as a <div>, so the page has no h1
   at all and Wagtail's accessibility check flags it. We use an <h1> and undo
   only the two UA defaults the theme rule doesn't set, so it renders exactly
   like the original div (measured on champs.lt: weight 400, no top margin). */
h1.single-post-title { margin-top: 0; font-weight: 400; }
/* Inside the theme layout, images keep WordPress's figure spacing (0 0 1em)
   rather than our .block-image default, which added a stray top margin. */
.single-post-content .block-image { margin: 0 0 1em; }

/* Error pages (404 / 500) ---------------------------------------------- */
.error-page { max-width: 640px; margin: 0 auto; padding: 100px 15px; text-align: center; }
.error-page h1 { font-size: 72px; color: var(--green); margin: 0 0 10px; font-weight: 400; }
.error-page p { color: var(--muted); }