/* =====================================================
   theaardvark.co.uk — Custom Styles
   File: mono-override/assets/css/aard-custom.css
   ===================================================== */

/* ─── Page colour scheme ────────────────────────────
   Overrides the values set by theme-variables.js.
   Change the values below to switch background colour.
   Current: light teal
   Other options (swap all values together):

   Dusty blue:  background #dce8f0 / pattern rgb(210,224,236)
                lighter #ccd8e4 / light #b8c8d8 / medium #a4b8cc
                dark #2a4060 / darker #142030
                transparent hsla(207,35%,84%,.85)

   Lavender:    background #ebe8f4 / pattern rgb(224,220,240)
                lighter #dcd8ec / light #ccc8e0 / medium #bcb8d4
                dark #4a3880 / darker #2a2040
                transparent hsla(252,33%,92%,.85)

   Sage green:  background #e4ede6 / pattern rgb(212,228,216)
                lighter #d0e0d4 / light #bcd0c0 / medium #a8c0ac
                dark #2a5030 / darker #1e2e22
                transparent hsla(128,18%,90%,.85)

   Dusty rose:  background #f0e8e4 / pattern rgb(232,216,210)
                lighter #e4d4ce / light #d4c0b8 / medium #c4aca4
                dark #602820 / darker #3a2820
                transparent hsla(14,33%,92%,.85)

   Warm sand:   background #f0e8d4 / pattern rgb(232,220,200)
                lighter #e4d8bc / light #d4c8a8 / medium #c4b494
                dark #5a3c10 / darker #2e2410
                transparent hsla(40,47%,88%,.85)

   Soft ochre:  background #f2ead4 / pattern rgb(236,224,200)
                lighter #e8d8b4 / light #d8c89c / medium #c8b884
                dark #5a3c08 / darker #2e2408
                transparent hsla(44,52%,88%,.85)
   ─────────────────────────────────────────────────── */

:root {
   --background:             #f0e8e4;
   --background-transparent: hsla(14,33%,92%,.85);
   --background-pattern:     none;
   --color-lighter:          #e4d4ce;
   --color-light:            #d4c0b8;
   --color-medium:           #c4aca4;
   --color-dark:             #602820;
   --color-darker:           #3a2820;
}

/* ─── Hero ─────────────────────────────────────────── */

.hero {
   background-color: hsla(193, 53%, 28%, 1);
   background-image: none;
   border-top: 3px solid hsl(40, 100%, 60%);
   border-bottom: 1px solid hsla(193, 53%, 20%, 1);
   padding: 0;
}

.hero .main__inner {
   padding-top: calc(var(--baseline) * 14);
   padding-bottom: calc(var(--baseline) * 14);
}

.hero__inner {
   border-left: 3px solid hsl(40, 100%, 60%);
   padding-left: 1.25rem;
}

.hero h1 {
   font-size: clamp(1.6rem, 1.6rem + 1.2 * (100vw - 20rem) / 55, 2.6rem);
   font-variation-settings: "wght" 700;
   letter-spacing: -0.03em;
   line-height: 1.15;
   color: #fff;
   margin-top: 0;
}

.hero p {
   color: hsla(193, 53%, 80%, 1);
   font-size: 0.95rem;
   line-height: 1.6;
   margin-top: calc(var(--baseline) * 4);
   max-width: 46ch;
}

.hero__tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   list-style: none;
   margin: calc(var(--baseline) * 8) 0 0;
   padding: 0;
}

.hero__tags li {
   padding: 0;
}

.hero__tags a {
   background-color: rgba(255, 255, 255, 0.12);
   border-radius: calc(var(--border-radius) * 10);
   color: hsla(193, 53%, 90%, 1);
   font-size: 0.78rem;
   font-variation-settings: "wght" var(--font-weight-normal);
   padding: 0.3rem 0.75rem;
   transition: var(--transition);
}

.hero__tags a:hover {
   background-color: hsl(40, 100%, 60%);
   color: hsla(193, 53%, 20%, 1);
}



