/*
 * EKO-IMOTSKI — interior pages and login.
 *
 * Loaded automatically as Cassiopeia's `template.user` asset (uri "user.css",
 * weight 500, so it lands after the template's own CSS and after the colour
 * scheme).
 *
 * WHY CASSIOPEIA AT ALL, on a site whose front page is a Gantry outline: the
 * front page is ONE custom-HTML particle with no component position anywhere in
 * the layout. Anything Joomla renders through a component - the price list, the
 * document list, and above all the multi-factor captive page where a code has
 * to be typed - renders into nothing on that outline. It is a 200 with a hole
 * in it. A second template style that is known to render component output is
 * the fix; making it look like the rest of the site is this file's job.
 *
 * The palette is the theme's own `--ek-*` tokens, read out of the front page's
 * inline stylesheet. Cassiopeia's own variables are redefined from them rather
 * than being overridden rule by rule, so buttons, links and focus rings follow
 * without being restyled one at a time.
 */

/*
 * The two faces the site is set in. Loaded here rather than through
 * Cassiopeia's own font-scheme parameter because that parameter styles the
 * whole template and would also have to be maintained per style; an @import
 * has to be the first statement in the file, and a comment is not a statement.
 *
 * Note this is a request to fonts.googleapis.com. The site's front page already
 * loads the same two families from the same place, so these pages are no
 * different from the rest of the site - but if the fonts are ever self-hosted
 * for GDPR reasons, this line is one of the two places to change.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
  /* The site's palette. */
  --ek-g: #5b7d2a;
  --ek-g-d: #445e1d;
  --ek-g-dd: #2d4213;
  --ek-olive: #46611f;
  --ek-lime: #a9c860;
  --ek-lime-2: #c6dd8c;
  --ek-ink: #10150b;
  --ek-ink-2: #19200f;
  --ek-soft: #f4f7ed;
  --ek-line: #e5ebd8;
  --ek-text: #3b4232;
  --ek-steel: #79836a;

  /*
   * Cassiopeia's own hooks. --ek-g-d and not --ek-g is the fill behind white
   * text: #5b7d2a with white on it is 4.02:1, which fails AA for anything at
   * body size, and every button and badge on this page would have inherited
   * that. #445e1d is 5.9:1.
   */
  --cassiopeia-color-primary: #445e1d;
  --cassiopeia-color-link: #445e1d;
  --cassiopeia-color-hover: #2d4213;
  --cassiopeia-color-brand: #5b7d2a;
  --cassiopeia-font-family-body: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cassiopeia-font-family-headings: 'Space Grotesk', 'Inter', sans-serif;
  --cassiopeia-font-weight-headings: 700;
  --cassiopeia-scroll-margin-top: 110px;

  /* Bootstrap 5 is what Cassiopeia is built on, and these are what its
     components read for their accents. */
  --bs-primary: #445e1d;
  --bs-primary-rgb: 68, 94, 29;
  --bs-link-color: #445e1d;
  --bs-link-hover-color: #2d4213;
  --bs-body-color: #3b4232;
  --bs-body-font-family: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --bs-border-radius: .75rem;
}

body {
  background: #fff;
  color: var(--ek-text);
  font-family: var(--cassiopeia-font-family-body);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3 {
  font-family: var(--cassiopeia-font-family-headings);
  color: var(--ek-ink);
  letter-spacing: -.4px;
}

a {
  color: var(--ek-g-d);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: var(--ek-g-dd);
  text-decoration: underline;
}

/* A visible focus ring everywhere, in the brand's own green. Cassiopeia's
   default ring is the Joomla blue, which on this palette reads as an error. */
:focus-visible {
  outline: 3px solid var(--ek-lime);
  outline-offset: 2px;
}

.container,
.container-fluid {
  max-width: 1280px;
}

/* ---------------------------------------------------------------------------
   The header and footer, rendered by the two Custom HTML modules 40_interior
   creates. Their markup is ek-hdr / ek-ftr; nothing here depends on
   Cassiopeia's own header markup, which is deliberately left unstyled and
   empty on these pages.
   --------------------------------------------------------------------------- */

.ek-topbar {
  background: var(--ek-ink);
  color: #c5cdb6;
  font-size: 13px;
}

.ek-topbar__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.ek-topbar a {
  color: #c5cdb6;
}

.ek-topbar a:hover {
  color: #fff;
  text-decoration: none;
}

.ek-hdr {
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid var(--ek-line);
  position: relative;
}

/* The three-pixel lime-to-green rule under the bar: the site's own device, and
   the cheapest way to make a second template read as the same site. */
.ek-hdr::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg, var(--ek-g), var(--ek-lime) 28%, transparent 62%);
}

