/* Klaro! theme for the redesigned dustinlifford.com (pages built from
   templates/base.html), applied by consent-ui.v1.js. klaro.js injects its
   own copy of the vendor CSS as a <style> after every stylesheet, so each
   rule here starts with #klaro (the container Klaro renders into) to
   outrank the vendor selectors whatever the load order. The legacy blog
   templates keep klaro-theme.v2.css until they move onto base.html.

   Design system (brief, Phase 1), same as the rest of the site:
     surfaces   deep #071B15 with a sage hairline, backdrop as the drawer
     text       mist #D9E4DB body (13.7:1 on deep), ivory title,
                sage #C8DCBC links and labels (12.25:1)
     buttons    IBM Plex Mono uppercase like .button: sage fill with forest
                text for the primary action (9.9:1), ghost with the
                rgba(200, 220, 188, 0.6) outline (5.1:1) and ivory text otherwise
     focus      3 px clay-light #E2B792 ring (9.7:1 on deep)
     targets    every control at least 44 px tall; Close is 44 x 44
   The old theme drew emerald links (2.85:1) and a label-green description
   (3.36:1) on the modal's near-black #151A17; both are gone. */

#klaro .klaro {
  --k-deep: var(--color-deep, #071B15);
  --k-forest: var(--color-forest, #0F2F24);
  --k-ivory: var(--color-ivory, #F7F5EF);
  --k-mist: var(--color-mist, #D9E4DB);
  --k-sage: var(--color-sage, #C8DCBC);
  --k-focus: var(--color-clay-light, #E2B792);
  --k-rule: rgba(200, 220, 188, 0.25);
  --k-rule-strong: rgba(200, 220, 188, 0.35);
  --k-outline: rgba(200, 220, 188, 0.6);
  --k-tint: rgba(200, 220, 188, 0.12);
  --k-mono: var(--font-mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace);

  /* Vendor variables, mapped onto the palette. */
  --green1: var(--k-sage);       /* toggle on */
  --green2: var(--k-sage);       /* required toggle */
  --green3: var(--k-focus);
  --blue1: var(--k-sage);
  --blue2: var(--k-ivory);
  --dark1: var(--k-deep);        /* notice and modal surface */
  --dark2: var(--k-rule-strong); /* borders on dark */
  --dark3: var(--k-mist);        /* descriptions */
  --light1: var(--k-mist);       /* text on dark */
  --light2: var(--k-rule);
  --light3: var(--k-mist);
  --white2: var(--k-tint);       /* toggle off track */
  --white3: var(--k-sage);       /* toggle knob */
  --border-radius: var(--radius-md, 10px);
  --font-family: var(--font-body, "Source Serif 4", Georgia, serif);
  --title-font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  --font-size: 0.9375rem;        /* 15 */
  --button-text-color: var(--k-ivory);
  --notice-max-width: 26.25rem;  /* 420 */

  color: var(--k-mist);
  line-height: 1.55;
}

/* ---- Text and links ------------------------------------------------------ */
#klaro .klaro .cookie-notice p,
#klaro .klaro .cookie-modal p,
#klaro .klaro .cookie-modal li { color: var(--k-mist); }

#klaro .klaro .cookie-notice a,
#klaro .klaro .cookie-modal a {
  color: var(--k-sage);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
#klaro .klaro .cookie-notice a:hover,
#klaro .klaro .cookie-modal a:hover {
  color: var(--k-ivory);
  text-decoration-thickness: 2px;
}

/* One visible ring for every control, as on the rest of the site. */
#klaro .klaro a:focus-visible,
#klaro .klaro button:focus-visible {
  outline: 3px solid var(--k-focus);
  outline-offset: 3px;
}
#klaro .klaro a:focus:not(:focus-visible),
#klaro .klaro button:focus:not(:focus-visible) { outline: none; }

/* ---- Buttons ----------------------------------------------------------------
   Ghost by default; the primary action (Accept, Accept All, or the only
   button, "Save preferences") is filled sage. */
#klaro .klaro .cookie-notice .cm-btn,
#klaro .klaro .cookie-modal .cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  margin: 0;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--k-outline);
  border-radius: var(--radius-xs, 2px);
  background-color: transparent;
  color: var(--k-ivory);
  font-family: var(--k-mono);
  font-size: 0.8125rem;          /* 13 */
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}
#klaro .klaro .cookie-notice .cm-btn:hover,
#klaro .klaro .cookie-modal .cm-btn:hover {
  background-color: var(--k-tint);
  color: var(--k-ivory);
}
#klaro .klaro .cookie-notice .cm-btn.cm-btn-success,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-accept-all,
#klaro .klaro .cookie-modal .cm-footer-buttons .cm-btn:only-child {
  border-color: var(--k-sage);
  background-color: var(--k-sage);
  color: var(--k-forest);
}
#klaro .klaro .cookie-notice .cm-btn.cm-btn-success:hover,
#klaro .klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover,
#klaro .klaro .cookie-modal .cm-footer-buttons .cm-btn:only-child:hover {
  border-color: var(--k-ivory);
  background-color: var(--k-ivory);
  color: var(--k-forest);
}
/* "Accept selected" is secondary next to "Accept All": ghost. */
#klaro .klaro .cookie-modal .cm-btn.cm-btn-info {
  background-color: transparent;
  color: var(--k-ivory);
}

