/* =========================================================================================================
   Robosaints 1307 – modern.css
   Load AFTER bootstrap, main.css and auth.css. "Custom styles for this template" section of each HTML file.
   Edit the tokens below to retune the whole site.
   ========================================================================================================= */

:root {
  --navy:   #0A2352;   /* deep team blue: footer, headings, buttons hover */
  --blue:   #1B4DB1;   /* primary team blue: links, buttons, accents      */
  --tint:   #E6EEFB;   /* pale blue: hovers, badges, table stripes        */
  --paper:  #F4F7FC;   /* page background                                 */
  --white:  #FFFFFF;   /* cards, nav                                      */
  --line:   #D3DEF0;   /* hairlines and borders                           */
  --ink:    #0C1A33;   /* body text                                       */
  --muted:  #5B6B85;   /* secondary text                                  */
  --cut:    18px;      /* size of the signature clipped corner            */

  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  position: relative;
  padding-top: 76px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Faint engineering-grid that fades out below the page heading */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 380px;
  z-index: -1;
  background-image:
    linear-gradient(rgba(27,77,177,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,77,177,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: linear-gradient(#000 20%, transparent);
          mask-image: linear-gradient(#000 20%, transparent);
  pointer-events: none;
}

p { max-width: 70ch; }
.card p, .card-text { max-width: none; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- Type ---------- */
h1, h2, h3, h4, h5, h6,
.navbar-brand, .btn, .card-header, .auth-tabs button, th {
  font-family: var(--display);
}
h1, h2, h3, h4, h5, h6 { color: var(--navy); font-weight: 600; letter-spacing: -.01em; }

h1 { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; font-weight: 700; }
h1 small {
  font-family: var(--body);
  font-weight: 400;
  font-size: .5em;
  color: var(--muted);
  margin-left: .35em;
}
/* short slanted blue bar under every page title */
h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 5px;
  margin-top: .6rem;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
h2 { font-size: 1.75rem; margin-bottom: 1rem; }
h3 { font-size: 1.4rem; }
.text-muted, .card-subtitle { color: var(--muted) !important; }

/* ---------- Navbar ---------- */
.navbar.bg-dark {
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  padding: .55rem 0;
}
.navbar-dark .navbar-brand {
  color: var(--navy);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.navbar-dark .navbar-brand:hover { color: var(--blue); text-decoration: none; }
#navbarlogo { height: 38px; width: auto; margin: 0; }

.navbar-dark .navbar-nav .nav-link {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  font-size: .95rem;
  padding: .5rem .85rem;
  position: relative;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: var(--blue); text-decoration: none; }
@media (min-width: 992px) {
  .navbar-dark .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: .85rem; right: .85rem; bottom: .15rem;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  .navbar-dark .navbar-nav .nav-link:hover::after,
  .navbar-dark .navbar-nav .nav-link:focus::after { transform: scaleX(1); }
}
.navbar-dark .navbar-toggler { border-color: var(--line); }
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%230A2352' stroke-width='2.5' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.dropdown-menu {
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 12px 28px rgba(10,35,82,.12);
  padding: .35rem 0;
  margin-top: .5rem;
}
.dropdown-item { font-family: var(--display); font-size: .92rem; padding: .5rem 1.1rem; color: var(--ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--tint); color: var(--blue); }

/* ---------- Page heading + breadcrumb ---------- */
.breadcrumb {
  background: transparent;
  padding: 0 0 1rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font-size: .85rem;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--muted); }
.breadcrumb-item.active { color: var(--muted); }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ---------- Buttons: clipped-corner plates ---------- */
.btn {
  border-radius: 0;
  border: 0;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .6rem 1.4rem;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background-color .15s ease, color .15s ease;
}
.btn-primary, .btn-navy {
  background: var(--blue);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-navy:hover,    .btn-navy:focus,    .btn-navy:active {
  background: var(--navy) !important;
  color: #fff;
  text-decoration: none;
}
.btn-outline-secondary, .btn-outline-dark {
  background: var(--white);
  color: var(--navy);
  box-shadow: inset 0 0 0 1.5px var(--navy);
}
.btn-outline-secondary:hover, .btn-outline-dark:hover {
  background: var(--navy);
  color: #fff;
}
.btn:focus-visible { outline-offset: 3px; }

/* ---------- Cards: flat, hairline border, one clipped corner ---------- */
.card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}
.card::after {
  content: "";
  position: absolute;
  top: -1px; right: -1px;
  width: var(--cut); height: var(--cut);
  background: linear-gradient(to bottom left,
    var(--paper) 0 calc(50% - .5px),
    var(--line) calc(50% - .5px) calc(50% + .5px),
    transparent calc(50% + .5px));
  pointer-events: none;
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  color: var(--navy);
  font-weight: 600;
  font-size: 1.15rem;
  padding: 1rem 1.25rem;
}
.card-footer { background: transparent; border-top: 1px solid var(--line); }
.card-title { font-size: 1.2rem; margin-bottom: .15rem; }
.card-body { padding: 1.4rem; }
.card-img-top { border-radius: 0; }

/* Team-leader cards get the blue top edge too */
.card.text-center { border-top: 3px solid var(--blue); }
.card.text-center .card-text { text-align: left; font-size: .95rem; color: #26364f; }
.card.text-center .card-footer a { font-size: .9rem; word-break: break-all; }

/* ---------- Images ---------- */
.row > [class*="col-md-7"] img.img-fluid,
.row > [class*="col-lg-6"] img.img-fluid.rounded {
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
#sponsorphoto { max-height: 140px; width: auto; object-fit: contain; }
img[src=""] { display: none; }   /* hides broken empty-src images */
.img-thumbnail { width: 100%; height: 220px; object-fit: cover; } /* ensures all gallery images have consistent size */


/* ---------- Footer ---------- */
#bottomrow {
  background: var(--navy);
  margin-top: 4rem;
  text-align: center;
  border-top: 4px solid var(--blue);
}
#bottomrow .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin: 0 .35rem 1.25rem;
  font-size: 1.15rem;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 0;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
#bottomrow .fa:hover { background: var(--blue); border-color: var(--blue); }
#bottomrow p { font-size: .85rem; color: rgba(255,255,255,.75) !important; max-width: none; }

/* ---------- Contact page ---------- */
#contactuspage iframe { border: 1px solid var(--line) !important; filter: saturate(.85); }

/* ---------- Auth + scouting pages ---------- */
.auth-wrap { padding: 2rem 1rem; }
.auth-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: 0;
  box-shadow: none;
  padding: 2rem;
  position: relative;
}
.auth-card h1::after { display: none; }
.auth-card .sub { color: var(--muted); }
.auth-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 1.25rem; }
.auth-tabs button {
  flex: 1;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: .7rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
}
.auth-tabs button.active { color: var(--navy); border-bottom-color: var(--blue); }
.auth-link { background: none; border: 0; padding: 0; color: var(--blue); font-size: .9rem; }
.auth-link:hover { color: var(--navy); text-decoration: underline; }

.form-control, .custom-select {
  border-radius: 0;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--body);
}
.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27,77,177,.18);
}
label { font-size: .88rem; font-weight: 500; color: var(--navy); }

