/* ---------------------------------------------------------------------------
   Brand colours
   Navy #154273 · pale blue #DDEFF8 · terracotta #D97554
   Requires primary: custom and accent: custom in mkdocs.yml
   --------------------------------------------------------------------------- */

:root {
  /* Header, nav and link colour */
  --md-primary-fg-color:        #154273;
  --md-primary-fg-color--light: #2064AC;  /* hover states; must hold white text */
  --md-primary-fg-color--dark:  #0E2D4E;
  --md-primary-bg-color:        #ffffff;  /* text sitting on the navy header */

  /* Terracotta, darkened from #D97554 to reach 4.6:1 on white (AA) */
  --md-accent-fg-color:         #B85A3C;

  /* Pale blue works as a surface tint rather than a foreground colour */
  --md-code-bg-color:           #DDEFF8;
}

/* ---------------------------------------------------------------------------
   Dark mode
   The navy header stays — it sits slightly lighter than the slate background,
   so it reads as a raised bar and keeps the brand intact. Only the text
   colours are lifted, because navy and terracotta both fall below AA
   against a dark background.
   --------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #154273;
  --md-primary-fg-color--light: #2064AC;
  --md-primary-fg-color--dark:  #0E2D4E;

  /* Full-strength terracotta: 5.5:1 on slate */
  --md-accent-fg-color:         #D97554;

  /* Body links: navy is unreadable here, so a pale blue at 6.5:1 */
  --md-typeset-a-color:         #7FB3E3;

  /* Pale blue is far too bright as a surface in dark mode */
  --md-code-bg-color:           hsla(232, 15%, 15%, 1);
}

/* ---------------------------------------------------------------------------
   Header logo
   Material's default is 1.2rem (24px), at which the "Energy Technologies"
   subtitle is too small to read. Trading padding for height keeps the logo
   within the 48px header while making the wordmark legible.
   --------------------------------------------------------------------------- */

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

.md-header__button.md-logo img {
  height: 1.6rem;  /* 32px */
}

/* ---------------------------------------------------------------------------
   Home page: pinned app shortcuts panel
   Floats right of the body text on desktop, drops below it on narrow screens.
   --------------------------------------------------------------------------- */

.home-apps {
  float: right;
  width: 11rem;
  margin: 0 0 1.2rem 1.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.3rem;
  background-color: var(--md-code-bg-color);
}

.home-apps p {
  margin: 0;
}

.home-apps p:first-child {
  margin-bottom: 0.6rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--md-default-fg-color--light);
}

.home-apps a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.home-apps a .twemoji {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
}

@media screen and (max-width: 44.9375em) {
  .home-apps {
    float: none;
    width: auto;
    margin: 0 0 1.2rem;
  }
}

/* Official Google product colours. The bundled icons are single-path
   silhouettes, so each one is tinted rather than truly multicolour. */

.home-apps .app-gmail .twemoji    { color: #EA4335; }
.home-apps .app-calendar .twemoji { color: #4285F4; }
.home-apps .app-drive .twemoji    { color: #1FA463; }
.home-apps .app-meet .twemoji     { color: #00897B; }
.home-apps .app-chat .twemoji     { color: #34A853; }
.home-apps .app-sheets .twemoji   { color: #34A853; }
.home-apps .app-slides .twemoji   { color: #FBBC04; }

/* The notice board starts below the floated apps panel rather than being
   squeezed alongside it. The heading has to clear as well, or it sits next
   to the panel with its cards stranded underneath. */

.md-typeset h2#notice-board,
.notice-board {
  clear: both;
}