/* ==========================================================================
   CSS VARIABLES & FLUID TYPOGRAPHY
   ========================================================================== */

:root {
    /* Fluid typography for base font size */
    --main-fs: clamp(17px, 1.2vw + 13px, 20px);

    /* Responsive title font sizes using clamp() */
    --titles-h1-fs: clamp(35px, 3.5vw + 20px, 45px);
    --titles-h2-fs: clamp(24px, 2vw + 18px, 30px);
    --titles-other-fs: clamp(22px, 1.8vw + 15px, 24px);
    --post-titles-fs: clamp(20px, 1.8vw + 14px, 28px);
    --post-sub-titles-fs: clamp(18px, 1.4vw + 13px, 24px);

    /* Layout variables */
    --title-underline-min-width: clamp(500px, 60vw, 800px);
}

@media (max-width: 576px) {
    :root {
        --title-underline-min-width: 100%;
    }
}

/* ==========================================================================
   BASE & RESET STYLES
   ========================================================================== */

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

* {
    font-family: var(--main-font-family);
    font-size: var(--main-fs);
    font-weight: var(--fw-text);
    color: var(--text-main-color);
    letter-spacing: var(--main-letter-spacing);
    font-optical-sizing: auto;
    text-align: left;
    background-repeat: no-repeat;
}

body, h1, h2, h3, h4, h5, h6, form, input {
    margin: 0;
    padding: 0;
}

body {
    text-align: center;
}

img {
    border: 0;
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   TYPOGRAPHY & LINKS
   ========================================================================== */

span {
    font: inherit;
    color: inherit;
}

a {
    outline: none;
    color: var(--link-color);
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

a * {
    color: inherit;
}

a:hover {
    color: var(--link-hover-color);
}

main a {
    text-decoration: var(--link-underline);
}

main a:hover {
    text-decoration: var(--link-hover-underline);
}

b, strong {
    font-weight: var(--fw-strong-text);
}

sub, sup {
    font-size: 0.75em;
}


/* ==========================================================================
   HR - SEPARATOR
   ========================================================================== */
   
/*

hr.editorHr {
    border: none;
    border-top: 1px dashed #e71717;
    max-width: 400px;
    width: 100%;
    margin: 20px auto 20px auto;
    position: relative;
    overflow: visible;
}
*/

hr.editorHr {
  position: relative;
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg, 
    rgba(0, 0, 0, 0) 0%, 
    rgba(231, 23, 23, 0.4) 30%, 
    rgba(231, 23, 23, 0.6) 50%, 
    rgba(231, 23, 23, 0.4) 70%, 
    rgba(0, 0, 0, 0) 100%
  );
  margin: 55px auto;
  overflow: visible;
  max-width: 600px;
  width: 100%;
}
hr.editorHr::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85px;
  height: 15px;
  background-color: #ffffff;
  z-index: 1;
}
hr.editorHr::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 3px;
  margin-top: -1px;
  border-radius: 2px;
  
  background-color: rgba(231, 23, 23, 0.6);
  transform: translate(-50%, -50%);
  z-index: 2;
  box-shadow: 
    -20px 0px 0 0px rgba(231, 23, 23, 0.4), -20px 0px 0 0px rgba(231, 23, 23, 0),
     20px 0px 0 0px rgba(231, 23, 23, 0.4), 20px 0px 0 0px rgba(231, 23, 23, 0);
}


/* ==========================================================================
   HEADINGS & TITLES
   ========================================================================== */

h1, h2, h3, h4, h5, h6, .siteTitle {
    display: block;
    margin: 0 0 20px 0;
    padding: 0;
    line-height: 1;
    letter-spacing: 4px;
    word-spacing: 5px;
    font-family: var(--titles-font-family);
}

h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, .siteTitle * {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    color: inherit;
}

/* Inherit styles for child elements inside headings */
:is(h1, h2, h3, h4, h5, h6, .siteTitle) :is(span, i, em) {
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
}

h1 {
    font-size: var(--titles-h1-fs);
    color: var(--title-h1-color);
    font-weight: var(--fw-h1-title);
    letter-spacing: 10px;
}

h2 {
    font-size: var(--titles-h2-fs);
    color: var(--title-h2-color);
    font-weight: var(--fw-h2-title);
}

h3, h4, h5, h6 {
    font-size: var(--titles-other-fs);
    color: var(--titles-color);
    font-weight: var(--fw-titles);
}

:is(h1, h2, h3) u {
    display: block;
    text-decoration: none;
    border-bottom: 1px dotted #5b5b5b;
    margin: 0;
    padding-bottom: 5px;
    font-size: inherit;
    text-align: inherit;
}


:is(h1, h2):has(:is(b, strong)) {
    line-height: 1.2;
    font-weight: 400;
    font-size: clamp(17px, 1vw + 15px, 20px);
}

