/* ─────────────────────────────────────────────────────────────
   Theme-owned styles.

   assets/css/style.css is the untouched vendor template stylesheet — every
   rule that is ours lives here instead, so the template can be re-exported
   and dropped in without losing our work. Loaded after style.css.
   ───────────────────────────────────────────────────────────── */

/* ── Prose: body copy coming out of ksc/prose and imported posts ──
   Reading measure and type follow the Crveni križ sites (2026-09-11): 20px on a
   1.5 line, dark text instead of the template's light grey, and a column capped
   at 820px (≈ 75 characters) — the template's col-lg-9 alone ran to 965px lines
   at 16px light grey, which read as tiny and washed out. */
.ksc_prose_body {
  color: var(--primary-color);
  font-size: 20px;
  line-height: 1.5;
  max-width: 820px;
  margin-inline: auto;
}
.ksc_prose_body > *:last-child { margin-bottom: 0; }
.ksc_prose_body p { margin-bottom: 20px; }
/* the template colours <p>/<li> directly (light grey), so the inherit must be explicit */
.ksc_prose_body p,
.ksc_prose_body li,
.ksc_prose_body td { color: inherit; font-size: inherit; line-height: inherit; }
@media (max-width: 767px) {
  .ksc_prose_body { font-size: 18px; }
}
.ksc_prose_body h2,
.ksc_prose_body h3,
.ksc_prose_body h4 {
  color: var(--primary-color);
  font-family: var(--primary-font);
  margin-top: 32px;
  margin-bottom: 16px;
}
.ksc_prose_body h2 { font-size: 32px; }
.ksc_prose_body h3 { font-size: 26px; }
.ksc_prose_body h4 { font-size: 21px; }
.ksc_prose_body > h2:first-child,
.ksc_prose_body > h3:first-child { margin-top: 0; }
.ksc_prose_body ul,
.ksc_prose_body ol { margin: 0 0 20px; padding-left: 22px; }
.ksc_prose_body li { margin-bottom: 8px; }
.ksc_prose_body a {
  color: var(--theme-color4);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ksc_prose_body a:hover { color: var(--primary-color); }
.ksc_prose_body img { max-width: 100%; height: auto; border-radius: 10px; }
.ksc_prose_body blockquote {
  margin: 28px 0;
  padding: 20px 26px;
  border-left: 4px solid var(--theme-color4);
  background: var(--gray-color3);
  border-radius: 0 10px 10px 0;
}
/* Imported tables are frequently wider than the measure — scroll, never
   push the page sideways. */
.ksc_prose_body table {
  width: 100%;
  margin-bottom: 24px;
  border-collapse: collapse;
}
.ksc_prose_body table th,
.ksc_prose_body table td {
  border: 1px solid var(--gray-color2);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}
.ksc_prose_body table th { background: var(--gray-color3); color: var(--primary-color); }
.ksc_prose_body .ksc_table_scroll { overflow-x: auto; }

/* ── Post body blocks ── */
.ksc_post_text + .ksc_post_text { margin-top: 0; }
.ksc_post_image { margin: 0 0 24px; }
.ksc_post_image img { max-width: 100%; height: auto; }
.ksc_post_image figcaption { margin-top: 8px; color: var(--secondary-color); }
.ksc_img_center { text-align: center; }
.ksc_img_full img { width: 100%; }
@media (min-width: 768px) {
  .ksc_img_left  { float: left;  max-width: 46%; margin: 4px 28px 20px 0; }
  .ksc_img_right { float: right; max-width: 46%; margin: 4px 0 20px 28px; }
}
.ksc_single_thumb img { width: 100%; height: auto; display: block; }
/* Floated images must not spill past the article they sit in. */
.ksc_prose_body::after,
.ksc_single::after { content: ""; display: table; clear: both; }

.ksc_post_gallery {
  display: grid;
  grid-template-columns: repeat(var(--ksc-gallery-cols, 3), 1fr);
  gap: 14px;
  margin: 0 0 28px;
}
@media (max-width: 575px) {
  .ksc_post_gallery { grid-template-columns: repeat(2, 1fr); }
}
.ksc_post_gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Fact callout — the old site's [quick_fact] boxes on the
   deinstitucionalizacija page, rebuilt by ksc_vc_to_html(). */
.ksc_prose_body .ksc_fact {
  margin: 28px 0;
  padding: 22px 26px;
  border-left: 4px solid var(--theme-color4);
  background: var(--gray-color3);
  border-radius: 0 16px 16px 0;
  font-size: 17px;
  line-height: 1.65;
}
.ksc_prose_body .ksc_fact strong { color: var(--primary-color); }

/* Footer contact strip on a phone: the e-mail address is one unbreakable
   24px word and ran past the viewport edge. Let it wrap and step it down. */
@media (max-width: 575px) {
  .cs_footer .cs_location_list h3 { font-size: 20px; overflow-wrap: anywhere; }
  .cs_footer .cs_location_list .cs_location_info { min-width: 0; }
}

/* ── Document list ──
   Rows are white cards with a hairline border, so they read as separate items
   on the white bands and on the grey ones alike (a grey row on a grey band
   looked like a plain list). No format badge — the title carries the row and
   the icon on the right says download vs. external link (2026-09-11). */
.ksc_doc_list { list-style: none; }
.ksc_doc_item + .ksc_doc_item { margin-top: 12px; }
.ksc_doc_item > a {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: #fff;
  border: 1px solid var(--gray-color2);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 55, 65, 0.04);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ksc_doc_item > a:hover {
  border-color: var(--theme-color4);
  box-shadow: 0 10px 24px -12px rgba(16, 55, 65, 0.25);
  transform: translateX(4px);
}
.ksc_doc_title { flex: 1; font-size: 17px; line-height: 1.4; }
.ksc_doc_meta { flex: none; color: var(--secondary-color); }
.ksc_doc_arrow {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 187, 174, 0.1);
  color: var(--theme-color4);
  transition: background 0.25s ease, color 0.25s ease;
}
.ksc_doc_item > a:hover .ksc_doc_arrow { background: var(--theme-color4); color: #fff; }
@media (max-width: 575px) {
  .ksc_doc_item > a { gap: 12px; padding: 14px 16px; }
  .ksc_doc_title { font-size: 16px; }
  .ksc_doc_meta { display: none; }
}

/* ── Archive pagination ── */
.ksc_pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
}
.ksc_pagination a,
.ksc_pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 100px;
  background: var(--gray-color3);
  color: var(--primary-color);
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}
.ksc_pagination a:hover { background: var(--theme-color4); color: #fff; }
.ksc_pagination .active span { background: var(--theme-color4); color: #fff; }

/* ── Contact Form 7 inside the template's form wrapper ──
   CF7 wraps every control in <span class="wpcf7-form-control-wrap">, which is
   inline by default and collapses the template's rounded field styling. */
.cs_contact_form_wrapper .wpcf7-form-control-wrap { display: block; }
.cs_contact_form_wrapper .wpcf7-not-valid-tip { margin-top: 6px; font-size: 14px; }
.cs_contact_form_wrapper .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
}
/* CF7's submit is an <input>, not the template's <button>: give it the
   pointer and keep the AJAX spinner beside it instead of on its own line. */
.cs_contact_form_wrapper input[type="submit"].cs_btn { cursor: pointer; }
.cs_contact_form_wrapper .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }
/* Textarea: the pen icon sits on the first line, matching the inputs. */
.cs_contact_form_wrapper textarea.cs_form_field { min-height: 170px; line-height: 1.6; }

