/* Copyright (c) We Decide Canada
 * File: global_theme.css
 * Purpose: Global theme variables, base element styling, and layout helpers.
 */

:root {
  --clr-black: #000000;
  --clr-white: #FFFFFF;

  --clr-surface-0: #181c24;
  --clr-surface-1: #1e1e1e;
  --clr-surface-2: #1f1f1f;
  --clr-surface-3: #23272e;
  --clr-surface-4: #2a2a2a;
  --clr-surface-5: #202428;
  --clr-surface-6: #25303a;
  --clr-surface-7: #3a3a3a;
  --clr-surface-8: #0F0F0F;

  --clr-border-1: #333333;
  --clr-border-2: #444444;
  --clr-border-3: #3a404a;

  --clr-text-muted: #bbbbbb;
  --clr-text-mid: #aaaaaa;
  --clr-text-light: #f0f0f0;

  --accent-primary: #EB1C24;
  --accent-link: var(--accent-primary);

  --color-primary: var(--accent-primary);
  --color-accent: var(--accent-primary);
  --color-link: var(--accent-link);

  --color-bg: var(--clr-surface-0);
  --color-surface: var(--clr-surface-3);
  --color-text: var(--clr-text-light);
  --color-text-muted: var(--clr-text-muted);
  --color-border: var(--clr-border-2);

  --theme_icon_filter_default: none;
  --theme_icon_filter_hover: none;

  --ui-press-bg: rgba(235, 28, 36, 0.10);

  --site-header-height: 69px;
  --site-tts-bar-height: 50px;
  --site-footer-meta-height: 50px;
  --site-footer-options-height: 320px;

  --site-header-offset: var(--site-header-height);
  --site-footer-inset: var(--site-footer-meta-height);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--clr-surface-0);
  --color-surface: var(--clr-surface-3);
  --color-text: var(--clr-text-light);
  --color-text-muted: var(--clr-text-muted);
  --color-border: var(--clr-border-2);

  --theme_icon_filter_default: invert(1) saturate(0) brightness(1.2);
  --theme_icon_filter_hover: invert(20%) sepia(89%) saturate(6375%) hue-rotate(351deg) brightness(95%) contrast(110%);
}

html[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f2f2f2;
  --color-surface: #ffffff;
  --color-text: #121212;
  --color-text-muted: #4b5563;
  --color-border: #d1d5db;

  --color-primary: var(--accent-primary);
  --color-accent: var(--accent-primary);
  --color-link: var(--accent-link);

  --theme_icon_filter_default: invert(0) saturate(0) brightness(0.15);
  --theme_icon_filter_hover: invert(20%) sepia(89%) saturate(6375%) hue-rotate(351deg) brightness(95%) contrast(110%);
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Noto Sans", "Liberation Sans", sans-serif;
  line-height: 1.2;
}

a,
a:link,
a:visited {
  cursor: pointer;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"] {
  cursor: pointer;
}

button:disabled,
button[disabled],
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
[role="button"][aria-disabled="true"] {
  cursor: not-allowed;
}

button:active:not([data-modal-backdrop]),
a:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
[role="button"]:active,
.site_header__logo_link:active {
  background: var(--ui-press-bg);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.site_header__logo_link,
a.site_header__btn,
a.site_menu_link,
a.maintenance__btn {
  border-radius: 10px;
}

html[data-tts="on"] {
  --site-header-offset: calc(var(--site-header-height) + var(--site-tts-bar-height));
}

html[data-footer="expanded"] {
  --site-footer-inset: calc(var(--site-footer-meta-height) + var(--site-footer-options-height));
}

html[data-footer="collapsed"] {
  --site-footer-inset: var(--site-footer-meta-height);
}

@media (max-width: 640px) {
  :root {
    --site-header-height: 61px;
    --site-header-offset: var(--site-header-height);
    --site-footer-options-height: 360px;
  }

  html[data-tts="on"] {
    --site-header-offset: calc(var(--site-header-height) + var(--site-tts-bar-height));
  }
}

a,
a:link,
a:visited {
  color: var(--color-link);
  text-decoration-color: var(--color-link);
}

a:hover,
a:focus {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-color: var(--color-link);
  outline: none;
}

a:active {
  color: var(--color-link);
}

.site_layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site_main {
  flex: 1 1 auto;
  padding-top: var(--site-header-offset);
  padding-bottom: var(--site-footer-inset);
}