/* ============================================================
   Groovy IT — MkDocs Material brand overrides
   Mirrors the palette, typography, and component style of
   the main groovyit.co.uk static site.
   ============================================================ */

/* ── Colour tokens (light) ─────────────────────────────────── */
:root {
  --md-primary-fg-color:        #22a59f;
  --md-primary-fg-color--light: #4fd2c0;
  --md-primary-fg-color--dark:  #0e8a85;
  --md-accent-fg-color:               #ffd35a;
  --md-accent-fg-color--transparent:  rgba(255, 211, 90, 0.1);

  --md-default-bg-color:              #edf8f5;
  --md-default-fg-color:              #0b2a3f;
  --md-default-fg-color--light:       #3e5f74;
  --md-default-fg-color--lighter:     rgba(62, 95, 116, 0.54);
  --md-default-fg-color--lightest:    rgba(62, 95, 116, 0.28);

  --md-typeset-color:     #0b2a3f;
  --md-typeset-a-color:   #22a59f;

  --md-code-bg-color:  #f0f9ff;
  --md-code-fg-color:  #0b2a3f;

  --md-footer-bg-color:       #0a4f70;
  --md-footer-bg-color--dark: #063548;
  --md-footer-fg-color:              #f2fff9;
  --md-footer-fg-color--light:       rgba(242, 255, 249, 0.82);
  --md-footer-fg-color--lighter:     rgba(242, 255, 249, 0.52);

  --groovy-surface:   #ffffff;
  --groovy-line:      rgba(13, 66, 93, 0.16);
  --groovy-shadow:    0 12px 26px rgba(8, 44, 66, 0.1);
  --groovy-radius-md: 22px;
  --groovy-radius-sm: 14px;
}

/* ── Colour tokens (dark) ──────────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #4fd2c0;
  --md-primary-fg-color--light: #6de0d6;
  --md-primary-fg-color--dark:  #22a59f;
  --md-accent-fg-color:         #ffd971;

  --md-default-bg-color:              #071923;
  --md-default-fg-color:              #eaf7ff;
  --md-default-fg-color--light:       #b4cadd;
  --md-default-fg-color--lighter:     rgba(180, 202, 221, 0.54);
  --md-default-fg-color--lightest:    rgba(180, 202, 221, 0.24);

  --md-typeset-color:   #eaf7ff;
  --md-typeset-a-color: #4fd2c0;

  --md-code-bg-color:  #102939;
  --md-code-fg-color:  #eaf7ff;

  --md-footer-bg-color:       #07364e;
  --md-footer-bg-color--dark: #041f2d;

  --groovy-surface:   #102939;
  --groovy-line:      rgba(145, 197, 219, 0.22);
  --groovy-shadow:    0 12px 26px rgba(0, 0, 0, 0.3);
}

/* ── Page background ───────────────────────────────────────── */
.md-main {
  background-color: var(--md-default-bg-color);
}

/* ambient radial gradient blobs matching the main site */
body::before {
  content: "";
  position: fixed;
  inset: -20vh auto auto -20vw;
  width: 54vw;
  height: 54vw;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(34, 165, 159, 0.18), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  inset: auto -20vw -22vh auto;
  width: 52vw;
  height: 52vw;
  border-radius: 999px;
  background: radial-gradient(circle at center, rgba(255, 211, 90, 0.12), transparent 64%);
  filter: blur(14px);
  pointer-events: none;
  z-index: -1;
}

