/* =========================================================================
   AutoDrug brand layer
   Derived directly from AutoDrug_navy_template.potx (theme "AutoDrug").
   Load AFTER bootstrap.min.css. Overrides only colour + type; the Bootstrap
   grid and component structure are left intact.
   ========================================================================= */

:root {
  /* --- Palette: exact values from the deck's clrScheme --- */
  --ad-navy:        #1B2A4A;  /* dk2 / accent3  - cover + closing bg, titles */
  --ad-navy-deep:   #16223C;  /* hover state, not in deck                    */
  --ad-ink:         #202A3C;  /* dk1            - body copy                  */
  --ad-seal:        #C2272F;  /* accent1        - seal red, eyebrow labels   */
  --ad-seal-deep:   #A01F26;
  --ad-steel:       #4A6FA5;  /* accent2 / hlink                             */
  --ad-steel-light: #6B8DBF;  /* accent5        - subtitle on navy           */
  --ad-grey:        #5A6678;  /* accent6 / folHlink - meta, footers          */
  --ad-amber:       #B0741A;  /* accent4                                     */
  --ad-tint:        #EBF0F8;  /* lt2            - card fill                  */
  --ad-tint-deep:   #DDE6F3;  /* section-divider bg                          */
  --ad-line:        #D5DEEC;  /* hairline, derived                           */
  --ad-white:       #FFFFFF;

  /* --- Type: majorFont Cambria, minorFont Calibri (both system fonts,
         so no webfont CDN is needed — important for the .ltd deployment) --- */
  --ad-serif: Cambria, "Cambria Math", Constantia, Georgia, "Times New Roman",
              "Songti SC", SimSun, serif;
  --ad-sans:  Calibri, "Segoe UI", -apple-system, BlinkMacSystemFont,
              "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
              "Hiragino Sans GB", Arial, sans-serif;

  --ad-radius: 10px;   /* deck uses roundRect throughout */
  --ad-shadow: 0 6px 22px rgba(27, 42, 74, .10);
  --ad-shadow-lg: 0 14px 38px rgba(27, 42, 74, .16);
}

/* ---------------------------------------------------------------- base --- */

body {
  font-family: var(--ad-sans);
  color: var(--ad-ink);
  background-color: var(--ad-white);
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: base.html already puts `mt-auto` on the footer, but it
     only bites once the body is a column flex container. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ad-serif);
  color: var(--ad-navy);
  font-weight: 700;
  letter-spacing: -.005em;
}

/* Deck ratio: 32pt title against 15pt body. */
h1, .h1 { font-size: 2.6rem;  line-height: 1.15; }
h2, .h2 { font-size: 2.05rem; line-height: 1.2;  }
h3, .h3 { font-size: 1.45rem; line-height: 1.3;  }
h4, .h4 { font-size: 1.2rem;  line-height: 1.35; }

p { line-height: 1.65; }

/* Theme link colours — scoped with :not(.btn) so they never leak into
   anchors rendered as buttons. Bootstrap owns .btn label colour. */

a:not(.btn)         { color: var(--ad-steel); }
a:not(.btn):visited { color: var(--ad-steel); }   /* no folHlink grey — this is an app, not a site */
a:not(.btn):hover   { color: var(--ad-navy);  }
a:not(.btn):focus   { color: var(--ad-navy);  }


hr { border-top: 1px solid var(--ad-line); }

::selection { background: var(--ad-tint-deep); color: var(--ad-navy); }

/* ------------------------------------------------------- brand utilities -- */

/* The deck's "SECTION LABEL": Calibri 10.5pt, bold, tracked out, seal red. */
.ad-eyebrow {
  font-family: var(--ad-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ad-seal);
  margin-bottom: .6rem;
  display: block;
}
.ad-eyebrow--steel { color: var(--ad-steel); }
.ad-eyebrow--light { color: var(--ad-steel-light); }

/* The deck's footer line: Calibri 9pt, grey. */
.ad-meta {
  font-size: .82rem;
  color: var(--ad-grey);
  letter-spacing: .02em;
}

/* Card = roundRect filled lt2, with a 0.42" accent square top-left. */
.ad-card {
  background: var(--ad-tint);
  border: 1px solid transparent;
  border-radius: var(--ad-radius);
  padding: 1.75rem;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ad-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ad-shadow);
  border-color: var(--ad-line);
}
.ad-card__marker {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--ad-seal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ad-white);
  margin-bottom: 1rem;
  flex-shrink: 0;
}
/* Marker colours cycle red -> steel -> navy, exactly as in layout 05/06. */
.ad-card--1 .ad-card__marker { background: var(--ad-seal);  }
.ad-card--2 .ad-card__marker { background: var(--ad-steel); }
.ad-card--3 .ad-card__marker { background: var(--ad-navy);  }
.ad-card--4 .ad-card__marker { background: var(--ad-amber); }

.ad-card h3, .ad-card h4 { color: var(--ad-navy); }
.ad-card p               { color: var(--ad-grey); margin-bottom: 0; }

/* Metric: Cambria 40pt in a rotating accent colour. */
.ad-metric__value {
  font-family: var(--ad-serif);
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ad-seal);
}
.ad-metric__label {
  font-size: .92rem;
  color: var(--ad-grey);
  margin-top: .4rem;
}

/* Section backgrounds, mirroring the deck's three slide grounds. */
.ad-bg-white { background-color: var(--ad-white); }
.ad-bg-tint  { background-color: var(--ad-tint); }
.ad-bg-panel { background-color: var(--ad-tint-deep); }
.ad-bg-navy  { background-color: var(--ad-navy); color: var(--ad-white); }
.ad-bg-navy h1, .ad-bg-navy h2, .ad-bg-navy h3,
.ad-bg-navy h4, .ad-bg-navy h5 { color: var(--ad-white); }
.ad-bg-navy p                  { color: var(--ad-steel-light); }

