/*
  Import fonts.
  In the base theme, we have no fonts importing so that the theme is as fast
  as possible, and so we are not loading fonts that are then going to be
  overridden in a subtheme in any case.
  Want a font? Load it here, or in the html.html.twig file which should give you an
  even faster loading time. Loading the font via html.html.twig is the preferred
  method. That file can be found in your /templates/layout directory.
*/

/*
  e.g.
  @import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;700&display=swap");
*/

/*
  Override whatever variables you want.
  In the base theme, most item values are set as variables. These variables
  usually reference other variables. For example, we have a certain number of
  colours, font sizes, spacing units, etc. We then create specific variables
  (for example a variable for the color of a link in the header) but these
  specific variables reference our base "root" variables.
  The overrides here give an example of what you might want to change. As you
  can see, you can change as much or as little as you wish.
  Examples:
  - The base font size in the base theme is 16px (1rem). If you want
    all your fonts to be based on a different scale, set `--font-size` variable
    to something else.
  - The base line-height is 1.5 in the base theme. If you want that to be 1.3,
    set --line-height to 1.3. A lot of spacing between items is based on this
    rhythm (1.5rem), so changing to 1.3 will update all across the board.
  - The accent color in our base theme is purple. If you would like it to be
    hotpink, just set `--color-accent: hotpink;`
*/
body {
  --color-accent: #222;
  --color-accent-2: #ddd;
  --color-accent-contrast: var(--color-white);
  --color-accent-2-contrast: var(--color-accent);
  --page-background-color: var(--color-white);
  --font-primary: "Public Sans", georgia, "Times New Roman", times, serif;
  --font-secondary: "Public Sans", georgia, "Times New Roman", times, serif;
  --color-text: var(--color-black);
  --color-link: var(--color-text);
  --line-height: 1.3;
  --border-color: var(--color-text);
  --border-none: 0 solid;
  --width-restricted-width-section: 800px;
  --box-shadow: -1px 0 3px 1px rgb(0, 0, 0, /0.33);
  --label-font-weight: bold;
}

