/* ==========================================================================
   Klub abstinentov Biela Orava - Zákamenné
   Colours come from the club badge: sky-blue water, wooden pail, folk embroidery.
   ========================================================================== */

@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sans-latin-ext.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/sans-latin.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/serif-latin-ext.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/serif-latin.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --z-water: #17506b;        /* deep river blue: header, headings, links */
  --z-water-deep: #0f3a4f;
  --z-sky: #8fd0f2;          /* badge blue */
  --z-sky-soft: #e6f4fb;
  --z-wood: #8a5a34;         /* pail brown */
  --z-wood-soft: #f3e9dd;
  --z-red: #c2372c;          /* embroidery red */
  --z-gold: #e3a92b;
  --z-leaf: #3d8a4b;
  --z-paper: #fbf8f2;
  --z-card: #ffffff;
  --z-ink: #1d2a30;
  --z-ink-soft: #55646b;
  --z-line: #e4ddd0;
  --z-radius: 14px;
  --z-shadow: 0 1px 2px rgba(23, 50, 60, .06), 0 8px 24px rgba(23, 50, 60, .07);
  --z-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --z-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Bootstrap hooks, so component output (pagination, buttons, forms) matches */
  --bs-body-font-family: var(--z-sans);
  --bs-body-color: var(--z-ink);
  --bs-body-bg: var(--z-paper);
  --bs-link-color: var(--z-water);
  --bs-link-color-rgb: 23, 80, 107;
  --bs-link-hover-color: var(--z-red);
  --bs-link-hover-color-rgb: 194, 55, 44;
  --bs-primary: #17506b;
  --bs-primary-rgb: 23, 80, 107;
  --bs-border-color: var(--z-line);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--z-sans);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--z-ink);
  background: var(--z-paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; }

a { color: var(--z-water); text-underline-offset: .18em; text-decoration-thickness: .06em; }
a:hover { color: var(--z-red); }
:focus-visible { outline: 3px solid var(--z-gold); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--z-serif);
  font-weight: 600;
  line-height: 1.2;
  color: var(--z-water-deep);
  letter-spacing: -.01em;
  text-wrap: balance;
}
h1, .h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); margin: 0 0 .6em; }
h2, .h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 .5em; }
h3, .h3 { font-size: 1.3rem; margin: 0 0 .5em; }

.z-wrap { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }

