/*
Theme Name: grook
Description: WordPress Theme
Author: plue
Author URI: https://plue.es
Version: 1.1.0
Text Domain: theme
*/

:root {
  --base-color-text: #000;
  --base-color-text-light: #BFBFBF;
  --base-color-accent: #0029D6;
  --base-color-accent-transparent: rgba(0, 41, 214, 0.8);
  --base-color-accent-2: #F2C405;
  --base-color-light: #EAEAEA;
  --base-color-background: #fff;
  --base-font-family: "PostGrotesk", verdana, sans-serif;
  --base-font-weight: normal;
  --base-line-height: 1.35;
  --base-font-size: clamp(15px, 1.2vw, 23px);
  --base-font-size-small: 0.7em;
  --base-font-size-medium: clamp(20px, 2.5vw, 48px);

  --base-headings-color: var(--base-color-text);
  --base-headings-font-family: var(--base-font-family);
  --base-headings-font-weight: normal;
  --base-headings-line-height: 1.35;
  --base-headings-font-size-1: var(--base-font-size);
  --base-headings-font-size-2: var(--base-font-size);
  --base-headings-font-size-3: var(--base-font-size-medium);
  --base-headings-font-size-4: var(--base-font-size-medium);

  --base-layout-width: 100%;
  --base-content-width: 86%;
  --base-offset: clamp(20px, 1.6vw, 35px);
  --base-offset-vertical: clamp(20px, 2.1vw, 50px);
  --base-space: 18px;
  --base-gap: clamp(6px, 0.55vw, 12px);

  --header-height: clamp(42px, 2.5vw, 50px);
  --header-offset: var(--base-offset);
  --header-background: var(--base-color-background);
  --header-color: var(--base-color-text);
  --header-color-accent: var(--base-color-accent);
}

@media (max-width: 781px) {
  :root {
    --base-space: 12px;
  }
}

.has-text-background-color {
  color: var(--base-color-background);
}

.has-background a {
  color: inherit;
}

.has-medium-font-size {
  font-size: var(--base-font-size-medium) !important;
}