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

/* Custom styles for Friends of Courtenay
 *
 * Keep this file intentionally small. We:
 * - Map Courtenay brand colors into the Zensical / Material theme
 * - Provide a couple of optional section helper classes
 * - Ensure button readability on all backgrounds
 *
 * Buttons, typography, layout, etc. are all left to the default theme,
 * just like the Zensical / MkDocs Material demos.
 */

/* Courtenay brand colors wired into the theme */
:root {
  /* Brand colors */
  --courtenay-blue: #002063;
  --courtenay-yellow: #f7db32;

  /* Light-scheme section background helpers */
  --courtenay-blue-section: #b2c7f4;
  --courtenay-yellow-section: #faeb92;

  /* Map brand colors into Material / Zensical palette */
  --md-primary-fg-color: var(--courtenay-blue);
  --md-primary-fg-color--light: #334b8e;
  --md-primary-fg-color--dark: #00081f;

  --md-accent-fg-color: var(--courtenay-yellow);

  /* Button text colors for proper contrast */
  --button-primary-text: #ffffff;
  --button-secondary-text: var(--courtenay-blue);
  --button-default-text: var(--courtenay-blue);
  --button-hover-text: #1a1a1a;  /* Dark text on yellow hover */
}

/* Dark scheme tweaks, still using the same brand colors */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--courtenay-blue);
  --md-primary-fg-color--light: #4b5aa0;
  --md-primary-fg-color--dark: #00081f;
  --md-accent-fg-color: var(--courtenay-yellow);

  /* Dark-friendly versions of the section helpers */
  --courtenay-blue-section: #182655;
  --courtenay-yellow-section: #4a3a09;

  /* Button text colors for dark mode */
  --button-secondary-text: #a8c4f5;  /* Lighter blue for visibility */
  --button-default-text: #e0e0e0;
}

/* ============================================================================
 * Button styling for improved readability
 * ============================================================================ */

/* Primary buttons: dark blue background with white text */
.md-button--primary {
  background-color: var(--courtenay-blue) !important;
  border-color: var(--courtenay-yellow) !important;
  border: 2px solid var(--courtenay-yellow) !important;
  color: var(--button-primary-text) !important;
}

.md-button--primary:hover,
.md-button--primary:focus {
  background-color: var(--courtenay-yellow) !important;
  border-color: var(--courtenay-yellow) !important;
  color: var(--button-hover-text) !important;
}

/* Secondary buttons: outlined with visible text */
.md-button--secondary {
  background-color: transparent !important;
  border: 2px solid var(--courtenay-blue) !important;
  color: var(--button-secondary-text) !important;
}

.md-button--secondary:hover,
.md-button--secondary:focus {
  background-color: var(--courtenay-yellow) !important;
  border-color: var(--courtenay-yellow) !important;
  color: var(--button-hover-text) !important;
}

/* Default buttons (no modifier): subtle outline style */
.md-button:not(.md-button--primary):not(.md-button--secondary) {
  background-color: transparent !important;
  border: 2px solid currentColor !important;
  color: var(--button-default-text) !important;
}

.md-button:not(.md-button--primary):not(.md-button--secondary):hover,
.md-button:not(.md-button--primary):not(.md-button--secondary):focus {
  background-color: var(--courtenay-yellow) !important;
  border-color: var(--courtenay-yellow) !important;
  color: var(--button-hover-text) !important;
}

/* Dark mode adjustments for secondary buttons */
[data-md-color-scheme="slate"] .md-button--secondary {
  border-color: #5a7bb8 !important;
}

[data-md-color-scheme="slate"] .md-button:not(.md-button--primary):not(.md-button--secondary) {
  border-color: #666 !important;
}

/* Optional section helpers using school colors */
.section-blue {
  background-color: var(--courtenay-blue-section);
  padding: 1.5rem 1.25rem;
  border-radius: 0.5rem;
  border-left: 4px solid var(--courtenay-blue);
}

.section-yellow {
  background-color: var(--courtenay-yellow-section);
  padding: 1.5rem 1.25rem;
  border-radius: 0.5rem;
  border-left: 4px solid var(--courtenay-yellow);
}

/* ============================================================================
 * Impact grid: larger, more prominent icons on home page
 * ============================================================================ */

