/* Clean Leeds .co.uk — look aligned with cleanleeds.com (1 Oct 2026).
   Appearance only: loaded after style.css/site.css and overrides colours, type
   and corners. Delete the <link> to this file to return to the old look. */

:root {
  --cl-bg: #E6E1D3;        /* cream page background (.com --bg) */
  --cl-raised: #EFEBDD;    /* cards, nav (.com --bg-raised) */
  --cl-field: #F7F4EA;     /* form fields */
  --cl-fg: #17140F;        /* ink (.com --fg) */
  --cl-muted: #5C5850;     /* (.com --fg-muted) */
  --cl-brand: #20D6CF;     /* aqua (.com --brand) */
  --cl-brand-hover: #3FEDE7;
  --cl-on-brand: #0A1211;
  --cl-deep: #141210;      /* footer / top bar (.com --brand-deep) */
  --cl-tint: #D9F0EE;      /* (.com --brand-tint) */
  --cl-accent-text: #0B6C68; /* teal readable on cream */
  --cl-line: rgba(23,20,15,0.14);
  --cl-line-strong: rgba(23,20,15,0.28);
  --cl-serif: "Iowan Old Style", "Sitka Small", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
}

/* 1. Cream background */
body { background: var(--cl-bg); color: var(--cl-fg); }
.bg-white, nav.bg-white { background-color: var(--cl-raised) !important; }
.bg-gray-50, .bg-gray-100 { background-color: var(--cl-bg) !important; }
.bg-\[\#e8f5f5\], .bg-\[\#d0f0f0\], .bg-\[\#c0e8e8\] { background-color: var(--cl-tint) !important; }
.bg-gradient-to-r, .bg-gradient-to-b, .bg-gradient-to-br, .bg-gradient-to-l, .bg-gradient-to-t {
  background-image: none !important;
}
.from-\[\#e8f5f5\], .from-gray-50 { background-color: var(--cl-bg) !important; }
.text-gray-700, .text-gray-600, .text-gray-500 { color: var(--cl-muted) !important; }
.text-gray-900, .text-gray-800 { color: var(--cl-fg) !important; }
.shadow-sm, .shadow, .shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl {
  box-shadow: 0 24px 60px -32px rgba(20,18,15,0.35) !important;
}
.border-gray-200, .border-gray-300, .border { border-color: var(--cl-line-strong) !important; }

/* Teal accent text -> darker teal that reads on cream */
.text-\[\#158f8f\], .hover\:text-\[\#158f8f\]:hover { color: var(--cl-accent-text) !important; }

/* 2. Serif headings, as on cleanleeds.com */
h1, h2, h3, h4 { font-family: var(--cl-serif) !important; font-weight: 500 !important; letter-spacing: -0.01em; }
h1 .text-\[\#158f8f\] { color: var(--cl-muted) !important; font-style: italic; }

/* 3. Aqua, square-cornered buttons with dark text */
.bg-\[\#158f8f\] { background-color: var(--cl-brand) !important; color: var(--cl-on-brand) !important; }
.bg-\[\#158f8f\] .text-white,
.bg-\[\#158f8f\] [class*="text-gray-"],
.bg-\[\#158f8f\].text-white { color: var(--cl-on-brand) !important; }
.hover\:bg-\[\#117272\]:hover, .hover\:bg-\[\#158f8f\]:hover { background-color: var(--cl-brand-hover) !important; color: var(--cl-on-brand) !important; }
.border-\[\#158f8f\] { border-color: var(--cl-fg) !important; }
.border-\[\#158f8f\].text-\[\#158f8f\] { color: var(--cl-fg) !important; }
.hover\:bg-\[\#e8f5f5\]:hover { background-color: var(--cl-tint) !important; }
a.rounded-md, button.rounded-md, a.rounded-lg, button.rounded-lg, a.rounded, button.rounded,
input, select, textarea { border-radius: 0 !important; }
.rounded-xl, .rounded-2xl, .rounded-lg { border-radius: 2px !important; }
input, select, textarea { background-color: var(--cl-field) !important; }

/* Big teal bands (top bar, footer, call-to-action strips) -> deep ink, as on .com */
header > div:first-child,
footer, footer.bg-\[\#158f8f\],
.from-\[\#158f8f\] {
  background-color: var(--cl-deep) !important;
  background-image: none !important;
  color: var(--cl-raised) !important;
}
header > div:first-child *, footer.bg-\[\#158f8f\], footer .text-white, footer.bg-\[\#158f8f\] .text-white, footer.bg-\[\#158f8f\] [class*="text-gray-"], footer.bg-\[\#158f8f\] a, footer [class*="text-gray-"],
.from-\[\#158f8f\] .text-white, .from-\[\#158f8f\] [class*="text-gray-"], .from-\[\#158f8f\].text-white {
  color: var(--cl-raised) !important;
}
footer a:hover { color: var(--cl-brand) !important; }
.from-\[\#158f8f\] .bg-white { background-color: var(--cl-brand) !important; color: var(--cl-on-brand) !important; }

/* 4. The cleanleeds.com round logo */
.cl-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--cl-fg); }
.cl-logo img { width: 40px; height: 40px; flex: none; }
.cl-logo span { font-family: var(--cl-serif); font-size: 1.3rem; font-weight: 500; }
footer h1, footer h2, footer h3, footer h4,
.from-\[\#158f8f\] h1, .from-\[\#158f8f\] h2, .from-\[\#158f8f\] h3 { color: var(--cl-raised) !important; }
footer { border-top: 1px solid rgba(237,232,218,0.14); }
/* The logo links to "/", so site.js marks it as the current page on the home page — keep it ink */
nav a.cl-logo, nav a.cl-logo[aria-current="page"], nav a.cl-logo span { color: var(--cl-fg) !important; font-weight: 500 !important; }
nav a[aria-current="page"]:not(.cl-logo) { color: var(--cl-accent-text) !important; }