/*
Theme Name: Cimcorp
Author: Knowit Experience
Author URI: https://www.knowit.fi/
Description: Block theme for Cimcorp Group.
Requires PHP: 7.0
Version: 1.0.0
Text Domain: cimcorp
*/

/*--------------------------------------------------------------
Table of Contents

# Settings
# Base
# main
# WordPress
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Settings
--------------------------------------------------------------*/

:root {
  --columns: 12;
  --content-columns: 8;
  --content: calc(
    (var(--wide) - ((var(--columns) - 1) * var(--wp--style--block-gap)))
    * (var(--content-columns) / var(--columns))
    + ((var(--content-columns) - 1) * var(--wp--style--block-gap))
  );
  --wide-max: 1440px;
  --wide: min(100%, var(--wide-max));
  --wp--style--global--wide-size: var(--wide);
  --wp--style--global--content-size: var(--content);
  --navigation-dropdown-gap: 1rem;
  --navigation-margin-x: 1.5rem;
  --block-gap: clamp(2rem, 2.24vw + 1rem, 3rem);
  --anchor-offset: 5rem;
  --anchor-offset-heading: 5rem;
  --outer: 1rem;
  --color-error: #E10098;
  --global-transition: 450ms cubic-bezier(0.22,1,0.36,1);

  interpolate-size: allow-keywords;
}

:root:has(.wp-block-cimcorp-anchor-links-container) {
  --anchor-offset: 8rem;
}

[id] {
	scroll-margin-top: var(--anchor-offset);
}

h1,
h2,
h3,
h4,
h5 {
	--anchor-offset: 8rem;
}
@media (min-width: 600px) {

  :root {
    --outer: 2.5rem;
  }
}
@media (min-width: 1200px) {

  :root {
    --outer: 3.0rem;
  }
}
@media (max-width: 782px) {

  :root {
    --content: calc(100vw - (2 * var(--outer)));
  }
}
@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}
}

[hidden] {
  display: none !important;
}

::selection {
  background-color: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--rich-black);
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

html {
  /*
    Without this, the browser's scroll anchoring can nudge the scroll
    position by a few pixels on its own when --nav-height settles shortly
    after load (webfonts/reflow), which was enough to flip the sticky
    header's is-scrolled state and flash its box-shadow on an unscrolled page.
  */
  overflow-anchor: none;
}

body {
  overflow-x: hidden;
  background: linear-gradient(180deg, var(--wp--preset--color--rice-white) 0%, var(--wp--preset--color--light-gray) 85.24%);
  min-height: 100vh;
}

footer {
  margin-top: 0 !important;
}

/*
p,
ul,
ol,
th,
td,
label {

  a {

    &:hover,
    &:focus-visible {
      color: var(--wp--preset--color--electric-purple);
    }
  }
}
*/

