:root {
  /* colors hsl */
  --color-dark-red: 346 88 20;
  --color-red: 346 89 35;
  --color-accent-red: 349 100 57;
  --color-white: 0 0 100;
  --color-black: 0 0 0;
  --color-gray-10: 20 11 94;
  --color-gray-20: 22 11 85;
  --color-gray-30: 22 11 70;
  --color-gray-50: 24 11 55;
  --color-gray-60: 27 11 40;
  --color-gray-90: 30 11 15;
  --max-width: min(90rem, 90vw);

  /* 
    fluid type scale 
    https://www.fluid-type-scale.com/calculate?minFontSize=14&minWidth=360&minRatio=1.125&maxFontSize=18&maxWidth=1440&maxRatio=1.25&steps=xs%2Csm%2Cbase%2Cmd%2Clg%2Cxl%2Cxxl%2Cxxxl&baseStep=base&prefix=fs&useContainerWidth=false&includeFallbacks=false&useRems=true&remValue=16&decimals=3&previewFont=Nunito+Sans&previewText=CIES+Conference&previewWidth=1440
  */
  --fs-xs: clamp(0.691rem, 0.042vi + 0.682rem, 0.72rem);
  --fs-sm: clamp(0.778rem, 0.181vi + 0.737rem, 0.9rem);
  --fs-base: clamp(0.875rem, 0.37vi + 0.792rem, 1.125rem);
  --fs-md: clamp(0.984rem, 0.625vi + 0.844rem, 1.406rem);
  --fs-lg: clamp(1.107rem, 0.964vi + 0.891rem, 1.758rem);
  --fs-xl: clamp(1.246rem, 1.41vi + 0.929rem, 2.197rem);
  --fs-xxl: clamp(1.402rem, 1.993vi + 0.953rem, 2.747rem);
  --fs-xxxl: clamp(1.577rem, 2.75vi + 0.958rem, 3.433rem);
  --fs-xxxxl: clamp(1.774rem, 3.73vi + 0.935rem, 4.292rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* .logged-in * {
  outline: 1px dashed rgb(from currentColor r g b/.1);
  outline-offset: -1px;
}

.logged-in *:hover {
  outline-color: rgb(from currentColor r g b/.5);
} */

img,
svg {
  display: block;
  width: 100%;
  height: auto;
}

b,
strong {
  font-weight: 900;
}

html,
body {
  background-color: hsl(var(--color-white));
}

html {
  font-size: 16px;
}

body {
  font-family: "Nunito Sans", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 400;
  color: hsl(var(--color-gray-90));
}

a {
  color: inherit;
}

main a {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}

nav ul,
nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  display: block;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  line-height: 1.1;
}

h1 {
  font-size: var(--fs-xxxxl);
}

h2 {
  font-size: var(--fs-xxl);
}

h3 {
  font-size: var(--fs-xl);
}

h4 {
  font-size: var(--fs-lg);
}

h5,
h6 {
  font-size: var(--fs-md);
}

:is(.flow, [class*="-is-layout-flow"], [class*="-is-layout-constrained"]) {
  > * {
    margin: 0;
  }
  > * + * {
    margin-top: 1.25em;
  }
  > * + :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 1.75em;
  }
}

.wp-block-list {
  margin-left: 1.5rem;
}

.wp-block-list li,
.wp-block-list li + li,
.wp-block-list ul ul,
.wp-block-list ol ul,
.wp-block-list ul ol,
.wp-block-list ol ol {
  margin-top: 0.375em;
}

/* site header */

.site-header {
  position: sticky;
  top: 0;
  box-shadow: 0 0 1rem hsl(var(--color-black) / 0.25);
  z-index: 999;
}

.main-bar {
  background-color: hsl(var(--color-white));
}

.main-inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}

.main-inner .logo {
  padding: min(2rem, 4vw) min(3rem, 5vw);
  place-content: center;
}

.logo img {
  width: min(20rem, 40vw);
}

.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 min(3rem, 5vw);
  place-content: center;
  background-color: hsl(var(--color-dark-red));
  font-size: var(--fs-md);
  color: hsl(var(--color-white));
}

.menu-toggle .icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.menu-toggle[aria-expanded="false"] .icon-close,
.menu-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.menu-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.utility-bar {
  display: none;
}

.primary-nav {
  display: none;
}

.annoucement-bar {
  background-color: hsl(var(--color-accent-red));
  padding: 0.75rem 0;
}

.annoucement-bar a {
  display: block;
  text-decoration: none;
  width: var(--max-width);
  margin-inline: auto;
  font-size: var(--fs-md);
  font-weight: 700;
  color: hsl(var(--color-white));
}

