/* ===================================================
   Utah Trentini — Supplemental Styles
   Italian Flag Color Theme: Green, White, Red
   Extends the main ITTONA stylesheet (../style.css)
   =================================================== */

/* --- Override ITTONA colors with Italian flag theme --- */

/* Navigation bar — deep green */
.site-nav {
  background: linear-gradient(180deg, #006341 0%, #004d2f 100%) !important;
}

.site-nav a:hover,
.site-nav a:focus {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}

.site-nav a.active {
  background: #CE2B37 !important;
  color: #fff !important;
}

/* Page titles — deep green */
.page-title {
  color: #004d2f !important;
}

.page-subtitle {
  color: #555 !important;
}

/* Section headers — green with red accent underline */
.page-content h2 {
  color: #004d2f !important;
  border-bottom: 2px solid #CE2B37 !important;
}

/* Cards — white with green left border */
.card {
  border-left: 3px solid #006341 !important;
}

.card h3 {
  color: #004d2f !important;
}

/* Officer cards — green left accent */
.officer-card {
  border-left: 4px solid #006341 !important;
}

.officer-card .role {
  color: #006341 !important;
}

/* Highlight boxes — green accent */
.highlight-box {
  border-left: 4px solid #006341 !important;
}

.highlight-box h3 {
  color: #006341 !important;
}

/* Section labels — red background */
.section-label {
  background: #CE2B37 !important;
}

/* Links — red */
a {
  color: #CE2B37 !important;
}

a:hover {
  color: #a0222c !important;
}

/* Nav links keep their light color */
.site-nav a,
.site-nav a:link,
.site-nav a:visited {
  color: #FFEEDD !important;
}

/* Link buttons — red */
.link-btn {
  background: #CE2B37 !important;
}

.link-btn:hover {
  background: #a0222c !important;
}

/* Note boxes — light green tint */
.note-box {
  background: #f0f8f0 !important;
  border: 1px solid #a8d5a0 !important;
  color: #2a4a2a !important;
}

/* Footer — green top border */
.site-footer {
  border-top: 2px solid #006341 !important;
}

.site-footer a {
  color: #CE2B37 !important;
}

/* Hall of fame / dedication cards — green top */
.hof-card {
  border-top: 3px solid #006341 !important;
}

.dedication {
  border: 1px solid #a8d5a0 !important;
}

/* --- Utah custom header --- */
.utah-header {
  background: linear-gradient(135deg, #006341 0%, #004d2f 60%, #003d22 100%);
  color: #fff;
  padding: 28px 24px;
  text-align: center;
  border-radius: 0 0 8px 8px;
  position: relative;
  overflow: hidden;
}

.utah-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: #006341;
}

.utah-header::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: #CE2B37;
}

.utah-header-flag {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 14px;
}

.utah-header-flag span {
  display: inline-block;
  width: 30px;
  height: 44px;
  border-radius: 2px;
}

.utah-flag-green { background: #009246; }
.utah-flag-white { background: #ffffff; }
.utah-flag-red   { background: #CE2B37; }

.utah-header h1 {
  font-size: 1.8em;
  font-weight: 700;
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.utah-header p {
  font-size: 1em;
  margin: 0;
  opacity: 0.9;
  font-weight: 400;
}

/* Tricolor accent bar under header */
.utah-tricolor {
  display: flex;
  height: 6px;
  margin-bottom: 0;
}

.utah-tricolor span {
  flex: 1;
}

.utah-tricolor .tc-green { background: #009246; }
.utah-tricolor .tc-white { background: #ffffff; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.utah-tricolor .tc-red   { background: #CE2B37; }

/* --- Utah greeting image (Easter, seasonal) --- */
.utah-greeting {
  text-align: center;
  margin: 24px 0;
}

.utah-greeting img {
  max-width: 420px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* --- Event feature layout (image + details side by side) --- */
.utah-event-feature {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 20px 0;
}

.utah-event-image {
  flex-shrink: 0;
  max-width: 320px;
}

.utah-event-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.utah-event-details {
  flex: 1;
}

/* --- Dues section layout --- */
.utah-dues-section {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 24px 0;
}

.utah-dues-image {
  flex-shrink: 0;
  max-width: 260px;
}

.utah-dues-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.utah-dues-details {
  flex: 1;
}

/* --- Calendar event list --- */
.utah-calendar .highlight-box {
  margin: 10px 0;
}

.utah-calendar .highlight-box h3 {
  font-size: 0.95em;
  margin-bottom: 4px;
}

/* --- Add to Calendar link --- */
.cal-link {
  display: inline-block;
  font-size: 0.82em;
  font-weight: 600;
  color: #fff !important;
  background: #006341;
  padding: 4px 12px;
  border-radius: 4px;
  text-decoration: none !important;
  margin-top: 6px;
  transition: background 0.2s;
}

.cal-link:hover {
  background: #004d2f !important;
  color: #fff !important;
}

.cal-link::before {
  content: "\1F4C5 ";
}

/* --- Mobile adjustments --- */
@media (max-width: 650px) {
  .utah-header h1 {
    font-size: 1.4em;
  }

  .utah-event-feature {
    flex-direction: column;
    align-items: center;
  }

  .utah-event-image {
    max-width: 100%;
  }

  .utah-dues-section {
    flex-direction: column;
    align-items: center;
  }

  .utah-dues-image {
    max-width: 100%;
  }

  .utah-greeting img {
    max-width: 100%;
  }
}