/* ==========================================================================
   Elements template
   1. Tokens   2. Base   3. Page grid (sticky footer)   4. Header
   5. Content grid   6. Modules   7. Footer   8. Core UI basics
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------
   --elements-accent and --elements-max-width are overridden by the template
   parameters (see index.php). Everything else is edited here. */
:root {
  --elements-accent: #2a6f97;
  --elements-max-width: 1200px;

  --elements-bg: #f5f6f8;
  --elements-surface: #ffffff;
  --elements-text: #1d2530;
  --elements-muted: #586374;
  --elements-border: #dbe0e6;

  --elements-gap: 1.5rem;
  --elements-sidebar: 16rem;
  --elements-radius: 6px;
  --elements-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 2. Base ---------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--elements-bg);
  color: var(--elements-text);
  font-family: var(--elements-font);
  font-size: 1rem;
  line-height: 1.6;
}

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

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  line-height: 1.25;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p,
ul,
ol {
  margin: 0 0 1em;
}

main p,
main li {
  max-width: 75ch;
}

a {
  color: var(--elements-accent);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--elements-accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 3. Page grid: sticky footer ---------------------------------------------
   Three rows: header (auto) / content (1fr) / footer (auto).
   The middle row absorbs all spare height, so the footer sits at the bottom
   of the viewport on short pages and after the content on long ones. */
body.site {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
}

/* 4. Header -------------------------------------------------------------- */
.site-header {
  background: var(--elements-surface);
  border-bottom: 1px solid var(--elements-border);
}

.header-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .75rem 2rem;
  max-width: var(--elements-max-width);
  margin-inline: auto;
  padding: 1rem var(--elements-gap);
}

.brand {
  color: var(--elements-text);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.container-nav {
  justify-self: end;
}

.container-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.container-nav a {
  display: block;
  padding: .25rem 0;
  border-bottom: 2px solid transparent;
  color: var(--elements-text);
  text-decoration: none;
}

.container-nav a:hover,
.container-nav .active > a,
.container-nav .current > a {
  border-bottom-color: var(--elements-accent);
}

/* 5. Content grid --------------------------------------------------------
   Sidebars only exist in the markup when they hold modules; index.php adds
   .has-sidebar-left / .has-sidebar-right to <body> and the grid follows. */
.site-main {
  padding-block: var(--elements-gap);
}

.site-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main";
  gap: var(--elements-gap);
  max-width: var(--elements-max-width);
  margin-inline: auto;
  padding-inline: var(--elements-gap);
}

.container-sidebar-left  { grid-area: left; }
.container-component     { grid-area: main; min-width: 0; }
.container-sidebar-right { grid-area: right; }

.has-sidebar-left .site-grid {
  grid-template-columns: var(--elements-sidebar) minmax(0, 1fr);
  grid-template-areas: "left main";
}

.has-sidebar-right .site-grid {
  grid-template-columns: minmax(0, 1fr) var(--elements-sidebar);
  grid-template-areas: "main right";
}

.has-sidebar-left.has-sidebar-right .site-grid {
  grid-template-columns: var(--elements-sidebar) minmax(0, 1fr) var(--elements-sidebar);
  grid-template-areas: "left main right";
}

@media (max-width: 52em) {
  .site-grid,
  .has-sidebar-left .site-grid,
  .has-sidebar-right .site-grid,
  .has-sidebar-left.has-sidebar-right .site-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "main" "left" "right";
  }

  .header-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .container-nav {
    justify-self: start;
  }
}

/* 6. Modules (chrome: html/layouts/chromes/box.php) ---------------------- */
.module {
  margin-bottom: var(--elements-gap);
  padding: 1rem 1.25rem;
  background: var(--elements-surface);
  border: 1px solid var(--elements-border);
  border-radius: var(--elements-radius);
}

.module-title {
  margin-bottom: .75rem;
  font-size: 1.05rem;
}

.module-body > :last-child {
  margin-bottom: 0;
}

.breadcrumb,
.mod-breadcrumbs {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  color: var(--elements-muted);
  font-size: .9rem;
}

.mod-breadcrumbs li {
  display: inline;
}

.mod-breadcrumbs li + li::before {
  content: "/";
  margin-inline: .5rem;
}

/* 7. Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--elements-surface);
  border-top: 1px solid var(--elements-border);
  color: var(--elements-muted);
  font-size: .9rem;
}

.footer-inner {
  max-width: var(--elements-max-width);
  margin-inline: auto;
  padding: 1.25rem var(--elements-gap);
}

.footer-inner > :last-child {
  margin-bottom: 0;
}

/* 8. Core UI basics -------------------------------------------------------
   Joomla core output uses Bootstrap-style class names; this template ships
   no Bootstrap, so the essentials are restyled here. Extend as needed. */
.btn,
button,
input[type="submit"] {
  display: inline-block;
  padding: .5rem 1rem;
  background: var(--elements-accent);
  border: 1px solid var(--elements-accent);
  border-radius: var(--elements-radius);
  color: #fff;
  font: inherit;
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  filter: brightness(.92);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
select,
textarea,
.form-control {
  width: 100%;
  padding: .5rem .75rem;
  background: var(--elements-surface);
  border: 1px solid var(--elements-border);
  border-radius: var(--elements-radius);
  color: inherit;
  font: inherit;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--elements-border);
  text-align: start;
}

.list-unstyled {
  padding: 0;
  list-style: none;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  padding: 0;
  list-style: none;
}