/*
 * Site rules that sit next to the North design tokens.
 * Tokens (colours, type scale, spacing, buttons) come from north-tokens.json,
 * imported by functions.php and generated by the plugin into uploads/north.
 */

/* North maps the core font size presets onto its paragraph tokens; content
   and theme.json were built on the fluid presets below, so they are pinned. */
:root:root {
  --wp--preset--font-size--small: 0.875rem;
  --wp--preset--font-size--medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.156), 1.125rem);
  --wp--preset--font-size--large: clamp(1.125rem, 1.125rem + ((1vw - 0.2rem) * 0.313), 1.375rem);
  --wp--preset--font-size--x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 0.313), 2rem);
  --wp--preset--font-size--xx-large: clamp(2.15rem, 2.15rem + ((1vw - 0.2rem) * 1.063), 3rem);
  --wp--preset--color--black: #000000;
}

/* The generated button variants still read these two names, which the token schema
   no longer declares. */
:root {
  --btn-padding-x: 24px;
  --border-radius-sm: 4px;
}

/* North 1.1 clipped horizontal overflow on the root and 1.4 no longer does. Full-width
   images and long headings overflow by a few pixels: on phones the page would widen,
   and North's scrollbar compensation (innerWidth - clientWidth) would then shrink every
   full-width section. */
html {
  overflow-x: clip;
}

/* Touch screens use overlay scrollbars, so there is nothing to compensate; a zoomed-out
   page there makes innerWidth - clientWidth meaningless. The value is an inline style. */
@media (hover: none), (max-width: 767px) {
  html:root {
    --scrollbar-compensation: 0px !important;
  }
}

/* North 1.4 adds min-w-0 to column wrappers. The site's flex columns were laid out on
   the old min-width: auto, which lets a column with wide content (a large heading)
   wrap below its sibling on phones instead of squeezing next to it. */
.ensoul-column-wrapper.min-w-0 {
  min-width: auto;
}

/* The front end zeroes the root padding on its full-width templates (style.css, by body
   class). WordPress 7.1 always iframes the editor, where those classes are missing, so
   the canvas does the same to keep blocks edge to edge as before. */
.editor-styles-wrapper {
  --wp--style--root--padding-left: 0px !important;
  --wp--style--root--padding-right: 0px !important;
}

strong,
b {
  font-weight: 700;
}

.wp-block-ensoul-column .wp-block-ensoul-content {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: var(--color-primary-500);
}

::-webkit-scrollbar-thumb {
  background: var(--color-secondary-400);
}

::selection {
  background-color: var(--color-primary-500);
  color: var(--color-white);
}

::-moz-selection {
  background-color: var(--color-primary-500);
}

.max-w-container-columns {
  max-width: var(--spacing-container-narrow) !important;
}

.max-w-container-content {
  max-width: var(--spacing-container-content) !important;
}

:where(.wp-site-blocks *:focus) {
  outline: none !important;
}

a {
  text-decoration: none !important;
  transition: color 0.1s ease-in;
}

a:hover {
  color: var(--color-secondary-400) !important;
}

.ens-btn {
  cursor: pointer;
  color: var(--color-button);
  text-decoration: var(--decoration-button, none);
  transition:
    color 200ms ease-out,
    background-color 200ms ease-out,
    border-color 200ms ease-out;
}

.ens-btn:hover {
  color: var(--color-button-hover);
  background-color: var(--color-button-background-hover);
  text-decoration: var(--decoration-button-hover, none);
}

:where(figure) {
  margin-bottom: 0;
}

:where(.wp-site-blocks) > main {
  margin-top: 0;
}

.image-location-maps,
.text-location-maps {
  display: none !important;
}

.leaflet-popup-content {
  width: 480px;
  max-width: 160px;
}

@media (width <= 48rem) {
  .content-slider {
    padding-bottom: var(--spacing-2xl);
  }

  .content-slider-next,
  .content-slider-prev {
    top: auto;
    bottom: 0;
  }
}

