/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Our default values set as CSS variables */

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}

.btn--remix img {
  margin-right: 0.5rem;
}

.btn--remix:hover {
  background-color: #d0fff1;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}

.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

.divider {
  padding: 0 1rem;
}

/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

/* Reset + base styles */
body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background-color: #fff;
  color: #333;
  line-height: 1.6;
}

/* 🐻 Bears: navy + orange */
body.bears {
  background: linear-gradient(135deg, #0b162a, #e64100);
}

/* 🐺 Jets: green + white */
body.jets {
  background: linear-gradient(135deg, #125740, #ffffff);
}

/* 🐺 Chiefs: red + gold */
body.chiefs {
  background: linear-gradient(135deg, #ff0000, #ffcc00);
}

/* 🐱 Laila’s Library (example: purple + aqua) */
body.lailaslibrary {
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}

/* Ensure sections and cards sit nicely on gradient */
.section,
.wrapper,
.team-page,
.post-article {
  background: rgba(255, 255, 255, 0.85);
  /* translucent white overlay */
  border-radius: 16px;
  backdrop-filter: blur(4px);
  padding: 1rem;
  margin: 1rem auto;
  max-width: 900px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}



main {
  padding: 1rem;
}

h1,
h2,
h3 {
  font-weight: bold;
  color: #2c3e50;
}

a {
  color: #007acc;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Apply a gradient background to the whole page */
body {
  margin: 0;
  font-family: "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #cfd9df, #e2ebf0);
  background-attachment: fixed;
  color: #333;
  line-height: 1.6;
}

/* Give all main content a max width and center it */
main {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
}

/* Navigation SECTION - sits on top of gradient */

.site-nav {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
}

.nav-toggle {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  display: none;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nav-links li a {
  text-decoration: none;
  color: #2c3e50;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.nav-links li a:hover {
  background-color: #e3f2fd;
}

/* HERO SECTION - sits on top of gradient */
.hero {
  position: relative;
  border-radius: 20px;
  margin-top: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  background-color: rgba(0, 0, 0, 0.55);
  padding: 1rem 1.5rem;
  border-radius: 12px;
  text-align: center;
  width: 90%;
  max-width: 500px;
}

.hero-text h1 {
  font-size: 2rem;
  margin: 0;
}

.hero-text p {
  font-size: 1rem;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.team-hero__text h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem);
  line-height: 1.15;
  letter-spacing: .2px;
}

.lewHdr {
  color: #0f6246;
}

.lailaHdr {
  color: rgb(180, 9, 100);
}


.team-hero__text p {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.65;
  color: rgba(0, 0, 0, .8);
}






/* COMIC STYLING - COMIC STYLING */
/* ====== THEME & TOKENS ====== */
:root {
  --bg-start: #3a3ac2;
  /* deep periwinkle */
  --bg-mid: #0080FF;
  /* azure */
  --bg-end: #00FFFF;
  /* aqua */
  --ink: #222;
  /* main text */
  --ink-soft: #5b5b5b;
  /* secondary text */
  --panel: #ffffff;
  /* panel card */
  --line: #333;
  /* comic stroke */
  --accent-1: #C71585;
  /* magenta title */
  --accent-2: #ff69b4;
  /* hot pink */
  --accent-3: #ffb703;
  /* warm yellow */
  --accent-4: #6ee7b7;
  /* mint */
  --cat-bubble: #ffe6f2;
  /* pink tint */
  --coyote-bubble: #e6f3ff;
  /* blue tint */
  --warning: #ff4444;
  /* score chip */

  /* Type scales */
  --step--1: clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
  --step-0: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --step-1: clamp(1.25rem, 1rem + 1.2vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
  --step-3: clamp(2rem, 1.5rem + 3vw, 3rem);

  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .25);
  --shadow-soft: 0 6px 18px rgba(0, 0, 0, .15);
  --stroke: 4px;
  /* comic border width */
}

/* ====== GLOBAL ====== */
/* html,body{height:100%;} */
.body_comics {
  margin: 0;
  font-family: "Comic Sans MS", "Comic Neue", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 55%, var(--bg-end) 100%);
  padding: 16px;
}

.container_comics {
  max-width: 980px;
  margin-top: 50px;
  margin-inline: auto;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px);
  outline: var(--stroke) solid #0000;
  /* space for fun border on focus */
}

/* ====== HEADER ====== */
.header_comics {
  text-align: center;
  margin-bottom: clamp(12px, 2.5vw, 24px);
}

.title_comics {
  font-size: var(--step-3);
  color: var(--accent-1);
  margin: 0 0 6px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .08);
  letter-spacing: 0.5px;
}

.subtitle_comics {
  font-size: var(--step-0);
  color: var(--ink-soft);
  margin: 0 0 10px;
  font-style: italic;
}

.meta_comics {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

.chip_comics {
  background: linear-gradient(180deg, #fff, #f7f7f7);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ====== GRID (MOBILE FIRST) ====== */
.grid_comics {
  display: grid;
  grid-template-columns: 1fr;
  /* phones: single column */
  gap: 14px;
}

@media (min-width: 560px) {
  .grid_comics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .grid_comics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ====== PANELS ====== */
.panel_comics {
  position: relative;
  background: var(--panel);
  border: var(--stroke) solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 220px;
  content-visibility: auto;
  /* perf win */
}

.panel_comics:focus-within {
  outline: 4px dashed var(--accent-2);
  outline-offset: 4px;
}

.panel_comics.beginning_comics {
  border-color: #ff1493;
}

.panel_comics.middle_comics {
  border-color: #ff00ff;
}

.panel_comics.end_comics {
  border-color: #ff69b4;
}

.num_comics {
  position: absolute;
  inset: -10px auto auto -10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #993c6b;
  color: #fff;
  font-weight: 700;
  border: 3px solid var(--line);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

.tv_comics {
  text-align: center;
  font-weight: 700;
  letter-spacing: .2px;
  background: #333;
  color: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  font-size: var(--step--1);
}

.art_comics {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 2px;
}

.art_comics .img_comics {
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 12px;
  border: 3px solid var(--line);
  object-fit: cover;
  aspect-ratio: 4/3;
}

.score_comics {
  margin-inline: auto;
  font-weight: 800;
  text-align: center;
  background: var(--warning);
  color: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  border: 2px solid var(--line);
  width: fit-content;
  font-size: var(--step--1);
}

/* ====== DIALOG BUBBLES ====== */
.row_comics {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.bubble_comics {
  position: relative;
  max-width: 70%;
  background: #fff;
  border: 3px solid var(--line);
  border-radius: 16px;
  padding: 8px 12px;
  font-size: var(--step--1);
  line-height: 1.25;
}

.bubble_comics.cat {
  background: var(--cat-bubble);
}

.bubble_comics.coyote {
  background: var(--coyote-bubble);
  margin-left: auto;
}

/* tails */
.bubble_comics.cat::after,
.bubble_comics.coyote::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 14px;
  height: 14px;
  background: inherit;
  border: 3px solid var(--line);
  transform: rotate(45deg);
}

.bubble_comics.cat::after {
  left: 14px;
  border-top: none;
  border-right: none;
}

.bubble_comics.coyote::after {
  right: 14px;
  border-top: none;
  border-left: none;
}

.thought_comics {
  font-style: italic;
  border-style: dashed;
  opacity: .9;
}

.emote_comics {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* ====== HOVER FUN (desktop only) ====== */
@media (hover:hover) {
  .panel_comics {
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .panel_comics:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .25);
  }
}

/* ====== ACCESSIBILITY ====== */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important
  }
}

/* ====== FOOTER ====== */
.footer_comics {
  text-align: center;
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 10px;
  font-size: var(--step--1);
}

.byline_comics {
  font-weight: 700;
  color: var(--ink);
  font-style: normal;
}

/* ====== PRINT (optional) ====== */
@media print {
  .body_comics {
    background: #fff;
  }

  .container_comics {
    box-shadow: none;
    border: 0;
  }
}

/* Video section */
.game-video {
  max-width: 900px;
  margin: 1.25rem auto 2rem;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.game-video__frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  /* Maintain a nice frame even before video paints */
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .02));
}

.game-video__el {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* crops gently if poster/video ratio differs */
}

.game-video__caption {
  margin: .75rem 0 0;
  font-size: .95rem;
  color: rgba(0, 0, 0, .7);
  text-align: center;
}

/* Slight team accent on focus/controls hover if you want */
body.bears .game-video {
  outline: 2px solid rgba(230, 65, 0, .08);
}

body.jets .game-video {
  outline: 2px solid rgba(18, 87, 64, .08);
}

body.chiefs .game-video {
  outline: 2px solid rgba(255, 0, 0, .08);
}



/* SECTION STYLING - float on top of gradient */
/* .section {
  margin-top: 2rem;
  padding: 1rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} */

/* Flex layout for profile image and text */
.section-flexbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.sectionHmPgImg {
  width: 100%;
  margin: 72px auto 1.5rem;
  max-width: 500px;
  height: auto;
  border-radius: 12px;
}


/* Responsive image styling */
.section-img {
  width: 100%;
  max-width: 180px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Text content */
.section-text {
  text-align: center;
}

.section-para {
  padding: 0 1rem;
  font-size: 1rem;
}

/* Links */
.section-text a {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: bold;
  color: #007acc;
}


/* Post image layout: consistent spacing and aspect behavior */
.post-images {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  align-items: start;
  margin: 1rem 0 1.5rem;
}

.post-reporter {
  width: 140px;
  aspect-ratio: 1 / 1;
  /* keep avatars square */
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.post-hero {
  width: 100%;
  aspect-ratio: 4 / 5;
  /* 1080x1350 = 4:5; crops gently on wide screens */
  object-fit: cover;
  border-radius: 12px;
  display: block;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* Optional image caption helper */
.img-caption {
  font-size: .9rem;
  color: #666;
  margin-top: .35rem;
}

/* Stack images on narrow screens */
@media (max-width: 640px) {
  .post-images {
    grid-template-columns: 1fr;
  }

  .post-reporter {
    width: 120px;
    justify-self: start;
  }
}

.back-link {
  display: inline-block;
  margin-top: 1.5rem;
  font-weight: bold;
  color: #007acc;
}

/* Team page */
.team-page {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.latest-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 1rem 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.older-posts ul {
  list-style: none;
  padding-left: 0;
}

.older-posts li {
  padding: 0.5rem 0;
}

.older-posts a {
  font-weight: bold;
  color: #007acc;
}


/*ABOUT US SECTION*/
.about-hero {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.about-hero-img {
  width: 100%;
  max-width: 450px;
  /* Keeps portrait shape from taking over on desktop */
  height: auto;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  object-fit: contain;
}

.about-hero-img:hover {
  transform: scale(1.03);
}

.about-intro {
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
  margin: 1rem auto;
  max-width: 700px;
}

.about-loves {
  margin: 2rem auto;
  text-align: center;
}

.about-loves h2 {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.love-list {
  list-style: none;
  padding: 0;
  font-size: 1.1rem;
}

.love-list li {
  margin-bottom: 0.75rem;
  background: #fefefe;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease;
}

.love-list li:hover {
  background: #e3f2fd;
}

.about-signoff {
  margin: 2rem auto;
  text-align: center;
  font-style: italic;
  color: #555;
  max-width: 700px;
}





/* Footer with contrast on gradient */
footer {
  margin-top: 2rem;
  padding: 1rem;
  text-align: center;
  background-color: rgba(240, 240, 240, 0.9);
  font-size: 0.9rem;
  border-top: 1px solid #ccc;
  border-radius: 12px;
}

/* RESPONSIVE HERO */

/* MOBILE STYLES */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  .nav-container {

    justify-content: start;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  .nav-links.show {
    display: flex;
  }

  .nav-links li {
    text-align: center;
    padding: 0.5rem 0;
  }
}



@media (min-width: 768px) {

  .hero {
    height: 420px;
  }

  .hero-text h1 {
    font-size: 3rem;
  }

  .hero-text p {
    font-size: 1.2rem;
  }

  .section {
    padding: 2rem;
  }

  .section-flexbox {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }

  .section-text {
    flex: 1;
  }
}

/* Link styles */
a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  text-decoration: none;
  border-bottom: 6px solid var(--color-primary);
  color: var(--foreground);
  transition: background 0.2s linear;
}

a:hover {
  background: var(--color-primary);
}

/* Title style adjustments */
.title-lg {
  color: var(--color-text-main);
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  line-height: 1.5;
}

.title-md {
  font-size: 56px;
}

/* Layout: Home */
.home {
  justify-content: left;
}

.illo-container {
  display: flex;
  justify-content: flex-end;
}

.illustration {
  max-width: 180px;
  max-height: var(--image-max-width);
  margin-top: 1rem;
  margin-right: 2rem;
  transform: rotate(16deg);
}

/* Post */
.post {
  place-items: normal;
}

.postTitle {
  font-size: 4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.controls {
  margin: 3rem 0 2rem;
}