/* aard.prince-cleaning.css
   Prince Cleaning — brand overrides for aardCSS
   Variable layer only. Load after aard.css.

   Palette (agreed 2026-06-11):
   - Brand lavender #C9B8E8 (from FB header) — fails AA on light
     backgrounds, so in light mode it is atmosphere (accent role,
     surface tints) and the AA-safe sibling #7B5FB5 carries all
     interactive colour. In dark mode #C9B8E8 is primary directly.
   - Light page background #EDE7F6 with white cards floating on it. */

[data-theme=light],
:root:not([data-theme=dark]) {
  --aard-background-color: #ede7f6;
  --aard-color: #2e2a38;
  --aard-muted-color: #655e75;
  --aard-muted-border-color: #d7cce8;
  --aard-text-selection-color: rgba(123, 95, 181, 0.25);

  /* Primary — AA-safe lavender sibling. Buttons, links, CTAs. */
  --aard-primary: #7b5fb5;
  --aard-primary-background: #7b5fb5;
  --aard-primary-border: var(--aard-primary-background);
  --aard-primary-underline: rgba(123, 95, 181, 0.5);
  --aard-primary-hover: #61479a;
  --aard-primary-hover-background: #6a4fa3;
  --aard-primary-hover-border: var(--aard-primary-hover-background);
  --aard-primary-hover-underline: var(--aard-primary-hover);
  --aard-primary-focus: rgba(123, 95, 181, 0.4);
  --aard-primary-inverse: #fff;

  /* Secondary — mid-blue from the brand exploration. */
  --aard-secondary: #38679c;
  --aard-secondary-background: #3a78c9;
  --aard-secondary-border: var(--aard-secondary-background);
  --aard-secondary-underline: rgba(58, 120, 201, 0.5);
  --aard-secondary-hover: #2c5180;
  --aard-secondary-hover-background: #2f63a8;
  --aard-secondary-hover-border: var(--aard-secondary-hover-background);
  --aard-secondary-hover-underline: var(--aard-secondary-hover);
  --aard-secondary-focus: rgba(58, 120, 201, 0.4);
  --aard-secondary-inverse: #fff;

  /* Accent — the true brand lavender, decorative use. Dark inverse
     text because the lavender itself is light. */
  --aard-accent: #c9b8e8;
  --aard-accent-background: #c9b8e8;
  --aard-accent-border: var(--aard-accent-background);
  --aard-accent-underline: rgba(201, 184, 232, 0.5);
  --aard-accent-hover: #b9a4e0;
  --aard-accent-hover-background: #b9a4e0;
  --aard-accent-hover-border: var(--aard-accent-hover-background);
  --aard-accent-hover-underline: var(--aard-accent-hover);
  --aard-accent-focus: rgba(201, 184, 232, 0.5);
  --aard-accent-inverse: #2e2a38;

  /* Headings — purple undertone to match body text. */
  --aard-h1-color: #241f30;
  --aard-h2-color: #2e2a38;
  --aard-h3-color: #3a3449;
  --aard-h4-color: #463f58;
  --aard-h5-color: #554d68;
  --aard-h6-color: #655e75;

  /* Cards float white on the lavender page. */
  --aard-card-background-color: #fff;
  --aard-card-border-color: #d7cce8;
  --aard-card-sectioning-background-color: #f7f4fc;

  /* Forms — near-white fields with lavender-tinted borders. */
  --aard-form-element-background-color: #fcfbfe;
  --aard-form-element-selected-background-color: #e4dcf1;
  --aard-form-element-border-color: #c2b4dc;
  --aard-form-element-color: #2e2a38;
  --aard-form-element-active-background-color: #fff;

  --aard-dropdown-background-color: #fff;
  --aard-dropdown-border-color: #e4dcf1;
  --aard-dropdown-hover-background-color: #ede7f6;

  --aard-switch-background-color: #c2b4dc;
  --aard-table-border-color: var(--aard-muted-border-color);
  --aard-table-row-stripped-background-color: rgba(123, 95, 181, 0.05);
  --aard-blockquote-border-color: var(--aard-accent);
  --aard-modal-overlay-background-color: rgba(36, 31, 48, 0.6);
  --aard-progress-background-color: #d7cce8;
}