:is(h1, h2) :is(b, strong) {
    font-size: clamp(35px, 3.5vw + 20px, 45px);
    font-weight: 700;
    margin-left: -5px;
}

.contentBlock1 h2 u {
    color: var(--title-h2-color-alt);
}

/* Underline scaling for centered headers */
:is(h1, h2, h3):where([style*="text-align: center"], [style*="text-align:center"]) u {
    min-width: var(--title-underline-min-width);
}

/*.siteTitle.blockTitle,*/
.alignCenter,
[align="center"] {
    text-align: center;
}

.alignLeft { text-align: left; }
.alignRight { text-align: right; }

/* ==========================================================================
   TABLES & BLOCKQUOTES
   ========================================================================== */

table {
    width: auto;
    min-width: 404px;
    margin: 20px auto;
}

table :is(td, th) {
    padding: 0;
}

blockquote {
    position: relative;
    padding-left: 2rem;
    padding-top: 10px;
    overflow: hidden;
}

blockquote p:last-child {
    margin-bottom: 0;
}

blockquote::before {
    content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='%23a8a8a5'><path d='M9.983 3v7.391C9.983 16.095 6.252 19.961 1 21l-.995-2.151C2.437 17.932 4 15.211 4 13H0V3h9.983zM24 3v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151C16.437 17.932 18 15.211 18 13h-3.983V3H24z'/></svg>");
    position: absolute;
    left: 0;
    top: 0;
}

blockquote::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 35px;
    width: 1px;
    height: 100%;
    background-color: currentColor;
}

blockquote + p {
    line-height: normal;
}

/* ==========================================================================
   UTILITIES & CONTENT OVERRIDES
   ========================================================================== */

span.asterisk {
    color: #c00;
}

.cb {
    clear: both;
}

.contentBlock sup {
    font-size: 55%;
    font-style: inherit;
}

.contentBlock :is(h1, h2, h3) sup {
    font-size: 45%;
    font-style: inherit;
    top: -0.85em;
}



/* ---------- BLOCKS FONT SIZE ( xxs, xs, s, m, l, xl, xxl ) ---------- */

.contentBlockContainer.block-font-size-xxl { --block-fs: var(--fs-7); }
.contentBlockContainer.block-font-size-xl  { --block-fs: var(--fs-6); }
.contentBlockContainer.block-font-size-l   { --block-fs: var(--fs-5); }
.contentBlockContainer.block-font-size-m   { --block-fs: inherit; }
.contentBlockContainer.block-font-size-s   { --block-fs: var(--fs-3); }
.contentBlockContainer.block-font-size-xs  { --block-fs: var(--fs-2); }
.contentBlockContainer.block-font-size-xxs { --block-fs: var(--fs-1); }

/*.contentBlockContainer[class*="block-font-size-"] :is(p, a, ul, strong, b, p *, a *, strong *, b *, ul *) {
    font-size: var(--block-fs, inherit);
}*/


/* ---------- EDITOR FONT SIZE ( 1, 2, 3, 4, 5, 6, 7 ) ---------- */

:is(h1, h2, h3, h4, h5, h6) :is(span[data-font-size*="7"], font[size*="7"]) { font-size: 180%; }
:is(h1, h2, h3, h4, h5, h6) :is(span[data-font-size*="6"], font[size*="6"]) { font-size: 140%; }
:is(h1, h2, h3, h4, h5, h6) :is(span[data-font-size*="5"], font[size*="5"]) { font-size: 120%; }
:is(h1, h2, h3, h4, h5, h6) :is(span[data-font-size*="4"], font[size*="4"]) { font-size: inherit; }
:is(h1, h2, h3, h4, h5, h6) :is(span[data-font-size*="3"], font[size*="3"]) { font-size: 90%; }
:is(h1, h2, h3, h4, h5, h6) :is(span[data-font-size*="2"], font[size*="2"]) { font-size: 80%; }
:is(h1, h2, h3, h4, h5, h6) :is(span[data-font-size*="1"], font[size*="1"]) { font-size: 70%; }

:is(span[data-font-size*="7"], font[size*="7"]) { font-size: var(--fs-7); }
:is(span[data-font-size*="6"], font[size*="6"]) { font-size: var(--fs-6); }
:is(span[data-font-size*="5"], font[size*="5"]) { font-size: var(--fs-5); }
:is(span[data-font-size*="4"], font[size*="4"]) { font-size: inherit; }
:is(span[data-font-size*="3"], font[size*="3"]) { font-size: var(--fs-3); }
:is(span[data-font-size*="2"], font[size*="2"]) { font-size: var(--fs-2); }
:is(span[data-font-size*="1"], font[size*="1"]) { font-size: var(--fs-1); }

:is(span[data-font-size], font[size]) * {
    font-size: inherit;
}
/*.contentBlockContainer :is(span[data-font-size], font[size]) * {
    font-size: inherit;
}*/