/*
 * SKG site look - ported from the old templates/skg_new/css/custom.css onto the
 * SKG child template's own markup (index.php).
 * Palette: green #96b831 / #7ca429, pale panel #eef2d0, lime page #bdce48, dark bars.
 */

:root {
  --skg-green:      #96b831;
  --skg-green-dark: #7ca429;
  --skg-green-link: #798f2c;
  --skg-panel:      #eef2d0;
  --skg-page:       #96b831;   /* whole-page background */
  --skg-bar:        linear-gradient(to bottom, #222, #111);
  --skg-max:        1170px;
}

/* ---------- page frame ---------- */
html { background: var(--skg-page); }
body.site.skg {
  background: var(--skg-page) !important;   /* Cassiopeia forces body bg transparent */
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  display: block;                           /* Cassiopeia sets body{display:flex}, which
                                              shrinks .skg-wrap to content on narrow pages */
}
.skg-wrap {
  max-width: var(--skg-max);
  width: 100%;
  margin: 12px auto;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}

/* ---------- top strip with search ---------- */
/* NOTE: this is #topbar, deliberately not #top - <body id="top"> is the
   back-to-top anchor target and wraps the whole page, so a rule scoped to
   "#top ..." matched every .form-control on every page (it once shrank and
   de-bordered the Title/Alias inputs and the login fields the same way). */
#topbar {
  background: var(--skg-bar);
  padding: 5px 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 34px;
}
#topbar .search-slot { margin-left: auto; }
#topbar form, #topbar .mod-finder, #topbar .finder { margin: 0; }
#topbar input[type="search"],
#topbar input.form-control,
#topbar .form-search input {
  width: auto;
  max-width: 220px;
  border: 0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
}
#topbar .btn, #topbar button { display: none; }     /* keep it a bare field, submit on Enter */
#topbar label { display: none; }

/* ---------- brand banner (photo, with a scrim so the text reads) ---------- */
#brand_header {
  position: relative;
  background-color: #6f9425;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.45) 100%),
    url(../images/header-bg.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  aspect-ratio: 1170 / 180;
  min-height: 96px;
}
#brand_header .brand-text {
  position: absolute;
  right: 16px;
  bottom: 8px;
  text-align: right;
  text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
#skg {
  display: block;
  color: #fff;
  font-size: clamp(20px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.15;
}
#slogan {
  display: block;
  color: #f2f6dd;
  font-size: clamp(13px, 1.8vw, 18px);
  font-style: italic;
}

/* ---------- top navigation ---------- */
#top_nav {
  background: var(--skg-bar);
  border-top: 1px solid #333;
}
#top_nav .nav-inner { max-width: var(--skg-max); margin: 0 auto; }

/* hamburger toggle - hidden on desktop / when JS is off, shown at the mobile breakpoint */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  color: #cfcfcf;
  font: 600 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
}
.nav-toggle:hover { color: #fff; }
.nav-toggle__bars { position: relative; display: block; width: 22px; height: 2px; background: currentColor; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform .2s ease;
}
.nav-toggle__bars::before { top: -7px; }
.nav-toggle__bars::after  { top: 7px; }
#top_nav.is-open .nav-toggle__bars { background: transparent; }              /* morph to an X when open */
#top_nav.is-open .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
#top_nav.is-open .nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }
/* Cassiopeia's .mod-menu defaults to flex-direction:column and only goes
   horizontal under .container-header, which this template doesn't use - so
   drive the top nav ourselves. Specificity beats .mod-menu without !important
   (keeps the mobile @media override working). */
#top_nav ul.mod-menu,
#top_nav ul.nav,
#top_nav ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
}
#top_nav ul.mod-menu > li { position: relative; }
#top_nav ul.mod-menu a,
#top_nav ul.mod-menu > li > span {
  display: block;
  padding: 10px 14px;
  color: #cfcfcf;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
#top_nav ul.mod-menu a:hover,
#top_nav ul.mod-menu > li:hover > a,
#top_nav ul.mod-menu > li.current > a,
#top_nav ul.mod-menu > li.active > a { color: #fff; background: rgba(255,255,255,.08); }

#top_nav .mod-menu__toggle-sub { display: none; }   /* we open sub-menus on hover */
#top_nav .mod-menu__sub {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  min-width: 210px;
  flex-direction: column;
  background: #1b1b1b;
  border: 1px solid #333;
  z-index: 60;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}
#top_nav li:hover > .mod-menu__sub { display: flex; }
#top_nav .mod-menu__sub a { padding: 8px 14px; font-weight: 500; white-space: normal; }

/* ---------- content columns ---------- */
#content {
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
}
#sidebar { flex: 0 0 200px; }
#sidebar-right { flex: 0 0 220px; }
#main-col { flex: 1 1 auto; min-width: 0; }
#pathway { font-size: 12px; margin-bottom: 10px; color: #666; }
#pathway a { color: var(--skg-green-link); }
#main_content { padding: 0 4px 10px; overflow-wrap: break-word; }
/* nothing in article bodies (photos, fixed-width map iframes, wide tables) may
   push the page wider than its column - which on mobile made the whole layout
   horizontally scrollable and clipped the header title. */