/* --- Nav item layout --- */
.aard-nav {
   display: flex;
   flex-direction: column;
   gap: 2px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.aard-nav__item a {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 8px 10px;
   border-radius: var(--border-radius);
   font-size: 0.875rem;
   font-family: var(--font-menu);
   font-variation-settings: "wght" var(--font-weight-normal);
   color: var(--color-dark);
   transition: var(--transition);
   text-decoration: none;
   line-height: 1.3;
}

.aard-nav__item a:hover,
.aard-nav__item a:focus {
   background-color: var(--color-lighter);
   color: var(--color-darker);
}

/* --- Icons --- */
.aard-nav__icon {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   width: 28px;
   height: 28px;
   border-radius: 6px;
   transition: var(--transition);
}

.aard-nav__icon svg {
   width: 15px;
   height: 15px;
   fill: currentColor;
}

/* --- Per-section icon colours --- */
.aard-nav__item--home    .aard-nav__icon { background: hsla(214,100%,50%,.12); color: hsl(214,100%,45%); }
.aard-nav__item--bits    .aard-nav__icon { background: hsla(40,100%,50%,.12);  color: hsl(40,100%,38%); }
.aard-nav__item--reviews .aard-nav__icon { background: hsla(334,80%,50%,.12);  color: hsl(334,80%,45%); }
.aard-nav__item--music   .aard-nav__icon { background: hsla(256,70%,55%,.12);  color: hsl(256,70%,50%); }
.aard-nav__item--pickles .aard-nav__icon { background: hsla(100,60%,35%,.12);  color: hsl(100,60%,30%); }
.aard-nav__item--about   .aard-nav__icon { background: hsla(193,53%,45%,.12);  color: hsl(193,53%,35%); }
.aard-nav__item--contact .aard-nav__icon { background: hsla(14,31%,45%,.12);   color: hsl(14,31%,35%); }
.aard-nav__item--rss     .aard-nav__icon { background: hsla(25,90%,50%,.12);   color: hsl(25,90%,45%); }

/* Darken icon colours in dark mode */
@media (prefers-color-scheme: dark) {
   .aard-nav__item--home    .aard-nav__icon { background: hsla(214,100%,50%,.18); color: hsl(214,100%,70%); }
   .aard-nav__item--bits    .aard-nav__icon { background: hsla(40,100%,50%,.18);  color: hsl(40,100%,65%); }
   .aard-nav__item--reviews .aard-nav__icon { background: hsla(334,80%,50%,.18);  color: hsl(334,80%,70%); }
   .aard-nav__item--music   .aard-nav__icon { background: hsla(256,70%,55%,.18);  color: hsl(256,70%,75%); }
   .aard-nav__item--pickles .aard-nav__icon { background: hsla(100,60%,35%,.18);  color: hsl(100,60%,60%); }
   .aard-nav__item--about   .aard-nav__icon { background: hsla(193,53%,45%,.18);  color: hsl(193,53%,65%); }
   .aard-nav__item--contact .aard-nav__icon { background: hsla(14,31%,45%,.18);   color: hsl(14,31%,65%); }
   .aard-nav__item--rss     .aard-nav__icon { background: hsla(25,90%,50%,.18);   color: hsl(25,90%,65%); }
}

/* --- Active (current page) state --- */
.aard-nav__item.is-active a,
.aard-nav__item.active a {
   color: var(--color-darker);
   font-variation-settings: "wght" var(--font-weight-bold);
}

.aard-nav__item--home.is-active    .aard-nav__icon { background: hsl(214,100%,45%); color: #fff; }
.aard-nav__item--bits.is-active    .aard-nav__icon { background: hsl(40,100%,38%);  color: #fff; }
.aard-nav__item--reviews.is-active .aard-nav__icon { background: hsl(334,80%,45%);  color: #fff; }
.aard-nav__item--music.is-active   .aard-nav__icon { background: hsl(256,70%,50%);  color: #fff; }
.aard-nav__item--pickles.is-active .aard-nav__icon { background: hsl(100,60%,30%);  color: #fff; }
.aard-nav__item--about.is-active   .aard-nav__icon { background: hsl(193,53%,35%);  color: #fff; }
.aard-nav__item--contact.is-active .aard-nav__icon { background: hsl(14,31%,35%);   color: #fff; }
.aard-nav__item--rss.is-active     .aard-nav__icon { background: hsl(25,90%,45%);   color: #fff; }

/* --- Divider between content nav and meta nav --- */
.aard-nav__divider {
   height: 1px;
   background: var(--color-light);
   margin: 8px 10px;
   opacity: 0.5;
}

/* --- Mobile: show labels inline, hide tooltips --- */
@media all and (max-width: 56.1875em) {
   .aard-nav {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 4px;
   }
   .aard-nav__divider {
      display: none;
   }
   .aard-nav__item a {
      padding: 6px 8px;
      gap: 6px;
   }
   .aard-nav__label {
      font-size: 0.78rem;
   }
}

/* --- Desktop: full vertical nav --- */
@media all and (min-width: 56.25em) {
   .aard-nav {
      width: 100%;
      margin-top: 8px;
   }
   .aard-nav__item {
      width: 100%;
   }
   .aard-nav__item a {
      width: 100%;
   }
}

/* ─── Cusdis comments ───────────────────────────────── */

#cusdis_thread {
   border-top: 2px solid var(--color-light);
   margin-top: calc(var(--baseline) * 12);
   padding-top: calc(var(--baseline) * 10);
}

/* ─── About page ────────────────────────────────────── */

/* Hero */
.about-hero {
   background: hsla(193,53%,28%,1);
   border-top: 3px solid hsl(40,100%,60%);
   border-bottom: 1px solid hsla(193,53%,20%,1);
   padding: 2.5rem 0;
}

.about-hero__inner {
   border-left: 3px solid hsl(40,100%,60%);
   padding-left: 1.25rem;
   max-width: 52ch;
}

.about-hero__name {
   color: #fff;
   font-size: clamp(1.8rem, 1.8rem + 1vw, 2.8rem);
   font-variation-settings: "wght" 700;
   letter-spacing: -0.03em;
   line-height: 1.1;
   margin: 0 0 0.75rem;
}

.about-hero__handle {
   color: hsl(40,100%,60%);
   font-variation-settings: "wght" 400;
}

.about-hero__intro {
   color: hsla(193,53%,85%,1);
   font-size: 1rem;
   line-height: 1.65;
   margin: 0;
}

/* Body */
.about-body {
   padding-top: 2.5rem;
   padding-bottom: 3rem;
}

/* Photo strip */
.about-photos {
   margin-bottom: 3rem;
}

.about-photos__caption {
   font-size: 0.75rem;
   opacity: 0.45;
   margin-bottom: 0.75rem;
   font-style: italic;
}

.about-photos__strip {
   display: flex;
   gap: 0.5rem;
   overflow-x: auto;
   padding-bottom: 0.5rem;
   scrollbar-width: thin;
   scrollbar-color: var(--color-medium) var(--color-lighter);
}

.about-photos__item {
   flex: 0 0 auto;
   margin: 0;
   width: 140px;
   height: 140px;
   border-radius: 6px;
   overflow: hidden;
   background: var(--color-lighter);
}

.about-photos__item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

/* Sections */
.about-section {
   border-top: 1px solid var(--color-light);
   padding: 2rem 0;
}

.about-section__title {
   color: var(--color-darker);
   font-size: 1.2rem;
   font-variation-settings: "wght" 700;
   letter-spacing: -0.02em;
   margin: 0 0 1rem;
}

.about-section__content p {
   color: var(--color-dark);
   line-height: 1.7;
   max-width: 62ch;
}

.about-section__content p + p {
   margin-top: 0.75rem;
}

/* Featured section (AarDHD) */
.about-section--featured {
   background: hsla(193,53%,28%,0.06);
   border: 1px solid hsla(193,53%,28%,0.15);
   border-radius: 8px;
   padding: 1.75rem;
   margin: 1rem 0;
}

.about-section--featured .about-section__title {
   color: hsla(193,53%,22%,1);
}

/* CTA button */
.about-cta {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   background: hsla(193,53%,28%,1);
   border-radius: 6px;
   color: #fff;
   font-size: 0.85rem;
   font-variation-settings: "wght" 600;
   margin-top: 1.25rem;
   padding: 0.6rem 1.1rem;
   text-decoration: none;
   transition: var(--transition);
}

.about-cta:hover {
   background: hsla(193,53%,22%,1);
   color: hsl(40,100%,60%);
}

/* Placeholder notes (remove when copy is added) */
.about-placeholder-note {
   border-left: 2px solid hsl(40,100%,60%);
   color: var(--color-dark) !important;
   font-size: 0.8rem !important;
   font-style: italic;
   opacity: 0.6;
   padding-left: 0.75rem;
}

/* Links footer */
.about-links {
   border-top: 1px solid var(--color-light);
   padding-top: 2rem;
   margin-top: 1rem;
}

.about-links__title {
   color: var(--color-darker);
   font-size: 0.7rem;
   font-variation-settings: "wght" 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   margin: 0 0 0.75rem;
}

.about-links__list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 0.4rem 1.5rem;
}

.about-links__list a {
   color: var(--color-dark);
   font-size: 0.82rem;
   text-decoration: underline;
   text-underline-offset: 3px;
}

.about-links__list a:hover {
   color: var(--color-darker);
}

/* Section label (small uppercase above h2) */
.about-section__label {
   color: hsla(193,53%,28%,1);
   font-size: 0.7rem;
   font-variation-settings: "wght" 600;
   letter-spacing: 0.14em;
   margin-bottom: 0.4rem;
   text-transform: uppercase;
}

.about-section--featured .about-section__label {
   color: hsla(193,53%,35%,1);
}

/* Pullquote */
.about-pullquote {
   border-left: 3px solid hsl(40,100%,60%);
   color: var(--color-dark);
   font-size: 1.05rem;
   font-style: italic;
   line-height: 1.55;
   margin: 1.5rem 0;
   padding: 0.4rem 0 0.4rem 1.25rem;
}

/* Photo strip figcaptions */
.about-photos__item figcaption {
   background: rgba(26,24,20,0.5);
   bottom: 0;
   color: #fff;
   font-size: 0.65rem;
   left: 0;
   letter-spacing: 0.04em;
   padding: 0.25rem 0.4rem;
   position: absolute;
   right: 0;
   text-align: center;
}

.about-photos__item {
   position: relative;
}

/* ─── Sidebar links section ─────────────────────────── */

.aard-links__group-label {
   color: var(--color-dark);
   font-size: 0.67rem;
   font-variation-settings: "wght" 700;
   letter-spacing: 0.1em;
   margin: 0.9rem 0 0.35rem;
   text-transform: uppercase;
}

.aard-links__group-label:first-of-type {
   margin-top: 0.25rem;
}

.aard-links__list {
   list-style: none;
   margin: 0 0 0.25rem;
   padding: 0;
}

.aard-links__list li {
   border-bottom: 1px solid var(--color-lighter);
   padding: 0.3rem 0;
}

.aard-links__list li:last-child {
   border-bottom: none;
}

.aard-links__list a {
   color: var(--color-dark);
   font-size: 0.8rem;
   text-decoration: none;
   transition: var(--transition);
}

.aard-links__list a:hover {
   color: var(--color-darker);
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* "soon" badge on Lichfield Radio */
.aard-links__soon {
   display: flex;
   align-items: center;
   gap: 0.4rem;
}

.aard-links__soon span {
   background: hsl(40,100%,60%);
   border-radius: 100px;
   color: hsla(193,53%,20%,1);
   font-size: 0.6rem;
   font-variation-settings: "wght" 700;
   letter-spacing: 0.06em;
   padding: 0.1rem 0.45rem;
   text-transform: uppercase;
}

/* ─── Sidebar social icons ──────────────────────────── */

.aard-social {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding: 4px 0;
}

.aard-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 6px;
   background: transparent;
   color: var(--color-dark);
   text-decoration: none;
   transition: var(--transition);
}

.aard-social a:hover {
   background: var(--color-dark);
   color: #fff;
}

.aard-social svg {
   width: 18px;
   height: 18px;
   fill: currentColor;
}

/* ─── Sidebar: sticky + independently scrollable ────── */

.right-bar {
   position: sticky;
   top: 0;
   max-height: 100vh;
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--color-light) transparent;
}

.right-bar::-webkit-scrollbar {
   width: 4px;
}

.right-bar::-webkit-scrollbar-track {
   background: transparent;
}

.right-bar::-webkit-scrollbar-thumb {
   background: var(--color-light);
   border-radius: 4px;
}

/* ─── Hide Authors box (toggle ineffective in override) */

.sidebar .authors {
   display: none;
}

/* ─── Share buttons: Bluesky + Mastodon ─────────────── */

.aard-share-bluesky svg,
.aard-share-mastodon svg {
   width: 1em;
   height: 1em;
   vertical-align: middle;
}

/* ─── Search page ───────────────────────────────────── */

.aard-search-wrap {
   margin: 0 0 2rem;
}

.aard-search-form {
   display: flex;
   border: 2px solid var(--color-medium);
   border-radius: 8px;
   overflow: hidden;
   background: #fff;
   transition: border-color 0.2s ease;
}

.aard-search-form:focus-within {
   border-color: hsla(193,53%,28%,1);
}

.aard-search-input {
   flex: 1;
   border: none;
   background: transparent;
   font-size: 0.9rem;
   padding: 0.7rem 1rem;
   outline: none;
   color: var(--color-darker);
   font-family: var(--font-body);
}

.aard-search-input::placeholder {
   color: var(--color-medium);
}

.aard-search-btn {
   background: hsla(193,53%,28%,1);
   border: none;
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0 1rem;
   transition: background 0.2s ease;
}

.aard-search-btn:hover {
   background: hsla(193,53%,22%,1);
}

.aard-search-btn svg {
   width: 18px;
   height: 18px;
   fill: currentColor;
}

.aard-search-status {
   color: var(--color-medium);
   font-size: 0.8rem;
   margin: 0.75rem 0 0;
   min-height: 1.4em;
}

.aard-search-results {
   list-style: none;
   margin: 1.5rem 0 0;
   padding: 0;
}

.aard-search-result {
   border-top: 1px solid var(--color-lighter);
   padding: 0.9rem 0;
}

.aard-search-result:last-child {
   border-bottom: 1px solid var(--color-lighter);
}

.aard-search-result__title {
   font-size: 0.875rem;
   font-variation-settings: "wght" 600;
   line-height: 1.4;
   margin: 0 0 0.3rem;
}

.aard-search-result__title a {
   color: hsla(193,53%,28%,1);
   text-decoration: none;
}

.aard-search-result__title a:hover {
   color: hsla(193,53%,20%,1);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.aard-search-result__title mark,
.aard-search-result__excerpt mark {
   background: hsl(40,100%,72%);
   border-radius: 2px;
   color: var(--color-darker);
   font-style: normal;
   padding: 0 2px;
}

.aard-search-result__excerpt {
   color: var(--color-dark);
   font-size: 0.8rem;
   line-height: 1.55;
   margin: 0 0 0.35rem;
}

.aard-search-result__meta {
   font-size: 0.72rem;
   margin-top: 0.3rem;
}

.aard-search-result__tag {
   background: var(--color-lighter);
   border-radius: 100px;
   color: var(--color-dark);
   display: inline-block;
   font-size: 0.7rem;
   margin-right: 4px;
   padding: 0.1rem 0.5rem;
}

.aard-search-noresults {
   color: var(--color-dark);
   font-size: 0.875rem;
   padding: 1.5rem 0;
}