.alert { border-radius: 0; border-width: 0 0 0 4px; }
.role-badge {
  font-family: var(--display);
  font-size: .75rem;
  padding: .15rem .55rem;
  background: var(--tint);
  color: var(--muted);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
}
.role-badge.member { background: var(--blue); color: #fff; }

.scout-table { font-variant-numeric: tabular-nums; background: var(--white); }
.scout-table th {
  background: var(--navy);
  color: #fff;
  font-weight: 500;
  font-size: .85rem;
  border: 0;
  white-space: nowrap;
}
.scout-table td { border-top: 1px solid var(--line); }
.scout-table tbody tr:nth-child(even) { background: var(--paper); }
.scout-table tbody tr:hover { background: var(--tint); }
.qr-box { display: inline-block; padding: .75rem; background: #fff; border: 1px solid var(--line); }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--blue); border-color: var(--blue); }

/* ---------- Motion: one small page-load reveal, respects user settings ---------- */
@media (prefers-reduced-motion: no-preference) {
  h1::after { animation: draw .6s .1s ease-out both; transform-origin: left; }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ---------- Small screens ---------- */
@media (max-width: 991px) {
  .navbar-collapse { padding: .5rem 0 1rem; }
  .navbar-brand { font-size: .95rem; max-width: 80%; white-space: normal; line-height: 1.2; }
}

/* ==========================================================
   Fixes (round 2)
   ========================================================== */

/* Nav: keep each link on one line; let a long team name wrap instead */
.navbar-dark .navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 992px) {
  .navbar-dark .navbar-brand { flex: 0 1 auto; max-width: 46%; white-space: normal; line-height: 1.2; font-size: .95rem; }
  .navbar-dark .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; font-size: .92rem; }
  .navbar-dark .navbar-nav .nav-link::after { left: .6rem; right: .6rem; }
}

/* Robots page: until real photos replace the dead placehold.it images,
   hide the empty image column and let the text use the full width */
.row > [class*="col-md-7"]:has(img[src*="placehold.it"]) { display: none; }
.row > [class*="col-md-7"]:has(img[src*="placehold.it"]) + [class*="col-md-5"] { flex: 0 0 100%; max-width: 100%; }

/* ==========================================================
   Fixes (round 3) – rules carried over from the old main.css
   ========================================================== */

/* Homepage carousel (this was the missing piece) */
.carousel-item {
  height: 70vh;
  min-height: 300px;
  background: no-repeat center center scroll;
  background-size: cover;
}
header .carousel {
  border-bottom: 4px solid var(--blue);
  /* signature clipped corner, scaled up for the hero */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%);
}
.carousel-indicators li {
  width: 36px;
  height: 4px;
  border: 0;
  background: #fff;
  opacity: .55;
}
.carousel-indicators li.active { opacity: 1; background: #fff; }
.carousel-control-prev, .carousel-control-next { width: 8%; }
.carousel-control-prev-icon, .carousel-control-next-icon {
  background-color: rgba(10,35,82,.65);
  background-size: 50% 50%;
  width: 44px; height: 44px;
}

/* If main.css is still loaded on some pages, keep its old colour rules from fighting the new theme */
#contactuspage { color: var(--ink); }
#homepage-text { color: var(--ink); }
#sponsorphoto { width: auto; max-width: 100%; }
.dropdown-item { opacity: 1; }


/* ==========================================================
   Fixes (round 4) – nav links went white (invisible) on click
   Bootstrap's dark navbar sets white text for these states;
   our nav is white, so keep them blue instead.
   ========================================================== */
.navbar-dark .navbar-nav .nav-link:active,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .active > .nav-link {
  color: var(--blue);
}

/* keep the underline visible on the current page and open dropdowns */
@media (min-width: 992px) {
  .navbar-dark .navbar-nav .nav-link.active::after,
  .navbar-dark .navbar-nav .nav-link.show::after,
  .navbar-dark .navbar-nav .show > .nav-link::after {
    transform: scaleX(1);
  }
}