/* ========================================================================= */
/* colors.css                                                                */
/* ========================================================================= */
:root {
  --anchor-color--default: #4169e1;
  --anchor-color--default-hover: #eb5937;
  --anchor-color--menu: #333;
  --anchor-color--footer: lch(87.83% 70.36 291.93);

  --button-color--default: #eb5937;
  --button-color--hover: #d94826;
  --button-text-color--default: #fff;

  --hover--on-dark: #fff2;
  --hover--on-light: #0001;

  --background-color--primary: #fff;
  --background-color--secondary: #eee;
  --background-color--accent: #eb5937;
  --background-color--dark: #333;
  --background-color--dark-subtle: #fff2;

  --border-color--primary: #eb5937;
  --border-color--secondary: #ddd;

  --text-color--accent: #eb5937;
  --text-color--dark: #333;
  --text-color--dark-subtle: #666;
  --text-color--light: #eee;
  --text-color--light-subtle: #ddd;
  --text-color--white: #fff;
}

body {
  background: var(--background-color--primary);
  color: var(--text-color--dark);
}

a {
  color: var(--anchor-color--default);

  &:hover {
    color: var(--anchor-color--default-hover);
  }
}

/* ========================================================================= */
/* Site Header                                                               */
/* ========================================================================= */
/* TODO: Mimic the layout.css structure to extract body > header > target */
body > header {
  border-bottom-color: var(--border-color--secondary);

  & a {
    /* TODO: Verify this works across menu changes and with title */
    color: var(--anchor-color--menu);
  }

  /* --- Site Header: Phone Number --- */
  & address {
    background: var(--background-color--dark);

    & a {
      color: var(--text-color--light);

      &:hover {
        background: var(--hover--on-dark);
        color: var(--text-color--light);
      }

      &::before { /* Phone icon */
        border-color: var(--background-color--accent);
      }
    }
  }

  /* --- Brand --- */
  & hgroup p {
    color: var(--text-color--dark-subtle);
  }

  /* --- Site Navigation --- */
  & nav {
    & button {
      background: var(--background-color--dark);
      color: var(--text-color--light);
    }

    & ul {
      background: var(--background-color--secondary);

      & li a {
        border-bottom-color: var(--border-color--secondary);
        color: var(--text-color--dark);

        &:hover {
          background: var(--hover--on-light);
        }
      }

      @media (min-width: 1024px) {
        background: transparent;

        & > li {
          &:hover a {
            border-bottom-color: var(--border-color--primary);
          }

          & a {
            border-bottom-color: transparent;
          }
        }

        & li ul {
          background: var(--background-color--primary);
          border-color: var(--border-color--primary);

          & li a:hover {
            background: var(--hover--on-light);
          }
        }
      }
    }
  }
}

/* ========================================================================= */
/* Site Main.                                                                */
/* ========================================================================= */
body > main {

  /* --- Hero --- */
  & > header a {
    background: var(--button-color--default);
    color: var(--button-text-color--default);

    &:hover {
      background: var(--button-color--hover);
      color: var(--button-text-color--default);
    }
  }
}

/* ------------------------------------------------------------------------- */
/* Site Main - Pagination                                                    */
/* ------------------------------------------------------------------------- */
body > main > nav {
  & li {
    &[aria-current="page"] {
      background-color: var(--background-color--secondary);
    }

    & a {
      background: var(--background-color--dark);
      color: var(--text-color--light);

      &:hover {
        background: var(--background-color--accent);
        color: var(--text-color--light);
      }
    }
  }
}

/* ========================================================================= */
/* Side Navigation                                                           */
/* ========================================================================= */
body > aside {
  & h2 {
    border-bottom-color: var(--border-color--primary);
  }

  & ul a {
    border-bottom-color: var(--border-color--secondary);
    color: var(--text-color--dark-subtle);

    &[aria-current="page"] {
      color: var(--text-color--accent);
    }
  }
}

/* ========================================================================= */
/* Site Footer                                                               */
/* ========================================================================= */
body > footer {
  background: var(--background-color--dark);
  color: var(--text-color--light-subtle);

  & a {
    color: var(--text-color--accent);
  }

  & h2 {
    border-bottom-color: var(--border-color--primary);
    color: var(--text-color--light);
  }

  /* --- Copyright --- */
  & > p {
    background: var(--background-color--dark-subtle);
    color: var(--text-color--light-subtle);
  }
}