/* The template caps the side column at 270px for one-word demo labels; the
   institution's full name needs a little more before it wraps mid-name. */
.cs_contact_container .cs_contact_desc { width: min(100%, 320px); }

/* ── Contact panel: soft background instead of the template's outer hairline
   (client, 2026-09-11). The form card goes white so it still reads as a card
   on the tinted panel. */
.cs_contact_container { border: 0; background: var(--gray-color3); }
.cs_contact_form_wrapper.cs_gray_bg3 { background: #fff; border: 0; }
.cs_contact_container .cs_iconbox.cs_style_5 .cs_iconbox_icon { background: #fff; }

/* Long values in the panel column (IBAN) wrap instead of overflowing. */
.cs_contact_container .cs_iconbox_info p { word-break: break-word; }

/* ── Contact: department phones below the panel ──
   The panel's side column holds address, e-mail, fax and the company info;
   the department phones render here as the same iconboxes, four to a row. */
.ksc_contact_extra {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 32px;
  margin-top: 50px;
  padding: 0 20px;
}
.ksc_contact_extra .cs_iconbox.cs_style_5 { align-items: flex-start; }
.ksc_contact_extra .cs_iconbox.cs_style_5 .cs_iconbox_icon { width: 64px; height: 64px; }
.ksc_contact_extra .cs_iconbox_info p { word-break: break-word; }
/* Grid without the framed panel above it (service-page location cards): the
   50px was the distance from the panel, so it goes. */
.ksc_contact_extra--solo { margin-top: 0; }
@media (max-width: 991px) {
  .ksc_contact_extra { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 30px; margin-top: 40px; padding: 0; }
  .ksc_contact_extra--solo { margin-top: 0; }
}
@media (max-width: 575px) {
  .ksc_contact_extra { grid-template-columns: 1fr; }
}

/* ── Admin bar must not hide the header ──
   The header is position:fixed, so it ignores the html{margin-top} WordPress
   adds for the admin bar and sits underneath it. Above 782px the bar is itself
   fixed and always on screen, so the offset is permanent. At 782px and below
   the bar is absolutely positioned and scrolls away, so the offset applies only
   until the header goes sticky.
   (The template's scrolled-state class is .cs_sticky_active — an earlier
   version of this rule guessed .cs_gescout_sticky, which never exists, so it
   silently did nothing.) */
body.admin-bar .cs_site_header.cs_style_1 { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .cs_site_header.cs_style_1 { top: 46px; }
  body.admin-bar .cs_site_header.cs_style_1.cs_sticky_active { top: 0; }
}

/* ── Header: fit a 9-item primary menu ──
   The template ships a 6-item demo menu with a fixed 40px gap between items.
   This site's menu is longer, so the centre column ran under the logo and
   squeezed the call button into a three-line wrap. These rules keep the design
   (same type scale, same lockup) and only tighten the spacing where it must
   give, stepping the gap down as the viewport narrows before the template's
   own 1199px mobile-drawer breakpoint takes over. */
@media (min-width: 1200px) {
  .cs_site_header.cs_style_1 .cs_main_header_left,
  .cs_site_header.cs_style_1 .cs_main_header_right { flex: 0 0 auto; }
  .cs_site_header.cs_style_1 .cs_main_header_center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
    padding: 0 24px;
  }
  .cs_site_header.cs_style_1 .cs_nav .cs_nav_list_wrap { min-width: 0; }
  .cs_site_header.cs_style_1 .cs_nav_list { flex-wrap: nowrap; }
  .cs_site_header.cs_style_1 .cs_nav_list > li { margin-right: 26px; }
  .cs_site_header.cs_style_1 .cs_nav_list > li > a { white-space: nowrap; }
  /* The phone lockup is fixed-width content; never let it reflow. */
  .cs_site_header.cs_style_1 .cs_call_btn .cs_call_info { white-space: nowrap; }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .cs_site_header.cs_style_1 .cs_nav_list > li { margin-right: 18px; }
  .cs_site_header.cs_style_1 .cs_nav_list > li > a { font-size: 16px; }
  .cs_site_header.cs_style_1 .cs_main_header_center { padding: 0 16px; }
  /* Below this width the number itself is what overflows — the teal icon
     button still dials, so drop the text lockup rather than shrink everything. */
  .cs_site_header.cs_style_1 .cs_call_btn .cs_call_info { display: none; }
}

/* ── Real photos in slots the template sized for one placeholder ──
   Every image slot in the static demo used the same 1:1 placeholder.jpg, so
   the template never constrains image height. Fed real photos of mixed
   orientation the cards, gallery and about blocks go ragged, so each slot gets
   an explicit aspect ratio + object-fit instead. */
.cs_card.cs_style_1 { height: 100%; }
.cs_card.cs_style_1 .cs_card_thumbnail img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  height: auto;
}
/* Equal-height cards so the arrow buttons line up across the row. */
.cs_card.cs_style_1 .cs_card_content { justify-content: flex-start; }
.cs_card.cs_style_1 .cs_card_text { display: flex; flex-direction: column; flex: 1; }
.cs_card.cs_style_1 .cs_card_btn { margin-top: auto; }