.hidden {
  display: none !important;
}
@supports (text-box-trim: trim-both) {

  :where(
    .wp-block-post-title:not(:has(a)),
    .wp-block-query-title,
    .wp-block-cimcorp-archive-description,
    .wp-block-post-excerpt__excerpt,
    .wp-block-post-terms,
    .wp-block-paragraph,
    .wp-block-heading,
    .wp-block-list,
    .wp-block-quote,
    .wp-block-pullquote,
    .wp-block-preformatted,
    .wp-block-code,
    .wp-block-table
  ) {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
}

h1 {
  line-height: 1.1;
  letter-spacing: -1.5px;
}

h2 {
  line-height: 1.1;
  letter-spacing: 0;
}

h3 {
  line-height: 1.2;
  letter-spacing: 0;
}

h4,
h5,
h6 {
  line-height: 1.1;
}

:where(h1, h2, h3, h4, h5, h6, p) {

  &.has-xs-font-size { line-height: 1.45; letter-spacing: -0.25px; }

  &.has-small-font-size { line-height: 1.45; letter-spacing: -0.25px; }

  &.has-medium-font-size { line-height: 1.45; letter-spacing: -0.25px; }

  &.has-large-font-size { line-height: 1.45; letter-spacing: -0.25px; }

  &.has-xl-font-size { line-height: 1.45; letter-spacing: -0.25px; }

  &.has-2-xl-font-size { line-height: 1.45; letter-spacing: -0.25px; }

  &.has-3-xl-font-size { line-height: 1.45; letter-spacing: -0.25px; }

  &.has-4-xl-font-size { line-height: 1.35; letter-spacing: -1px; }

  &.has-5-xl-font-size { line-height: 1.1; letter-spacing: -1px; }

  &.has-6-xl-font-size { line-height: 1.1; letter-spacing: -1px; }

  &.has-7-xl-font-size { line-height: 1.1; letter-spacing: -1.5px; }

  &.has-8-xl-font-size { line-height: 1.1; letter-spacing: -1.5px; }

  &.has-9-xl-font-size { line-height: 1.0; letter-spacing: -1.5px; }
}

:root :where(h1, h2, h3, h4, h5, h6) {

  &.has-xs-font-size { line-height: 1.2; letter-spacing: 0; }

  &.has-small-font-size { line-height: 1.2; letter-spacing: 0; }

  &.has-medium-font-size { line-height: 1.2; letter-spacing: 0; }

  &.has-large-font-size { line-height: 1.2; letter-spacing: 0; }

  &.has-xl-font-size { line-height: 1.2; letter-spacing: 0; }

  &.has-2-xl-font-size { letter-spacing: 0; }

  &.has-3-xl-font-size { line-height: 1.2; letter-spacing: 0; }

  &.has-4-xl-font-size { line-height: 1.2; letter-spacing: 0; }

  &.has-5-xl-font-size { letter-spacing: 0; }

  &.has-6-xl-font-size { letter-spacing: 0; }

  &.has-7-xl-font-size { letter-spacing: -1.5px; }

  &.has-8-xl-font-size { letter-spacing: -1.5px; }

  &.has-9-xl-font-size { letter-spacing: -1.5px; }
}
@media (max-width: 720px) {

  h1 {
    letter-spacing: -1px;
  }

  :where(h1, h2, h3, h4, h5, h6) {

    &.has-6-xl-font-size,
    &.has-7-xl-font-size,
    &.has-8-xl-font-size,
    &.has-9-xl-font-size {
      line-height: 1.1; letter-spacing: -1px;
    }
  }
}
@media (max-width: 575px) {

  .wp-block-heading br {
    display: none;
  }
}

strong {
  font-weight: 900;
}

/*--------------------------------------------------------------
# main
--------------------------------------------------------------*/

main.wp-block-group {
  margin-top: var(--wp--preset--spacing--small);
}

main:not(:has(.wp-block-post-content > *:last-child.alignfull)) {
  margin-bottom: var(--wp--preset--spacing--6-xl);
}

.main-header {
  padding: 0.5rem 1.0rem !important;
}
@media (min-width: 600px) {

  .main-header {
    padding: 1.0rem var(--navigation-margin-x) !important;
  }
}

/*--------------------------------------------------------------
# WordPress
--------------------------------------------------------------*/
@media screen and (max-width: 782px) {

  #wpadminbar {
    display: none !important;
  }

  html {
    margin-top: 0 !important;
  }
}

:root :where(.wp-block-post-content > div:first-child) {
  margin-top: 0 !important;
}

:root :where(.wp-block-post-content) {

  &:has(
    > p:not([class]):first-child,
    > div:not([class]):first-child,
    > ol:not([class]):first-child,
    > ul:not([class]):first-child,
    > h1:not([class]):first-child,
    > h2:not([class]):first-child,
    > h3:not([class]):first-child,
    > h4:not([class]):first-child,
    > h5:not([class]):first-child,
    > h6:not([class]):first-child,
    > .wp-block-paragraph:first-child,
    > .wp-block-heading:first-child,
    > .wp-block-list:first-child,
    > .wp-block-quote:first-child,
    > .wp-block-pullquote:first-child,
    > .wp-block-preformatted:first-child,
    > .wp-block-code:first-child,
    > .wp-block-table:first-child
  ) {
    margin-top: var(--wp--preset--spacing--6-xl) !important;
  }
}

.editor-styles-wrapper div.filter-visible-when-post-type-is-set {
  outline: 1px dashed var(--wp--preset--color--electric-purple);
  margin-top: var(--wp--style--block-gap);

  &:first-of-type {
    margin-top: 0;
  }
}