@import url('https://fonts.googleapis.com/css?family=Oxygen');
@import url('https://fonts.googleapis.com/css?family=Raleway');

:root {
  /* Original theme name: pandora resolution blue */
  /* Original SCSS colors:
     $label-primary: #428bca;
     $text-details: #727295;
     $theme-color: #061a85;
     $theme-color-semi-trans: #1336f4;
     $theme-button-color: #061a85;
     $link-color: #061a85;
     $success-color: #2b7f49;
     $danger-color: #7f2817;
     $warning-color: #a16110;
     $info-color: #218aa1;
     $site-header-color: #022246;
     $site-header-font-color: #fff;
     $site-header-font-color-hover: #6dbfef;

     $border-radius: 0px;

     $h1-font-size: 50px;
     $h2-font-size: 37px;
     $h3-font-size: 28px;
     $h4-font-size: 21px;
     $h5-font-size: 16px;
     $h6-font-size: 13px;
  */

  /* Potential issues / skipped variables:
     - $feature-color / --feature-color was not provided in the original SCSS input and has been skipped.
     - $anchor-font-color-hover / --link-color-hover was not provided in the original SCSS input and has been skipped.
  */

  /* === Primary Color Palette (#061a85 - Resolution Blue) === */
  --color-primary: #061a85;
  --color-primary-100: #e6e8f8;
  --color-primary-200: #c1c6f0;
  --color-primary-300: #939ce5;
  --color-primary-400: #626ed8;
  --color-primary-500: #3442c7;
  --color-primary-600: #1324aa;
  --color-primary-700: #061a85;
  --color-primary-800: #041261;
  --color-primary-900: #020a3b;

  /* === Success Color Palette (#2b7f49) === */
  --color-success: #2b7f49;
  --color-success-100: #e8f5ed;
  --color-success-200: #c5e7d2;
  --color-success-300: #9dd7b4;
  --color-success-400: #73c794;
  --color-success-500: #4bb675;
  --color-success-600: #2b7f49;
  --color-success-700: #206238;
  --color-success-800: #154527;
  --color-success-900: #0b2816;

  /* === Danger Color Palette (#7f2817) === */
  --color-danger: #7f2817;
  --color-danger-100: #f7e9e6;
  --color-danger-200: #ebc8c1;
  --color-danger-300: #da9e92;
  --color-danger-400: #c67363;
  --color-danger-500: #af4837;
  --color-danger-600: #7f2817;
  --color-danger-700: #621e11;
  --color-danger-800: #45140b;
  --color-danger-900: #290a05;

  /* === Warning Color Palette (#a16110) === */
  --color-warning: #a16110;
  --color-warning-100: #f8efe6;
  --color-warning-200: #ead2b8;
  --color-warning-300: #dbb388;
  --color-warning-400: #cb9357;
  --color-warning-500: #bb752a;
  --color-warning-600: #a16110;
  --color-warning-700: #7c4a0b;
  --color-warning-800: #573307;
  --color-warning-900: #331d03;

  /* === Info Color Palette (#218aa1) === */
  --color-info: #218aa1;
  --color-info-100: #e6f5f8;
  --color-info-200: #bee4ed;
  --color-info-300: #91d0e0;
  --color-info-400: #62bbd2;
  --color-info-500: #35a5c3;
  --color-info-600: #218aa1;
  --color-info-700: #186b7d;
  --color-info-800: #104c5a;
  --color-info-900: #082d36;

  /* === Mapped Theme Variables === */
  --label-primary: #428bca;
  --text-details: #727295;
  --heading-color: var(--color-primary);
  --theme-button-color: var(--color-primary);
  --theme-button-color-hover: var(--color-primary-800);
  --link-color: var(--color-primary);
  --site-header-color: #022246;
  --site-header-font-color: #fff;
  --site-header-font-color-hover: #6dbfef;

  /* === Layout & Typography Variables === */
  --header-font-family: "Oxygen", helvetica, arial, sans-serif;
  --subheader-font-family: "Raleway", helvetica, arial, sans-serif;
  --body-font-family: "helvetica neue", helvetica, arial, sans-serif;

  --border-radius: 0px;
  --h1-font-size: 50px;
  --h2-font-size: 37px;
  --h3-font-size: 28px;
  --h4-font-size: 21px;
  --h5-font-size: 16px;
  --h6-font-size: 13px;
}

/* Base Typography Styles */
body {
  font-family: var(--body-font-family);
  color: var(--text-details);
}

h1, .mce-content-body h1 {
  font-family: var(--header-font-family);
  color: var(--heading-color);
  font-size: var(--h1-font-size);
}

h2, h3, h4, .mce-content-body h2, .mce-content-body h3, .mce-content-body h4 {
  font-family: var(--subheader-font-family);
  color: var(--heading-color);
}

h2 { font-size: var(--h2-font-size); }
h3 { font-size: var(--h3-font-size); }
h4 { font-size: var(--h4-font-size); }
h5 { font-size: var(--h5-font-size); font-family: var(--header-font-family); color: var(--heading-color); }
h6 { font-size: var(--h6-font-size); font-family: var(--header-font-family); color: var(--heading-color); }

/* Cookie Banner Heading Fix */
.cookie-banner h5,
.cookie-banner h2,
#cookie-banner h5,
#cookie-banner h2,
.cookie-notice h5,
.cookie-notice h2,
#cookie-notice h5,
#cookie-notice h2,
.cc-banner h5,
.cc-banner h2,
#portal-cookie-banner h5,
#portal-cookie-banner h2,
.privacy-cookie-banner h5,
.privacy-cookie-banner h2 {
  font-size: var(--h2-font-size) !important;
  font-family: var(--subheader-font-family) !important;
  color: #ffffff !important;
}

/* Plone Toolbar Top Customization */
body.plone-toolbar-top #edit-bar #edit-zone, 
body.plone-toolbar-top #edit-bar #edit-zone .toolbar-header {
  background-color: var(--color-primary-700) !important;
}

body.plone-toolbar-top #edit-bar #edit-zone a,
body.plone-toolbar-top #edit-bar #edit-zone span,
body.plone-toolbar-top #edit-bar #edit-zone button {
  color: #ffffff !important;
}

body.plone-toolbar-top #edit-bar #edit-zone a:hover,
body.plone-toolbar-top #edit-bar #edit-zone button:hover {
  color: var(--color-primary-200) !important;
}