.cs_about .cs_about_thumbnail > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
}
.cs_about.cs_style_2 .cs_about_thumbnail > img { aspect-ratio: 3 / 4; }

.cs_gallery_row .cs_gallery_col img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
/* The two wide columns read better in landscape. */
.cs_gallery_row .cs_gallery_col:nth-child(2) img,
.cs_gallery_row .cs_gallery_col:nth-child(5) img { aspect-ratio: 4 / 3; }


/* ── Page header without a photo ──
   .cs_page_header's ::before lays a 65% near-black scrim over the banner so a
   white title stays readable on any photo. With no photo behind it that scrim
   turns the brand teal to mud, so the plain variant drops it and keeps only the
   soft-light tint. */
/* Selector must match .cs_page_header.cs_style_1::before for specificity. */
.cs_page_header.cs_style_1.ksc_page_header--plain::before { background: transparent; }
.cs_page_header.cs_style_1.ksc_page_header--plain::after { opacity: 0.35; }

/* The wave SVG carries width="1920" as an attribute, so on anything wider the
   white band stops short and leaves a flat gap on the right. Scale it to the
   banner instead; height follows the viewBox ratio so the crests stay round. */
.cs_page_header.cs_style_1 .cs_page_header_shape svg { display: block; width: 100%; height: auto; }

