/* ======================================================
   Currituck Digital Patriotic LIGHT Theme
   File: /assets/css/styles.css
   Bootstrap 5.x compatible
   ====================================================== */

:root {

  --patriot-blue: #1f3c88;
  --patriot-blue-soft: #e8efff;

  --patriot-red: #b22234;
  --patriot-red-soft: #fde8ea;

  --patriot-gray: #6c757d;

  --card-bg: #ffffff;
  --card-border: #d9e2f3;

  --text-main: #1b1f23;
  --text-muted: #6c757d;

  --shadow-soft: 0 6px 18px rgba(0,0,0,0.08);

}


/* ======================================================
   GLOBAL
   ====================================================== */

body {

  background:
    linear-gradient(
      to bottom,
      #ffffff 0%,
      #f3f6fb 100%
    );

  color: var(--text-main);

  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

}


/* ======================================================
   HERO
   ====================================================== */

.patriot-hero {

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #eef3ff 100%
    );

  border:1px solid var(--card-border);

  box-shadow:var(--shadow-soft);

  position:relative;

}


/* subtle patriotic stripe accent */

.patriot-hero::after {

  content:"";

  position:absolute;

  bottom:0;
  left:0;
  right:0;

  height:4px;

  background:
    linear-gradient(
      90deg,
      var(--patriot-red),
      white,
      var(--patriot-blue)
    );

}


/* ======================================================
   BADGE
   ====================================================== */

.brand-badge {

  display:inline-flex;

  align-items:center;

  gap:.5rem;

  padding:.35rem .75rem;

  border-radius:999px;

  background:var(--patriot-blue-soft);

  border:1px solid var(--card-border);

  font-size:.85rem;

}


.brand-dot {

  width:.6rem;
  height:.6rem;

  border-radius:50%;

  background:var(--patriot-red);

}


/* ======================================================
   CARDS
   ====================================================== */

.card-patriot {

  background:var(--card-bg);

  border:1px solid var(--card-border);

  box-shadow:var(--shadow-soft);

}


/* ======================================================
   SECTION TITLE
   ====================================================== */

.section-title {

  text-transform:uppercase;

  letter-spacing:.08em;

  font-size:.85rem;

  font-weight:600;

  color:var(--patriot-blue);

  position:relative;

}


/* red white blue underline */

.section-title::after {

  content:"";

  display:block;

  margin-top:6px;

  height:3px;

  width:70px;

  background:
    linear-gradient(
      90deg,
      var(--patriot-red),
      white,
      var(--patriot-blue)
    );

}


/* ======================================================
   COUNTY TILES
   ====================================================== */

.link-tile {

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:.75rem .9rem;

  border-radius:10px;

  border:1px solid var(--card-border);

  text-decoration:none;

  background:#ffffff;

  color:var(--text-main);

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background .12s ease;

}


.link-tile:hover {

  transform:translateY(-2px);

  background:#f4f7ff;

  box-shadow:0 6px 14px rgba(0,0,0,0.08);

}


.link-tile .name {

  font-weight:600;

}


.arrow {

  color:var(--patriot-red);

  font-weight:bold;

}


/* ======================================================
   BUTTONS
   ====================================================== */

.btn-patriot {

  background:var(--patriot-red);

  color:white;

  border:none;

}


.btn-patriot:hover {

  background:#941b2c;

  color:white;

}


.btn-outline-patriot {

  border:2px solid var(--patriot-blue);

  color:var(--patriot-blue);

  background:white;

}


.btn-outline-patriot:hover {

  background:var(--patriot-blue-soft);

}


/* ======================================================
   TEXT HELPERS
   ====================================================== */

.subtle {

  color:var(--text-muted);

}


.kbd-hint {

  font-size:.75rem;

  padding:.15rem .4rem;

  border-radius:6px;

  border:1px solid #e0e6f5;

  background:#f4f7ff;

}


/* ======================================================
   FOOTER
   ====================================================== */

.footer {

  border-top:1px solid var(--card-border);

  color:var(--text-muted);

}


.footer a {

  color:var(--patriot-blue);

  text-decoration:none;

  font-weight:500;

}


.footer a:hover {

  text-decoration:underline;

}


/* ======================================================
   MOBILE TUNING
   ====================================================== */

@media (max-width:768px) {

  .patriot-hero h1 {
    font-size:1.5rem;
  }

  .link-tile {
    font-size:.95rem;
  }

}