/**
 * MTB de Zeeleeuw — Joomla core markup
 *
 * Joomla's own components (com_content, com_contact, com_search, ...)
 * render their own HTML with fixed class names — this file makes sure
 * that output matches the rest of the site instead of looking like an
 * unstyled default install.
 */

/* Articles */
.item-page img,
.blog-item img,
.article-info img {
  border-radius: var(--radius-md);
}

.page-header,
.com-content-category-blog__header {
  margin-bottom: var(--space-6);
}

.article-info {
  color: var(--z-ink-soft);
  font-size: var(--step-sm);
  margin-bottom: var(--space-6);
}

.article-info .icon-calendar::before,
.article-info .icon-user::before {
  color: var(--z-blue);
}

/* Category blog / list layouts */
.blog-item,
.item {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-12);
  border-bottom: 1px solid var(--z-line);
}

.blog-item:last-child,
.item:last-child {
  border-bottom: none;
}

.readmore a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--step-sm);
  color: var(--z-pink);
}

.readmore a:hover {
  color: var(--z-navy);
}

/* Pagination */
.pagination {
  display: flex;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 0;
  flex-wrap: wrap;
}

.pagination .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--z-line);
  color: var(--z-navy);
  font-family: var(--font-display);
  font-weight: 700;
}

.pagination .page-item.active .page-link {
  background: var(--z-navy);
  border-color: var(--z-navy);
  color: #fff;
}

.pagination .page-link:hover {
  border-color: var(--z-navy);
  text-decoration: none;
}

/* Alerts / system messages */
.alert {
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.alert-success { background: var(--z-green-soft); border-color: var(--z-green); color: #1c7a48; }
.alert-danger  { background: var(--z-pink-soft); border-color: var(--z-pink); color: #a02458; }
.alert-warning { background: var(--z-gold-soft); border-color: var(--z-gold); color: #8a6d00; }
.alert-info    { background: var(--z-blue-soft); border-color: var(--z-blue); color: var(--z-navy); }

/* Grassveld-preset: paginering en Joomla's eigen klasseloze knoppen
   (zie de :not([class])-regels verderop) gebruiken hieronder het vaste
   merk-marineblauw, terwijl deze preset groen als sitebrede accent
   voert — zonder deze override zou dat overal inconsequent naast elkaar
   staan. */
body.theme-grassfeld .pagination .page-link {
  color: var(--z-accent);
}

body.theme-grassfeld .pagination .page-item.active .page-link,
body.theme-grassfeld .pagination .page-link:hover {
  background: var(--z-accent);
  border-color: var(--z-accent);
}

body.theme-grassfeld .pagination .page-link:hover {
  color: #fff;
}

/* Forms (com_contact, com_users, search, ...) */
label {
  font-weight: 600;
  display: block;
  margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="number"],
select,
textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-base);
  padding: 0.65em 0.85em;
  border: 1px solid var(--z-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--z-ink);
  /* iOS Safari draws its own native rounded control chrome on text/
     password inputs on top of author styles unless appearance is reset
     - left on, its own focus highlight doesn't line up with our
     border-radius and shows up as a gap in the border, worst on the
     right edge. */
  appearance: none;
  -webkit-appearance: none;
}

/* No focus styling here on purpose. Two earlier attempts lived in this
   spot - a border-color swap on :focus (v2.1.21: clashed with base.css's
   focus ring, two mismatched rounded strokes) and an outline-offset
   override for .input-group fields (v2.1.20: fixed the outline
   spilling into the neighbouring icon box, but not the underlying
   rounding mismatch). base.css now draws the sitewide focus indicator
   with box-shadow instead of outline, which follows border-radius
   exactly and sits flush against the border with no offset - both
   problems this file used to patch around no longer exist upstream, so
   nothing needs overriding here any more. */

/* Bootstrap-pattern support — Joomla's own core-generated markup (login
   forms, com_contact, com_users, and most other core views) assumes
   these classes exist and are styled, the same way they would be on a
   Bootstrap-based template. Without this, an input wrapped in
   `.input-group` (paired with an icon or a toggle button) stacks its
   pieces in an unstyled, awkward block layout instead of sitting neatly
   side by side. */
.form-control {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--step-base);
  padding: 0.65em 0.85em;
  border: 1px solid var(--z-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--z-ink);
  appearance: none;
  -webkit-appearance: none;
}

.input-group {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.input-group .form-control {
  flex: 1 1 auto;
  margin-bottom: 0;
  /* Room for the browser's own saved-password/passkey affordance
     (Chrome/Safari draw this icon inside the field itself, not
     something this markup or CSS controls) - without this the icon
     sits right on top of the focused field's right edge, making its
     rounded border look cut off there. */
  padding-right: 2.5em;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding-inline: var(--space-3);
  border: 1px solid var(--z-line);
  border-radius: var(--radius-sm);
  background: var(--z-paper);
  color: var(--z-ink-soft);
}

/* mod_login's markup uses Joomla's own icon-font classes (icon-user,
   icon-eye) - this template never loads Joomla's bundled icon font (see
   index.php: "no framework dependency"), so those spans rendered
   completely empty, leaving just their fully-styled-but-blank
   .input-group-text/.input-password-toggle wrapper - an empty gray box,
   not a bug in the box itself. Drawing the glyph via CSS mask-image (two
   small inline SVGs, currentColor) needs no font or external asset,
   matching how the rest of this template avoids framework dependencies. */
.icon-user::before,
.icon-eye::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--icon-glyph) no-repeat center / contain;
  mask: var(--icon-glyph) no-repeat center / contain;
}

