/* Admin theme - the dashboard and login screen in the site's look.
   Loaded by functions/admin_theme.php on admin screens, the login screen
   and (for the toolbar) the front end. Overrides WordPress's default
   "fresh" scheme, which every account is held to. */

@font-face {
  font-family: "Gate 03";
  src: url("../assets/fonts/Gate03-Ultra.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --gate-dark: #000000;
  --gate-light: #ffffff;
  --gate-green: #3fff82;
  --gate-grey: #1a1a1a;
  --gate-line: #2e2e2e;
  --gate-radius: 6px;
  --gate-label: "Gate 03", "Arial Black", Arial, sans-serif;
  /* WordPress and ACF read these for buttons, focus rings, toggles and
     ACF's layout headers. */
  --wp-admin-theme-color: #000000;
  --wp-admin-theme-color--rgb: 0, 0, 0;
  --wp-admin-theme-color-darker-10: #1a1a1a;
  --wp-admin-theme-color-darker-10--rgb: 26, 26, 26;
  --wp-admin-theme-color-darker-20: #333333;
  --wp-admin-theme-color-darker-20--rgb: 51, 51, 51;
}

/* ---- Toolbar ---------------------------------------------------- */
#wpadminbar {
  background: var(--gate-dark);
}
#wpadminbar .ab-item,
#wpadminbar a.ab-item,
#wpadminbar > #wp-toolbar span.ab-label,
#wpadminbar > #wp-toolbar span.noticon,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before {
  color: var(--gate-light) !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item,
#wpadminbar .ab-top-menu > li.hover > .ab-item,
#wpadminbar .ab-top-menu > li > .ab-item:focus {
  background: var(--gate-grey) !important;
  color: var(--gate-green) !important;
}
#wpadminbar .ab-top-menu > li:hover > .ab-item::before,
#wpadminbar .ab-top-menu > li:hover .ab-icon::before,
#wpadminbar .ab-top-menu > li:hover > .ab-item .ab-label {
  color: var(--gate-green) !important;
}
#wpadminbar .menupop .ab-sub-wrapper {
  background: var(--gate-grey);
}
#wpadminbar .ab-submenu .ab-item:hover,
#wpadminbar .ab-submenu a:focus {
  color: var(--gate-green) !important;
}

/* ---- Side menu -------------------------------------------------- */
#adminmenuback,
#adminmenuwrap,
#adminmenu {
  background: var(--gate-dark);
}
#adminmenu a,
#adminmenu div.wp-menu-image::before,
#collapse-button {
  color: var(--gate-light);
}
#adminmenu .wp-menu-name {
  font-family: var(--gate-label);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#adminmenu li.menu-top:hover,
#adminmenu li.opensub > a.menu-top,
#adminmenu li > a.menu-top:focus {
  background: var(--gate-grey);
  color: var(--gate-green);
}
#adminmenu li.menu-top:hover div.wp-menu-image::before,
#adminmenu li.opensub > a.menu-top div.wp-menu-image::before {
  color: var(--gate-green);
}
/* The current section: filled green, black type. */
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu,
#adminmenu li.current a.menu-top,
#adminmenu .wp-menu-arrow,
#adminmenu .wp-menu-arrow div,
#adminmenu li.wp-has-current-submenu .wp-submenu .wp-submenu-head {
  background: var(--gate-green);
  color: var(--gate-dark);
}
#adminmenu li.wp-has-current-submenu div.wp-menu-image::before,
#adminmenu li.current div.wp-menu-image::before,
#adminmenu .current div.wp-menu-image::before {
  color: var(--gate-dark) !important;
}
#adminmenu li.wp-has-current-submenu .wp-menu-name,
#adminmenu li.current .wp-menu-name {
  color: var(--gate-dark);
}
#adminmenu li.wp-has-current-submenu a.wp-has-current-submenu::after,
#adminmenu li.wp-has-current-submenu.opensub a.wp-has-current-submenu::after,
#adminmenu li.current a.menu-top::after {
  border-right-color: #f0f0f1;
}
#adminmenu .wp-submenu,
#adminmenu .wp-has-current-submenu .wp-submenu,
#adminmenu .wp-has-current-submenu.opensub .wp-submenu,
#adminmenu a.wp-has-current-submenu:focus + .wp-submenu {
  background: var(--gate-grey);
}
#adminmenu .wp-submenu a {
  color: rgba(255, 255, 255, 0.75);
}
#adminmenu .wp-submenu a:hover,
#adminmenu .wp-submenu a:focus,
#adminmenu .wp-submenu li.current a {
  color: var(--gate-green);
}
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
  background: var(--gate-green);
  color: var(--gate-dark);
}
#collapse-button:hover,
#collapse-button:focus {
  color: var(--gate-green);
}