/* Slightly emphasize each impact card */
.md-typeset .impact-grid > ul > li {
  border-top: 3px solid var(--courtenay-blue);
}

/* Make Lucide icons in the impact grid larger and aligned with headings */
.md-typeset .impact-grid .twemoji,
.md-typeset .impact-grid .md-icon,
.md-typeset .impact-grid svg {
  width: 1.9rem;
  height: 1.9rem;
  margin-right: 0.4rem;
  vertical-align: text-bottom;
}

/* Give the icon + heading line a bit more breathing room */
.md-typeset .impact-grid li strong {
  font-size: 1rem;
}

/* ============================================================================
 * Header school link tooltip override
 * Hide "Go to repository" tooltip and show "Visit Courtenay School" instead
 * ============================================================================ */

/* Hide the default Material tooltip for the source/repo link */
.md-source[data-md-component="source"] ~ .md-tooltip,
.md-header .md-tooltip {
  display: none !important;
}

/* Use the title attribute for a native browser tooltip instead */
.md-source[data-md-component="source"] {
  /* The title attribute will be set via JavaScript */
}

/* ============================================================================
 * Centering 
 * ============================================================================ */

 .center-title {
  text-align: center;
}

/* ============================================================================
 * Courtenay-themed info admonitions
 * ============================================================================ */

/* Use a soft Courtenay blue background for all `info` blocks */
.md-typeset .admonition.info,
.md-typeset details.info {
  background-color: var(--courtenay-blue-section);
}

.md-typeset .admonition.info > .admonition-title::before,
.md-typeset details.info > summary::before {
  /* Gradient from bright yellow to slightly darker yellow to create depth */
  background: radial-gradient(circle at 30% 30%, #fffbeb, var(--courtenay-yellow));
  transform: scale(1.33);
}

/* ============================================================================
 * Courtenay headline: hero / varsity style for key calls-to-action
 * Usage: **Show pride for your Courtenay Tigers!**{ .courtenay-headline }
 * Also styles the leading icon with matching athletic badge look.
 * ============================================================================ */

.courtenay-headline {
  font-family: "Merriweather", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--courtenay-blue);
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.08),
    0 0 24px rgba(0, 0, 0, 0.18);
  paint-order: stroke fill;
}

/* Make the top-of-page welcome line feel like a hero banner */
.md-typeset h1.courtenay-headline {
  font-size: clamp(2.4rem, 3vw + 1.4rem, 3.4rem);
  line-height: 1.1;
  margin-top: 0.2rem;
  margin-bottom: 0.7rem;
  position: relative;
}

.md-typeset h1.courtenay-headline::after {
  content: "";
  display: block;
  width: 4rem;
  height: 0.25rem;
  margin: 0.75rem auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--courtenay-yellow),
    #fff7b0,
    var(--courtenay-yellow)
  );
}

/* Emojis/icons inside the headline get the varsity badge treatment */
.courtenay-headline svg {
  color: var(--courtenay-blue);
  background: var(--courtenay-yellow);
  border-radius: 50%;
  padding: 0.1em;
}

/* Varsity badge style for list item leading icons */
.md-typeset li:has(.courtenay-headline) svg {
  color: var(--courtenay-blue);
  background: var(--courtenay-yellow);
  border-radius: 50%;
  flex-shrink: 0;
  padding: 0.1em;
}

/* Dark mode adjustment for headlines */
[data-md-color-scheme="slate"] .courtenay-headline {
  color: var(--courtenay-yellow);
  -webkit-text-stroke: 1px var(--courtenay-blue);
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.75),
    0 0 32px rgba(0, 0, 0, 0.9);
}

[data-md-color-scheme="slate"] .md-typeset h1.courtenay-headline::after {
  background: linear-gradient(
    90deg,
    var(--courtenay-yellow),
    #ffe872,
    var(--courtenay-yellow)
  );
}

/* ============================================================================
 * RSS Feed Styles
 * ============================================================================ */

/* Apply custom border to the generated cards in the feed */
#courtenay-feed .grid .card {
  border-left: 3px solid var(--courtenay-blue);
  background-color: rgba(255, 255, 255, 0.5);
}

[data-md-color-scheme="slate"] #courtenay-feed .grid .card {
  /* Use a lighter background in dark mode so the card stands out against the section */
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-left: 3px solid var(--courtenay-yellow);
}