/* Echoes of Myrthalis - the Echoes UI kit on MkDocs Material: navy + gold + ice */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&display=swap");

:root {
  --eom-gold: #e8bc58;
  --eom-gold-lt: #ffe6a0;
  --eom-gold-dk: #a8761c;
  --eom-ice: #8fd4ff;
  --eom-navy: #0a1226;
  --md-primary-fg-color: #0d1a38;
  --md-primary-fg-color--light: #13234a;
  --md-primary-fg-color--dark: #0a1226;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #e8bc58;
}

/* dark (default) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0b1428;
  --md-default-fg-color: rgba(223, 230, 245, .92);
  --md-default-fg-color--light: rgba(223, 230, 245, .62);
  --md-default-fg-color--lighter: rgba(223, 230, 245, .32);
  --md-default-fg-color--lightest: rgba(223, 230, 245, .12);
  --md-code-bg-color: #0a1430;
  --md-code-fg-color: #8fd4ff;
  --md-typeset-a-color: #8fd4ff;
  --md-typeset-table-color: rgba(143, 160, 200, .22);
  --md-footer-bg-color: #0a1226;
  --md-footer-bg-color--dark: #070d1c;
  --eom-head: #ffe6a0;
  --eom-h2: #e8bc58;
  --eom-card: #0f1c38;
}

/* light */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #f7f5ef;
  --md-typeset-a-color: #1d6fb0;
  --md-code-bg-color: #f1ece0;
  --md-code-fg-color: #1d4f80;
  --md-footer-bg-color: #0a1226;
  --md-footer-bg-color--dark: #070d1c;
  --eom-head: #7a520c;
  --eom-h2: #a8761c;
  --eom-card: #ffffff;
}

/* header + tabs: always navy */
.md-header, .md-tabs { background-color: #0a1226; }
.md-tabs { border-top: 1px solid rgba(255, 255, 255, .06); }
.md-tabs__link--active, .md-tabs__item--active .md-tabs__link { color: var(--eom-gold-lt); }
.md-tabs__link { opacity: .85; }
.md-header__title { font-family: "Cinzel", serif; font-weight: 700; color: var(--eom-gold-lt); }

/* headings */
.md-typeset h1 { font-family: "Cinzel", serif; font-weight: 700; color: var(--eom-head); letter-spacing: .3px; }
.md-typeset h2 { color: var(--eom-h2); font-weight: 500; border-bottom: 1px solid var(--md-default-fg-color--lightest); padding-bottom: .3em; }

/* the left menu: the open page in gold */
.md-nav__link--active { color: var(--eom-gold) !important; font-weight: 500; }
.md-nav__item--section > .md-nav__link { color: var(--eom-gold); text-transform: uppercase; letter-spacing: 1px; font-size: .62rem; }

/* tables */
.md-typeset table:not([class]) th { background: var(--md-primary-fg-color--light); color: #ffe6a0; font-weight: 500; }
[data-md-color-scheme="default"] .md-typeset table:not([class]) th { background: #efe9da; color: #7a520c; }

/* keys: gold on navy */
.md-typeset kbd { background: var(--md-code-bg-color); color: var(--eom-head); border-color: var(--md-default-fg-color--lightest); }

/* content tabs */
.md-typeset .tabbed-labels > label { color: var(--md-default-fg-color--light); }
.md-typeset .tabbed-set > input:checked + label, .md-typeset .tabbed-labels > label:hover { color: var(--eom-head); }
.md-typeset .tabbed-labels::before { background: var(--eom-gold); }

/* the gold "echo" note box */
.md-typeset .admonition.echo, .md-typeset details.echo { border-color: var(--eom-gold); }
.md-typeset .echo > .admonition-title, .md-typeset .echo > summary { background-color: rgba(232, 188, 88, .14); }
.md-typeset .echo > .admonition-title::before, .md-typeset .echo > summary::before {
  background-color: var(--eom-gold);
  -webkit-mask-image: var(--md-admonition-icon--echo);
  mask-image: var(--md-admonition-icon--echo);
}

/* home: the hero + cards */
.eom-hero {
  border-radius: 6px; padding: 1.6rem 1.4rem; margin: 0 0 1rem;
  background: radial-gradient(circle at 82% 18%, rgba(143, 212, 255, .2), transparent 45%), linear-gradient(135deg, #13234a, #0a1226);
  border: 1px solid #2a3c66; color: #dfe6f5;
}
.md-typeset .eom-hero h1 { color: #ffe6a0; margin: 0 0 .4rem; }
.eom-hero p { color: #b6c3df; max-width: 40rem; }
.md-typeset .eom-hero .md-button { color: #ffe6a0; border-color: #e8bc58; }
.md-typeset .eom-hero .md-button--primary { background: linear-gradient(#e8bc58, #a8761c); color: #1b1204; border: 0; }
.md-typeset .grid.cards > ul > li, .md-typeset .grid > .card { background: var(--eom-card); border-color: var(--md-default-fg-color--lightest); }
.md-typeset .grid.cards > ul > li:hover { border-color: var(--eom-gold); }
.md-typeset .grid.cards .twemoji, .md-typeset .grid.cards .lg { color: var(--eom-gold); }

/* footer prev / next */
.md-footer__link:hover .md-footer__title { color: var(--eom-gold-lt); }