/* --------------------------------------------------------------- navbar --- */

.navbar.bg-primary,
.bg-primary { background-color: var(--ad-navy) !important; }

.navbar-dark .navbar-brand {
  font-family: var(--ad-serif);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: .01em;
  color: var(--ad-white);
}
.navbar-dark .navbar-brand:hover { color: var(--ad-white); }
.navbar-dark .navbar-brand img   { margin-right: .55rem; }

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
  letter-spacing: .01em;
  padding-left: .85rem;
  padding-right: .85rem;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus  { color: var(--ad-white); }
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active { color: var(--ad-white); }

.navbar { box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }

/* --------------------------------------------------------------- buttons -- */

.btn {
  font-family: var(--ad-sans);
  font-weight: 600;
  letter-spacing: .015em;
  border-radius: 6px;
}

.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--ad-navy);
  border-color: var(--ad-navy);
  color: var(--ad-white);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--ad-navy-deep);
  border-color: var(--ad-navy-deep);
  box-shadow: none;
}

.btn-secondary          { background-color: var(--ad-grey);  border-color: var(--ad-grey);  }
.btn-secondary:hover    { background-color: #4A5566;         border-color: #4A5566;         }
.btn-info               { background-color: var(--ad-steel); border-color: var(--ad-steel); }
.btn-info:hover         { background-color: #3D5C8A;         border-color: #3D5C8A;         }
.btn-danger             { background-color: var(--ad-seal);  border-color: var(--ad-seal);  }
.btn-danger:hover       { background-color: var(--ad-seal-deep); border-color: var(--ad-seal-deep); }
.btn-success            { background-color: #2E7D5B;         border-color: #2E7D5B;         }
.btn-success:hover      { background-color: #256648;         border-color: #256648;         }
.btn-warning            { background-color: var(--ad-amber); border-color: var(--ad-amber); color: var(--ad-white); }
.btn-warning:hover      { background-color: #96620F;         border-color: #96620F;         color: var(--ad-white); }

.btn-outline-primary        { color: var(--ad-navy);  border-color: var(--ad-navy);  }
.btn-outline-primary:hover  { background-color: var(--ad-navy);  border-color: var(--ad-navy);  color: var(--ad-white); }
.btn-outline-secondary      { color: var(--ad-grey);  border-color: var(--ad-line);  }
.btn-outline-secondary:hover{ background-color: var(--ad-grey);  border-color: var(--ad-grey);  color: var(--ad-white); }
.btn-outline-danger         { color: var(--ad-seal);  border-color: var(--ad-seal);  }
.btn-outline-danger:hover   { background-color: var(--ad-seal);  border-color: var(--ad-seal);  color: var(--ad-white); }

/* Seal-red call to action — the landing page's primary CTA. */
.btn-ad-seal {
  background-color: var(--ad-seal);
  border-color: var(--ad-seal);
  color: var(--ad-white);
}
.btn-ad-seal:hover,
.btn-ad-seal:focus {
  background-color: var(--ad-seal-deep);
  border-color: var(--ad-seal-deep);
  color: var(--ad-white);
}

.btn:focus, .btn.focus { box-shadow: 0 0 0 .2rem rgba(74, 111, 165, .35); }

/* ------------------------------------------------- cards, tables, badges -- */

.card {
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-radius);
  box-shadow: 0 1px 2px rgba(27, 42, 74, .04);
}
.card-header {
  background-color: var(--ad-tint);
  border-bottom: 1px solid var(--ad-line);
  font-family: var(--ad-serif);
  font-weight: 700;
  color: var(--ad-navy);
}
.card-title { font-family: var(--ad-serif); color: var(--ad-navy); }

.table thead th {
  background-color: var(--ad-tint);
  color: var(--ad-navy);
  border-bottom: 2px solid var(--ad-line);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
}
.table td, .table th   { border-top: 1px solid var(--ad-line); }
.table-hover tbody tr:hover { background-color: var(--ad-tint); }

.badge-primary   { background-color: var(--ad-navy);  }
.badge-secondary { background-color: var(--ad-grey);  }
.badge-info      { background-color: var(--ad-steel); }
.badge-danger    { background-color: var(--ad-seal);  }
.badge-warning   { background-color: var(--ad-amber); color: var(--ad-white); }

.alert           { border-radius: var(--ad-radius); border-width: 1px; }
.alert-info      { background-color: var(--ad-tint); border-color: var(--ad-line); color: var(--ad-navy); }

.text-primary    { color: var(--ad-navy)  !important; }
.text-info       { color: var(--ad-steel) !important; }
.text-muted      { color: var(--ad-grey)  !important; }
.text-danger     { color: var(--ad-seal)  !important; }
.bg-light        { background-color: var(--ad-tint) !important; }

.form-control:focus {
  border-color: var(--ad-steel-light);
  box-shadow: 0 0 0 .2rem rgba(74, 111, 165, .18);
}

/* ---------------------------------------------------------- app footer --- */

.ad-footer {
  background-color: var(--ad-navy);
  color: var(--ad-steel-light);
  padding: 1.5rem 0;
  margin-top: 3rem;
  font-size: .85rem;
}
.ad-footer a       { color: var(--ad-steel-light); text-decoration: none; }
.ad-footer a:hover { color: var(--ad-white); }

/* ---------------------------------------------------------- responsive --- */

@media (max-width: 768px) {
  h1, .h1 { font-size: 2rem;   }
  h2, .h2 { font-size: 1.6rem; }
  h3, .h3 { font-size: 1.25rem;}
  .ad-card { padding: 1.4rem; }
}