/* ---- Cookie notice (fixed, first visit) ---------------------------------- */
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) {
  border-block-start: 1px solid var(--k-rule-strong);
  background-color: var(--k-deep);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
}
@media (min-width: 1024px) {
  #klaro .klaro .cookie-notice:not(.cookie-modal-notice) {
    border: 1px solid var(--k-rule-strong);
  }
}
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
  padding: 1rem;
}
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.55;
}
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
  margin-top: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok a,
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok div { margin-top: 0; }
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-learn-more {
  display: inline-flex;
  align-items: center;
  flex-grow: 0;
  min-height: 44px;
  min-width: 44px;
  margin-right: 0;
  font-family: var(--k-mono);
  font-size: 0.8125rem;
}
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0;
}
#klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
  margin-top: 0;
}
@media (max-width: 384px) {
  #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    flex: 1 1 0;
    width: auto;
  }
}
/* Phones and tablets (the full-width bar, below 1024 px): as compact as the
   live notice (14 px text, tighter padding), with "Manage preferences" and
   both buttons on one row wherever they fit (375 px and up), so the bar
   leaves the home page's "See the work" button clear at 375 x 667. Every
   control stays 44 px tall. */
@media (max-width: 1023px) {
  #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
    padding: 0.75rem 1rem;
  }
  #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
  #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-ok {
    flex-wrap: wrap;
    column-gap: 0.5rem;
  }
  /* The vendor CSS sets the buttons' box to the full row on small screens. */
  #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
    width: auto;
    flex: 0 1 auto;
  }
  /* Natural widths (no wrapped labels); they still share a row of their
     own when it wraps (320 px). */
  #klaro .klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons button.cm-btn {
    flex: 1 1 auto;
    padding-inline: 0.75rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

/* ---- Preferences modal ------------------------------------------------------ */
#klaro .klaro .cookie-modal .cm-bg { background: rgba(7, 27, 21, 0.55); }
#klaro .klaro .cookie-modal .cm-modal.cm-klaro {
  border: 1px solid var(--k-rule-strong);
  background-color: var(--k-deep);
  color: var(--k-mist);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
#klaro .klaro .cookie-modal .cm-modal .cm-header {
  padding: 1.25rem 4.25rem 1.25rem 1.25rem;
  border-bottom-color: var(--k-rule);
}
#klaro .klaro .cookie-modal .cm-modal .cm-header h1 {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.05;
  color: var(--k-ivory);
}
#klaro .klaro .cookie-modal .cm-modal .cm-header h1.title { padding-right: 0; }
#klaro .klaro .cookie-modal .cm-modal .cm-header p { font-size: 0.9375rem; }

/* Close: a 44 px round icon button like the drawer's. */
#klaro .klaro .cookie-modal .cm-modal .hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  top: 0.75rem;
  right: 0.75rem;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 999px;
  background-color: var(--k-tint);
}
#klaro .klaro .cookie-modal .cm-modal .hide svg {
  width: 14px;
  height: 14px;
  stroke: var(--k-sage);
  stroke-width: 1.5;
}
#klaro .klaro .cookie-modal .cm-modal .hide:hover svg { stroke: var(--k-ivory); }

#klaro .klaro .cookie-modal .cm-modal .cm-body { padding: 1.25rem; }
#klaro .klaro .cookie-modal .cm-modal .cm-footer {
  padding: 1rem 1.25rem 1.25rem;
  border-top-color: var(--k-rule);
}
#klaro .klaro .cookie-modal .cm-modal .cm-footer-buttons {
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Purpose and service rows: the whole label (switch and title) is the
   target, at least 44 px tall. */
#klaro .klaro .cookie-modal .cm-list-label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}
#klaro .klaro .cookie-modal .cm-list-title,
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-list-title {
  color: var(--k-ivory);
  font-size: 1rem;
  font-weight: 600;
}
#klaro .klaro .cookie-modal .cm-list-description {
  color: var(--k-mist);
  font-size: 0.875rem;
  line-height: 1.5;
}
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret,
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service p.purposes,
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose p.purposes {
  color: var(--k-mist);
}
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-caret a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--k-mono);
  font-size: 0.8125rem;
}
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out,
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required,
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out,
#klaro .klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required {
  color: var(--k-sage);
}

/* Switches: outlined track with a sage knob when off, sage track with a
   deep knob when on. The ring goes on the visible switch. */
#klaro .klaro .cookie-modal .slider,
#klaro .klaro .cookie-modal .cm-list-input:focus + .cm-list-label .slider {
  box-shadow: inset 0 0 0 1px var(--k-outline);
}
#klaro .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider {
  box-shadow: none;
}
#klaro .klaro .cookie-modal .cm-list-input:checked + .cm-list-label .slider::before {
  background-color: var(--k-deep);
}
#klaro .klaro .cookie-modal .cm-list-input:focus-visible + .cm-list-label .slider {
  outline: 3px solid var(--k-focus);
  outline-offset: 3px;
}

#klaro .klaro .cookie-modal .cm-modal .cm-footer .cm-powered-by { display: none; }

@media (prefers-reduced-motion: reduce) {
  #klaro .klaro .cookie-modal .cm-list-label .slider,
  #klaro .klaro .cookie-modal .cm-list-label .slider::before { transition: none; }
}