/*
Theme Name: Constitutional Accountability Child
Template: technetium
Version: 1.0.0
Description: Child theme for ConstitutionalAccountability.org using Bootstrap and a constitutional palette.
Author: Dave
Text Domain: constitutional-accountability-child
*/

/* ---------------------------
   Color Tokens (Site Palette)
---------------------------- */
:root {
  --ca-navy: #1F2A38;
  --ca-ink: #121922;
  --ca-parchment: #F5F2EC;
  --ca-slate: #3A3F45;
  --ca-gold: #B89B5E;
  --ca-steel: #D4D8DD;
  --ca-green: #4F6D5E;
  --ca-amber: #A66A3F;

  /* UI tokens */
  --ca-bg: var(--ca-parchment);
  --ca-text: var(--ca-slate);
  --ca-heading: var(--ca-ink);
  --ca-border: var(--ca-steel);

  --ca-link: var(--ca-navy);
  --ca-link-hover: var(--ca-ink);

  --ca-btn-bg: var(--ca-navy);
  --ca-btn-bg-hover: var(--ca-ink);
  --ca-btn-text: var(--ca-parchment);

  --ca-radius: 6px;
}

/* ---------------------------
   Base Typography & Layout
---------------------------- */
body {
  background: var(--ca-bg);
  color: var(--ca-text);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ca-heading);
}

/* Links */
a {
  color: var(--ca-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover, a:focus {
  color: var(--ca-link-hover);
}

/* ---------------------------
   Header / Footer (optional)
   Adjust selectors per theme.
---------------------------- */
.site-header,
header.wp-block-template-part {
  background: var(--ca-navy);
  color: var(--ca-parchment);
}

.site-footer,
footer.wp-block-template-part {
  background: var(--ca-navy);
  color: var(--ca-parchment);
}

/* Make header/footer links readable */
.site-header a,
header.wp-block-template-part a,
.site-footer a,
footer.wp-block-template-part a {
  color: var(--ca-parchment);
}

.site-header a:hover,
header.wp-block-template-part a:hover,
.site-footer a:hover,
footer.wp-block-template-part a:hover {
  color: var(--ca-gold);
}

/* ---------------------------
   Bootstrap overrides (optional)
   These will apply to BS components
   if you use Bootstrap classes.
---------------------------- */

/* Buttons */
.btn-primary,
.wp-block-button__link {
  background-color: var(--ca-btn-bg);
  border-color: var(--ca-btn-bg);
  color: var(--ca-btn-text);
  border-radius: var(--ca-radius);
}

.btn-primary:hover,
.btn-primary:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: var(--ca-btn-bg-hover);
  border-color: var(--ca-btn-bg-hover);
  color: var(--ca-btn-text);
}

/* Secondary button */
.btn-outline-primary {
  color: var(--ca-navy);
  border-color: var(--ca-navy);
  border-radius: var(--ca-radius);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--ca-navy);
  color: var(--ca-parchment);
  border-color: var(--ca-navy);
}

/* Cards */
.card {
  border-color: var(--ca-border);
  border-radius: calc(var(--ca-radius) + 2px);
}

.card-header {
  background: rgba(31, 42, 56, 0.06);
  border-bottom-color: var(--ca-border);
}

/* Alerts (use sparingly) */
.alert-success {
  border-color: rgba(79, 109, 94, 0.35);
  background: rgba(79, 109, 94, 0.10);
  color: var(--ca-ink);
}

.alert-warning {
  border-color: rgba(166, 106, 63, 0.35);
  background: rgba(166, 106, 63, 0.10);
  color: var(--ca-ink);
}

/* Subtle section dividers */
hr,
.wp-block-separator {
  border-color: var(--ca-border);
  opacity: 1;
}

/* ---------------------------
   Hero overlay helper class
---------------------------- */
.ca-hero-overlay {
  background: rgba(18, 25, 34, 0.65);
  color: var(--ca-parchment);
  border-radius: calc(var(--ca-radius) + 6px);
  padding: 2rem;
}

.ca-hero-overlay h1,
.ca-hero-overlay h2,
.ca-hero-overlay h3 {
  color: var(--ca-parchment);
}

.ca-accent {
  color: var(--ca-gold);
}