/* ---- Type ------------------------------------------------------- */
.wrap h1,
.wrap h1.wp-heading-inline,
#poststuff h2.hndle,
.acf-admin-toolbar h2 {
  font-family: var(--gate-label);
  font-weight: 900;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.wrap h1,
.wrap h1.wp-heading-inline {
  font-size: 32px;
  line-height: 1;
}
body.wp-admin a {
  color: var(--gate-dark);
}
body.wp-admin a:hover,
body.wp-admin a:active {
  color: #333;
}

/* ---- Buttons: tags, as on the site ------------------------------ */
.wp-core-ui .button-primary,
.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary:focus,
.wrap .page-title-action,
.wrap .add-new-h2,
.acf-admin-page .acf-btn {
  border: 0;
  border-radius: var(--gate-radius);
  background: var(--gate-green);
  box-shadow: none;
  color: var(--gate-dark);
  font-family: var(--gate-label);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-shadow: none;
  text-transform: uppercase;
}
.wp-core-ui .button-primary:hover,
.wrap .page-title-action:hover,
.wrap .add-new-h2:hover,
.acf-admin-page .acf-btn:hover {
  background: var(--gate-dark);
  color: var(--gate-green);
}
.wp-core-ui .button-primary:focus,
.wrap .page-title-action:focus {
  box-shadow: 0 0 0 2px var(--gate-light), 0 0 0 4px var(--gate-dark);
}
.wp-core-ui .button,
.wp-core-ui .button-secondary {
  border-color: var(--gate-dark);
  border-radius: var(--gate-radius);
  color: var(--gate-dark);
}
.wp-core-ui .button:hover,
.wp-core-ui .button-secondary:hover {
  border-color: var(--gate-dark);
  background: var(--gate-dark);
  color: var(--gate-green);
}
.wrap .page-title-action {
  padding: 6px 12px;
}

/* ---- Forms, notices, tables ------------------------------------- */
/* Links, focus rings and notices are scoped to admin screens: this file
   also loads on the front end (for the toolbar). */
body.wp-admin input[type="checkbox"]:checked::before {
  filter: brightness(0);
}
body.wp-admin input[type="radio"]:checked::before {
  background-color: var(--gate-dark);
}
body.wp-admin input:focus,
body.wp-admin select:focus,
body.wp-admin textarea:focus {
  border-color: var(--gate-dark) !important;
  box-shadow: 0 0 0 1px var(--gate-dark) !important;
}
body.wp-admin .notice,
body.wp-admin div.updated,
body.wp-admin div.error {
  border-left-color: var(--gate-dark);
}
body.wp-admin .notice-success,
body.wp-admin div.updated {
  border-left-color: var(--gate-green);
}
body.wp-admin .wp-list-table .row-title {
  font-weight: 700;
}

/* ---- ACF: the layout bars in the page builder ------------------- */
/* body-prefixed: ACF's own rules match these and load later. */
body .acf-flexible-content .layout > .acf-fc-layout-actions-wrap {
  background: var(--gate-dark);
  color: var(--gate-light);
}
body .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-handle {
  background: transparent;
  color: var(--gate-light);
  font-family: var(--gate-label);
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-order {
  background: var(--gate-green);
  color: var(--gate-dark);
  font-family: var(--gate-label);
}
body .acf-flexible-content .layout .acf-fc-layout-controls .acf-icon {
  background: transparent;
  color: var(--gate-light);
}
body .acf-flexible-content .layout .acf-fc-layout-controls .acf-icon::before {
  background-color: var(--gate-light);
}
body .acf-flexible-content .layout .acf-fc-layout-controls a:hover .acf-icon,
body .acf-flexible-content .layout .acf-fc-layout-controls .acf-icon:hover {
  color: var(--gate-green);
}
body .acf-flexible-content .layout .acf-fc-layout-controls a:hover .acf-icon::before,
body .acf-flexible-content .layout .acf-fc-layout-controls .acf-icon:hover::before {
  background-color: var(--gate-green);
}
body .acf-flexible-content .layout .acf-fc-layout-actions-wrap .acf-fc-layout-order {
  border-color: var(--gate-green);
}
body .acf-flexible-content .layout .acf-layout-collapse .acf-icon {
  background: transparent;
  color: var(--gate-light);
}
body .acf-flexible-content .acf-actions a,

body .acf-field a {
  color: var(--gate-dark);
}

/* ---- Login screen ----------------------------------------------- */
body.login {
  background: var(--gate-dark);
  color: var(--gate-light);
}
.login h1 a {
  width: 220px;
  height: 103px;
  margin-bottom: 32px;
  background: url("../assets/images/logos/gate-logo.svg") no-repeat center / contain;
}
.login form {
  border: 0;
  border-radius: 8px;
  background: var(--gate-light);
  box-shadow: none;
  color: var(--gate-dark);
}
.login label {
  font-family: var(--gate-label);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.login form .input,
.login input[type="text"],
.login input[type="password"] {
  border: 1px solid var(--gate-dark);
  border-radius: var(--gate-radius);
}
.login .button.wp-hide-pw,
.login .button.wp-hide-pw .dashicons {
  color: var(--gate-dark);
}
.login #nav a,
.login #backtoblog a,
.login .privacy-policy-link {
  color: var(--gate-green);
}
.login #nav a:hover,
.login #backtoblog a:hover {
  color: var(--gate-light);
}
.login .message,
.login .notice,
.login #login_error {
  border-left-color: var(--gate-green);
  color: var(--gate-dark);
}
.login .language-switcher {
  display: none;
}

/* ACF sets these with !important. */
body .acf-flexible-content > .acf-actions.acf-fc-top-actions .acf-btn-clear,
body .acf-btn.acf-btn-clear:hover {
  color: var(--gate-dark) !important;
}

/* ---- Toolbar logo (functions/admin_theme.php) -------------------- */
/* The toolbar resets size and background on everything inside it
   (#wpadminbar *), and sets the house icon with as many ids - hence
   the !important. */
#wpadminbar #wp-admin-bar-site-name > .ab-item::before {
  content: none !important;
}
#wpadminbar #wp-admin-bar-site-name > .ab-item {
  display: flex !important;
  align-items: center;
  height: 32px !important;
}
#wpadminbar .gate-ab-logo {
  display: block !important;
  width: 47px !important;
  height: 22px !important;
  background: url("../assets/images/logos/gate-logo.svg") no-repeat center / contain !important;
}
/* On the front end the site's link underline reaches into the toolbar. */
#wpadminbar a,
#wpadminbar a:hover {
  text-decoration: none !important;
}