.icon-user::before {
  --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E");
}

.icon-eye::before {
  --icon-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 5c-5 0-9 4-11 7 2 3 6 7 11 7s9-4 11-7c-2-3-6-7-11-7zm0 11a4 4 0 110-8 4 4 0 010 8z'/%3E%3C/svg%3E");
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.form-check-input {
  width: 1.1em;
  height: 1.1em;
  margin: 0;
}

.form-check-label {
  font-weight: 400;
  margin: 0;
}

.form-group {
  margin-bottom: var(--space-4);
}

/* Deliberately excludes type="button" and type="reset" — those are
   small utility buttons (e.g. a password show/hide toggle Joomla adds
   next to password fields), not calls to action, and blowing them up
   into a full CTA-pill with this much padding turned them into
   confusing empty dark blobs sitting in the middle of a form. Matches
   a real submit button whether its type="submit" is written explicitly
   or just implied (the HTML default for a <button> with no type
   attribute inside a form).
   Also restricted to *classless* elements — a bare `button` selector
   with two :not() clauses actually outranks a single class in CSS
   specificity, which would let this rule quietly override this
   template's own `.btn`/`.btn-primary` system (used e.g. by
   com_members' own site-side forms, which render real
   `<button type="submit" class="btn btn-primary">` elements) rather
   than only affecting Joomla's own unstyled, classless core buttons —
   the actual thing this rule exists to fix. */
button:not([type="button"]):not([type="reset"]):not([class]),
input[type="submit"]:not([class]) {
  font-family: var(--font-display);
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 2px solid var(--z-navy);
  background: var(--z-navy);
  color: #fff;
  padding: 0.6em 1.3em;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

button:not([type="button"]):not([type="reset"]):not([class]):hover,
input[type="submit"]:not([class]):hover {
  background: var(--z-navy-soft);
}

body.theme-grassfeld button:not([type="button"]):not([type="reset"]):not([class]),
body.theme-grassfeld input[type="submit"]:not([class]) {
  border-color: var(--z-accent);
  background: var(--z-accent);
}

body.theme-grassfeld button:not([type="button"]):not([type="reset"]):not([class]):hover,
body.theme-grassfeld input[type="submit"]:not([class]):hover {
  opacity: 0.9;
  background: var(--z-accent);
}

/* Small icon-only utility buttons (password show/hide, etc.) — kept
   visually minimal instead of unstyled-browser-default, but explicitly
   not a CTA pill. Restricted to *classless* buttons specifically: this
   template's own type="button" elements (.nav-toggle, .nav-close,
   .lb-icon-btn, ...) all carry their own class and their own deliberate
   styling, and a bare `button[type="button"]` selector here would
   actually outrank a single class in specificity — scoping to
   `:not([class])` means this rule can only ever touch a plain,
   un-classed button Joomla itself renders, never one of this
   template's own. */
button[type="button"]:not([class]) {
  background: transparent;
  border: none;
  color: var(--z-ink-soft);
  cursor: pointer;
  padding: 0.4em;
}

button[type="button"]:not([class]):hover {
  color: var(--z-ink);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-6);
}

table th,
table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--z-line);
  text-align: left;
}

table th {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--step-sm);
  color: var(--z-navy);
}

/* Search module */
.mod-search input[type="search"] {
  border-radius: 999px;
  padding-inline: var(--space-4);
}