/**
 * Header tone - dark.
 *
 * Only the tokens change, the same way the footer tones work. There is no
 * tone-light.css: light is what the header section of main.css already
 * declares, so this file is an override of it rather than one of two peers.
 *
 * The logo is left alone, as it is in the footer tones. A site whose logo is a
 * single flat colour can invert it in a child theme with one line:
 * .header-wrapper { --header-logo-filter: brightness(0) invert(1); }
 *
 * @package roofing
 * @author Masood HQ <hey@masoodhq.com>
 * @version 1.0
 */

.header-wrapper {
  --header-bg: var(--color-heading);
  --header-text: rgba(255, 255, 255, 0.72);
  --header-link: #ffffff;
  --header-link-hover: rgba(255, 255, 255, 0.72);
  --header-icon-bg: rgba(255, 255, 255, 0.14);
  --header-icon: #ffffff;
}

/*
 * A transparent header shows the section behind it, so it takes no bar colour
 * of its own - the point of pairing dark with transparent is light text over a
 * hero, not a dark strip on top of one.
 */
.roofkit-header-transparent .header-wrapper {
  --header-bg: transparent;
}

/*
 * The drawer panel keeps its light background at every width, so everything
 * inside it - links, the close icon - goes back to the light tone. Without
 * this, a dark header would open a drawer of white text on white.
 */
.roofkit-header-drawer .header-wrapper nav {
  --header-link: var(--color-heading);
  --header-link-hover: var(--color-primary);
  --header-text: var(--color-text);
  --header-icon-bg: var(--color-light-bg);
  --header-icon: inherit;
}

@media (max-width: 1024px) {
  .header-wrapper nav {
    --header-link: var(--color-heading);
    --header-link-hover: var(--color-primary);
    --header-text: var(--color-text);
    --header-icon-bg: var(--color-light-bg);
    --header-icon: inherit;
  }
}