#main_content img,
#main_content iframe,
#main_content video,
#main_content object,
#main_content embed { max-width: 100%; }
#main_content img { height: auto; }
#main_content table { display: block; overflow-x: auto; max-width: 100%; }

/* ---------- sidebar modules ---------- */
#sidebar .moduletable,
#sidebar .card,
#sidebar-right .moduletable,
#sidebar-right .card {
  background: var(--skg-panel);
  margin-bottom: 10px;
  padding: 5px;
  border: 0;
}
#sidebar h3, #sidebar .card-header, #sidebar .moduletable-title,
#sidebar-right h3, #sidebar-right .card-header, #sidebar-right .moduletable-title {
  background: var(--skg-green);
  color: var(--skg-panel);
  margin: 0 0 6px;
  padding: 5px 8px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
  border: 0;
}
/* mod_menu / mod_custom lists in the sidebars - Joomla renders `mod-menu mod-list nav` */
#sidebar ul, #sidebar-right ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#sidebar ul.mod-menu li, #sidebar-right ul.mod-menu li,
#sidebar ul.mod-list li, #sidebar-right ul.mod-list li { padding: 0; margin: 2px 0; }
#sidebar ul.mod-menu a, #sidebar-right ul.mod-menu a,
#sidebar ul.mod-list a, #sidebar-right ul.mod-list a {
  display: block;
  padding: 5px 8px;
  color: var(--skg-green-link);
  text-decoration: none;
  border-right: 5px solid transparent;
}
#sidebar ul.mod-menu li:hover > a, #sidebar-right ul.mod-menu li:hover > a,
#sidebar ul.mod-list li:hover > a, #sidebar-right ul.mod-list li:hover > a {
  border-right-color: var(--skg-green);
  background: rgba(150,184,49,.12);
  text-decoration: none;
}
#sidebar ul.mod-menu li.current > a, #sidebar-right ul.mod-menu li.current > a,
#sidebar ul.mod-menu li.active > a, #sidebar-right ul.mod-menu li.active > a {
  background: var(--skg-green);
  border-right-color: var(--skg-green-dark);
  color: #fff;
}
/* nested items (showAllChildren) get a lighter indent, not their own dropdown */
#sidebar ul.mod-menu ul, #sidebar-right ul.mod-menu ul { margin-left: 10px; }
#sidebar ul.mod-menu ul a, #sidebar-right ul.mod-menu ul a { padding-left: 14px; font-size: 13px; }
/* plain text / banner modules (mod_custom, mod_banners) */
#sidebar .moduletable img, #sidebar-right .moduletable img { max-width: 100%; height: auto; }