/* Post cards: equal height per row, so a card with no featured image still
   lines its read-more link up with its neighbours. */
.cs_post.cs_style_1 { height: 100%; display: flex; flex-direction: column; }
.cs_post.cs_style_1 .cs_post_content { display: flex; flex-direction: column; flex: 1; }
.cs_post.cs_style_1 .cs_post_btn { margin-top: auto; }

/* A post-gallery inside an article is already inside a padded column — let its
   own container span that column instead of re-applying page gutters. */
.ksc_single .ksc_post_gallery_wrap,
.ksc_prose_body .ksc_post_gallery_wrap { max-width: none; padding-left: 0; padding-right: 0; }

/* ── .sf-inner ──
   The content wrapper every section block emits, standing in for the
   template's .container. Its max-width and padding come from the per-block
   scoped stylesheet that ksc_block_style() generates, so the only thing
   needed here is the box itself. Matching .container's box model keeps
   Bootstrap's negative-margin .row working inside it. */
.sf-inner {
  width: 100%;
  box-sizing: border-box;
}

/* ── File / PDF blocks (ksc/post-file) ──
   Canvas pages rendered by assets/js/pdf-embed.js, plus core/file-shaped
   chrome. Ported from swiftframe_samostan and restyled onto this template's
   palette and rounded-button language. */
.sf-pdf { margin: 28px 0 20px; }
.sf-pdf__page {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12);
}
.sf-pdf__page + .sf-pdf__page { margin-top: 20px; }

.wp-block-file { margin: 28px 0; }
/* Only the download button shows — the filename link stays in the markup as the
   fallback pdf-embed.js restores if rendering fails. */