.z-skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--z-water); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 8px;
}
.z-skip:focus { top: 0; color: #fff; }

/* Folk-embroidery stripe ---------------------------------------------------- */
.z-ornament {
  height: 8px;
  background:
    repeating-linear-gradient(90deg,
      var(--z-red) 0 18px, var(--z-paper) 18px 22px,
      var(--z-gold) 22px 34px, var(--z-paper) 34px 38px,
      var(--z-leaf) 38px 50px, var(--z-paper) 50px 54px,
      var(--z-water) 54px 72px, var(--z-paper) 72px 76px);
}

/* Header -------------------------------------------------------------------- */
.z-header { background: #fff; border-bottom: 1px solid var(--z-line); position: relative; z-index: 20; }
.z-header__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: .8rem; flex-wrap: wrap; }

.z-brand { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; min-width: 0; }
.z-brand:hover { color: inherit; }
.z-brand__logo { width: 64px; height: 64px; flex: none; border-radius: 50%; box-shadow: 0 2px 8px rgba(23, 80, 107, .25); }
.z-brand__text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.z-brand__name { font-family: var(--z-serif); font-weight: 600; font-size: clamp(1.05rem, .9rem + .8vw, 1.4rem); color: var(--z-water-deep); }
.z-brand__place { font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; color: var(--z-wood); font-weight: 600; margin-top: .15rem; }

.z-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.z-nav li { margin: 0; }
.z-nav a, .z-nav .nav-header, .z-nav .separator {
  display: block; padding: .55rem .95rem; border-radius: 999px;
  color: var(--z-ink); text-decoration: none; font-weight: 600; font-size: 1.05rem;
  transition: background-color .15s, color .15s;
}
.z-nav a:hover { background: var(--z-sky-soft); color: var(--z-water-deep); }
.z-nav .current > a, .z-nav .active > a { background: var(--z-water); color: #fff; }
.z-nav ul ul { display: none; }

.z-navtoggle {
  display: none; align-items: center; gap: .6rem;
  background: var(--z-water); color: #fff; border: 0; border-radius: 999px;
  padding: .6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer;
}
.z-navtoggle__bars, .z-navtoggle__bars::before, .z-navtoggle__bars::after {
  display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; content: ""; position: relative;
}
.z-navtoggle__bars::before { position: absolute; top: -6px; }
.z-navtoggle__bars::after { position: absolute; top: 6px; }

@media (max-width: 860px) {
  .z-navtoggle { display: inline-flex; }
  .z-nav { display: none; flex-basis: 100%; }
  .z-nav.is-open { display: block; }
  .z-nav ul { flex-direction: column; gap: .15rem; padding-bottom: .4rem; }
  .z-nav a { border-radius: 10px; padding: .8rem 1rem; }
}

/* Hero (home only) ---------------------------------------------------------- */
.z-hero {
  background:
    radial-gradient(1200px 400px at 85% -10%, rgba(143, 208, 242, .55), transparent 60%),
    linear-gradient(180deg, var(--z-sky-soft), var(--z-paper));
  border-bottom: 1px solid var(--z-line);
  padding-block: clamp(2rem, 1rem + 4vw, 4rem);
}
.z-welcome { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items: center; }
.z-welcome__eyebrow { font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .9rem; color: var(--z-wood); margin: 0 0 .6rem; }
.z-welcome h1 { margin-bottom: .5em; }
.z-welcome p { margin: 0 0 1em; max-width: 62ch; }
.z-welcome__lead { font-size: 1.25rem; color: var(--z-ink); }
.z-welcome__urge {
  font-family: var(--z-serif); font-size: 1.35rem; font-weight: 600; color: var(--z-red);
  border-left: 4px solid var(--z-red); padding: .2rem 0 .2rem 1rem; margin: 1.4rem 0;
}
.z-welcome__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

.z-meet {
  background: var(--z-card); border-radius: var(--z-radius); overflow: hidden;
  box-shadow: var(--z-shadow); border: 1px solid var(--z-line);
}
.z-meet img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.z-meet__body { padding: 1.3rem 1.5rem 1.5rem; }
.z-meet__body h2 { font-size: 1.35rem; margin-bottom: .6rem; }
.z-meet__body p { margin: 0 0 .6rem; max-width: none; }
.z-meet__times { list-style: none; margin: .2rem 0 .9rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.z-meet__times li { background: var(--z-sky-soft); border-radius: 10px; padding: .6rem .8rem; text-align: center; }
.z-meet__times strong { display: block; font-family: var(--z-serif); font-size: 1.6rem; color: var(--z-water-deep); line-height: 1.1; }
.z-meet__times span { font-size: .95rem; color: var(--z-ink-soft); }
.z-note { font-size: .98rem; color: var(--z-ink-soft); }

@media (max-width: 860px) { .z-welcome { grid-template-columns: 1fr; } }

/* Buttons ------------------------------------------------------------------- */
.z-btn, .btn-primary, .readmore .btn, p.readmore a {
  display: inline-block; background: var(--z-water); color: #fff !important; border: 2px solid var(--z-water);
  padding: .6rem 1.25rem; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 1.02rem;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.z-btn:hover, .btn-primary:hover, .readmore .btn:hover, p.readmore a:hover { background: var(--z-water-deep); border-color: var(--z-water-deep); transform: translateY(-1px); }
.z-btn--ghost { background: transparent; color: var(--z-water) !important; }
.z-btn--ghost:hover { background: var(--z-water); color: #fff !important; }

/* Layout -------------------------------------------------------------------- */
.z-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding-block: clamp(1.8rem, 1rem + 3vw, 3.2rem); flex: 1 0 auto; }
.has-sidebar .z-layout { grid-template-columns: minmax(0, 1fr) 320px; }
.z-main { min-width: 0; }
@media (max-width: 980px) { .has-sidebar .z-layout { grid-template-columns: minmax(0, 1fr); } }

/* Sidebar cards ------------------------------------------------------------- */
.z-sidebar { display: flex; flex-direction: column; gap: 1.4rem; align-self: start; }
.z-card { background: var(--z-card); border: 1px solid var(--z-line); border-radius: var(--z-radius); box-shadow: var(--z-shadow); overflow: hidden; }
.z-card__title {
  margin: 0; padding: .85rem 1.25rem; font-size: 1.15rem; color: #fff;
  background: var(--z-water); letter-spacing: 0;
}
.z-card__body { padding: 1.1rem 1.25rem 1.25rem; font-size: 1.05rem; }
.z-card__body > :last-child { margin-bottom: 0; }

.z-people { list-style: none; margin: 0; padding: 0; }
.z-people li { padding: .7rem 0; border-bottom: 1px dashed var(--z-line); }
.z-people li:first-child { padding-top: 0; }
.z-people li:last-child { border-bottom: 0; padding-bottom: 0; }
.z-people__role { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--z-wood); font-weight: 700; }
.z-people__name { display: block; font-weight: 700; font-size: 1.1rem; }
.z-people a { display: inline-block; font-weight: 600; text-decoration: none; }
.z-people a:hover { text-decoration: underline; }
.z-tel { font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.z-fb { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--z-line); }
.z-fb img { width: 96px; height: 96px; border-radius: 8px; border: 1px solid var(--z-line); image-rendering: pixelated; }
.z-fb p { margin: 0; font-size: .98rem; color: var(--z-ink-soft); }

/* Articles ------------------------------------------------------------------ */
.page-header { margin: 0 0 1.4rem; }
.page-header h1, .page-header h2 { margin: 0; }
.blog-featured > .page-header h1, .blog > .page-header h1 {
  font-size: 1.05rem; font-family: var(--z-sans); text-transform: uppercase; letter-spacing: .16em; color: var(--z-wood);
  display: flex; align-items: center; gap: 1rem;
}
.blog-featured > .page-header h1::after, .blog > .page-header h1::after { content: ""; flex: 1; height: 1px; background: var(--z-line); }

.blog-items, .items-leading { display: grid; gap: 1.8rem; margin: 0; padding: 0; }
.blog-item, .items-leading > div, .com-content-article.item-page {
  background: var(--z-card); border: 1px solid var(--z-line); border-radius: var(--z-radius);
  box-shadow: var(--z-shadow); padding: clamp(1.2rem, .8rem + 2vw, 2.2rem);
  min-width: 0; overflow-wrap: anywhere;
}
.blog-item .item-content { min-width: 0; }
.blog-item .item-title, .item-page .page-header { text-align: center; margin: 0 0 1.2rem; }
.blog-item .item-title, .item-page .page-header h1, .item-page .page-header h2 { position: relative; padding-bottom: .8rem; }
.blog-item .item-title::after, .item-page .page-header h1::after, .item-page .page-header h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 3px; margin-left: -32px;
  background: linear-gradient(90deg, var(--z-red) 0 33%, var(--z-gold) 33% 66%, var(--z-leaf) 66%);
  border-radius: 2px;
}
.blog-item .item-title a { color: inherit; text-decoration: none; }
.blog-item .item-title a:hover { color: var(--z-red); }

/* Editor-written content: keep the author's emphasis, tame fonts and stray colours. */
.blog-item [style*="font-family"], .item-page [style*="font-family"], .z-main .custom [style*="font-family"] { font-family: inherit !important; }
.blog-item p, .item-page p { margin: 0 0 .55em; }
.blog-item img, .item-page img, .com-content-article__body img {
  border-radius: 10px; height: auto !important; max-width: 100%;
}
.blog-item p > img:only-child, .item-page p > img:only-child { margin-block: .6rem; box-shadow: var(--z-shadow); }
.blog-item p > strong:only-child > img, .item-page p > strong:only-child > img { margin-block: .6rem; }
.blog-item img[width="145"], .blog-item img[width="147"], .item-page img[width="145"], .item-page img[width="147"] { box-shadow: none !important; }
.blog-item [style*="color: rgb(0, 0, 0)"], .item-page [style*="color: rgb(0, 0, 0)"],
.blog-item [style*="color: #000000"], .item-page [style*="color: #000000"] { color: inherit !important; }
.blog-item [style*="color: rgb(224, 62, 45)"], .item-page [style*="color: rgb(224, 62, 45)"],
.blog-item [style*="color: #ff0000"], .item-page [style*="color: #ff0000"],
.blog-item [style*="color: rgb(255, 0, 0)"], .item-page [style*="color: rgb(255, 0, 0)"] { color: var(--z-red) !important; }
.blog-item [style*="color: rgb(64, 111, 245)"], .item-page [style*="color: rgb(64, 111, 245)"],
.blog-item [style*="color: rgb(53, 152, 219)"], .item-page [style*="color: rgb(53, 152, 219)"],
.blog-item [style*="color: rgb(0, 0, 255)"], .item-page [style*="color: rgb(0, 0, 255)"],
.blog-item [style*="color: #0000ff"], .item-page [style*="color: #0000ff"],
.blog-item [style*="color: #000080"], .item-page [style*="color: #000080"],
.blog-item [style*="color: rgb(0, 0, 128)"], .item-page [style*="color: rgb(0, 0, 128)"] { color: var(--z-water) !important; }
.blog-item strong, .item-page strong { font-weight: 600; }

.article-info { color: var(--z-ink-soft); font-size: .95rem; margin: 0 0 1rem; text-align: center; }
.article-info dd { display: inline; margin: 0 .5rem; }
.article-info-term { display: none; }
p.readmore, .readmore { text-align: center; margin: 1.2rem 0 0; }

.table, table { max-width: 100%; }
.item-page table, .blog-item table { display: block; overflow-x: auto; }

/* Pagination ---------------------------------------------------------------- */
.com-content-featured__pagination, .com-content-category-blog__pagination, .pagination__wrapper, .w-100:has(> .pagination__wrapper) { margin-top: 2rem; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; padding: 0; margin: 0 0 .6rem; list-style: none; }
.pagination .page-link {
  border: 1px solid var(--z-line); border-radius: 999px !important; min-width: 2.6rem; height: 2.6rem; padding: 0 .7rem;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--z-water); background: #fff; font-weight: 600; text-decoration: none;
}
.pagination .page-link:hover { background: var(--z-sky-soft); color: var(--z-water-deep); }
.pagination .active > .page-link, .pagination .page-link[aria-current] { background: var(--z-water); border-color: var(--z-water); color: #fff; }
.pagination .disabled > .page-link { opacity: .45; }
.counter, .com-content-featured__counter, .com-content-category-blog__counter { text-align: center; color: var(--z-ink-soft); font-size: .95rem; float: none !important; padding: 0 !important; }

/* System messages ----------------------------------------------------------- */
#system-message-container:empty { display: none; }
joomla-alert, .alert { display: block; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; border: 1px solid var(--z-line); background: #fff; }

/* Forms --------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], textarea, select, .form-control, .form-select {
  font: inherit; border: 1.5px solid #c9c1b2; border-radius: 10px; padding: .6rem .8rem; background: #fff; color: var(--z-ink); max-width: 100%;
}
input:focus, textarea:focus, select:focus, .form-control:focus { border-color: var(--z-water); box-shadow: 0 0 0 3px rgba(143, 208, 242, .5); outline: 0; }

/* Photo gallery (Event Gallery) ---------------------------------------------- */
.com_eventgallery .z-main h1, .com_eventgallery .z-main .page-header h1 { text-align: center; }
.eventgallery-events-imagelist .event-thumbnail img, .eventgallery-thumbnails img, .eventgallery-imagelist img { border-radius: 8px; }
.eventgallery-events .item-container, .eventgallery-events-list .item { border-radius: var(--z-radius); }

/* Calendar (iCagenda) -------------------------------------------------------- */
.com_icagenda .z-main { min-width: 0; }
.z-card .ic-calendar, .z-card .iccalendar, .z-card table { width: 100%; max-width: 100%; }
.z-card__body:has(.ic-calendar), .z-card__body:has(.iccalendar), .z-card__body:has([class*="icagenda"]) { padding: .6rem; }

/* Footer -------------------------------------------------------------------- */
.z-footer { background: var(--z-water-deep); color: #d5e6ee; margin-top: auto; font-size: 1rem; }
.z-footer__in { padding-block: 2.2rem 1.8rem; display: grid; gap: 1.2rem; }
.z-footer a { color: #fff; }
.z-footer a:hover { color: var(--z-sky); }
.z-foot { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem 2rem; align-items: center; }
.z-foot__logo { width: 72px; height: 72px; border-radius: 50%; }
.z-foot p { margin: 0 0 .25rem; }
.z-foot__name { font-family: var(--z-serif); font-size: 1.2rem; color: #fff; font-weight: 600; }
.z-foot__small { font-size: .92rem; opacity: .85; }
.z-foot__links { text-align: right; font-size: .95rem; }
.z-counter { text-align: center; opacity: .8; }
.z-counter img { vertical-align: middle; }
@media (max-width: 720px) {
  .z-foot { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .z-foot__links { text-align: center; }
}

/* Error page ---------------------------------------------------------------- */
.z-errorpage { display: block; }
.z-error { max-width: 560px; margin: 0 auto; padding: 4rem 1.25rem; text-align: center; }
.z-error__code { font-family: var(--z-serif); font-size: 4.5rem; line-height: 1; color: var(--z-sky); margin: 1rem 0 0; font-weight: 700; -webkit-text-stroke: 1px var(--z-water); }

/* Component-only page -------------------------------------------------------- */
body.contentpane { display: block; padding: 1.25rem; background: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  .z-header .z-nav, .z-navtoggle, .z-sidebar, .z-footer, .z-ornament, .z-skip { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .blog-item, .item-page { box-shadow: none; border: 0; padding: 0; }
}

/* Event Gallery tiles: captions sit on a dark bar over the photo */
.eventgallery-subcategories .data .title h2,
.eventgallery-events-gridlist .data .title,
.eventgallery-events-gridlist .data .title h2 { color: #fff; font-size: 1.15rem; margin: 0; letter-spacing: 0; }
.eventgallery-events-gridlist .data { color: #fff; }
.eventgallery-events-gridlist .item-container, .eventgallery-events-gridlist .wrapper { border-radius: 12px; overflow: hidden; }
.eventgallery-minicart-container { display: none !important; }