@media screen and (min-width: 75rem) {
  .utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: hsl(var(--color-dark-red));
    padding: 0.5rem min(4rem, 5vw);
    color: hsl(var(--color-white));
  }

  .desktop-utility {
    margin-left: auto;
  }

  .utility-menu {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
  }
  .utility-menu a {
    padding: 0.25rem 0;
    line-height: 1.2;
    font-size: var(--fs-sm);
  }

  .main-inner {
    padding: 2rem min(4rem, 5vw);
    align-items: center;
  }

  .main-inner .logo {
    padding: 0;
  }

  .menu-toggle {
    display: none;
  }

  .primary-nav {
    display: block;
  }

  .primary-menu {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .primary-menu > li {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.125rem;
  }

  .primary-menu > li > a,
  .primary-menu > li > .nav-link {
    padding: 0.5em 0;
    background: transparent;
    font-size: var(--fs-md);
    font-weight: 700;
    color: hsl(var(--color-gray-90));
    text-decoration: none;
    border: none;
  }

  .primary-menu .current-menu-item > a,
  .primary-menu .current-menu-ancestor > .nav-link {
    color: hsl(var(--color-red));
  }

  .primary-nav .menu-item-button > a {
    background-color: hsl(var(--color-accent-red));
    color: hsl(var(--color-white));
    padding: 0.5em 1em;
    border-radius: 0.25rem;
  }
}

/* Dropdowns */

.primary-menu .sub-menu.dropdown-menu {
  position: absolute;
  top: calc(100% + 0px);
  left: 0;
  min-width: 220px;
  background: hsl(var(--color-white));
  border: 1px solid hsl(var(--color-gray-30));
  padding: 8px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.18s ease;
  z-index: 50;
}

.primary-menu > li.open > .sub-menu.dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-menu .sub-menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: hsl(var(--color-gray-90));
  text-decoration: none;
  white-space: nowrap;
}

/* Mobile menu defaults */

.mobile-panel {
  padding: 1.5rem;
  background-color: hsl(var(--color-dark-red));
}

.mobile-panel a {
  display: block;
  padding-block: 0.25em;
  line-height: 1.2;
}

.mobile-nav {
  font-size: var(--fs-md);
}

.mobile-nav .menu-item-has-children {
  position: relative;
  display: grid;
  grid-template-columns: auto 2rem;
}

.menu-item-has-children.open > a::after {
  transform: rotate(180deg);
}

.dropdown-toggle {
  border: none;
  background: none;
  appearance: none;
  cursor: pointer;
}

.mobile-utility {
  margin-top: 1rem;
  font-size: var(--fs-sm);
}

.mobile-primary-menu li,
.mobile-utility-menu li {
  list-style: none;
}

.mobile-primary-menu a,
.mobile-utility-menu a {
  color: #fff;
  text-decoration: none;
}

/* Hide mobile submenus by default */
.mobile-primary-menu .sub-menu {
  display: none;
  padding-left: 1rem;
  margin-block: 0.5rem;
  border-left: 1px solid hsl(var(--color-white));
}

.mobile-primary-menu li.open > .sub-menu {
  display: block;
}

/* site footer */

.site-footer {
  background-color: hsl(var(--color-dark-red));
  color: hsl(var(--color-white));
  padding: 3rem 1.5rem;
}

.site-footer-inner {
  width: var(--max-width);
  margin-inline: auto;
  display: grid;
  gap: 3rem;
}

.social-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.social-nav a {
  display: block;
  background-color: hsl(var(--color-white) / 0.15);
}

.social-nav svg {
  width: 2.5rem;
}

.footer-contact svg {
  width: min(14rem, 50vw);
}

/* main section */

main > .wp-block-group {
  padding: min(8rem, 10vw) 0;
}

main > .wp-block-group > * + * {
  margin-top: min(2rem, 5vw);
}

main .wp-block-group > * {
  /* width: var(--max-width);
  margin-inline: auto; */
}

main .wp-block-column.has-background {
  padding: min(3rem, 5vw);
}

.content-block {
  padding: min(8rem, 10vw) 0;
}

.content-row {
  width: var(--max-width);
  margin-inline: auto;
}

.content-row + .content-row {
  margin-top: min(8rem, 10vw);
}

.conference-hero {
  background-color: hsl(var(--color-gray-10));
  color: hsl(var(--color-white));
  padding: min(8rem, 10vw) 0;
  position: relative;
  isolation: isolate;
  min-height: max(800px, 50vh);
  place-content: center;
}

.block-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.wp-block-accordion-item {
  background-color: hsl(var(--color-white));
  padding: 1rem 1.5rem;
  box-shadow: 0 0 1rem hsl(var(--color-black) / 0.25);
  border-radius: 0.25rem;
}

:where(.wp-block-columns.is-layout-flex) {
  gap: min(4rem, 6vw);
}

.sidebar-section-nav {
  padding: min(2rem, 4vw);
  border-radius: 0.25rem;
  background-color: hsl(var(--color-dark-red));
  color: hsl(var(--color-white));
}
