/*
Theme Name: Nonatized
Template: hello-elementor
Version: 2.1.0
*/

:root {
    --ruby: #550B18;
    --red: #930500;
    --noir: #0C0000;
    --white: #F4F4F4;
    --gray: #525050;
    --sky: #95BBEA;
    --pink: #FFBDC5;
    --cream: #FFF8E7;
    --olive: #B9C8B7;

    /* Transition */
    --cubic: cubic-bezier(0.39, 0.1, 0.94, 0.76);
    --nonatized-kit-transition: all 0.3s var(--cubic);

    /* Fonts */
--sans: "Overused Grotesk", sans-serif, system-ui, ui-sans-serif;
--serif: "Nyght Serif", serif, ui-serif;
--mono: "Space Mono", monospace, ui-monospace;
--brand: "Avestrava", serif, ui-serif;


    /* Font Sizes */
    
    --text-xs: clamp(0.875rem, 1vw, 1rem); /* 14px → 16px */
    --text-sm: clamp(1rem, 1.1vw, 1.125rem); /* 16px → 18px */
    --text-base: clamp(1.125rem, 1.3vw, 1.3125rem); /* 18px → 21px */
    --text-md: clamp(1.3125rem, 1.5vw, 1.5rem); /* 21px → 24px */
    --text-lg: clamp(1.5rem, 1.8vw, 1.75rem); /* 24px → 28px */
    --text-xl: clamp(1.75rem, 2.2vw, 2rem); /* 28px → 32px */
    --text-2xl: clamp(2rem, 2.8vw, 2.5rem); /* 32px → 40px */
    --text-3xl: clamp(2.25rem, 3.1vw, 2.75rem);
    
  --site-width: 1440px;
  --reading-width: 760px;
  --sidebar-width: 500px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;

  --page-padding: clamp(18px, 4vw, 52px);

  --radius-sm: 10px;
  --radius-lg: 24px;
  
  /* Text Strokes */
  --ruby-stroke:
    0.1px  0px   0.5px var(--ruby),
   -0.1px  0px   0.5px var(--ruby),
    0px    0.1px 0.5px var(--ruby),
    0px   -0.1px 0.5px var(--ruby),
    0.1px  0.1px 0.5px var(--ruby),
   -0.1px  0.1px 0.5px var(--ruby),
    0.1px -0.1px 0.5px var(--ruby),
   -0.1px -0.1px 0.5px var(--ruby);
   
   --white-stroke:
    0.1px  0px   0.5px var(--white),
   -0.1px  0px   0.5px var(--white),
    0px    0.1px 0.5px var(--white),
    0px   -0.1px 0.5px var(--white),
    0.1px  0.1px 0.5px var(--white),
   -0.1px  0.1px 0.5px var(--white),
    0.1px -0.1px 0.5px var(--white),
   -0.1px -0.1px 0.5px var(--white);
   
    --black-stroke:
    0.1px  0px   0.5px var(--noir),
   -0.1px  0px   0.5px var(--noir),
    0px    0.1px 0.5px var(--noir),
    0px   -0.1px 0.5px var(--noir),
    0.1px  0.1px 0.5px var(--noir),
   -0.1px  0.1px 0.5px var(--noir),
    0.1px -0.1px 0.5px var(--noir),
   -0.1px -0.1px 0.5px var(--noir);
}


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


::-moz-selection {
  background: var(--ruby);
  color: var(--white);
  text-shadow: none;
}

::selection {
  background: var(--ruby);
  color: var(--white);
  text-shadow: none;
}

a::-moz-selection {
  background: var(--red)!important;
  color: var(--pink);
}

a::selection {
background: var(--red)!important;
  color: var(--pink);
}

* {
  -webkit-tap-highlight-color: rgb(86 6 29 / 43%);

}




/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 12px;
  border-left: 1px solid var(--ruby)
}

::-webkit-scrollbar-thumb {
  background: var(--ruby);
}

/* Hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--pink);
}

/* Active / dragging */
::-webkit-scrollbar-thumb:active {
  background: var(--ruby);
}

::-webkit-scrollbar-button {
  background-color: var(--gray);
  height: 12px; }

::-webkit-scrollbar-button:hover {
  background-color: var(--red);
}

/* --------------------- GLOBAL SETTINGS --------------------- */

body {
  margin: 0;
  overflow-x: hidden;
  font-weight: 400;
}

html,
body {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
  
}

text,
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.2 !important;
text-rendering: optimizeLegibility;
}

p,
span {
  line-height: 1.2 !important;
  font-weight: 400;
  text-rendering: optimizeLegibility;
}

.nonatized-text-kit, .nonatized-text-kit p {
    margin-block-end: 0!important;
}

a, a:hover, button, button:hover {
    transition: all 0.3s var(--cubic)!important;
}

body, text, h1, h2, h3, h4, h5, h6 {
    line-height: 1!important;
}

blockquote{margin-block-start: 1.5em; display: flex; flex-direction: column; gap: 10px; margin-block-end: 1.5em;margin-inline-start: 0;margin-inline-end: 0; padding: 15px;}

blockquote p {
      font-family: var(--serif)!important;
    font-style: italic;
    letter-spacing: -0.5pt!important;
  color: var(--ruby)!important;
  line-height: 1.2 !important;
  margin-block-end: 0!important;
}

cite {
  margin-block-start: 0!important;
  color: var(--red)!important;
  font-family: var(--serif)!important;
  font-weight: 400!important;
}

article#article-area p {
  font-size: var(--text-base);
  text-align: justify;
}


.wcf-animate, .wcf-played {
pointer-events: auto!important;
}
	
a, button {
	cursor: pointer!important;
	transition: all 0.3s var(--cubic) !important;
}


a:hover, button:hover {
    transition: all 0.3s var(--cubic) !important;
}

.nonatized-text-label .elementor-heading-title {
		font-family: var(--serif)!important;
		font-weight: 400!important;
		padding: 2px 5px!important;
		letter-spacing: 0!important;
		text-transform: capitalize;
		line-height: 1.4!important;
	}

/* OVERRIDE */

.wcf__posts a,
.wcf__posts button {
    transition: all 0.3s var(--cubic) !important;
}

.elementor-widget-wcf--posts.wcf--image-effect-zoom-in img,.elementor-widget-wcf--posts.wcf--image-effect-zoom-out img,.elementor-widget-wcf--posts.wcf--image-left-move img,.elementor-widget-wcf--posts.wcf--image-right-move img {
    transition: all .5s var(--cubic)!important;
}

header .custom-header {
    z-index: 9999!important;
}
#nonatized-global-footer {
	z-index: 0!important;
}


/* =========================================
   LAPTOP SMALL 
  ========================================= */

@media (max-width: 1080px) {
h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4, h5, h6 {
  font-size: var(--text-md)
}

p, span, ul, li, ol, ul li, ol li, blockquote, blockquote p, cite, label {
  font-size: var(--text-base)!important;
}

article#article-area p {
  font-size: var(--text-base);
  text-align: justify;
}
}

/* =========================================
   TABLET 
  ========================================= */

@media (max-width: 780px) {

h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4, h5, h6 {
  font-size: var(--text-md)
}

p, span, ul, li, ol, ul li, ol li, blockquote, blockquote p, cite, label {
  font-size: var(--text-sm)!important;
}
  
}


/* =========================================
   MOBILE 
  ========================================= */

@media (max-width: 480px) {


h1 {
  font-size: var(--text-2xl);
}

h2 {
  font-size: var(--text-xl);
}

h3 {
  font-size: var(--text-lg);
}

h4, h5, h6 {
  font-size: var(--text-md)
}

p, span, ul, li, ol, ul li, ol li, blockquote, blockquote p, cite, label {
  font-size: var(--text-sm)!important;
}
  
  
article#article-area p {
  font-size: var(--text-sm);
  text-align: justify;
}
}