.ek-hdr__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.ek-hdr__logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--cassiopeia-font-family-headings);
}

.ek-hdr__logo b {
  font-size: 22px;
  font-weight: 700;
  color: var(--ek-olive);
  letter-spacing: .5px;
}

.ek-hdr__logo span {
  margin-top: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--ek-steel);
}

.ek-hdr__nav {
  margin-left: auto;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.ek-hdr__nav a {
  padding: 9px 14px;
  border-radius: 50px;
  font-family: var(--cassiopeia-font-family-headings);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ek-g-d);
}

.ek-hdr__nav a:hover {
  background: rgba(91, 125, 42, .1);
  color: var(--ek-g-dd);
  text-decoration: none;
}

.ek-ftr {
  margin-top: 64px;
  background: var(--ek-ink);
  color: #c5cdb6;
  font-size: 14px;
}

.ek-ftr__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
  justify-content: space-between;
}

/*
 * The footer is a dark bar and its links are white, which is right until a
 * white card floats inside it - then the card's own links inherit white on
 * white. Scoping the rule to the footer's own rows rather than to the bar is
 * what prevents that; it cost a real debugging session on a sibling site.
 */
.ek-ftr__row a {
  color: #fff;
}

.ek-ftr__row a:hover {
  color: var(--ek-lime);
}

.ek-ftr small {
  color: var(--ek-steel);
}

/* ---------------------------------------------------------------------------
   Page shell for component output
   --------------------------------------------------------------------------- */

.ek-main {
  padding: 40px 0 24px;
}

.ek-main .com-users-login,
.ek-main .com-users-profile,
.ek-main .com-users-methods,
.ek-main .com-users-captive {
  padding: 0;
}

/* ---------------------------------------------------------------------------
   Login, and the multi-factor captive page.

   One card treatment for all of them: the sign-in form, the "choose a method"
   list and the code prompt are three screens of one action, and three
   different-looking pages in the middle of proving who you are is exactly when
   a site can least afford to look unfamiliar.
   --------------------------------------------------------------------------- */

.com-users-login,
.com-users-captive,
.com-users-methods,
.com-users-method,
.com-users-reset,
.com-users-remind,
.com-users-registration {
  max-width: 560px;
  margin: 46px auto 72px;
  padding: 38px 36px 34px;
  background: #fff;
  border: 1px solid var(--ek-line);
  border-radius: 22px;
  box-shadow: 0 30px 60px -32px rgba(45, 66, 19, .35);
  position: relative;
  overflow: hidden;
}

/* The same lime-to-green rule as the header, along the top edge of the card. */
.com-users-login::before,
.com-users-captive::before,
.com-users-methods::before,
.com-users-method::before,
.com-users-reset::before,
.com-users-remind::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ek-g-dd), var(--ek-g) 40%, var(--ek-lime));
}

.com-users-login h1,
.com-users-login h2,
.com-users-captive h1,
.com-users-captive h2,
.com-users-methods h1,
.com-users-methods h2 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.15;
}

.com-users-login .page-header,
.com-users-captive .page-header,
.com-users-methods .page-header {
  border: 0;
  padding: 0;
  margin-bottom: 18px;
}

.com-users-login label,
.com-users-captive label,
.com-users-methods label {
  font-family: var(--cassiopeia-font-family-headings);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--ek-g-dd);
  margin-bottom: 6px;
}

