/*
 * BASE STYLES
 * Root variables, global resets, body, and typography
 */

/*
 Theme Name:   Attelia Theme
 Template:     hello-elementor
 Author:       Your Name
 Description:  A child theme for Hello Elementor.
 Version:      1.0.0
 Text Domain:  ema-theme
*/

:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1025px;
  --breakpoint-lg: 1367px;
  --breakpoint-xl: 1921px;

  --root-font-size: 16px;
  --page-section-space: 2rem;
  --grid-gap: 2rem;
  --max-hero-height: 960px;
  --header-height: 11rem;

  --e-global-color-text-secondary: var(--e-global-color-3420c2a, #110033);
  --e-global-color-bg-primary: var(--e-global-color-ffaeb91, #F0F9FF);
  --e-global-color-on-dark: var(--e-global-color-dc4d9fc, #EFF6FF);
  --e-global-color-att-red: var(--e-global-color-40eb496, #E4002B);
  --e-global-color-info: var(--e-global-color-17b0dc8, #009DE4);
  --e-global-color-att-gray: var(--e-global-color-2a403af, #97999B);
  --e-global-color-att-turquaz: var(--e-global-color-f32feb9, #3CDBC0);
  --e-global-color-att-pink: var(--e-global-color-d054ec1, #F4364C);
  --e-global-color-att-dark-blue: var(--e-global-color-f4502f6, #2E008B);
  --e-global-color-bg-secondary: var(--e-global-color-1a5db1e, #E0F2FE);
  --e-global-color-highlight: var(--e-global-color-2dbc918, #FACC15);
  --e-global-color-bg-body: var(--e-global-color-1629c32, #FFFFFF);
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
  font-size: var(--root-font-size, 16px) !important;
  background-color: var(--e-global-color-bg-primary);
}

body {
  font-size: var(--root-font-size, 16px) !important;
}

main {}

.base-page {
  p {
    margin-block-end: 0px;
  }

  .elementor-widget-text-editor.generic-content {
    p {
      margin-block-end: 1em;
    }
  }
}

header {}

.article-content {

  h2,
  h3,
  h4 {
    font-family: var(--e-global-typography-secondary-font-family);
    font-weight: bold;
    color: var(--e-global-color-att-dark-blue, #dde);

    &:not(:first-child) {
      margin-block-start: 1.5em;
    }

    margin-block-end: 0.5em;
    line-height: 1.2em;
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.25em;
  }

  h4 {
    font-size: 1.125em;
  }

  p {
    line-height: 1.6em;
  }
}