/* Dark mode — the brand lavender finally gets to be primary. */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --aard-background-color: #1b1725;
    --aard-color: #d6d0e0;
    --aard-muted-color: #978fac;
    --aard-muted-border-color: #393047;
    --aard-text-selection-color: rgba(201, 184, 232, 0.25);

    --aard-primary: #c9b8e8;
    --aard-primary-background: #c9b8e8;
    --aard-primary-border: var(--aard-primary-background);
    --aard-primary-underline: rgba(201, 184, 232, 0.5);
    --aard-primary-hover: #d8cbf0;
    --aard-primary-hover-background: #d8cbf0;
    --aard-primary-hover-border: var(--aard-primary-hover-background);
    --aard-primary-hover-underline: var(--aard-primary-hover);
    --aard-primary-focus: rgba(201, 184, 232, 0.4);
    --aard-primary-inverse: #1b1725;

    --aard-secondary: #7fa8e0;
    --aard-secondary-background: #7fa8e0;
    --aard-secondary-border: var(--aard-secondary-background);
    --aard-secondary-underline: rgba(127, 168, 224, 0.5);
    --aard-secondary-hover: #93b6e8;
    --aard-secondary-hover-background: #93b6e8;
    --aard-secondary-hover-border: var(--aard-secondary-hover-background);
    --aard-secondary-hover-underline: var(--aard-secondary-hover);
    --aard-secondary-focus: rgba(127, 168, 224, 0.4);
    --aard-secondary-inverse: #1b1725;

    --aard-accent: #c9b8e8;
    --aard-accent-background: #c9b8e8;
    --aard-accent-border: var(--aard-accent-background);
    --aard-accent-underline: rgba(201, 184, 232, 0.5);
    --aard-accent-hover: #d8cbf0;
    --aard-accent-hover-background: #d8cbf0;
    --aard-accent-hover-border: var(--aard-accent-hover-background);
    --aard-accent-hover-underline: var(--aard-accent-hover);
    --aard-accent-focus: rgba(201, 184, 232, 0.5);
    --aard-accent-inverse: #1b1725;

    --aard-h1-color: #ece8f3;
    --aard-h2-color: #ddd7e8;
    --aard-h3-color: #cfc8dd;
    --aard-h4-color: #c1b9d2;
    --aard-h5-color: #aca3c0;
    --aard-h6-color: #978fac;

    --aard-card-background-color: #252033;
    --aard-card-border-color: #393047;
    --aard-card-sectioning-background-color: #2b2540;

    --aard-form-element-background-color: #221d31;
    --aard-form-element-selected-background-color: #322b45;
    --aard-form-element-border-color: #4a4060;
    --aard-form-element-color: #e2ddea;
    --aard-form-element-active-background-color: #2b2540;

    --aard-dropdown-background-color: #252033;
    --aard-dropdown-border-color: #393047;
    --aard-dropdown-hover-background-color: #322b45;

    --aard-switch-background-color: #4a4060;
    --aard-table-row-stripped-background-color: rgba(201, 184, 232, 0.05);
    --aard-blockquote-border-color: var(--aard-accent);
    --aard-modal-overlay-background-color: rgba(10, 8, 15, 0.7);
    --aard-progress-background-color: #393047;
  }
}

/* === Prince Cleaning layout overrides === */

/* Trust bar — scale icons up slightly */
.trust-bar svg {
    width: 40px;
    height: 40px;
}

/* Service cards — flex column so footer always pins to card bottom;
   top border accent for visual lift */
.services-grid > article {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
    border-top: 3px solid var(--aard-primary);
}