.com-users-login .form-control,
.com-users-captive .form-control,
.com-users-methods .form-control,
.com-users-login input[type="text"],
.com-users-login input[type="password"],
.com-users-captive input[type="text"] {
  padding: 13px 15px;
  border: 1.5px solid var(--ek-line);
  border-radius: 12px;
  background: var(--ek-soft);
  font-size: 16px;   /* 16px or iOS Safari zooms the page on focus */
  color: var(--ek-ink);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.com-users-login .form-control:focus,
.com-users-captive .form-control:focus {
  border-color: var(--ek-g);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(169, 200, 96, .35);
  outline: none;
}

/*
 * The submit button.
 *
 * `.btn-primary` is not only the submit button on this page - Joomla's
 * show-password toggle inside the password field carries it too, and styling
 * .btn-primary alone turns that little eye into a full-width green slab. The
 * toggle is pulled back out below.
 */
.com-users-login .btn-primary,
.com-users-captive .btn-primary,
.com-users-methods .btn-primary,
.com-users-method .btn-primary {
  width: 100%;
  padding: 14px 24px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(120deg, var(--ek-g-d), var(--ek-g-dd));
  color: #fff;
  font-family: var(--cassiopeia-font-family-headings);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 12px 26px -12px rgba(45, 66, 19, .85);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.com-users-login .btn-primary:hover,
.com-users-captive .btn-primary:hover,
.com-users-login .btn-primary:focus-visible,
.com-users-captive .btn-primary:focus-visible {
  background: linear-gradient(120deg, var(--ek-g-dd), var(--ek-ink-2));
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -12px rgba(45, 66, 19, .95);
  color: #fff;
}

/* Put the show-password toggle back to being a small square control. */
.com-users-login .input-password-toggle,
.com-users-captive .input-password-toggle,
.com-users-login .btn.input-password-toggle.btn-primary {
  width: auto;
  padding: 0 .75rem;
  border-radius: 0 12px 12px 0;
  background: var(--ek-soft);
  border: 1.5px solid var(--ek-line);
  border-left: 0;
  color: var(--ek-g-dd);
  box-shadow: none;
  transform: none;
}

.com-users-login .btn.input-password-toggle.btn-primary:hover {
  background: var(--ek-line);
  color: var(--ek-ink);
  transform: none;
  box-shadow: none;
}

/* The secondary links under the form: forgot password, forgot username. */
.com-users-login ul.unstyled,
.com-users-login .list-unstyled {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px dashed var(--ek-line);
  font-size: 14px;
}

.com-users-login ul.unstyled li,
.com-users-login .list-unstyled li {
  margin-bottom: 6px;
}

/* Remember-me sits beside the button rather than above it, as a normal
   checkbox row. */
.com-users-login #form-login-remember {
  margin: 4px 0 18px;
}

.com-users-login .form-check-input:checked {
  background-color: var(--ek-g-d);
  border-color: var(--ek-g-d);
}

/*
 * The method list on the captive page.
 *
 * Joomla renders each configured method as a card; the e-mail method and the
 * master code both land here. They are made obviously clickable because the
 * default rendering is a bare bordered box that does not read as a button.
 */
.com-users-methods .card,
.com-users-captive .card {
  border: 1.5px solid var(--ek-line);
  border-radius: 16px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.com-users-methods .card:hover {
  border-color: var(--ek-g);
  box-shadow: 0 16px 34px -20px rgba(45, 66, 19, .5);
  transform: translateY(-2px);
}

.com-users-methods .card-header,
.com-users-captive .card-header {
  background: var(--ek-soft);
  border-bottom: 1px solid var(--ek-line);
  font-family: var(--cassiopeia-font-family-headings);
  font-weight: 600;
  color: var(--ek-g-dd);
}

/* The code field itself: a short, wide, tabular input, because it takes six
   digits and nothing else. */
.com-users-captive input[name="mfa_code"],
.com-users-captive #com-users-captive-code {
  max-width: 260px;
  font-family: 'Space Grotesk', ui-monospace, monospace;
  font-size: 22px;
  letter-spacing: 4px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.com-users-captive .alert,
.com-users-login .alert {
  border-radius: 14px;
  border: 1px solid var(--ek-line);
  border-left: 4px solid var(--ek-g);
  background: var(--ek-soft);
  color: var(--ek-text);
}

.alert-danger,
.com-users-captive .alert-danger {
  border-left-color: #b3261e;
  background: #fdecec;
  color: #7f1b15;
}

/* System messages, which on the captive page carry "the code was sent". */
#system-message-container .alert {
  border-radius: 14px;
}

@media (max-width: 640px) {
  .com-users-login,
  .com-users-captive,
  .com-users-methods,
  .com-users-method,
  .com-users-reset,
  .com-users-remind,
  .com-users-registration {
    margin: 24px 14px 48px;
    padding: 28px 22px 24px;
    border-radius: 18px;
  }

  .ek-hdr__in,
  .ek-topbar__in,
  .ek-ftr__in {
    padding-left: 18px;
    padding-right: 18px;
  }
}

/* ---------------------------------------------------------------------------
   05.10.2026 — the inner-page header is now the front page's own header
   (eu-topbar + eu-header markup in module 111), rules copied from the Gantry
   particle's inline <style> and scoped under .ek-sh. The ek-topbar/ek-hdr
   rules above no longer match anything.

   Two Cassiopeia traps this answers: J5 Cassiopeia underlines every
   `a:not([class])`, which made the nav look unstyled; and `ek-main` is the
   menu item's page class, which Joomla puts on <body> - its padding was a
   40px white band above the top bar.
   --------------------------------------------------------------------------- */

body.ek-main { padding: 0; }
.container-header:empty,
.container-header { display: none; }

.ek-sh, .ek-sh * { box-sizing: border-box; }
.ek-sh { font-family: 'Inter', -apple-system, Segoe UI, Roboto, Arial, sans-serif; line-height: 1.7; font-size: 16px; -webkit-font-smoothing: antialiased; }
.ek-sh a, .ek-sh a:hover, .ek-sh a:focus-visible { text-decoration: none; }
.ek-sh img { max-width: 100%; display: block; }
.ek-sh .eu-wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }

