/* ==========================================================================
   Molly's Brand System — global overrides
   Load AFTER theme.css so these rules win.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:wght@900&family=Cormorant+Garamond:ital,wght@0,600;1,500&family=Pinyon+Script&display=swap');

:root {
  --navy:      #1D3557;  /* primary text, headlines, structural fields */
  --red:       #E63946;  /* accent: buttons, icons, LARGE text only — never small body copy */
  --steel:     #457B9D;  /* secondary text/links — TRUE WHITE background only */
  --teal:      #A8DADC;  /* background blocks under navy text, never text itself */
  --offwhite:  #F1FAEE;  /* base background */
  --gold:      #C9A227;  /* logo / circular emphasis motif only */

  --font-ui:    'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-title: 'Fraunces', Georgia, serif;
  --font-cover: 'Cormorant Garamond', Georgia, serif;
  --font-script:'Pinyon Script', cursive;
}

/* ---- Base ---- */
body {
  background-color: var(--offwhite) !important;
  color: var(--navy);
  font-family: var(--font-ui);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--navy);
}

/* Links: navy by default (steel fails contrast on the off-white base).
   Steel is opt-in on true-white cards only. */
a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
}
a:hover, a:focus {
  opacity: 0.75;
}
.on-white-card a,
.card a {
  color: var(--steel);
}

/* Visible, on-brand focus state — never remove outline without replacing it */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}

/* ---- Buttons ----
   Navy bg + white text passes contrast at any size (12.4:1).
   Red is reserved for large/bold accents, never small button labels. */
.btn,
.btn-primary {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
  color: var(--offwhite) !important;
  font-weight: 600;
  border-radius: 4px;
}
.btn:hover,
.btn-primary:hover {
  background-color: #14283f !important;
  border-color: #14283f !important;
}
.btn-accent {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  color: var(--offwhite) !important;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---- Cards (project cards, post cards, masonry grid) ----
   True-white card background is what makes steel-blue body text legal. */
.card {
  background-color: #FFFFFF;
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(29, 53, 87, 0.08);
}
.card-title {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--navy);
}
.card-text {
  color: var(--steel);
}

/* ---- Navbar ---- */
.navbar.bg-white {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--teal);
}
.navbar a {
  color: var(--navy) !important;
  text-decoration: none;
  font-weight: 600;
}
.navbar a:hover {
  border-bottom: 2px solid var(--red);
  opacity: 1;
}
.navbar-brand img {
  height: 40px;
}

/* ---- Footer ---- */
footer.footer {
  background-color: var(--navy);
  color: var(--offwhite);
}
footer.footer a {
  color: var(--offwhite) !important;
  text-decoration: none;
}
.socials-media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: box-shadow 0.15s ease;
}
.socials-media a:hover,
.socials-media a:focus-visible {
  box-shadow: 0 0 0 2px var(--gold);
  opacity: 1;
}

/* ---- Background blocks (teal under navy text — never as text color) ---- */
.brand-block {
  background-color: var(--teal);
  color: var(--navy);
  padding: 2rem;
  border-radius: 6px;
}

/* ---- Headline treatment (hero / cover zones) ---- */
.brand-headline {
  background-color: var(--offwhite);
  color: var(--navy);
  font-family: var(--font-ui);
  font-weight: 700;
  text-align: left;
  padding: 1.5rem 0;
}

/* ---- Forms (contact page) ---- */
input, textarea, select {
  border: 1px solid var(--teal) !important;
  border-radius: 4px;
  color: var(--navy);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--navy) !important;
  box-shadow: none;
}
label {
  color: var(--navy);
  font-weight: 600;
}

/* ---- Active nav indicator ---- */
.nav-link.active {
  color: var(--navy) !important;
  font-weight: 700;
  border-bottom: 2px solid var(--red);
}
/* ---- Trailhead icon: match size/color of the font-icon social links ---- */
.footer-icon-img {
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}
footer.footer .text-danger {
  color: var(--red) !important;
}
/* ---- Page/Post layout background: brand off-white, not the theme's default grey ---- */
.bg-gray200 {
  background-color: var(--offwhite) !important;
}

/* ---- Secondary/muted text on white cards: brand steel instead of default grey ---- */
.card .text-muted {
  color: var(--steel) !important;
}
/* ---- Card body paragraph text: steel-on-white (legal contrast on the card's white bg) ---- */
.card p {
  color: var(--steel);
}