/* ---------- typography ---------- */
a { color: var(--skg-green-link); text-decoration: none; }
a:hover { color: var(--skg-green-dark); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: var(--skg-green); line-height: 1.25; }
#main_content h1, .page-header h1 { font-size: 28px; margin: 0 0 16px; }
.btn-primary, a.btn-primary {
  background: linear-gradient(to bottom, #96b831, #7ca429);
  border-color: #6f9425;
  color: #fff;
}
.btn-primary:hover, a.btn-primary:hover { background: #7ca429; }

/* ---------- Joomla "BS2-style" forms (login/reset/remind/register/profile-edit/...) ----
   These emit Bootstrap-2 .control-group/.control-label/.controls/.well markup that
   Cassiopeia (BS5) does not style, so labels collapse. Scoped by structure (any
   form whose class contains "__form" or "com-users-"), not by hand-listing every
   view's BEM wrapper class - those differ per view (e.g. profile's *edit* page is
   `.com-users-profile__edit`, not `.com-users-profile`) and are easy to miss. */
#main_content form[class*="__form"],
#main_content form[class*="com-users-"],
#main_content form.well {
  max-width: 460px;
  margin: 12px 0;
  background: #f7f7f2;
  border: 1px solid #e3e3d6;
  border-radius: 4px;
  padding: 16px;
}
#main_content .control-group { display: block; margin: 0 0 14px; }
#main_content .control-label { display: block; width: auto; margin-bottom: 4px; }
#main_content .controls { width: auto; }
#main_content .star { color: #b00; }

/* <joomla-tab> (frontend article submit form etc.): the tab strip that lets you
   reach the other panels (Category, Access, Tags, Publishing...) is built by JS
   at runtime - only the panel marked [active] is visible without it. Force every
   panel to always render, stacked, so required fields are never unreachable. */
joomla-tab > joomla-tab-element {
  display: block !important;
  border-top: 2px solid var(--skg-panel);
  margin-top: 16px;
  padding-top: 12px !important;
}
joomla-tab > joomla-tab-element:first-of-type { border-top: 0; margin-top: 0; }

/* TinyMCE builds its whole UI (menu bar, toolbar, iframe) with visibility:hidden
   while it measures itself on init, then should flip to visible - which never
   happens when it initialises inside a flex container before layout settles
   (this template uses flex for #content/#main-col). The DOM is already fully
   correct at that point, so just force the reveal. */
.tox-tinymce, .tox-tinymce-aux { visibility: visible !important; }
joomla-tab > joomla-tab-element::before {
  content: attr(name);
  display: block;
  font-weight: 700;
  color: var(--skg-green);
  font-size: 15px;
  margin-bottom: 10px;
}

/* Force every field label / control / submit visible in the content area
   (something in the stack is collapsing them). Scoped to #main_content so the
   search module's visually-hidden label in #topbar is not affected. */
#main_content .control-label { display: block !important; margin-bottom: 4px !important; }
#main_content .control-label label,
#main_content .form-check-label,
#main_content form label:not(.visually-hidden):not(.element-invisible) {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 600 !important;
  text-indent: 0 !important;
}
#main_content .form-check-label { font-weight: 400 !important; }
#main_content .com-users-login__submit,
#main_content .com-users-login__submit .controls { display: block !important; }
#main_content .com-users-login__submit .btn,
#main_content form button[type="submit"],
#main_content form .btn-primary {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #fff !important;
  background: linear-gradient(to bottom, #96b831, #7ca429) !important;
  border: 1px solid #6f9425 !important;
  padding: 8px 18px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

/* ---------- mourning mode (Tryb żałoby) ---------------------------------------
   Enabled per template style: params.mourning = 1  ->  <html class="mourning">
   and <body class="... mourning">. Desaturates the whole page and adds a black
   band + optional name bar. `html` needs the class (and its own background
   override) too, not just `body` - `html`'s own background box can peek out a
   sliver above/below `body` (e.g. mobile rubber-band scroll), and without this
   it stays the ordinary page green even while everything else goes gray.     */
html.mourning { background: #6f6f6f !important; }
body.skg.mourning { background: #6f6f6f !important; }
body.skg.mourning .skg-wrap {
  filter: grayscale(100%);
  border-top: 6px solid #000;
}
body.skg.mourning #brand_header::after {   /* black corner band (kir) over the banner */
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 120px; height: 120px;
  background: linear-gradient(-45deg, transparent 0 44%, #111 44% 56%, transparent 56%);
  pointer-events: none;
}
#mourning_bar {
  background: #111;
  color: #e8e8e8;
  text-align: center;
  padding: 9px 12px;
  font-style: italic;
  font-size: 15px;
  letter-spacing: .02em;
}

/* ---------- footer ---------- */
#footer {
  background: var(--skg-bar);
  color: #fff;
  padding: 14px 12px;
  text-align: center;
}
#footer a { color: #cfe08a; }
#footer .copyright { font-size: 12px; opacity: .85; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .skg-wrap { margin: 0; overflow-x: hidden; }   /* safety net: never scroll the page sideways */
  #content { flex-direction: column; }
  #main-col { order: -1; }               /* content first on mobile; sidebars drop below it */
  #sidebar, #sidebar-right { flex-basis: auto; width: 100%; }
  #top_nav.nav-js .nav-toggle { display: flex; }
  #top_nav.nav-js .nav-inner { display: none; }
  #top_nav.nav-js.is-open .nav-inner { display: block; }
  #top_nav ul.mod-menu, #top_nav ul.nav, #top_nav ul.menu { flex-direction: column; }
  #top_nav .mod-menu__sub {
    position: static;
    border: 0;
    min-width: 0;
    display: flex;                       /* no hover on touch - show every sub-item indented */
    background: rgba(255,255,255,.06);
  }
  #top_nav .mod-menu__sub a { padding-left: 28px; }
  /* put the title in normal flow on mobile - absolute + right:16px let it
     overflow the header, and with overflow-x:hidden that just clips it. */
  /* aspect-ratio 1170/180 + min-height:96px was resolving WIDTH from height
     (96 x 1170/180 = 624px) on screens narrower than ~624px, forcing the whole
     header - and the title with it - off the right edge. Drop the ratio here. */
  #brand_header {
    aspect-ratio: auto;
    min-height: 110px;
    display: flex;
    align-items: flex-end;
    background-position: left center;   /* logo is baked into the left of header-bg.jpg -
                                          without the 1170/180 ratio, 'cover' + 'center'
                                          crops it off; anchor left so it always shows */
  }
  #brand_header .brand-text {
    position: static;
    flex: 1;
    min-width: 0;
    padding: 6px 12px;
    text-align: right;
  }
  #skg { font-size: clamp(16px, 5vw, 24px); }
  #slogan { font-size: clamp(11px, 3.4vw, 15px); }
}