.ek-sh .eu-topbar { background: var(--ek-ink); color: #c5cdb6; font-size: 13px; position: relative; overflow: hidden; }
.ek-sh .eu-topbar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: linear-gradient(var(--ek-lime), var(--ek-g)); }
.ek-sh .eu-topbar::after { content: ''; position: absolute; right: -30px; top: 0; bottom: 0; width: 160px; background: linear-gradient(120deg, transparent, rgba(169,200,96,.16)); transform: skewX(-18deg); }
.ek-sh .eu-topbar .eu-wrap { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; min-height: 46px; flex-wrap: wrap; }
.ek-sh .eu-tb-left, .ek-sh .eu-tb-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.ek-sh .eu-topbar a { color: #c5cdb6; transition: color .2s; }
.ek-sh .eu-topbar a:hover { color: #fff; }
.ek-sh .eu-tb-left span, .ek-sh .eu-tb-right a { display: inline-flex; align-items: center; gap: 9px; }
.ek-sh .eu-topbar i { width: 23px; height: 23px; flex: 0 0 23px; border-radius: 50%; background: rgba(169,200,96,.2); color: var(--ek-lime); font-style: normal; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }

.ek-sh .eu-header { background: rgba(255,255,255,.88); backdrop-filter: saturate(160%) blur(12px); border-bottom: 1px solid var(--ek-line); position: relative; z-index: 50; }
.ek-sh .eu-header::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: linear-gradient(90deg, var(--ek-g), var(--ek-lime) 28%, transparent 62%); }
.ek-sh .eu-header .eu-wrap { display: flex; align-items: center; justify-content: space-between; height: 92px; gap: 18px; }
.ek-sh .eu-logo { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.ek-sh .eu-logo > img { height: 60px; width: auto; }
.ek-sh .eu-logo-txt { display: flex; flex-direction: column; line-height: 1; font-family: 'Space Grotesk', 'Inter', sans-serif; }
.ek-sh .eu-logo-txt b { font-size: 23px; font-weight: 700; color: var(--ek-olive); letter-spacing: .5px; }
.ek-sh .eu-logo-txt span { font-size: 10.5px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ek-steel); margin-top: 4px; }
.ek-sh .eu-nav { margin-left: auto; }
.ek-sh .eu-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 2px; }
.ek-sh .eu-nav a { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 9px 15px 13px; white-space: nowrap; transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.ek-sh .eu-nav-t { color: var(--ek-g-d); font-weight: 700; font-size: 15px; font-family: 'Space Grotesk', sans-serif; letter-spacing: .2px; line-height: 1.05; transition: color .2s ease; }
.ek-sh .eu-nav-s { color: var(--ek-steel); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .8px; line-height: 1; transition: color .25s ease; }
.ek-sh .eu-nav a::after { content: ''; position: absolute; left: 15px; right: 15px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ek-g), var(--ek-lime)); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.ek-sh .eu-nav a:hover { transform: translateY(-2px); }
.ek-sh .eu-nav a:hover .eu-nav-t, .ek-sh .eu-nav a:hover .eu-nav-s, .ek-sh .eu-nav a[aria-current] .eu-nav-t { color: var(--ek-g); }
.ek-sh .eu-nav a:hover::after, .ek-sh .eu-nav a[aria-current]::after { transform: scaleX(1); }
.ek-sh .eu-header-cta { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.ek-sh .eu-callbtn { display: inline-flex; align-items: center; gap: 11px; background: linear-gradient(120deg, var(--ek-g), var(--ek-g-d)); color: #fff; padding: 10px 20px; border-radius: 50px; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(91,125,42,.8); transition: all .25s cubic-bezier(.2,.7,.3,1); }
.ek-sh .eu-callbtn:hover { color: #fff; transform: translateY(-2px); }
.ek-sh .eu-callbtn-ic { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; flex: 0 0 34px; }
.ek-sh .eu-callbtn svg { width: 18px; height: 18px; fill: #fff; }
.ek-sh .eu-callbtn small { display: block; font-weight: 500; font-size: 10.5px; opacity: .9; letter-spacing: .6px; text-transform: uppercase; line-height: 1; margin-bottom: 3px; }
.ek-sh .eu-callbtn b { font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 700; line-height: 1; }
.ek-sh .eu-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.ek-sh .eu-burger span { width: 26px; height: 3px; background: var(--ek-ink); border-radius: 2px; }

@media (max-width: 1340px) {
  .ek-sh .eu-nav a { padding: 9px 10px 13px; }
  .ek-sh .eu-nav a::after { left: 10px; right: 10px; }
}
@media (min-width: 1201px) {
  .ek-sh .eu-callbtn { padding: 8px; }
  .ek-sh .eu-callbtn > span:not(.eu-callbtn-ic) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 1200px) {
  .ek-sh .eu-nav { display: none; position: absolute; top: 92px; left: 0; right: 0; margin: 0; background: #fff; box-shadow: 0 12px 24px rgba(45,66,19,.12); padding: 10px 0; border-top: 2px solid var(--ek-g); }
  .ek-sh .eu-nav.eu-open { display: block; }
  .ek-sh .eu-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .ek-sh .eu-nav a { padding: 14px 28px; }
  .ek-sh .eu-nav a::after { display: none; }
  .ek-sh .eu-burger { display: flex; }
}
@media (max-width: 760px) {
  .ek-sh .eu-header .eu-wrap { height: 74px; }
  .ek-sh .eu-nav { top: 74px; }
  .ek-sh .eu-logo > img { height: 46px; }
  .ek-sh .eu-logo-txt b { font-size: 19px; }
  .ek-sh .eu-callbtn { padding: 8px 14px; gap: 8px; }
  .ek-sh .eu-callbtn small { display: none; }
  .ek-sh .eu-callbtn b { font-size: 14px; }
  .ek-sh .eu-tb-left, .ek-sh .eu-tb-right { gap: 4px 16px; padding: 6px 0; }
}
@media (max-width: 560px) {
  .ek-sh .eu-callbtn > span:not(.eu-callbtn-ic) { display: none; }
  .ek-sh .eu-callbtn { padding: 6px; }
}

/* Breadcrumbs: inside the page width, no grey slab. */
.mod-breadcrumbs__wrapper { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.mod-breadcrumbs.breadcrumb { justify-content: flex-start; }
.mod-breadcrumbs.breadcrumb { background: transparent; padding: 18px 0 0 !important; margin: 0; font-size: 13.5px; color: var(--ek-steel); }
.mod-breadcrumbs a { color: var(--ek-g-d); }