/* ============================================================
   sitestyle.css
   P03 Palette + Site Defaults + Bootstrap Overrides

   Organization:
   1. Palette and shared tokens
   2. Base elements
   3. Layout and section helpers
   4. Custom site components
   5. Bootstrap overrides
   6. Maintenance audit notes

   WordPress compatibility rules are intentionally not included yet.
   ============================================================ */


/* ============================================================
   1. SHARED SITE TOKENS
   Raw palette values are loaded from the selected palette CSS.
   ============================================================ */

:root{
  color-scheme: light;

  /* Shared site tokens */
  --bg: var(--neutral-warmwhite);
  --surface: #ffffff;
  --text: var(--neutral-ink);

  --muted: color-mix(
    in srgb,
    var(--neutral-ink) 60%,
    var(--neutral-ghost)
  );

  --border: color-mix(
    in srgb,
    var(--neutral-ghost) 70%,
    var(--neutral-warmwhite)
  );

  --shadow: color-mix(
    in srgb,
    var(--brand-secondary-900) 60%,
    transparent
  );

  --primary: var(--brand-primary);
  --secondary: var(--brand-secondary);
  --success: var(--brand-tertiary);
  --accent: var(--brand-accent);
  --highlight: var(--brand-highlight);

  --focus: color-mix(
    in srgb,
    var(--brand-highlight) 45%,
    transparent
  );

  /* Bootstrap token mapping */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);

  --bs-primary: var(--primary);
  --bs-secondary: var(--secondary);

  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--brand-primary-700);
}


/* ============================================================
   2. BASE ELEMENTS
   ============================================================ */

body{
  background: var(--bg);
  color: var(--text);
}

a{
  color: var(--primary);
  text-decoration-color: color-mix(
    in srgb,
    var(--primary) 55%,
    transparent
  );
  text-underline-offset: 2px;
}

a:hover{
  color: var(--brand-primary-700);
  text-decoration-color: color-mix(
    in srgb,
    var(--brand-primary-700) 60%,
    transparent
  );
}

footer{
  padding: 2rem 0;
}


/* ============================================================
   3. LAYOUT AND SECTION HELPERS
   ============================================================ */

.hero{
  padding: 4rem 0 2rem;
}

.muted-note{
  color: var(--muted);
}

.section-border-top{
  border-top: 1px solid var(--border);
}

.section-soft{
  background: color-mix(
    in srgb,
    var(--secondary) 4%,
    var(--bg)
  );
}

.hero-surface{
  background:
    radial-gradient(
      900px 360px at 15% 20%,
      color-mix(in srgb, var(--primary) 18%, transparent) 0%,
      transparent 60%
    ),
    radial-gradient(
      900px 360px at 85% 25%,
      color-mix(in srgb, var(--success) 14%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 88%, var(--bg)),
      var(--bg)
    );
  border-bottom: 1px solid var(--border);
}

.title-band{
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.title-band::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 33%, transparent) 0%,
    color-mix(in srgb, var(--secondary) 33%, transparent) 100%
  );
  pointer-events: none;
}

.title-band > .container{
  position: relative;
}


/* ============================================================
   4. CUSTOM SITE COMPONENTS
   ============================================================ */

.tag{
  display: inline-block;
  margin: .15rem .25rem .15rem 0;
  padding: .25rem .65rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--neutral-ghost) 16%,
    var(--surface)
  );
  color: color-mix(
    in srgb,
    var(--text) 85%,
    var(--neutral-ghost)
  );
  font-size: .85rem;
}

.card-title{
  margin-bottom: .25rem;
}

.card{
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 16px 40px var(--shadow);
}

.card-pop{
  border: 1px solid var(--border);
  background: color-mix(
    in srgb,
    var(--surface) 92%,
    var(--bg)
  );
  box-shadow: 0 22px 60px var(--shadow);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.card-pop:hover{
  transform: translateY(-2px);
  border-color: color-mix(
    in srgb,
    var(--primary) 35%,
    var(--border)
  );
  box-shadow: 0 28px 80px var(--shadow);
}

.card-pop-primary{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary) 10%, var(--surface)),
    var(--surface)
  );
}

.card-pop-secondary{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--secondary) 9%, var(--surface)),
    var(--surface)
  );
}

.card-pop-success{
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--success) 10%, var(--surface)),
    var(--surface)
  );
}

.card-kicker{
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem .55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(
    in srgb,
    var(--neutral-ghost) 16%,
    var(--surface)
  );
  color: color-mix(
    in srgb,
    var(--text) 82%,
    var(--neutral-ghost)
  );
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .35px;
}

.panel-card{
  background: color-mix(
    in srgb,
    var(--surface) 92%,
    var(--bg)
  );
  border: 1px solid var(--border);
  box-shadow: 0 18px 50px var(--shadow);
}