/* Applying Variables */
body {
  /* Applying variables for Pre-Header */
  --pre-header-background-color: var(--color-accent-2);
  --pre-header-text-color: var(--color-accent-2-contrast);
  --pre-header-link-color: var(--color-accent-2-contrast);
  --pre-header-link-hover-color: var(--color-accent-2-contrast);

  /* Applying variables for Header */
  --site-name-font-weight: var(--heading-font-weight);
  --site-name-font-size: var(--font-size-h2);
  --header-background-color: var(--color-accent);
  --header-text-color: var(--color-accent-contrast);
  --header-link-color: var(--color-accent-contrast);
  --header-link-hover-color: var(--color-accent-2);
  --header-link-focus-color: var(--color-black);
  --header-search-button-color: var(--pre-header-background-color);
  --header-search-button-bg-color: var(--pre-header-text-color);
  --header-search-button-color-hover: var(--color-accent);
  --header-search-button-bg-color-hover: var(--color-white);
  --header-search-input-border: 1px solid var(--pre-header-text-color);
  --header-logo-focus-outline-color: var(--color-white);
  --site-name-font: var(--font-secondary);
  --minimum-clickable-icon-size: 44px; /* Setting default to 44px as per https://www.w3.org/WAI/WCAG21/Understanding/target-size.html */
  --menu-utility-font-size: var(--font-size-h4);
  --menu-utility-font-weight: normal;
  --menu-sub-menu-min-width: 200px;
  --menu-main-font-size: var(--font-size-h3);
  --menu-main-font-weight: var(--heading-font-weight);
  --menu-sub-menu-icon: url(../../includes/icons/chevron-right.svg);
  --menu-sub-menu-icon-size: 1.2rem;
  --menu-sub-menu-toggle-width: var(--minimum-clickable-icon-size);
  --menu-sub-menu-toggle-height: var(--minimum-clickable-icon-size);
  --menu-sub-menu-font-size: var(--font-size-h4);
  --menu-sub-menu-background-colour: var(--header-link-color);
  --menu-sub-menu-link-colour: var(--header-background-color);
  --menu-item-padding: var(--spacing-small);
  --menu-item-toggle-icon-rotation: 90deg;

  /* Applying variables for Off Canvas */
  --off-canvas-background-color: var(--header-background-color);
  --off-canvas-text-color: var(--header-text-color);
  --off-canvas-link-color: var(--header-link-color);
  --off-canvas-link-focus-color: var(--color-accent);
  --off-canvas-link-hover-color: var(--header-link-hover-color);
  --off-canvas-border-color: var(--color-white);
  --off-canvas-menu-icon: url(../../includes/icons/menu.svg);

  /* Applying variables for Footer */
  --footer-background-color: var(--color-accent);
  --footer-text-color: var(--color-accent-contrast);
  --footer-link-color: var(--color-accent-contrast);
  --footer-link-hover-color: var(--color-accent-2);
  --footer-link-focus-color: var(--color-accent);
  --footer-grid-column-spacing: var(--spacing-larger);
  --footer-grid-column-justification: space-between;

  /* Applying variableas for Sidebar(s) */
  --sidebar-border: var(--border);

  /* Applying variables for paragraphs */
  --image-with-caption-bg-color: var(--color-accent-2);
  --image-with-caption-color: var(--color-accent-2-contrast);
  --ia-block-bg-color: var(--page-background-color);
  --ia-block-bg-color-promoted: var(--color-accent-2);
  --table-bg-color: var(--color-accent-2);
  --quote-bg-color: var(--color-accent-2);
  --quote-author-color: var(--color-accent-2-contrast);
  --call-out-box-text-color: var(--color-accent-contrast);
  --call-out-box-link-padding: 0;
  --sidebar-exposed-form-bg-color: var(--page-background-color);
  --image-with-caption-border: var(--border-none);
  --quote-border: var(--border-large);
  --quote-content-color: var(--quote-author-color);
  --featured-teaser-background: var(--color-accent-2);
  --featured-teaser-color: var(--color-accent-2-contrast);
  --featured-teaser-border: var(--border-none);
  --ia-block-color: var(--color-accent-2-contrast);
  --ia-block-border: var(--color-accent-2-contrast);
  --call-out-box-link-weight: var(--heading-1-font-weight);
  --media-with-text-link-weight: var(--heading-1-font-weight);
  --featured-teaser-link-weight: var(--heading-1-font-weight);
  --table-header-text-color: var(--color-accent-2-contrast);

  /* Applying variables for Form Items */
  --button-bg-color: var(--color-accent);
  --button-text-color: var(--color-accent-contrast);
  --button-bg-color-hover: var(--color-accent-contrast);
  --button-text-color-hover: var(--color-accent);
  --button-border-color: var(--color-accent-contrast);
  --input-border: 2px solid var(--color-text);
  --input-border-color: var(--color-text);
  --form-item-required-pseudocontent: "";
  --form-item-optional-pseudocontent: " (optional)";

  /* Applying variables for Page Sections */
  --color-page-section-background-color-1: var(--color-accent);
  --color-page-section-background-color-1-text-color: var(
    --color-accent-contrast
  );
  --color-page-section-background-color-1-link-color: var(
    --color-page-section-background-color-1-link-color
  );
  --color-page-section-background-color-2: var(--color-accent-2);
  --color-page-section-background-color-2-text-color: var(
    --color-accent-2-contrast
  );
  --color-page-section-background-color-2-link-color: var(
    --color-page-section-background-color-2-text-color
  );
  --color-page-section-background-color-3: var(--color-grey-lightest);
  --color-page-section-background-color-3-text-color: var(--color-black);
  --color-page-section-background-color-3-link-color: var(
    --color-page-section-background-color-3-text-color
  );

  /* Banner */
  --banner-content-text-color: var(--color-accent-contrast);
  --banner-title-font: var(--font-secondary);

    /* Accordion */
    --accordion-icon-closed: "";
    --accordion-icon-opened: "";
}
