/*
 * sosjj.org — child template of Cassiopeia (Joomla 5.4.10), ORG-G21.
 * Loaded by Cassiopeia's own "template.user" asset (no index.php override, no parent file changed).
 * Identity of the former rt_afterburner "light3" style (values read from templates/rt_afterburner/css/light3.css and the
 * style parameters of the original site): 1100 px page, header banner logo2.png, grey #888 menu bar with white bold links
 * (active: white / red text, hover: red), light-blue left column #d1e0e7, grey right column #eee, Helvetica / Arial,
 * text #555, links #cc0000 bold. System fonts only (no web fonts, no CDN).
 */

/* ------------------------------------------------------------------ design tokens */
:root {
  --sj-red: #cc0000;              /* links, active / hover menu          */
  --sj-red-dark: #b10000;         /* sub-menu border in light3           */
  --sj-nav: #888888;              /* menu bar                            */
  --sj-text: #555555;             /* body text                           */
  --sj-left: #d1e0e7;             /* left column ("color2")              */
  --sj-left-title: #50646d;
  --sj-left-border: #c3d9e1;
  --sj-right: #eeeeee;            /* right column ("color1")             */
  --sj-right-title: #777777;
  --sj-footer: #f7f7f7;
  --sj-border: #dddddd;
  --sj-font: Helvetica, Arial, sans-serif;
  --sj-width: 68.75rem;           /* 1100 px, original templateWidth     */

  --cassiopeia-color-primary: var(--sj-nav);
  --cassiopeia-color-link: var(--sj-red);
  --cassiopeia-color-hover: var(--sj-red-dark);
  --cassiopeia-font-family-body: var(--sj-font);
  --cassiopeia-font-family-headings: var(--sj-font);
  --cassiopeia-font-weight-headings: 700;
}

body {
  font-family: var(--sj-font);
  color: var(--sj-text);
  background: #fff;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--sj-font); }
a { color: var(--sj-red); font-weight: 700; }
a:hover, a:focus { color: var(--sj-red-dark); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--sj-red);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ 1100 px page */
.site-grid, .footer {
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [main-start] repeat(4, minmax(0, calc(var(--sj-width) / 4)))
    [main-end] minmax(0, 1fr)
    [full-end];
}
:root { --sj-gutter: max(1rem, calc((100% - var(--sj-width)) / 2)); }

/* ------------------------------------------------------------------ header: banner + grey menu bar */
.container-header {
  background: #fff;
  box-shadow: none;
}
.container-header .navbar-brand {
  display: block;
  margin: 0 auto;
  padding: .25rem 0;
  text-align: center;
}
.container-header .brand-logo img { max-width: 100%; height: auto; }   /* logo2.png, 900 x 200 */

/* grey menu bar inside the 1100 px page, as in light3 (#nav was part of the 1100 px wrapper) */
.container-header .container-nav {
  background: var(--sj-nav);
  max-width: var(--sj-width);
  margin-left: auto;
  margin-right: auto;
  padding: .25rem .5rem;
}
/* the top menu has ~17 items: compact items wrapping on two rows as the original menu bar (no horizontal overflow) */
@media (min-width: 992px) {
  .container-header .container-nav .mod-menu { flex-wrap: wrap; gap: 0; }
  .container-header .container-nav .mod-menu > li { margin: 0; padding: 0; }
}
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span,
.container-header .mod-menu > li > button {
  color: #fff;
  font-weight: 700;
  font-size: .9375rem;
  padding: .3rem .6rem;
  line-height: 1.5;
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  background: #fff;
  color: var(--sj-red);
  text-decoration: none;
}
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  background: var(--sj-red);
  color: #fff;
  text-decoration: none;
}
.container-header .metismenu.mod-menu .mm-collapse {
  background: #fff;
  border: 1px solid var(--sj-red-dark);
  border-top: 0;
}
.container-header .metismenu.mod-menu .mm-collapse > li > a {
  color: var(--sj-red);
  border-top: 1px solid var(--sj-red-dark);
}
.container-header .container-nav .mod-menu a:focus-visible,
.container-header .container-nav .navbar-toggler:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.container-header .navbar-toggler { color: #fff; border-color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------------ columns (module chrome "card") */
.card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.card-header {
  background: transparent;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--sj-border);
}
.container-sidebar-left { background: var(--sj-left); padding: .5rem; }
.container-sidebar-left .card-header { color: var(--sj-left-title); border-bottom-color: var(--sj-left-border); }
.container-sidebar-right { background: var(--sj-right); padding: .5rem; }
.container-sidebar-right .card-header { color: var(--sj-right-title); }
.container-sidebar-left img, .container-sidebar-right img,
.container-bottom-a img, .container-component img { max-width: 100%; height: auto; }

/* vertical main menu in the right column */
.container-sidebar-right .mod-menu a { font-weight: 700; }

/* ------------------------------------------------------------------ content */
.page-header h1, .page-header h2, .item-title, .item-page h2 { color: var(--sj-red); }
.page-header h2 a, .item-title a { color: var(--sj-red); }
.container-component iframe { max-width: 100%; }
/* editorial tables wider than the screen scroll inside the article instead of widening the page (content unchanged) */
.container-component .com-content-article__body table,
.container-component .item-page table { display: block; max-width: 100%; overflow-x: auto; }
.sosjj-gallery a { display: inline-block; }
/* long category paginations and Smart Search result URLs must not widen small screens */
.pagination { flex-wrap: wrap; }
.com-finder .result__title-url, .com-finder .result__description { overflow-wrap: anywhere; }
/* historical article bodies (editor / Word pastes, ORG-G31 mobile scan): long URLs, e-mail addresses and words break,
   fixed-width blocks and rules shrink to the column (content unchanged) */
.com-content-article__body { overflow-wrap: anywhere; }
.com-content-article__body [style*="width"], .com-content-article__body hr, .com-content-article__body video,
.com-content-article__body object, .com-content-article__body embed { max-width: 100%; box-sizing: border-box; }

/* ------------------------------------------------------------------ bottom modules + footer */
.container-bottom-a {
  background: var(--sj-footer);
  border-top: 1px solid #fff;
}
.footer { background: var(--sj-footer); color: var(--sj-text); }
.footer a { color: var(--sj-red); }