.content-slider.autoscroll .swiper-slide figure {
  max-height: 60vh;
}

@media (max-width: 1024px) {
  .content-slider.autoscrol .swiper-slide figure {
    height: 45vh;
  }
}

.slide-index-display {
  display: none;
}

.wpml-language-switcher-block,
.wpml-language-switcher-block .block-editor-block-list__block,
.wpml-language-switcher-block .wp-block-navigation-submenu,
.wpml-language-switcher-block .is-layout-flex {
  width: fit-content !important;
  max-width: fit-content !important;
}

.wpml-language-switcher-block {
  flex: 0 0 auto !important;
  text-transform: uppercase;
}

.gap-y-columns {
  row-gap: var(--spacing-columns-y);
}

.gap-y-group {
  row-gap: var(--spacing-group-y);
}

/* North does not regenerate these variants faithfully from the tokens (a "0" padding and
   the hover underline are lost), so the site keeps its own definitions. The last three
   properties restore the :root values these variants used to inherit. */
.ens-btn.ens-btn-primary {
  --spacing-padding-button: 0;
  text-transform: none;
  font-size: 20px;
  font-weight: 700;
  --font-weight-button: 700;
  border: none;
  --border-width-button-width: 0;
  --decoration-button: none;
  --decoration-button-hover: underline;
  --color-button: var(--color-primary-500);
  --color-button-hover: var(--color-primary-500);
  --color-button-background: transparent;
  --color-button-background-hover: transparent;
  --radius-button: 32px;
  --border-color-button-color: transparent;
  svg {
    margin-right: var(--spacing-xs);
  }
}

.ens-btn.ens-btn-secondary {
  text-transform: var(--btn-text-transform);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  padding-left: 0;
  padding-right: 0;
  --decoration-button: none;
  --decoration-button-hover: underline;
  --color-button: var(--color-primary-500);
  --color-button-hover: var(--color-primary-500);
  --color-button-background: none;
  --color-button-background-hover: transparent;
  --spacing-padding-button: 0 0;
  --radius-button: 32px;
  --border-color-button-color: transparent;
  svg {
    margin-right: var(--spacing-xs);
  }
}

.ens-btn.ens-btn-tertiary {
  --spacing-padding-button: 0 0;
  border: none;
  text-transform: var(--btn-text-transform);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  --decoration-button: none;
  --decoration-button-hover: underline;
  --color-button: var(--color-white);
  --color-button-hover: var(--color-white);
  --color-button-background: none;
  --color-button-background-hover: transparent;
  --radius-button: 32px;
  --border-color-button-color: transparent;
  svg {
    margin-right: var(--spacing-xs);
  }
}

/* The quinary outline button is dark on white; over a group's photo background it
   switches to white text and border. The hover keeps the light fill from the tokens. */
.ensoul-group[style*="background-image"] .ens-btn.ens-btn-quinary {
  --color-button: var(--color-white);
  --border-color-button-color: var(--color-white);
}

/* The heading scale has a single set of values, sized for desktop. Phones get a smaller
   one; desktop classes (md:text-heading-*) read the root values and are unaffected. Words
   wrap whole, without hyphens; only a word wider than the screen is broken. */
@media (max-width: 767px) {
  :root:root {
    --text-heading-3xl: 48px;
    --text-heading-3xl--line-height: 1.05;
    --text-heading-2xl: 44px;
    --text-heading-2xl--line-height: 1.05;
    --text-heading-xl: 40px;
    --text-heading-lg: 36px;
    --text-heading-base: 28px;
    --text-heading-sm: 26px;
  }

  :is(h1, h2, h3) {
    overflow-wrap: break-word;
  }
}

/* A full-width group nested in a padded one gets w-full plus negative margins: w-full fixes it to
   the parent's content width, so it shifts left instead of reaching both edges. */
section.w-full.max-w-none[class*="-mx-[var(--spacing-content-padding)]"] {
  width: calc(100% + 2 * var(--spacing-content-padding));
}