/* Click-to-play placeholder for embedded videos in posts and docs (src/lib/embeds.ts). */
.wp-block-embed .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; background: #1f3133; border-radius: 8px; overflow: hidden; }
.wp-block-embed .wp-block-embed__wrapper::before { content: none; }
.kobi-embed, .kobi-embed__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kobi-embed { background: transparent; cursor: pointer; padding: 0; }
.kobi-embed__play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; background: rgba(255,255,255,.92); }
.kobi-embed__play::after { content: ''; position: absolute; left: 29px; top: 22px; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent #1f3133; }
.kobi-embed:hover .kobi-embed__play, .kobi-embed:focus-visible .kobi-embed__play { background: #fff; transform: scale(1.06); }
.kobi-embed__link { font-size: .85em; margin-top: .4em; }

/* Addon Elements particle backgrounds (src/scripts/b-particles.ts): the canvas fills its section, behind the content */
.eae-particle-wrapper { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.eae-particle-wrapper canvas { display: block; width: 100%; height: 100%; }

/* The "Open in Browser" badge's own corners are tighter than the App Store / Google Play badges next to it;
   round it like them (about 8px at 200x59), at any size (Auke, 2026-11-04) */
img[src*="KOBI_webapp_badge"] { border-radius: 4% / 13.5%; }

/* Posts widgets with infinite scroll / load more also print plain page links (search engines, no JS);
   the script hides them once it takes over (b-theme.ts) */
.kobi-load-more .kobi-pagination-fallback { display: none; }
.kobi-pagination-fallback { margin-top: 2em; }

/* Auke 2026-11-04: GET NOTIFIED (global form 14132) keeps its colours on hover and tap. The old site's custom CSS
   ("Button hover fix") made it transparent on hover, and the theme reset forces a focus ring on every click;
   keyboard focus still shows the ring (:focus-visible). */
.elementor-global-14132 .elementor-button[type="submit"]:is(:hover, :focus, :active),
.elementor-global-14132 .e-form__buttons__wrapper__button-next:is(:hover, :focus, :active) {
  background-color: var(--e-global-color-5dac4a2) !important;
  color:#705f01!important;
}
.elementor-button:focus:not(:focus-visible), button:focus:not(:focus-visible) { outline: none; }

/* Auke 2026-11-04: the posts "Load more" button looks like GET NOTIFIED, also on hover and tap */
.e-load-more-anchor-button .elementor-button,
.e-load-more-anchor-button .elementor-button:is(:hover, :focus, :active, :visited) {
  background-color: var(--e-global-color-5dac4a2);
  color:#705f01;
  border-radius: 100px;
  padding: 14px 24px 12px;
  text-transform: uppercase;
}

/* Auke 2026-11-04: the language menu looks the same in every header, as in the Slovenian one (light green panel,
   white text on hover), and the selected language is white on dark green. The English header had no panel colour
   (white) and the Italian one hovered in another green. */
.kobi-lang-menu .elementor-nav-menu--dropdown,
.kobi-lang-menu .elementor-nav-menu--dropdown a {
  background-color: var(--e-global-color-secondary) !important;
  color: var(--e-global-color-text) !important;
}
.kobi-lang-menu .elementor-nav-menu--dropdown a:is(:hover, :focus) {
  background-color: var(--e-global-color-secondary) !important;
  color: var(--e-global-color-4b527c7a) !important;
}
.kobi-lang-menu .elementor-nav-menu--dropdown a.elementor-item-active {
  background-color: var(--e-global-color-primary) !important; /* #4AA464, the headers' own active colour */
  color: var(--e-global-color-4b527c7a) !important;
}

/* Auke 2026-11-04: Gradiva (the page with the docs list) and the docs pages use the blog listing's width, 1118px.
   The page template gives its content widget 840px; the old custom CSS frames pages without Elementor at
   1117px including 24px padding (1069px inside).
   Below that they fill the window minus a margin, like the blog, instead of stepping down through the theme's
   fixed widths (840px until 1025px; docs 800/600/500px at 1199/991/767px). */
.elementor-93 .elementor-widget-theme-post-content:has(.wedocs-shortcode-wrap) { width: 100%; max-width: 1118px; }
.elementor-93 .elementor-widget-wrap:has(.wedocs-shortcode-wrap) { margin: 0 !important; } /* the template's tablet margin */
body:not([class*=elementor-page-]) .site-main:has(.wedocs-single-wrap) {
  width: 100%; max-width: 1158px; padding-left: 20px; padding-right: 20px;
}
@media (min-width: 1200px) {
  body:not([class*=elementor-page-]) .site-main:has(.wedocs-single-wrap) { max-width: 1166px; padding-left: 24px; padding-right: 24px; }
}

/* No font shift on load: while Nunito loads, text is set in Arial scaled to Nunito's width and line metrics, one
   face per weight the site uses (Nunito/Arial width measured in Chrome on Slovenian and English text; Nunito's
   ascent 1011 and descent 353 per 1000). astro.config.mjs puts "Nunito Fallback" after every "Nunito", "Nunito Fallback" in the built
   CSS. */
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 349;
  size-adjust: 99.20%; ascent-override: 101.92%; descent-override: 35.58%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 350 449;
  size-adjust: 101.00%; ascent-override: 100.10%; descent-override: 34.95%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 450 549;
  size-adjust: 101.87%; ascent-override: 99.24%; descent-override: 34.65%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 649;
  size-adjust: 95.77%; ascent-override: 105.57%; descent-override: 36.86%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 650 749;
  size-adjust: 97.78%; ascent-override: 103.40%; descent-override: 36.10%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 750 849;
  size-adjust: 99.94%; ascent-override: 101.16%; descent-override: 35.32%; line-gap-override: 0%; }
@font-face { font-family: "Nunito Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 850 1000;
  size-adjust: 102.16%; ascent-override: 98.96%; descent-override: 34.55%; line-gap-override: 0%; }

/* Auke 2026-11-04: the yellow "Kako lahko pomagaš …" band on /sl/ucenje-branja/ reads better without changing the
   yellow: gold (#A38A01) and white text on #FFDE2E were 2.6:1 and 1.4:1, the site's dark text colour is about 12:1.
   The gold underline swoosh stays. */
.elementor-element-d558fb7 .elementor-element-59e01c0 .elementor-heading-title,
.elementor-element-d558fb7 .elementor-element-681f514 .elementor-headline-dynamic-text { color: var(--e-global-color-text) !important; }
.elementor-element-d558fb7 .elementor-element-318bfe1 .elementor-button,
.elementor-element-d558fb7 .elementor-element-318bfe1 .elementor-button:is(:hover, :focus) {
  color: var(--e-global-color-text) !important; border-color: var(--e-global-color-text) !important;
}

/* weDocs icons (breadcrumb home and separators, print) are an icon font: until it loads each glyph has another
   width, so the breadcrumb wraps differently on phones and pushes the doc down. Their loaded widths, up front. */
.wedocs-icon-home, .wedocs-icon-angle-right, .wedocs-icon-print { display: inline-block; text-align: center; }
.wedocs-icon-home { width: 0.929em; }
.wedocs-icon-angle-right { width: 0.34em; }
.wedocs-icon-print { width: 0.93em; }

/* Auke 2026-11-04: docs cards (Gradiva, /docs/…) are all as tall as the tallest one, and the fixed 240px text area
   (which scrolled and cut long link lists off) is gone; the "Poglej podrobnosti" link sits at the bottom of each
   card. weDocs floated them at 48% / 31% widths; a grid keeps those columns (2 or 3 above 768px, 2 down to 426px,
   1 on phones, where each card keeps its own height). */
.wedocs-shortcode-wrap ul.wedocs-docs-list { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1fr; gap: 32px 4%; }
.wedocs-shortcode-wrap ul.wedocs-docs-list.col-3 { grid-template-columns: repeat(3, 1fr); gap: 32px 3%; }
.wedocs-shortcode-wrap ul.wedocs-docs-list > li.wedocs-docs-single {
  float: none; width: auto !important; margin: 0 !important; display: flex; flex-direction: column;
}
body .wedocs-shortcode-wrap ul.wedocs-docs-list li.wedocs-docs-single .inside { height: auto !important; overflow: visible; flex: 1 0 auto; } /* body: beats custom-css.css, loaded later */
.wedocs-shortcode-wrap ul.wedocs-docs-list::before, .wedocs-shortcode-wrap ul.wedocs-docs-list::after { content: none; }
@media (max-width: 768px) { .wedocs-shortcode-wrap ul.wedocs-docs-list.col-3 { grid-template-columns: repeat(2, 1fr); gap: 32px 4%; } }
@media (max-width: 425px) { .wedocs-shortcode-wrap ul.wedocs-docs-list, .wedocs-shortcode-wrap ul.wedocs-docs-list.col-3 { grid-template-columns: 1fr; grid-auto-rows: auto; } }

/* Gradiva (page template 93) and Blog (archive 961) headings alike (Auke 2026-11-05): the kicker and title keep their
   own sizes, the title's line height is 1.2 on both, the space above the kicker is the Blog's (its section's 75/50/30px
   padding) and the space under the title is Gradiva's (34px from the title to the first card) */
body .elementor-93 .elementor-widget-wrap:has(> .elementor-element-5035fc1) { padding-top: 75px; margin-top: 0 !important; } /* and not the column's 100px margin, on every page of the template */
body .elementor-93 .elementor-element.elementor-element-7073a61 .elementor-heading-title { line-height: 1.2; }
body .elementor-961 .elementor-element.elementor-element-449fa91 { margin-bottom: 0; }
body .elementor-961 .elementor-element.elementor-element-f515999 { padding-bottom: 0; }
body .elementor-961 .elementor-element.elementor-element-f4b2b25 { padding-top: 34px; }
@media (max-width: 1024px) { body .elementor-93 .elementor-widget-wrap:has(> .elementor-element-5035fc1) { padding-top: 50px; } body .elementor-961 .elementor-element.elementor-element-f4b2b25 { padding-top: 34px; } }
@media (max-width: 767px) { body .elementor-93 .elementor-widget-wrap:has(> .elementor-element-5035fc1) { padding-top: 30px; } body .elementor-961 .elementor-element.elementor-element-f4b2b25 { padding-top: 34px; } }

/* Two post templates hide every bubble section with their custom CSS `section[data-eae-particle]{display:none}`, which
   also hid the store sections (Auke 2026-11-05: "the footer store section is missing"). «Za učitelje» (17818) shows its
   own copy, which holds the #preizkusi anchor; the footer's copy stays hidden so it isn't doubled. «Homeschooling post»
   (15849) has none of its own, so the footer's shows. */
body .elementor-17818 section.elementor-element-a919e71[data-eae-particle],
body:has(.elementor-15849) .elementor-819 section.elementor-element-2e8c403[data-eae-particle] { display: block !important; }

/* Post kickers (the category above the title) in Gradiva's style (Auke 2026-11-05): 23.04px, 19.36px from tablet down,
   regular weight, line height 1, gold. */
body .elementor-location-single :is(.elementor-element-d0705bf, .elementor-element-df654c6, .elementor-element-55558ee) :is(.elementor-post-info, .elementor-post-info *),
body .elementor-location-single :is(.elementor-element-54422510, .elementor-element-d2a48b1) :is(.elementor-heading-title, .elementor-heading-title *) {
  font-family: "Nunito", "Nunito Fallback", sans-serif !important; font-size: 23.04px !important; font-weight: 400 !important; line-height: 1 !important; }
body .elementor-location-single :is(.elementor-element-d0705bf, .elementor-element-df654c6, .elementor-element-55558ee) :is(.elementor-post-info, .elementor-post-info *),
body .elementor-location-single :is(.elementor-element-54422510, .elementor-element-d2a48b1) :is(.elementor-heading-title, .elementor-heading-title *) { color:#857001!important; }
@media (max-width: 1024px) {
  body .elementor-location-single :is(.elementor-element-d0705bf, .elementor-element-df654c6, .elementor-element-55558ee) :is(.elementor-post-info, .elementor-post-info *),
  body .elementor-location-single :is(.elementor-element-54422510, .elementor-element-d2a48b1) :is(.elementor-heading-title, .elementor-heading-title *) { font-size: 19.36px !important; } }

/* The post-info line (date, category) in a full-width column sticks out 4px on each side: Elementor's inline items
   pull the list out by half the item spacing, which made phones scroll sideways (Auke 2026-11-05). Only the padding
   is clipped, not the text. */
.elementor-widget-post-info > .elementor-widget-container { overflow-x: clip; }

/* Slovenian footer (819): the main menu as link columns, like the English footer 45 (Auke 2026-11-09). Section
   a819011 in templates/819.md; its headings use the same global colours and type as 45's. */
body .elementor-819 .elementor-element.elementor-element-a819011 { margin-bottom: 2.5em; }
body .elementor-819 .elementor-element-a819011 .elementor-widget-heading .elementor-heading-title { font-family: var(--e-global-typography-b29c5f2-font-family), Sans-serif; font-size: var(--e-global-typography-b29c5f2-font-size); font-weight: var(--e-global-typography-b29c5f2-font-weight); line-height: var(--e-global-typography-b29c5f2-line-height); color: var(--e-global-color-29324d78); }
body .elementor-819 .elementor-element-a819011 :is(.elementor-element-a819031, .elementor-element-a819032, .elementor-element-a819033) .elementor-heading-title { font-family: var(--e-global-typography-f7be8a0-font-family), Sans-serif; font-size: var(--e-global-typography-f7be8a0-font-size); font-weight: var(--e-global-typography-f7be8a0-font-weight); color: var(--e-global-color-secondary); }
body .elementor-819 .elementor-element-a819011 .elementor-heading-title a { color: inherit !important; text-decoration: none !important; }
@media (max-width: 1024px) and (min-width: 768px) { body .elementor-819 .elementor-element-a819011 > .elementor-container > .elementor-column { width: 33%; } }
@media (max-width: 767px) { body .elementor-819 .elementor-element-a819011 > .elementor-container > .elementor-column { width: 50%; } }
/* The bottom row like 45's (Auke 2026-11-09): © on one line left, the legal links right, no logo; the social icons moved
   up into a819011's fourth column. post-819.css still carries the old three-column widths, so they are reset here. */
@media (min-width: 768px) {
  body .elementor-819 .elementor-element.elementor-element-eb9aa73, body .elementor-819 .elementor-element.elementor-element-42f2168 { width: 50%; }
  body .elementor-819 .elementor-element.elementor-element-f463210 { width: 25%; }
}
body .elementor-819 .elementor-element.elementor-element-b389acf > .elementor-widget-container { padding: 0; }
body .elementor-819 .elementor-element.elementor-element-b389acf, body .elementor-819 .elementor-element.elementor-element-9965590 .elementor-nav-menu .elementor-item {
  font-family: var(--e-global-typography-text-font-family), Sans-serif; font-size: var(--e-global-typography-text-font-size);
  font-weight: var(--e-global-typography-text-font-weight); line-height: var(--e-global-typography-text-line-height); }
body .elementor-819 .elementor-element.elementor-element-327d500 > .elementor-container { align-items: center; }
body .elementor-819 .elementor-element.elementor-element-b389acf p { margin: 0; }
@media (max-width: 767px) {
  body .elementor-819 .elementor-element.elementor-element-eb9aa73, body .elementor-819 .elementor-element.elementor-element-42f2168 { width: 100%; }
  body .elementor-819 .elementor-element.elementor-element-9965590 .elementor-nav-menu { justify-content: center; }
}
/* the social icons' column like 45's a94d35d: a full row, centred, below 1025px (Auke 2026-11-09) */
@media (max-width: 1024px) { body .elementor-819 .elementor-element-a819011 > .elementor-container > .elementor-column.elementor-element-f463210 { width: 100%; margin-top: 1em; } }
/* the legal links and © centred on phones, in both footers (Auke 2026-11-09) */
@media (max-width: 767px) {
  body .elementor-45 .elementor-element.elementor-element-70e32eb .elementor-heading-title { text-align: center; }
  body :is(.elementor-45 .elementor-element-35e39c9, .elementor-819 .elementor-element-9965590) { width: 100%; max-width: 100%; }
  body :is(.elementor-45 .elementor-element-35e39c9, .elementor-819 .elementor-element-9965590) .elementor-nav-menu { justify-content: center; margin-inline: auto; }
}
/* Slovenian home hero on phones (Auke 2026-11-09): the kicker and the awards image centred (both are auto-width
   widgets, so their own text-align:center did nothing), and the three store badges at one width. */
@media (max-width: 767px) {
  body .elementor-9372 .elementor-element.elementor-element-53b083a, body .elementor-9372 .elementor-element.elementor-element-0156f56 { width: 100%; max-width: 100%; text-align: center; }
  body .elementor-9372 .elementor-element.elementor-element-e30ebbc { --align-items: center; }
  body .elementor-9372 .elementor-element.elementor-element-e30ebbc > :is(.elementor-element-538a268, .elementor-element-d5c1e2e, .elementor-element-12b0a52) { width: 220px; max-width: 100%; --container-widget-width: 220px; text-align: center; }
  body .elementor-9372 .elementor-element.elementor-element-e30ebbc > :is(.elementor-element-538a268, .elementor-element-d5c1e2e, .elementor-element-12b0a52) > .elementor-widget-container { padding: 0; }
  body .elementor-9372 .elementor-element.elementor-element-e30ebbc > :is(.elementor-element-538a268, .elementor-element-d5c1e2e, .elementor-element-12b0a52) a { display: block; }
  body .elementor-9372 .elementor-element.elementor-element-e30ebbc > :is(.elementor-element-538a268, .elementor-element-d5c1e2e, .elementor-element-12b0a52) img { width: 100%; height: auto; }
}

/* The English, Spanish and Italian home heroes' store badges on phones, like the Slovenian one (Auke 2026-11-09):
   stacked, centred, one size (220 px wide). */
@media (max-width: 767px) {
  :is(.elementor-14971 .elementor-element.elementor-element-0061821, .elementor-17591 .elementor-element.elementor-element-8f0ed00, .elementor-17947 .elementor-element.elementor-element-02014cb) { --flex-direction: column; --align-items: center; --flex-wrap: nowrap; }
  :is(.elementor-14971 .elementor-element.elementor-element-0061821, .elementor-17591 .elementor-element.elementor-element-8f0ed00, .elementor-17947 .elementor-element.elementor-element-02014cb) > .elementor-widget-image { width: 220px; max-width: 100%; --container-widget-width: 220px; text-align: center; margin: 0; }
  :is(.elementor-14971 .elementor-element.elementor-element-0061821, .elementor-17591 .elementor-element.elementor-element-8f0ed00, .elementor-17947 .elementor-element.elementor-element-02014cb) > .elementor-widget-image > .elementor-widget-container { padding: 0; margin: 0; }
  :is(.elementor-14971 .elementor-element.elementor-element-0061821, .elementor-17591 .elementor-element.elementor-element-8f0ed00, .elementor-17947 .elementor-element.elementor-element-02014cb) > .elementor-widget-image a { display: block; }
  :is(.elementor-14971 .elementor-element.elementor-element-0061821, .elementor-17591 .elementor-element.elementor-element-8f0ed00, .elementor-17947 .elementor-element.elementor-element-02014cb) > .elementor-widget-image img { width: 100%; height: auto; }
}

/* how-kobi-works, Reporting: the browser badge joins the store badges (Auke 2026-11-09). Three in a row on desktop,
   stacked and centred at the home heroes' 220px below 1025px. */
body .elementor-element-fd47519{flex-wrap:nowrap;gap:12px}
body .elementor-element-fd47519 > .elementor-widget-image{width:auto;flex:1 1 0;max-width:200px;padding:0!important;margin:0!important}
body .elementor-element-fd47519 .elementor-widget-container{padding:0!important;margin:0!important}
body .elementor-element-fd47519 a{display:block}
body .elementor-element-fd47519 img{width:100%!important;max-width:none!important;height:auto;border-radius:0!important}
@media (max-width:1024px){
  body .elementor-element.elementor-element-fd47519{--flex-direction:column;--flex-wrap:nowrap;--align-items:center;flex-direction:column!important;align-items:center!important}
  body .elementor-element-fd47519 > .elementor-widget-image{flex:none!important;width:220px!important;max-width:220px!important;--container-widget-width:220px;--container-widget-flex-grow:0}
}

/* Slovenian footer bottom row (Auke 2026-11-10): the company line sits under the copyright, and the privacy and terms
   links stay level with the copyright line instead of centring on the two lines */
body .elementor-819 .elementor-element.elementor-element-327d500 > .elementor-container { align-items: flex-start; }
@media (min-width: 768px) { body .elementor-819 .elementor-element.elementor-element-9965590 { margin-top: -13px; } }

/* Slovenian posts' «Prijavi se» (template 827, Auke 2026-11-10): the template's own `a{color:unset!important}` beats the
   button's text colour, so it showed white on the yellow; the darker gold of the contrast fix (a11y.mjs ON_YELLOW) wins */
body .elementor-827 .elementor-element.elementor-element-17bea1ee .elementor-button { color: #705f01 !important; }

/* Store badges above «What teachers and parents say» (home en/es/it, Auke 2026-11-11): Elementor gave each badge its
   own width per breakpoint, so on phones and small tablets they came out in three different sizes (en: 555 px wide).
   One size everywhere, centred, wrapping to a column when three don't fit. */
body .elementor-element-3c72f0a .elementor-widget-wrap,
body .elementor-element.elementor-element-eeb35cd,
body .elementor-element.elementor-element-2cd343d { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: 12px; }
body .elementor-element-3c72f0a .elementor-widget-wrap > .elementor-widget,
body .elementor-element-eeb35cd > .elementor-widget,
body .elementor-element-2cd343d > .elementor-widget { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; }
body .elementor-element-3c72f0a .elementor-widget-wrap > .elementor-widget > .elementor-widget-container,
body .elementor-element-eeb35cd > .elementor-widget > .elementor-widget-container,
body .elementor-element-2cd343d > .elementor-widget > .elementor-widget-container { margin: 0 !important; padding: 0 !important; }
body .elementor-element-3c72f0a .elementor-widget img,
body .elementor-element-eeb35cd .elementor-widget img,
body .elementor-element-2cd343d .elementor-widget img { width: 190px !important; height: 56px !important; max-width: none !important; object-fit: contain; }
/* Download box (template 15500) on tablets: the badges shrank to 26 px high; keep them 40 px and wrap instead */
@media (min-width: 768px) and (max-width: 1024px) {
  body .elementor-element.elementor-element-a602c6c { flex-wrap: wrap; gap: 8px; }
  body .elementor-element-a602c6c > .elementor-widget { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
  body .elementor-element-a602c6c .elementor-widget img { width: auto !important; height: 40px !important; max-width: none !important; }
}