.services-grid > article > footer {
    margin-top: auto;
    margin-bottom: 0;
}

/* Little extras note — brand-coloured, replaces off-palette alert-info */
.little-extras-note {
    padding: 0.75rem 1rem;
    margin-bottom: var(--aard-block-spacing-vertical);
    border-left: 3px solid var(--aard-primary);
    border-radius: var(--aard-border-radius);
    background: color-mix(in srgb, var(--aard-primary) 8%, var(--aard-card-background-color));
}

.little-extras-note p {
    margin-bottom: 0;
}

/* Footer meta row — website credit left, carbon badge right */
.footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.5rem;
    color: var(--aard-muted-color);
}

.little-extras-title {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--aard-primary);
}

[data-theme=dark] {
  --aard-background-color: #1b1725;
  --aard-color: #d6d0e0;
  --aard-muted-color: #978fac;
  --aard-muted-border-color: #393047;
  --aard-text-selection-color: rgba(201, 184, 232, 0.25);

  --aard-primary: #c9b8e8;
  --aard-primary-background: #c9b8e8;
  --aard-primary-border: var(--aard-primary-background);
  --aard-primary-underline: rgba(201, 184, 232, 0.5);
  --aard-primary-hover: #d8cbf0;
  --aard-primary-hover-background: #d8cbf0;
  --aard-primary-hover-border: var(--aard-primary-hover-background);
  --aard-primary-hover-underline: var(--aard-primary-hover);
  --aard-primary-focus: rgba(201, 184, 232, 0.4);
  --aard-primary-inverse: #1b1725;

  --aard-secondary: #7fa8e0;
  --aard-secondary-background: #7fa8e0;
  --aard-secondary-border: var(--aard-secondary-background);
  --aard-secondary-underline: rgba(127, 168, 224, 0.5);
  --aard-secondary-hover: #93b6e8;
  --aard-secondary-hover-background: #93b6e8;
  --aard-secondary-hover-border: var(--aard-secondary-hover-background);
  --aard-secondary-hover-underline: var(--aard-secondary-hover);
  --aard-secondary-focus: rgba(127, 168, 224, 0.4);
  --aard-secondary-inverse: #1b1725;

  --aard-accent: #c9b8e8;
  --aard-accent-background: #c9b8e8;
  --aard-accent-border: var(--aard-accent-background);
  --aard-accent-underline: rgba(201, 184, 232, 0.5);
  --aard-accent-hover: #d8cbf0;
  --aard-accent-hover-background: #d8cbf0;
  --aard-accent-hover-border: var(--aard-accent-hover-background);
  --aard-accent-hover-underline: var(--aard-accent-hover);
  --aard-accent-focus: rgba(201, 184, 232, 0.5);
  --aard-accent-inverse: #1b1725;

  --aard-h1-color: #ece8f3;
  --aard-h2-color: #ddd7e8;
  --aard-h3-color: #cfc8dd;
  --aard-h4-color: #c1b9d2;
  --aard-h5-color: #aca3c0;
  --aard-h6-color: #978fac;

  --aard-card-background-color: #252033;
  --aard-card-border-color: #393047;
  --aard-card-sectioning-background-color: #2b2540;

  --aard-form-element-background-color: #221d31;
  --aard-form-element-selected-background-color: #322b45;
  --aard-form-element-border-color: #4a4060;
  --aard-form-element-color: #e2ddea;
  --aard-form-element-active-background-color: #2b2540;

  --aard-dropdown-background-color: #252033;
  --aard-dropdown-border-color: #393047;
  --aard-dropdown-hover-background-color: #322b45;

  --aard-switch-background-color: #4a4060;
  --aard-table-row-stripped-background-color: rgba(201, 184, 232, 0.05);
  --aard-blockquote-border-color: var(--aard-accent);
  --aard-modal-overlay-background-color: rgba(10, 8, 15, 0.7);
  --aard-progress-background-color: #393047;
}
