/* ==========================================================================
   2026-2027 Service Academy Nomination page - Congressman Hank Johnson (GA-04)
   Paste into a CSS Asset Injector limited to this page path.
   Pairs with: service-academy-page.html
   ========================================================================== */

/* --------------------------------------------------------------------------
   PLEASE CONFIRM BEFORE PUBLISHING

   1. DUPLICATED DATES. The deadline and interview dates now appear twice -
      once in the "Dates to Remember" panel and once in the body, per the
      office's request. If either date changes it must be updated in BOTH
      places. Search the HTML for "October 26, 2026" and "November 14, 2026".

   2. LABEL TEXT. The panel labels "Application Deadline" and "Interview
      Process" are taken verbatim from the document's own section headings
      rather than newly written, to keep the source wording intact.

   3. "Dates to Remember" is new text, added at the office's request. It does
      not appear in the source document.

   4. TRAILING PERIOD. The document ends the interview date with a period
      ("Saturday, November 14, 2026."). It is carried through unchanged into
      the panel rather than silently dropped. It reads a little oddly as a
      display date - say the word and it can be removed in the panel only,
      leaving the body sentence untouched.

   5. APPLICATION PDFs are the existing files from the live page, per "the
      application is to remain the same." Swap the href only if a renamed
      2026-2027 PDF is uploaded; the visible link text stays as the document
      has it.

   6. VISITED LINKS. Every link rule declares :link, :visited, :hover, :focus
      and :active with the same color, scoped under #service-academy-page
      (specificity 1,2,0) so the theme's own a:visited rule cannot win and no
      color shifts after a click.

   7. PALETTE. #007bff and #0084d7 are used only as fills behind white text,
      never as text on white - both fall under 4.5:1 against white (WCAG 1.4.3).
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

#service-academy-page {
  font-size: 1.125rem;
  line-height: 1.65;
}

#service-academy-page h2 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-top: 2rem;
}

#service-academy-page h3 {
  font-size: 1.25rem;
  line-height: 1.3;
}

#service-academy-page li {
  margin-bottom: 0.5rem;
}


/* --------------------------------------------------------------------------
   Hero - video and dates panel share one solid box
   -------------------------------------------------------------------------- */

#service-academy-page .academy-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  background-color: #00264a;
  border-radius: 6px;
  padding: 1.5rem;
  margin: 0 0 2rem 0;
}

/* Basis values are deliberately small. The theme's content column is roughly
   730px; 300 + 240 + 24 gap + 48 padding = 612, so the two sit on one line
   with room to spare and only wrap on genuinely narrow screens. */
#service-academy-page .academy-hero__video {
  flex: 1 1 300px;
  min-width: 0;
}

#service-academy-page .academy-video {
  margin: 0;
}

/* Responsive 16:9 frame - replaces the fixed 560x315 so it cannot overflow */
#service-academy-page .academy-video iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 4px;
}


/* --------------------------------------------------------------------------
   Dates to Remember panel
   Date sits on its own larger line, what it is for on the line beneath.
   -------------------------------------------------------------------------- */

#service-academy-page .academy-hero__dates {
  flex: 1 1 240px;
  min-width: 0;
  background-color: #0b3d91;
  border-radius: 4px;
  padding: 1.25rem;
}

#service-academy-page .academy-dates__title {
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid #f2071f;
  color: #ffffff;
  font-size: 1.25rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#service-academy-page .academy-date {
  margin: 0 0 1.25rem 0;
}

#service-academy-page .academy-date:last-child {
  margin-bottom: 0;
}

#service-academy-page .academy-date__day {
  margin: 0;
  color: #ffffff;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
}

#service-academy-page .academy-date__label {
  margin: 0.2rem 0 0 0;
  color: #ffffff;
  font-size: 0.9375rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* --------------------------------------------------------------------------
   Key dates in the body - larger and bold
   Applied through the existing <strong> because <span class> is not on the
   allowed attribute list, so both dates stay bold even without this CSS.
   -------------------------------------------------------------------------- */

#service-academy-page .academy-key-date {
  margin-bottom: 1rem;
}

#service-academy-page .academy-key-date strong {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
  color: #00264a;
}


/* --------------------------------------------------------------------------
   Inline body links - identical color before and after visiting
   -------------------------------------------------------------------------- */

#service-academy-page a:link,
#service-academy-page a:visited {
  color: #0b3d91;
  text-decoration: underline;
}

#service-academy-page a:hover,
#service-academy-page a:focus,
#service-academy-page a:active {
  color: #00264a;
  text-decoration: underline;
}

#service-academy-page a:focus-visible {
  outline: 3px solid #f2071f;
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   Application forms callout
   -------------------------------------------------------------------------- */

#service-academy-page .academy-apply-callout {
  border: 3px solid #0b3d91;
  background-color: #f2f6fc;
  border-radius: 6px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}

#service-academy-page .academy-apply-callout h3 {
  margin: 0 0 0.75rem 0;
}

#service-academy-page .academy-apply-callout h3:last-child {
  margin-bottom: 0;
}

/* Primary button - filled, white text, unchanged when visited */
#service-academy-page .academy-apply-link:link,
#service-academy-page .academy-apply-link:visited {
  display: block;
  text-align: center;
  font-size: 1.375rem;
  font-weight: 700;
  text-decoration: none;
  padding: 1rem 1.25rem;
  border-radius: 4px;
  background-color: #0b3d91;
  color: #ffffff;
  border: 3px solid #0b3d91;
}

#service-academy-page .academy-apply-link:hover,
#service-academy-page .academy-apply-link:focus,
#service-academy-page .academy-apply-link:active {
  background-color: #00264a;
  border-color: #00264a;
  color: #ffffff;
  text-decoration: underline;
}

#service-academy-page .academy-apply-link:focus-visible {
  outline: 3px solid #f2071f;
  outline-offset: 3px;
}

/* Secondary button - outlined, inverts on hover */
#service-academy-page .academy-apply-link--secondary:link,
#service-academy-page .academy-apply-link--secondary:visited {
  background-color: #ffffff;
  color: #0b3d91;
  border-color: #0b3d91;
}

#service-academy-page .academy-apply-link--secondary:hover,
#service-academy-page .academy-apply-link--secondary:focus,
#service-academy-page .academy-apply-link--secondary:active {
  background-color: #0b3d91;
  color: #ffffff;
  border-color: #0b3d91;
}

/* OPTIONAL: if the theme still fights the white background on the secondary
   button, delete the two --secondary blocks above and use this instead - both
   buttons filled, hierarchy carried by color weight:

   #service-academy-page .academy-apply-link--secondary:link,
   #service-academy-page .academy-apply-link--secondary:visited {
     background-color: #2b446b;
     border-color: #2b446b;
     color: #ffffff;
   }
*/


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Dates panel stacks below the video on small screens. Kept at 620px so the
   pair stays on one line at the theme's normal content width. */
@media (max-width: 620px) {
  #service-academy-page .academy-hero {
    padding: 1rem;
    gap: 1rem;
  }

  #service-academy-page .academy-hero__dates {
    padding: 1rem;
  }
}

@media (max-width: 640px) {
  #service-academy-page {
    font-size: 1.1875rem;
  }

  #service-academy-page h2 {
    font-size: 1.5rem;
  }

  #service-academy-page .academy-date__day {
    font-size: 1.3125rem;
  }

  #service-academy-page .academy-key-date strong {
    font-size: 1.3125rem;
  }

  #service-academy-page .academy-apply-link:link,
  #service-academy-page .academy-apply-link:visited {
    font-size: 1.25rem;
    padding: 1.125rem 1rem;
  }
}