/* Material Design Outlined Cards for alwx.org */
:root {
  --md-sys-color-surface: #ffffff;
  --md-sys-color-on-surface: #1b1b1b;
  --md-sys-color-outline: rgba(0,0,0,0.12);
  --md-sys-shape-corner-medium: 12px;
  --md-elevation-level0: none;
  --md-state-layer-hover: rgba(0,0,0,0.04);
}

/* Center all h3 headings site-wide (legacy). Kept for compatibility. */
h3 { text-align: center; }

/* Card container */
.md-card {
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--md-elevation-level0);
  overflow: hidden;
}

/* Remove legacy heavy box-shadows where applied together */
.md-card.shadow-none { box-shadow: none !important; }

/* Card sections */
.md-card-header, .md-card-content, .md-card-actions {
  padding: 16px;
}

.md-card-header { display: flex; align-items: center; gap: 12px; }
.md-card-title { font-size: 1.25rem; font-weight: 600; margin: 0; }
.md-card-subtitle { font-size: 0.95rem; color: rgba(0,0,0,0.6); margin: 0; }

/* Support media areas */
.md-card-media { display: block; }
.md-card-media img, .md-card-media canvas, .md-card-media iframe {
  display: block;
  width: 100%;
  height: auto;
}

/* Outlined buttons inside cards */
.md-button { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid var(--md-sys-color-outline); border-radius:8px; background:transparent; color:inherit; cursor:pointer; }
.md-button:hover { background: var(--md-state-layer-hover); }

/* List rows inside outlined cards */
.md-list { display:flex; flex-direction:column; }
.md-list-item { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-top: 1px solid var(--md-sys-color-outline); }
.md-list-item:first-child { border-top: none; }

/* Utility to turn existing card-like boxes into outlined cards without markup changes */
.as-md-outlined { border: 1px solid var(--md-sys-color-outline) !important; border-radius: var(--md-sys-shape-corner-medium) !important; box-shadow: none !important; background: var(--md-sys-color-surface) !important; }

/* Headings inside cards */
.md-card h1, .md-card h2, .md-card h3,
.as-md-outlined h1, .as-md-outlined h2, .as-md-outlined h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-weight: 600;
  text-shadow: none !important;
  text-align: center;
}

/* Section wrappers adopting cards */
.weather-section { border: none; padding: 12px; }
/* Keep section titles at top; bottom placement applies to card content only */
.weather-graphic { border: none; box-shadow: none; padding: 0; }
.weather-graphic img { border-radius: 8px; }

/* Ensure headings and citations appear at the bottom of card content */
.weather-graphic {
  display: flex;
  flex-direction: column;
}
.weather-graphic .image-container { order: 1; }
.weather-graphic h2, .weather-graphic h3 { order: 2; margin-top: 8px; }
.weather-graphic .source-link { order: 3; }

/* Grid containers adopt spacing compatible with cards */
.weather-graphics-container { gap: 16px; }

/* Responsive tweaks */
@media (max-width: 768px) {
  .md-card-header, .md-card-content, .md-card-actions { padding: 12px; }
}