/*
 Retrofit template custom CSS for: vutu.re
 Author:       	Tim Taricco
 Author URI:   	http://www.timtaricco.com
 Version:     	05.05.26
*/

/*** Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
1  - Overwrite vutu.re theme CSS
2  - Primary Styles
***/


/*** 1 - Overwrite vutu.re theme CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/

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

/*** Set HelveticaNeueLTPro as the default font on retrofit template pages.
     The vuture theme sets 'Public Sans' on html, so we override at the
     same level to replace it site-wide on these pages. ***/
body.page-template-retrofit-block-editor,
body.dev-template-retrofit-block-editor {
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: var(--line-height-base);
	margin: 0;
}
body.page-template-retrofit-block-editor p,
body.dev-template-retrofit-block-editor p {
	letter-spacing: .2pt;
}

/*** Remove browser UA underline from all links on retrofit template pages.
     The vuture theme previously handled this via its Tailwind CSS reset. ***/
body.page-template-retrofit-block-editor a,
body.dev-template-retrofit-block-editor a {
	text-decoration: none;
	cursor: pointer;
}


/*** 2 - Primary Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– ***/

/*** Basic Styles ***/
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) {
	background-color: var(--light-1);
} /* Content Area Styling */
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) p {
	margin-top: 0;
} /* Overrides theme defaults */
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) p:last-child:last-of-type {
	margin-bottom: 0;
} /* Overrides theme defaults */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
} /* Limited browser support as of June 2023 */
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) {
	font-size: var(--text-base);
}
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1 {
	font-size: var(--text-h1) !important;
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: var(--line-height-h1) !important;
	color: var(--accent-1);
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1.text_p {
	font-size: var(--text-p) !important;
	line-height: var(--line-height-p) !important;
}
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2 {
	font-size: var(--text-h2) !important;
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: var(--line-height-h2) !important;
	color: var(--accent-1);
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2.text_p {
	font-size: var(--text-p) !important;
	line-height: var(--line-height-p) !important;
}
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3 {
	font-size: var(--text-h3) !important;
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: var(--line-height-h3) !important;
	color: var(--accent-1);
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3.text_p {
	font-size: var(--text-p) !important;
	line-height: var(--line-height-p) !important;
}
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4 {
	font-size: var(--text-h4) !important;
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: var(--line-height-h4) !important;
	color: var(--accent-1);
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4.text_p {
	font-size: var(--text-p) !important;
	line-height: var(--line-height-p) !important;
}
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5 {
	font-size: var(--text-h5) !important;
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: var(--line-height-h5) !important;
	color: var(--accent-1);
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5.text_h6 {
	font-size: var(--text-h6) !important;
	line-height: var(--line-height-h6) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5.text_p {
	font-size: var(--text-p) !important;
	line-height: var(--line-height-p) !important;
}
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6 {
	font-size: var(--text-h6) !important;
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: var(--line-height-h6) !important;
	color: var(--accent-1);
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6.text_h1 {
	font-size: var(--text-h1) !important;
	line-height: var(--line-height-h1) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6.text_h2 {
	font-size: var(--text-h2) !important;
	line-height: var(--line-height-h2) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6.text_h3 {
	font-size: var(--text-h3) !important;
	line-height: var(--line-height-h3) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6.text_h4 {
	font-size: var(--text-h4) !important;
	line-height: var(--line-height-h4) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6.text_h5 {
	font-size: var(--text-h5) !important;
	line-height: var(--line-height-h5) !important;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6.text_p {
	font-size: var(--text-p) !important;
	line-height: var(--line-height-p) !important;
}

/*** Heading Margin defaults
     :where() gives specificity (0,0,1) — wins over UA stylesheet on
     source order (author styles beat UA). GB utility classes at (0,1,0)
     win over :where() on specificity, so GB overrides work cleanly.
 ***/
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h1 { margin-top: 0; margin-bottom: var(--margin-bottom-h1); }
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h2 { margin-top: 0; margin-bottom: var(--margin-bottom-h2); }
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h3 { margin-top: 0; margin-bottom: var(--margin-bottom-h3); }
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h4 { margin-top: 0; margin-bottom: var(--margin-bottom-h4); }
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h5 { margin-top: 0; margin-bottom: var(--margin-bottom-h5); }
:where(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) h6 { margin-top: 0; margin-bottom: var(--margin-bottom-h6); }


/*** WordPress Link Styling Custom CSS ***/
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) :is(p, li) a:any-link:not([class^="button_"]):not([class*=" button_"]):not(footer *):not(header *) {
  text-decoration: none;
  position: relative;
  color: var(--accent-1); /* Normal state color */
  background-image: linear-gradient(var(--accent-1), var(--accent-1));
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.5s ease-in-out, color 0.3s ease-in-out;
}
:is(.page-template-retrofit-block-editor, .dev-template-retrofit-block-editor) :is(p, li) a:any-link:not([class^="button_"]):not([class*=" button_"]):not(footer *):not(header *):is(:hover, :focus) {
  background-size: 0 1px; /* Full width underline on hover */
  background-image: linear-gradient(var(--accent-1), var(--accent-1)); /* Change color of underline on hover */
  cursor: pointer;
  color: var(--accent-1); /* Change text color on hover */
}


/*** Scope: .section_* inside .retrofit-block-editor-template ***/
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) p:last-child:last-of-type {
	margin-bottom: 0;
} /* Remove bottom margin from last paragraph in a container */

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) sup {
	position: relative;
	font-size: 70%;
	line-height: 0;
	vertical-align: baseline;
	top: -.5em;
} /* Style Superscript */


/*** WordPress Table Block Custom CSS ***/
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) .wp-block-table {
	margin: 0;
} /* Table block formatting */

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) figure.wp-block-table {
	overflow-x: auto;
	overflow-y: hidden;
} /* Allow sideways scroll for table block on mobile */

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) .wp-block-table table {
	min-width: 688px;
	margin: 0;
} /* Ensure table has width for horizontal scroll */


/*** Horizontal Line Styling ***/
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) hr {
	margin-top: var(--margin-bottom-p);
	margin-bottom: var(--margin-bottom-p);
} /* Adjust HR spacing */

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) .wp-block-separator {
	border: .5px solid;
} /* Thin separator line */


/*** WordPress Blockquote Block Custom CSS ***/
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote  {
	margin: 0;
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote p {
	font-family: 'ActaProHeadline', serif;
	font-style: italic;
	font-size: var(--text-lg);
	line-height: var(--line-height-lg);
	margin-bottom: var(--margin-bottom-lg);
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote p::before {
	content: '\201C';
	font-size: 2em;
	position: relative;
	top: 15px;
	right: 5px;
	line-height: 0;
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote p:last-of-type::after {
	content: '\201D';
	font-size: 2em;
	position: relative;
	top: 15px;
	line-height: 0;
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) blockquote cite {
	font-family: 'HelveticaNeueLTPro', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: var(--text-sm);
	line-height: var(--line-height-sm);
	margin-bottom: 0;
}


/*** WordPress Lists (UL / OL) ***/
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul {
	margin: 0 0 var(--margin-bottom-p) 12px;
	padding-left: 0;
}

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul:last-child {
	margin-bottom: 0;
}

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul li {
	padding-left: 10px;
	margin-bottom: 5px;
}

/* Circle bullet + color */
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul li::marker {
	color: var(--accent-1);
	font-size: 20px;
	content: "\25CF";
	font-weight: 700;
}

/* Light variant (class on UL or ancestor) */
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"]))) ul.light-bullet-point li::marker,
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ul li::marker {
	color: var(--light-1);
}

/* Nested UL spacing + marker color */
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li {
	padding-left: 10px;
	margin-bottom: 5px;
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li::marker {
	color: var(--accent-1);
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ul li li::marker,
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul.light-bullet-point li li::marker {
	color: var(--light-1);
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li:first-child {
	padding-top: 5px;
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ul li li:last-child {
	padding-bottom: 0px;
}


/*** Ordered Lists (OL) ***/
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol {
	margin: 0 0 var(--margin-bottom-p) 22px;
	padding-left: 0;
}

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol:last-child {
	margin-bottom: 0;
}

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol li {
	padding-left: 5px;
	margin-bottom: 5px;
}

:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol li::marker {
	color: var(--accent-1);
}

/* Light variant (class on OL or ancestor) */
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol.light-bullet-point li::marker,
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ol li::marker {
	color: var(--light-1);
}

/* Nested OL spacing + marker color */
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li {
	padding-left: 10px;
	margin-bottom: 5px;
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li::marker {
	color: var(--accent-1);
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) .light-bullet-point ol li li::marker,
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol.light-bullet-point li li::marker {
	color: var(--light-1);
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li:first-child {
	padding-top: 5px;
}
:is(.retrofit-block-editor-template :is([class^="section_"], [class*=" section_"])) ol li li:last-child {
	padding-bottom: 0px;
}