/*
 * IFIWCTC 2026 — Cassiopeia user.css override
 * Drop this at:
 *   /opt/bitnami/joomla/media/templates/site/cassiopeia/css/user.css
 * Cassiopeia auto-loads user.css after template.css on every page,
 * so nothing else needs registering.
 *
 * All custom styles are scoped to .ifiwctc so they only affect the
 * tipping content, not other pages.
 */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans:wght@400;600;700&display=swap');

/* ── Header: logo + site title vertically centered ────────────────── */

/* Brand: flex row, vertically aligned */
.container-header .brand,
.container-banner .brand,
header .brand,
.brand {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  padding: 8px 0 !important;
  flex-wrap: nowrap !important;
}

/* Logo: small, fixed height, auto width */
.container-header .brand img,
.container-banner .brand img,
header .brand img,
.brand img.logo,
.brand img {
  height: 56px !important;
  max-height: 56px !important;
  max-width: 70px !important;
  width: auto !important;
  margin: 0 !important;
  display: block !important;
}

/* Site title: force visible, override Cassiopeia's visually-hidden */
.brand .site-title,
header .site-title,
.container-header .site-title,
.container-banner .site-title,
.brand > span:not(.site-description),
.brand .visually-hidden {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  white-space: normal !important;
  display: block !important;
  font-family: 'Anton', 'Impact', sans-serif !important;
  font-size: clamp(18px, 2.2vw, 28px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  line-height: 1.1 !important;
  text-align: left !important;
}

/* Site description: hide entirely (we use only the title) */
.site-description,
.brand .site-description,
header .site-description,
.container-header .site-description,
.container-banner .site-description {
  display: none !important;
}

@media (max-width: 812px) {
  .brand img { height: 40px !important; max-height: 40px !important; }
  .brand .site-title { font-size: 16px !important; }
}

/* ── Brand: page background to match embed.html ───────────────────── */
.view-article .container-component,
.view-featured .container-component {
  background-color: #fff;
}

/* ── IFIWCTC content wrapper ──────────────────────────────────────── */
.ifiwctc {
  font-family: 'Noto Sans', sans-serif;
  color: #2C3E50;
}

.ifiwctc h1,
.ifiwctc h2,
.ifiwctc h3,
.ifiwctc h4 {
  font-family: 'Anton', 'Impact', sans-serif;
  letter-spacing: 0.5px;
  color: #326295;
  font-weight: normal;
}

.ifiwctc h1 { font-size: 42px; margin: 0 0 10px; }
.ifiwctc h2 { font-size: 36px; margin: 0 0 10px; }
.ifiwctc h3 { font-size: 30px; padding: 15px 0; margin: 0; }

.ifiwctc p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: #000;
  margin: 0 0 1em;
}

.ifiwctc-heading {
  padding: 0 0 20px;
}

.ifiwctc-content {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.ifiwctc-news {
  flex: 1 1 60%;
  min-width: 280px;
}

.ifiwctc-ladder {
  flex: 1 1 30%;
  min-width: 280px;
}

.ifiwctc-trophy {
  width: 100%;
  max-width: 600px;
  height: auto;
  display: block;
  margin: 10px auto;
}

.ifiwctc-placeholder {
  background: #f1f5fa;
  border: 2px dashed #326295;
  padding: 20px;
  margin: 15px 0;
  text-align: center;
  color: #326295;
  font-style: italic;
  font-size: 17px;
}

/* Leaderboard table */
.ifiwctc-table {
  font-family: 'Noto Sans', sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1em;
}
.ifiwctc-table th {
  text-align: left;
  padding: 10px 8px;
  background-color: #326295;
  color: #fff;
  border: 0;
  font-weight: 600;
}
.ifiwctc-table td {
  text-align: left;
  padding: 8px;
  border: 0;
}
.ifiwctc-table tr:nth-child(even) td {
  background-color: #d6dfe9;
}

.ifiwctc-leader-link a,
.ifiwctc a {
  color: #326295;
  text-decoration: none;
}
.ifiwctc-leader-link a:hover,
.ifiwctc a:hover {
  color: #2688E7;
}

/* Mobile */
@media screen and (max-width: 812px) {
  .ifiwctc-content { flex-direction: column; }
  .ifiwctc h1 { font-size: 28px; }
  .ifiwctc h2 { font-size: 30px; }
}

/* ── Sponsor footer (matches header banner) ───────────────────────── */
.container-footer {
  background-color: #326295;
  color: #fff;
  padding: 0;
  margin-top: 30px;
}

.container-footer .mod-custom,
.container-footer .moduletable {
  background: transparent;
  border: 0;
  padding: 16px 24px;
  margin: 0;
}

.container-footer * { color: #fff; }

.ifiwctc-sponsor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: 'Anton', 'Impact', sans-serif;
  font-size: 24px;
  letter-spacing: 0.5px;
  color: #fff;
}

.ifiwctc-sponsor-img {
  height: 44px;
  width: auto;
  display: block;
}

@media screen and (max-width: 600px) {
  .ifiwctc-sponsor { flex-direction: column; text-align: center; }
}