/* ── Header / navigation bar ───────────────────────────────── */
.md-header {
  background: rgba(8, 61, 85, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(177, 232, 232, 0.28);
}

.md-header__title {
  font-family: "Righteous", "Trebuchet MS", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.md-header__button.md-logo {
  padding: 0.3rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.8rem;
  border-radius: 6px;
}

.md-tabs {
  background: rgba(6, 45, 64, 0.88);
  border-bottom: 1px solid rgba(177, 232, 232, 0.22);
}

.md-tabs__link {
  font-weight: 700;
  opacity: 0.82;
}

.md-tabs__link:is(:focus, :hover),
.md-tabs__link--active {
  opacity: 1;
}

[data-md-color-scheme="slate"] .md-header {
  background: rgba(7, 28, 39, 0.95);
}

[data-md-color-scheme="slate"] .md-tabs {
  background: rgba(4, 20, 30, 0.9);
}

/* ── Grid / overall page width ─────────────────────────────── */
/* Default Material grid is 61rem — too narrow with both sidebars.
   80rem gives a comfortable content area alongside the author panel
   and table-of-contents column. */
.md-grid {
  max-width: 72rem;
}

/* ── Footer logo ────────────────────────────────────────────── */
.md-footer-logo {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.4rem;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.md-footer-logo:hover {
  opacity: 1;
}

.md-footer-logo img {
  height: 28px;
  width: auto;
  filter: brightness(1.1);
}

/* ── Blog post back link ────────────────────────────────────── */
.md-post__back .md-nav__title,
.md-post__back .md-nav__container {
  background: transparent;
  box-shadow: none;
  color: var(--md-default-fg-color);
}

/* ── Blog post cards on the index page ─────────────────────── */
.md-post {
  border-radius: var(--groovy-radius-md);
  border: 1px solid var(--groovy-line);
  background: var(--groovy-surface);
  box-shadow: var(--groovy-shadow);
  padding: 1.1rem 1.2rem;
  margin-bottom: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.md-post + .md-post {
  margin-top: 1rem;
}

.md-post:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #22a59f 55%, var(--groovy-line));
  box-shadow: 0 18px 36px rgba(8, 44, 66, 0.16);
}

.md-post__header {
  margin-bottom: 0.6rem;
}

.md-post__content {
  border-top: none;
}

.md-post__action {
  font-weight: 800;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, #22a59f 54%, #0b2a3f);
}

/* ── Author chips ───────────────────────────────────────────── */
.md-author {
  border-radius: 999px;
}

.md-author__list {
  gap: 0.35rem;
}

/* ── Category / tag chips ───────────────────────────────────── */
.md-tag,
.md-typeset .md-tag {
  background: color-mix(in srgb, #22a59f 14%, var(--groovy-surface));
  color: color-mix(in srgb, #22a59f 62%, #0b2a3f);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border: 1px solid color-mix(in srgb, #22a59f 28%, transparent);
}

.md-tag:is(:focus, :hover),
.md-typeset .md-tag:is(:focus, :hover) {
  background: color-mix(in srgb, #22a59f 22%, var(--groovy-surface));
  color: color-mix(in srgb, #22a59f 70%, #0b2a3f);
}

/* ── Typography ─────────────────────────────────────────────── */
.md-typeset {
  line-height: 1.7;
  color: var(--md-typeset-color);
}

/* Page/article headline — Righteous display font, matching main site h1 */
.md-typeset h1 {
  font-family: "Righteous", "Trebuchet MS", sans-serif;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--md-typeset-color);
}

.md-typeset h2 {
  font-weight: 800;
  color: var(--md-typeset-color);
  border-bottom: none;
  padding-bottom: 0;
}

.md-typeset h3 {
  font-weight: 700;
  color: var(--md-typeset-color);
}

.md-typeset p {
  color: var(--md-default-fg-color--light);
  line-height: 1.7;
}

.md-typeset a {
  color: var(--md-typeset-a-color);
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.md-typeset a:hover {
  color: var(--md-primary-fg-color--dark);
}


.md-typeset li {
  color: var(--md-default-fg-color--light);
  line-height: 1.65;
}

/* ── CTA buttons (used in blog posts via .md-button) ───────── */
.md-typeset .md-button {
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.md-typeset .md-button:hover {
  transform: translateY(-1px);
}

.md-typeset .md-button--primary {
  background: linear-gradient(120deg, #a8f3bb 0%, #ffe07c 62%, #ffbf74 100%);
  color: #173039;
  border-color: transparent;
  box-shadow: 0 10px 22px rgba(8, 44, 66, 0.2);
}

.md-typeset .md-button--primary:hover {
  background: linear-gradient(120deg, #befac6 0%, #ffe995 60%, #ffc685 100%);
  color: #173039;
  box-shadow: 0 14px 28px rgba(8, 44, 66, 0.26);
}

/* ── Search bar ─────────────────────────────────────────────── */
.md-search__form {
  border-radius: 999px;
}

/* ── Sidebar nav ────────────────────────────────────────────── */
.md-nav__link--active {
  color: var(--md-primary-fg-color);
  font-weight: 700;
}

/* ── Footer ─────────────────────────────────────────────────── */
.md-footer {
  background: linear-gradient(135deg, #0a4f70 0%, #137a8c 52%, #6ea64c 100%);
  color: #f2fff9;
}

.md-footer-meta {
  background: rgba(4, 28, 42, 0.38);
}

.md-footer-meta__inner {
  color: rgba(242, 255, 249, 0.82);
  font-size: 0.8rem;
}

.md-footer-meta__inner a {
  color: #e8ffcc;
  text-decoration-thickness: 2px;
}

.md-footer-meta__inner a:hover {
  color: #f7ffd8;
}

.md-footer__link {
  color: rgba(242, 255, 249, 0.88);
  font-weight: 700;
}

.md-footer__link:hover {
  color: #f2fff9;
}

.md-footer__title {
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(242, 255, 249, 0.92);
}

/* ── Dark mode adjustments ──────────────────────────────────── */
[data-md-color-scheme="slate"] .md-post {
  background: var(--groovy-surface);
  border-color: var(--groovy-line);
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3 {
  color: #eaf7ff;
}

[data-md-color-scheme="slate"] .md-typeset p,
[data-md-color-scheme="slate"] .md-typeset li {
  color: #b4cadd;
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .md-post {
    transition: none;
  }
  body::before,
  body::after {
    display: none;
  }
}