.about-photo{
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(
      800px 320px at 20% 20%,
      color-mix(in srgb, var(--primary) 18%, transparent) 0%,
      transparent 55%
    ),
    radial-gradient(
      800px 320px at 80% 30%,
      color-mix(in srgb, var(--success) 14%, transparent) 0%,
      transparent 60%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--surface) 90%, var(--bg)),
      var(--bg)
    );
}


/* ============================================================
   5. BOOTSTRAP OVERRIDES
   ============================================================ */

/* Navbar */
.navbar{
  background: color-mix(
    in srgb,
    var(--surface) 92%,
    var(--bg)
  );
  border-bottom: 1px solid var(--border);
}

.navbar .navbar-brand{
  color: var(--text);
  font-weight: 800;
}

.navbar .navbar-brand:hover{
  color: var(--primary);
}

.navbar .nav-link{
  color: color-mix(
    in srgb,
    var(--text) 82%,
    var(--neutral-ghost)
  );
  font-weight: 650;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color: var(--primary);
}

.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"]{
  color: var(--text);
}

.navbar .navbar-toggler{
  border-color: var(--border);
}

.navbar .navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem var(--focus);
}


/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-color: var(--neutral-warmwhite);

  --bs-btn-hover-bg: var(--brand-primary-700);
  --bs-btn-hover-border-color: var(--brand-primary-700);

  --bs-btn-active-bg: var(--brand-primary-900);
  --bs-btn-active-border-color: var(--brand-primary-900);
}

.btn-secondary{
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-color: var(--neutral-warmwhite);

  --bs-btn-hover-bg: color-mix(
    in srgb,
    var(--secondary) 88%,
    #000
  );
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--secondary) 88%,
    #000
  );

  --bs-btn-active-bg: var(--brand-secondary-900);
  --bs-btn-active-border-color: var(--brand-secondary-900);
}

.btn-outline-primary{
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: color-mix(
    in srgb,
    var(--primary) 70%,
    var(--border)
  );

  --bs-btn-hover-bg: color-mix(
    in srgb,
    var(--primary) 10%,
    var(--surface)
  );
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-hover-color: var(--text);
}

.btn-outline-secondary{
  --bs-btn-color: var(--text);
  --bs-btn-border-color: var(--border);

  --bs-btn-hover-bg: color-mix(
    in srgb,
    var(--neutral-ghost) 16%,
    var(--surface)
  );
  --bs-btn-hover-border-color: color-mix(
    in srgb,
    var(--primary) 35%,
    var(--border)
  );
  --bs-btn-hover-color: var(--text);
}


/* Forms */
.form-control,
.form-select{
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.form-control:focus,
.form-select:focus{
  border-color: color-mix(
    in srgb,
    var(--primary) 55%,
    var(--border)
  );
  box-shadow: 0 0 0 .2rem var(--focus);
}


/* ============================================================
   6. MAINTENANCE AUDIT NOTES

   The stylesheet itself cannot prove whether a selector is unused;
   that requires checking the current PHP/HTML templates. The items
   below are retained because removing them could change live pages.

   REVIEW FOR POSSIBLE REMOVAL AFTER MARKUP AUDIT:

   Variables not referenced elsewhere in this stylesheet:
     --brand-secondary-700
     --brand-tertiary-700
     --brand-tertiary-900
     --brand-accent-700
     --brand-accent-900
     --accent
     --highlight

   These may still be referenced directly by page-level inline styles,
   scripts, or HTML files, so verify with a project-wide search first.

   Selectors to verify against current templates:
     .muted-note
     .section-border-top
     .hero-surface
     .title-band
     .tag
     .card-pop-primary
     .card-pop-secondary
     .card-pop-success
     .card-kicker
     .panel-card
     .about-photo
     .btn-secondary
     .btn-outline-primary
     .btn-outline-secondary
     .form-control
     .form-select

   Retained intentionally:
     .card and .card-title
       Bootstrap components, likely used directly or indirectly.

     .navbar and related selectors
       Bootstrap navigation shell visible on the current site.

     footer
       Shared element rule, expected to remain part of the site shell.
   ============================================================ */

/* ============================================================
   7. CURRENT FRONT-END ADDITIONS
   ============================================================ */

.section-label{
  color: var(--brand-primary-700);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.section-heading{
  max-width: 48rem;
}

.py-lg-6{
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.process-list li + li{
  margin-top: .55rem;
}

.project-detail{
  scroll-margin-top: 2rem;
}

.callout-section{
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--primary) 7%, var(--surface)),
      color-mix(in srgb, var(--secondary) 7%, var(--surface))
    );
}

@media (max-width: 991.98px){
  .py-lg-6{
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}