.wp-block-file > a:not(.wp-block-file__button) { display: none; }
.wp-block-file .wp-block-file__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 30px;
  border-radius: 100px;
  background: var(--theme-color4);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.wp-block-file .wp-block-file__button:hover { opacity: 0.85; color: #fff; }
/* The native <object> only shows if pdf-embed.js could not run at all. */
.wp-block-file__embed { border: 0; border-radius: 14px; margin-bottom: 16px; }

/* ── Documents index (ksc/doc-index) ──
   One link per line: folder icon and section title on the left, arrow on the
   right, hairline between rows. Replaced the card grid at the client's request. */
.ksc_doc_index_intro { max-width: 780px; }
.ksc_doc_index_list { list-style: none; }
.ksc_doc_index_item { border-bottom: 1px solid var(--gray-color2); }
.ksc_doc_index_item:first-child { border-top: 1px solid var(--gray-color2); }
.ksc_doc_index_link {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 4px;
  transition: padding-left 0.3s ease;
}
.ksc_doc_index_link:hover { padding-left: 12px; }
.ksc_doc_index_icon { flex: none; width: 44px; height: 44px; font-size: 17px; }
.ksc_doc_index_title {
  flex: 1;
  min-width: 0;
  font-family: var(--primary-font);
  font-weight: 700;
  line-height: 1.3;
  transition: color 0.3s ease;
}
.ksc_doc_index_link:hover .ksc_doc_index_title { color: var(--theme-color4); }
.ksc_doc_index_arrow { flex: none; font-size: 18px; transition: transform 0.3s ease; }
.ksc_doc_index_link:hover .ksc_doc_index_arrow { transform: translateX(4px); }
@media (max-width: 575px) {
  .ksc_doc_index_link { gap: 14px; padding: 14px 0; }
  .ksc_doc_index_icon { width: 38px; height: 38px; font-size: 15px; }
  .ksc_doc_index_title { font-size: 19px; }
}

/* Year headings inside a section page read as dividers, not page titles. */
.ksc_documents .cs_section_title { font-size: 30px; }

/* Year headings on a document section page are band labels, not page titles. */
.ksc_documents .cs_section_heading { margin-bottom: 18px; }

/* ── Post card thumbnails ──
   The template left these unconstrained because its demo used one square
   placeholder everywhere. Real featured images arrive in every orientation, so
   fix the ratio and crop — otherwise a portrait photo makes its card far taller
   than the two beside it. */
.cs_post.cs_style_1 .cs_post_thumbnail {
  display: block;
  width: 100%;
}
.cs_post.cs_style_1 .cs_post_thumbnail img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
/* Footer recent-post thumbs are a fixed square in the template's own layout. */
.cs_post.cs_style_4 .cs_post_thumbnail img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* ── Uniform post cards ──
   Fixing the thumbnail ratio equalises cards within a row (the grid stretches
   them), but rows still differ because these titles run from one to five lines.
   Reserving a fixed number of lines for the title and excerpt makes every card
   on the page the same height. Clamped text is never lost — the whole title is
   the link, and the full text is on the post itself. */
.cs_post.cs_style_1 .cs_post_title {
  line-height: 1.42;
  min-height: calc(3 * 1.42em);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cs_post.cs_style_1 .cs_post_subtitle {
  line-height: 1.63;
  min-height: calc(3 * 1.63em);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Round icon holders must not be squashed by their neighbour ──
   These are fixed-size circles in a flex row, but the template leaves them at
   the default `flex: 0 1 auto` — so when the text beside one is long enough to
   strain the row, flexbox shrinks the circle horizontally and it renders as an
   oval. The side-panel "Posjetite nas" address did exactly that (39.7×50
   instead of 50×50). The demo content was short enough to hide it. */
.cs_iconbox_icon,
.cs_location_icon,
.cs_call_btn_icon,
.cs_post_meta > span,
.cs_social_btns.cs_style_1 > a {
  flex: none;
}

/* ── Mobile: one menu trigger, everything inside the panel ──
   The template ships two on small screens — the injected .cs_menu_toggle
   hamburger for the inline nav, and the round .cs_open_sideheader button for
   the contact panel. Two triggers side by side is confusing, so below the
   template's own 1199px nav breakpoint the hamburger and the inline nav are
   dropped and the panel becomes the single destination: main menu first, then
   the contact details and socials beneath it. Desktop is untouched. */
.ksc_side_nav { display: none; }

@media (max-width: 1199px) {
  .cs_site_header.cs_style_1 .cs_nav { display: none; }
  /* Phone lockup lives in the panel on mobile, not the bar. */
  .cs_site_header.cs_style_1 .cs_call_btn { display: none; }

  .ksc_side_nav { display: block; padding-bottom: 8px; }
  .ksc_side_nav_list { list-style: none; margin: 0; padding: 0; }
  .ksc_side_nav_list li { position: relative; }
  .ksc_side_nav_list > li + li { border-top: 1px solid var(--gray-color2); }
  .ksc_side_nav_list a {
    display: block;
    padding: 13px 34px 13px 0;
    font-family: var(--primary-font);
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.4;
  }
  .ksc_side_nav_list a:hover,
  .ksc_side_nav_list .current-menu-item > a { color: var(--theme-color4); }

  /* Submenus collapse; main.js's .cs_menu_dropdown_toggle slideToggles them. */
  .ksc_side_nav_list ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 16px; display: none; }
  .ksc_side_nav_list ul a { padding: 9px 34px 9px 0; font-weight: 400; font-size: 15px; }
  .ksc_side_nav_list ul li + li { border-top: 1px dashed var(--gray-color2); }

  /* The toggle main.js appends — its own styling is scoped to the header. */
  .ksc_side_nav_list .cs_menu_dropdown_toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
  }
  .ksc_side_nav_list .cs_menu_dropdown_toggle span,
  .ksc_side_nav_list .cs_menu_dropdown_toggle span::before {
    content: "";
    display: block;
    width: 11px;
    height: 2px;
    background: var(--primary-color);
    transition: transform 0.25s ease;
  }
  .ksc_side_nav_list .cs_menu_dropdown_toggle span::before { transform: rotate(90deg); }
  .ksc_side_nav_list .cs_menu_dropdown_toggle.active span::before { transform: rotate(0deg); }

  /* Panel gets room for a full menu on a phone. */
  .cs_side_header .cs_side_header_in { overflow-y: auto; }
}

/* The template hides the whole right-hand header block under 500px, because in
   its design the mobile trigger lived inside .cs_nav — which we now hide. Keep
   the block (and only the panel button inside it) so a phone still has a way
   into the menu. */
@media (max-width: 500px) {
  .cs_site_header.cs_style_1 .cs_main_header_right { display: block; }
  .cs_site_header.cs_style_1 .cs_header_right_content { gap: 0; }
}

/* ── Desktop dropdowns sized for real menu labels ──
   The template fixes submenus at width:200px, which suits its demo's one-word
   items. These are full service names ("Organizirano stanovanje uz sveobuhvatnu
   podršku za djecu bez odgovarajuće roditeljske skrbi"), so at 200px they wrap
   to five or six lines: individual rows reach 166px tall, the panel runs to
   ~700px, and with only 6px of padding between them the entries visually merge
   into one another.

   Fix: let the panel size to its content up to a sensible cap, give the rows
   room to breathe, and separate them with hairlines so a wrapped two-line item
   still reads as one item. */
@media (min-width: 1200px) {
  .cs_site_header.cs_style_1 .cs_nav_list ul {
    width: max-content;
    min-width: 240px;
    max-width: 380px;
    padding: 8px 0;
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul a {
    padding: 11px 22px;
    line-height: 1.45;
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul > li + li {
    border-top: 1px solid var(--gray-color2);
  }
  /* Third-level panels open beside their parent, so they need the same
     treatment and must not inherit the parent's max-width as a wrap point. */
  .cs_site_header.cs_style_1 .cs_nav_list ul ul {
    left: 100%;
    top: 0;
  }
  /* The right-hand menus would otherwise open past the viewport edge. */
  .cs_site_header.cs_style_1 .cs_nav_list > li:nth-last-child(-n+2) > ul {
    left: auto;
    right: 0;
  }
}

/* ── No "+" marker on desktop nav items that have a dropdown ──
   The template appends content:"+" to every top-level .menu-item-has-children
   link. Removed at the client's request, along with the 14px of right padding
   the template reserved for it, so the labels close up properly.

   This is scoped to the header's own nav only. The mobile panel's +/- toggles
   are NOT affected and must stay: there they are the control that opens a
   submenu, not decoration. */
@media (min-width: 1200px) {
  .cs_site_header.cs_style_1 .cs_nav_list > li.menu-item-has-children > a::before {
    content: none;
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li.menu-item-has-children > a {
    padding-right: 0;
  }
  /* main.js appends a .cs_menu_dropdown_toggle to every item with children,
     nested ones included. The template hides it in the inline nav, but keep
     that explicit here so no later rule can surface it as a stray square
     beside second-level items that open a third level. */
  .cs_site_header.cs_style_1 .cs_nav_list .cs_menu_dropdown_toggle { display: none !important; }
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item-has-children > a::before,
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item-has-children > a::after { content: none; }
  /* The template resets bullets on the menu and its first submenu only. A
     third-level list keeps the UA default (square), and because markers sit
     outside the item box they hang over the parent panel's right edge as
     stray dots. Kill markers at every depth. */
  .cs_site_header.cs_style_1 .cs_nav_list li { list-style: none; }
  .cs_site_header.cs_style_1 .cs_nav_list li::marker { content: none; }
}

/* ── Prose sidebar (service pages: "Lokacija i kontakt") ──
   The template's program-details card, reused beside the page copy. Its rows
   are label-left / value-right on one line; ours hold three-line addresses, so
   label sits over value. Sticky so the contact details stay in view while a
   long page scrolls; the card itself is shorter than any viewport it applies to. */
.ksc_prose_sidebar { position: sticky; top: 120px; }
.ksc_prose_sidebar .cs_program_info_list li {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-left: 0;
}
.ksc_prose_sidebar .cs_program_info_list li .cs_bold { font-size: 15px; }
.ksc_prose_sidebar .cs_program_info_list li .ksc_prose_sidebar_value { line-height: 1.6; }
.ksc_prose_sidebar .cs_program_info_list li a { color: inherit; }
.ksc_prose_sidebar .cs_program_info_list li a:hover { color: var(--accent-color); }
.ksc_prose_sidebar .cs_btns_wrapper .cs_btn { justify-content: center; text-align: center; }
@media (max-width: 991px) {
  .ksc_prose_sidebar { position: static; }
}

/* ── Mobile alignment fixes (review feedback, 2026-09-10) ──
   1. The template pads .cs_main_header_right by 60px to leave room for the
      inline-nav hamburger it injects — that hamburger is hidden on this site
      (see "Mobile: one menu trigger"), so the panel button sat 60px in from
      the edge. Flush right, same 15px gutter as the logo.
   2. Under 992px the template zeroes the hero's bottom padding (its design
      has a thumbnail column there); the centred layout has none, so the CTA
      pill touched the section edge. */
@media (max-width: 1199px) {
  .cs_site_header.cs_style_1 .cs_main_header_right { padding-right: 0; }
}
@media (max-width: 991px) {
  .cs_hero.cs_style_1 { padding-bottom: 72px; }
}

/* ── Contact form: Turnstile widget ──
   CF7's Turnstile module prepends its widget to the form with no spacing, so
   it sat glued to the first row of fields. 18px — a touch under the 30px row gap. */
.wpcf7-form .wpcf7-turnstile { margin-bottom: 18px; }

/* ── Footer bottom bar: "Powered by ⚡ Swiftframe" beside the copyright ── */
/* Copyright bar: © line first, the credits ("Powered by ⚡ Swiftframe | Rockbell
   Studio") on their own second line, as on the sibling sites. */
.cs_footer.cs_style_1 .cs_footer_text { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ksc_powered { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ksc_powered_sep { opacity: 0.5; }
.ksc_powered a, .ksc_powered_brand { display: inline-flex; align-items: center; gap: 5px; color: inherit; font-weight: 600; }
.ksc_powered a:hover { opacity: 0.75; }
.ksc_powered img { width: 14px; height: 14px; display: block; }

/* ── Section heading with a right-hand button (news): on phones the template
   stacks the heading and the button but keeps the button flush right (a
   `flex-end` in its mobile rule), which reads as misaligned under a
   left-aligned title. Left-align it once the row wraps. */
@media (max-width: 991px) {
  .cs_section_heading.cs_style_1.cs_type_1 { align-items: flex-start; }
  .cs_section_heading.cs_style_1.cs_type_1 .cs_section_heading_right { align-self: flex-start; margin-left: 0; text-align: left; }
}


/* ── Desktop menu + dropdown panels (2026-09-11) ──
   Top level: roomier spacing and a small chevron on items that open a panel
   (rotates while the panel is open). Panels: every one hangs left-aligned right
   under its own label — no caret, no offset, one consistent alignment. The
   parent <li> stretches the full header height, so `top: 100%` puts the panel's
   accent bar exactly on the header's bottom edge at any bar height (normal and
   sticky-shrunk alike). Rows show a dot + tint on hover, rows with a third
   level get a chevron and open it to the right. Cascade note: these come after
   the "+ marker" reset above and use `li.menu-item` on purpose — equal
   specificity, later in the file, so the pseudo-elements here win over its
   `content: none`. */
@media (min-width: 1200px) {
  /* item spacing: 48px, tightened between 1200 and 1499 where the bar is full */
  .cs_site_header.cs_style_1 .cs_nav_list > li {
    margin-right: 48px;
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li:last-child {
    margin-right: 0;
  }
  /* top-level chevron */
  .cs_site_header.cs_style_1 .cs_nav_list > li.menu-item-has-children > a {
    padding-right: 18px;
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
    right: 0;
    top: calc(50% - 5px);
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li.menu-item-has-children:hover > a::after {
    transform: translateY(3px) rotate(225deg);
  }

  /* panel */
  .cs_site_header.cs_style_1 .cs_nav_list ul {
    min-width: 280px;
    max-width: 420px;
    padding: 10px 0;
    border-radius: 0;
    border-top: 3px solid var(--theme-color4);
    box-shadow: 0 24px 48px -12px rgba(16, 55, 65, 0.22), 0 0 0 1px rgba(16, 55, 65, 0.06);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li > ul,
  .cs_site_header.cs_style_1 .cs_nav_list > li:hover > ul {
    left: 0;
    right: auto;
    top: 100%;
    /* the template gives first-level panels a 2px bar with a more specific
       selector; pin it to 3px so it matches the third level and the
       `top: -3px` offset below lands the two top edges on the same pixel */
    border-top-width: 3px;
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li > ul {
    transform: translateY(8px);
  }
  .cs_site_header.cs_style_1 .cs_nav_list > li:hover > ul {
    transform: translateY(0);
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul > li + li {
    border-top: 1px solid rgba(16, 55, 65, 0.08);
  }
  /* second-level rows stay static: the third-level panel positions against
     the parent panel, so it sits flush to its right edge with both top edges
     (accent bars) aligned, whichever row opened it */
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item {
    position: static;
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item > a {
    position: relative;
    display: block;
    padding: 12px 40px 12px 30px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--primary-color);
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  /* No padding change on hover: it re-measured the widest row and grew the
     whole panel to the right. The dot + tint are the hover signal. */
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item > a::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--theme-color4);
    transform: translateY(-50%) scale(0);
    transition: transform 0.2s ease;
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item:hover > a,
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item:focus-within > a,
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item.current-menu-item > a {
    color: var(--primary-color);
    background: rgba(0, 187, 174, 0.08);
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item:hover > a::before,
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item:focus-within > a::before,
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item.current-menu-item > a::before {
    transform: translateY(-50%) scale(1);
  }
  /* rows that open a third level */
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item-has-children > a::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-50%) rotate(-45deg);
    opacity: 0.55;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item-has-children:hover > a::after {
    opacity: 1;
    transform: translate(3px, -50%) rotate(-45deg);
  }
  .cs_site_header.cs_style_1 .cs_nav_list ul ul,
  .cs_site_header.cs_style_1 .cs_nav_list ul li:hover > ul {
    left: 100%;
    right: auto;
    top: -3px; /* parent's border-top, so the two accent bars line up */
    transform: none;
  }
}

/* ── Features row: the whole badge is the link ──
   ksc/features renders each item as an <a class="cs_iconbox … ksc_iconbox_link">
   when it has a URL. Hover moves the blob (rotate + grow) and tints the title —
   nothing else; the icon stays put (client feedback, 2026-09-11). */
.ksc_iconbox_link {
  display: flex;
  color: inherit;
  text-decoration: none;
}
.ksc_iconbox_link .cs_iconbox_shape svg {
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  transform-origin: 50% 50%;
}
.ksc_iconbox_link .cs_iconbox_title {
  transition: color 0.25s ease;
}
.ksc_iconbox_link:hover .cs_iconbox_shape svg,
.ksc_iconbox_link:focus-visible .cs_iconbox_shape svg {
  transform: rotate(-6deg) scale(1.06);
}
.ksc_iconbox_link:hover .cs_iconbox_title,
.ksc_iconbox_link:focus-visible .cs_iconbox_title {
  color: var(--theme-color4);
}
.ksc_iconbox_link:focus-visible {
  outline: 3px solid var(--theme-color4);
  outline-offset: 6px;
  border-radius: 40px;
}
@media (prefers-reduced-motion: reduce) {
  .ksc_iconbox_link .cs_iconbox_shape svg,
  .cs_site_header.cs_style_1 .cs_nav_list ul,
  .cs_site_header.cs_style_1 .cs_nav_list ul li.menu-item > a {
    transition: none;
  }
}
@media (min-width: 1200px) and (max-width: 1499px) {
  .cs_site_header.cs_style_1 .cs_nav_list > li { margin-right: 28px; }
  .cs_site_header.cs_style_1 .cs_nav_list > li:last-child { margin-right: 0; }
}

/* ── Features row on phones: 2 × 2 ──
   The badge is a fixed 270×260 box sized for four across; at two across on a
   360–414px screen each column is ~160px, so the box follows its column
   (aspect-ratio keeps the blob's proportions) and type/icon step down. */
@media (max-width: 575px) {
  .cs_iconbox.cs_style_2 {
    width: 100%;
    height: auto;
    aspect-ratio: 270 / 260;
    padding: 18px 10px;
  }
  .cs_iconbox.cs_style_2 .cs_iconbox_icon { margin-bottom: 10px; }
  .cs_iconbox.cs_style_2 .cs_iconbox_icon img { width: 44px; height: 44px; }
  .cs_iconbox.cs_style_2 .cs_iconbox_title { font-size: 15px; line-height: 1.3; }
}

/* ── Learning list on phones: full-width rows ──
   The template caps each row at 296px for its two-column desktop layout; when
   the list stacks (its own <768px breakpoint) that cap is just wasted width
   and four-line descriptions. */
@media (max-width: 767px) {
  .cs_list.cs_style_2 li { width: 100%; max-width: none; }
  .cs_iconbox.cs_style_3 { width: 100%; }
}

/* ── Post cards in a single column (< 768px): no equal-height padding ──
   The 3-line min-heights on title and excerpt exist to level cards that sit
   side by side; stacked one per row they only leave blank bands under short
   titles and excerpts. */
@media (max-width: 767px) {
  .cs_post.cs_style_1 .cs_post_title,
  .cs_post.cs_style_1 .cs_post_subtitle { min-height: 0; }
}