/*
 * If you have questions about using this stylesheet, contact Tony Scialdone at 303.885.1573
 * SECTIONS:
 * 		CSS RESET STYLES
 * 		LAYOUT STYLES
 * 		SPECIFIC PAGE STYLES
 * 		TYPOGRAPHY and HELPER CLASSES
 * 		FORMS
 * 		RESPONSIVE STYLES
*/


/* CSS RESET STYLES */
* { position: relative; box-sizing: border-box;	background-clip: padding-box; max-width: 100%; line-height: calc(1em + 0.5rem); }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; overscroll-behavior: contain; }


/* LAYOUT STYLES ------------------------------------------------------------------------------------- */
:root {
	--dark1:		#472D47;
	--dark2:		#3E8749; 
	--light1:   	#d9d0de;
	--light2: 		#eee;
	--medium1:		#666;
	--medium2:		#999;
	--inner: 		min(1000px, 100% - 1rem);
	--fancy:		'Bilbo Swash Caps', sans-serif;

	--hover:	all .25s ease-in-out;
	--scale:	scale(1.1);
}

html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	/* font adjust is now available */
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { min-height: 100px; background: #ffcc33; border-radius: 10px; }


body { 
	margin: 0;
	font: normal 1rem/1.6 'Open Sans', sans-serif;
	color: #222;
	hanging-punctuation: first last;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	text-spacing-trim: trim-start;
	text-rendering: optimizeSpeed;
	scroll-behavior: smooth;
}

/* HEADER / MENU ------------------------------------------------------------------------ */

.site-header {
	padding: 1.5rem;
	background-color: var(--dark1);
}

.site-header .inner {
	display: flex; 
	justify-content: center;
	align-items: center; 
	flex-wrap: wrap;
	gap: 1rem 5rem;
}

.lbc {
	display: flex;
	align-items: center; 
	flex-wrap: wrap;
	gap: .5rem;
}

.logo {
	display: flex;
	align-items: center; 
	flex-wrap: wrap;
	gap: .5rem;
}

.logo:is(:link, :visited, :active, :hover) {
	margin: 0;
	font: normal 2.5rem/1.5 sans-serif; 
	color: #fff;
	text-decoration: none;
}

.lbcbox {
	padding: 0 .5rem;
	width: fit-content;
	font-weight: bold;
	font-size: 48px;
	border: 2px solid #fff;
}

.lbcbox span {
		position: relative; top: 1px;
}

.lbcname {
	font: bold 42px/1 'Open Sans', sans-serif;
}

.lbcname span {
	display: block; 
	padding-left: 2px;
	width: fit-content;
	font-weight: normal;
	font-size: 20px;
	letter-spacing: 5px;
	text-transform: uppercase;
}

.menu-button {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 0;
	width: 35px;
	background: none;
	border: 0;
	cursor: pointer;
}

.menu-button span {
	border-radius: 1px;
    height: 5px;
    width: 35px;
    background-color: #ccc;
}

.menu-button:hover span {
	background-color: #fff; 
}

.sidebar {
	background-color: #fff; 
}

[popover] {
  padding: 3rem .5rem 1rem;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

[popover] button {
	display: flex; 
	align-items: center;
	position: absolute; top: 8px; right: 8px;
	height: 32px;
	width: 32px; min-width: 32px;
	background-color: var(--dark1);
	font-weight: bold;
	font-size: 1.5rem;
	color: #fff;
	text-align: center;
	border-radius: 100%;
	cursor: pointer;
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  inset: auto;
  height: 100svh;
  border: 0;
  box-shadow: 0 0 1rem 2px rgba(0, 0, 0, 0.2);
  width: 250px;
  transform: translateX(-100%);
  transition: transform 0.2s ease-in-out;
  transition-behavior: allow-discrete;
}

@starting-style {
  #menu:popover-open {
    transform: translateX(-100%);
  }
}

#menu:popover-open {
  transform: translateX(0);
}

.menu {
	list-style-type: none; 
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.menu > li {
	margin: 4px 0;
}

.menu li {
	margin: 0;
}

.menu a {
	display: block;
	padding: .5rem;
}

.menu a:is(:link, :active, :visited),
.admins a {
	color: #222; 
}

.menu > li > a,
.admins a {
	margin-bottom: 2px; 
	background-color: var(--light1);
	border-radius: 5px;
}

.admins {
	margin-bottom: 4rem;
}

.admins a { 
	display: block; 
	padding: 1rem;
	text-align: right; }


.menu a:hover {
	color: var(--dark1);
}

.sub-menu {
  list-style-type: none;
  margin: 0 0 0 1rem;
	padding: 0;
	border-left: 1px solid #ccc;
}

.sub-menu li {
	padding: 0;
	border-bottom: 1px solid #ccc;
}

.sub-menu li:last-child {
	border-bottom: none;
}


/* LAYOUT STYLES ------------------------------------------------------------------------ */

main {
	padding: 0;
}

.inner {
	margin: 0 auto;
	width: var(--inner);
}

article:not(.page-10 article) {
	margin-bottom: 4rem;
	padding: 0 1rem;
	max-width: 100%;
}

.top {
	position: fixed; right: 40px; bottom: 120px;
	display: none; 
	justify-content: center;
	align-items: center; 
	height: 40px; 
	width: 40px; 
	background-color: #4199FD;
	border-radius: 100%;
}

.top.show { 
	display: flex; 
}

.top img {
	width: 22px;
}


footer { 
	display: flex; 
	justify-content: center;  
	flex-wrap: wrap; 
	gap: 1rem 8rem; 
	margin: 0;
	padding: 2rem 1rem;
	background-color: var(--dark1);
	color: #fff;
}

address {
	font-style: normal;
	width: fit-content;
}

address .btn {
	display: inline-block;
	margin: .5rem 0 0;
}

.hours {
	width: fit-content; 
}

.copyright {
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 12px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
}

.copyright a:is(:link, :visited, :active, :hover) {
	color: #fff; 
}

.social {
	display: flex;
	justify-content: center;
	align-items: center; 
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
}

.social a, .social img {
	height: 28px; 
	width: 28px; 
}

.fb {
	display: inline-block;
}

.cc {
	display: flex; 
	justify-content: center;
	align-items: center;
	padding: 7px;
	background-color: #fff;
	height: 28px;
	width: 28px;
	border-radius: 3px;
	transition: var(--hover);
}

.cc::after {
	content: "Log into ChurchCenter";
	opacity: 0;
	background-color: #fff;
	color: var(--dark2);
	border-radius: 5px;
	width: 131px;
	font-size: 10px;
	position: absolute;
	left: 0;
	margin-left: 0;
	text-align: center;
	top: -31px;
}

.cc:hover::after,
.cc:focus-within::after {
	opacity: 1;
}


/* SPECIFIC PAGE STYLES ------------------------------------------------------------------------ */


/* Home Page --------------------------------------------------------------- */

.page-10 h1 { display: none; 
	margin: 0 0 2rem; 
	background-color: lavender;
	font: normal 5rem/1 var(--fancy);
	letter-spacing: 0;
}

.hero-home > div {
	display: grid; 
	margin: 0 auto;
}

.hero-home * {
	grid-area: 1/-1; 
	place-self: end center;
	margin: 0;
	font: normal 6rem/1 var(--fancy) !important;
	color: #fff;
	text-shadow: 1px 8px 6px #000;
}

.hero-home p {
	padding: 0 0 4%;
}

.home-box {
	padding: 1rem;
	background-color: #ccc;
}

.home-box img {
	padding: .5rem; 
	background-color: #fff;
}

.when {
	padding: 2rem 1rem;
	background-color: var(--dark1);
	color: #fff;
}

.when h2 {
	margin: 0 0 1rem;
	font: bold 2.5rem/1 'Open Sans', sans-serif;
	color: #fff;
	letter-spacing: -2px;
}

/* Blog Posts ---------------------------------------------- */

.single article {
	margin: 0 auto;
	width: 77ch;
}

.single h1, .home h1 {
	margin: 2rem 0 1rem; 
	font: normal 2rem/1.25 'Open Sans', sans-serif;
	text-wrap: pretty;
}

.single .btn.slim, .home .btn.slim {
	margin-bottom: 1rem;
	padding: 0;
}

.single .btn.slim a, .home .btn.slim a {
	padding: .25rem 1rem;
}

.home.home h2 a {
	display: block; 
	margin: 0 0 1.5rem;
	font: normal 1.25rem/1.25 'Open Sans', sans-serif;
	text-wrap: pretty;
	border: 0; 
}

.posts-wrap {
	display: flex; 
	justify-content: center; 
	align-items: center; 
	flex-wrap: wrap;
	gap: 2rem;
	margin: 1rem;
}

.home.home article {
	width: 400px; max-width: 100%;
}

.read-more {
    display: flex;
	justify-content: space-between;
	margin: 1rem 0 0; 
	padding: .25rem 1rem;
	width: fit-content;
	background-color: var(--dark2);
	color: #fff;
    text-decoration: none;
	border: 0;
	border-radius: 5px;
	transition: var(--hover);
}
.read-more:hover {
    background-color: var(--dark1);
}

.read-more::after {
	content: "\00BB";
	margin-left: 1rem;
	color: #fff;
}

.featured {
	margin-bottom: 2rem;
}

.featured.featured a {
	border: 0; 
}

.featured img {
	width: 100%;
	height: auto;
}

.home .featured {
	margin-bottom: 1rem;
}

.index .featured, .index .featured img {
	margin: 0 auto 1rem; 
	width: var(--inner);
	height: auto;
}


/* Basic excerpt styling */
.entry-summary {
  font-size: 1.1em;
  color: #333;
  margin-bottom: 1.5em;
  line-height: 1.7;
  background: #fafafa;
  padding: 1em 1.5em;
  border-radius: 5px;
}

/* Additional: consistent spacing and link styling */
.entry-summary a {
  color: #006699;
  text-decoration: underline;
}
.entry-summary a:hover {
  color: #004466;
}

/* If excerpts are inside a <p> tag */
.entry-summary p {
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .entry-summary {
    font-size: 1em;
    padding: 1em;
  }
}


/* Events Page --------------------------------------------- */

.page-237 h1 {
	font: normal 4rem/1 var(--fancy);
	color: var(--dark2);
}

.page-237 div.em-event.em-item { /* do not remove this coconut */
	--default-border: 2px solid var(--dark1) !important;
}

#lbcevents {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

#lbcevents * {
	font-style: normal !important;
	font-family: 'Open Sans', sans-serif !important;
}

#lbc #lbcevents .em.em-list .em-item {
	padding-top: 1.5rem !important;
	width: 100%;
	border-top: 1px solid #ccc;
}

.em-item-actions.input {
	width: fit-content;
}

#lbcevents .em-item-read-more.button {
	height: 42px !important; 
	color: var(--dark2) !important;
	border: 2px solid var(--dark2) !important;
	transition: var(--hover);
}

#lbcevents .em-item-read-more.button:hover {
	background-color: var(--dark2) !important;
	color: #fff !important;
	border: 2px solid var(--dark2) !important;
}

#lbcevents .em-item-title a {
	color: var(--dark2) !important;
}

.em-item-image img {
	height: 100%;
	width: auto;
}

.page-237 .em-item-image {
	width: 100%;
	height: auto;
}


.page-237 .em-item-image img {
	width: 100%;
	height: auto;
}

.em-event-date {
	font-weight: bold;
}

#lbc .page-numbers.current,
#lbc .em .em-pagination .page-numbers, 
#lbc .em .em-pagination .page-numbers.current, .em .em-pagination .page-numbers:hover {
	display: flex; 
	justify-content: center;
	align-items: center; 
	margin-inline: 2px !important;
	padding: 0 !important;
	height: 40px !important;
	background-color: var(--light2) !important;
	font-size: 1rem !important;
	color: #666 !important;
	text-decoration: none !important;
	border-radius: 5px !important;
}

#lbc .em .em-pagination .page-numbers.current, 
#lbc .em .em-pagination .page-numbers:hover {
	padding: 0 !important;
	height: 40px !important; 
	background-color: var(--medium2) !important;
	font-size: 1rem !important;	
	color: #fff !important;
}

#lbc .prev.page-numbers,
#lbc .next.page-numbers{
	text-indent: -999999px;
}

/* Individual Event Page ------------------------------------ */

.em.em-view-container {
	margin: 2rem auto;
}

.wp-block-columns.duo {
	gap: .25rem;
}

.duo .left {
	padding: 0 1rem 0 0;
	text-align: right;
	border-right: 2px solid var(--light1);
}

.duo .right {
	padding: 0 0 0 .75rem; 
	text-align: left;
}

.duo h2.fancy {
	margin-bottom: 1rem;
	font-size: 3.5rem;
	text-shadow: 0px 2px 5px rgba(0,0,0, .15);
}

.fancy {
	color: var(--dark2);
}

.home-events {
	padding: 2rem;
	background-color: var(--light2);
}

#lbc #events-list {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
	min-width: 100%;
}

#lbc #event-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
	width: 350px; max-width: 100%;
}

#lbc #event-date {
	margin-bottom: -.5rem;
	font-weight: bold;
}

#lbc #event-title {
	display: block; 
	padding: .25rem 0 .25rem 1rem; 
	width: 100%;
	background-color: var(--dark1);
	color: #fff;
	border-radius: 5px;
}

#lbc .em.em-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

#events-list a:hover span,
#events-list a:hover span#event-date:hover {
	background-color: var(--dark2) !important;
	color: #fff !important;
}

#lbc .em.em-item .em-item-meta .em-item-meta-line a, .em.em-list .em-item .em-item-meta .em-item-meta-line a, .em.em-list-widget .em-item .em-item-meta .em-item-meta-line a {
	font-style: normal !important;
}

[data-view="event"] {
	width: var(--inner);
}


/* Ministries -------------------------------------------------- */

.ministries-list {
	list-style-type: none;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 2rem;
}

.ministries-list li {
	margin: 0;
}

.ministries-list a:is(:link, :visited, :active) {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 1rem;
	background-color: var(--light2);
	color: var(--dark2);
	border-radius: 5px;;
}

.ministries-list a:hover {
	background-color: var(--dark2);
	color: #fff;
}


/* Staff, Elders, Deacons */

#lbc .bios .wp-block-columns {
	flex-wrap: nowrap !important;
}

.bios > div > div {
	border-bottom: 1px solid #ccc;
}

.bios .name {
	margin-bottom: 2rem;
}

.inner.bios .name h2 {
	margin-bottom: 0; 
	font-size: 1.25rem;
}

.bios .name p {
	margin: 0; 
}

.bios .name p:nth-child(2) {
	font-size: .8rem;
}

.bios figure {
	text-align: right;
}

.bios a[href*="mailto:"] {
	font-size: 14px;
}

.deacons > div {
	display: flex; 
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem;
	text-align: center; 
}


/* What We Believe */

.beliefs .cite {
	margin-top: -16px;
	font-size: .8rem;
	color: #aaa;
	text-transform: uppercase;
}


/* Events */
.tribe-events-event-image img {
    display: block;
    width: 100%;
	height: auto; 
}


/* TYPOGRAPHY ---------------------------------------------------------------------------------- */

h1:not(.contacts h1, .single h1, .home h1) {
	margin: 1rem 0;
	padding: 1rem;
	font: normal 4rem/1 var(--fancy);
	color: var(--dark2);
	text-align: center; 
}

.inner h2 {
	margin-bottom: 2rem;
}

h2.fancy {
	font: normal 5rem/1 var(--fancy);
	color: var(--dark2);
}

:is(h2, h3, h4):target, [id] {
  scroll-margin-top: var(--header-height);
  scroll-margin-top: 2rem;
}


p, dl, ol, ul, address {
	margin: 0 0 24px;
	text-wrap: pretty;
	overflow-wrap: break-word;
}

dd, li { 
	margin: 0 0 8px 32px; 
}

article a:not(.em-event a) { 
	text-decoration: none; 
	border-bottom: 1px dotted;
	cursor: pointer; 
}

/* Links without decoration */

.logo a,
.menu a,
.btn a, 
a[href*="tel"],
#event-link,
.copyright a,
.em-item-title a, 
.em-icon .event-categories a,
.page-numbers, 
.ministries-list a,
.em-event-location a,
.admins a {
	text-decoration: none !important; 
	border-bottom: 0 !important;
}


.btn a,
.frm_button_submit {
	display: inline-block;
	padding: .5rem 1.5rem;
	background-color: var(--dark2);
	color: #fff;
	border-radius: 5px;
	transition: var(--hover);
	cursor: pointer;
}

.frm_button_submit {
	margin-top: .5rem; 
	width: fit-content;
}

.btn.ghost a {
	background-color: transparent;
	color: #fff;
	text-decoration: none;
	border: 1px solid currentcolor !important;
	border-radius: 5px;
	cursor: pointer;
}

.frm_button_submit:hover {
	background-color: var(--dark1);
	color: #fff;
}

.btn.slim {
	padding: .25rem 1rem;
}

.btn a:hover,
.btn a:focus {
	background-color: var(--dark1);
}

a.em-item-read-more.button {
	border: 1px solid var(--dark1);
	color: var(--dark1);
}

.btn.arrow-right a, 
.btn.map a,
.btn.down a
{
	padding-right: 3.5rem;
	background-color: var(--dark2);
	background-image: url('/wp-content/themes/lbc2025/images/arrow-right.svg');
	background-repeat: no-repeat;
	background-size: 14px auto;
	background-position: calc(100% - 24px) center;
	transition: var(--hover)
}

.btn.arrow-right a:hover, 
.btn.map a:hover {
	background-color: var(--dark2);
	color: #fff;
	background-position: calc(100% - 12px) center;
}

.btn.map a {
	background-image: url('/wp-content/themes/lbc2025/images/map-pin-white.svg');
}

.btn.down a {
	background-image: none;
}

.btn.down a::after {
	content: ''; 
	position: absolute; top: 11px; right: 22px;
	height: 24px;
	width: 14px;
	background-image: url('/wp-content/themes/lbc2025/images/arrow-right.svg');
	transform: rotate(90deg);
}

caption, figcaption {
    text-wrap: balance;
}

iframe,
iframe[src*="youtube"],
iframe[src*="vimeo"] {
	margin: 1rem auto; 
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

pre { white-space: pre-wrap; }
hr.wp-block-separator { margin: 0 0 2rem; border: none; border-top: 2px solid var(--medium2); }
blockquote { quotes: none; }
blockquote:before, blockquote:after { content: none; }
.center { text-align: center; }


/* SERMONS PAGE ----------------------------------------------------------------------------- */

.video-feed h2 {
	margin-top: 1rem; 
	padding: .5rem;
	background-color: var(--dark1);
	font-size: 1rem;
	color: #fff;
	border-radius: 5px;
}

.youtube-video-grid {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 2rem;
}

.youtube-video-grid > iframe {
	margin: 0 auto;
	width: 100%;
	height: auto;
	border-radius: 5px;
}



/* CONTACT PAGE ----------------------------------------------------------------------------- */

.ontact-columns > :nth-child(2) {
	padding-top: 1rem;
}


/* TYPOGRAPHY -------------------------------------------------------------------------------- */



a {
	scroll-margin-top: 3rem;
}

a:target { 
  color: red;
  background-color: yellow; 
}

:has(:target) {
  border-color: red;
}

/* Tables ------------------------------------------------------------------------------ */

table {
	border-collapse: collapse;
	border-spacing: 0; }

		
:focus-visible {
	outline: 2px solid red;
  	outline-offset: 2px; 
}

:focus:not(:focus-visible) {
  outline: none;
}

/* HELPER CLASSES --------------------------------------------------------------------- */

.flex, .flex > div { 	display: flex; gap: 1rem; }
.fr, .fr > div 	{ 	flex-direction: row; }
.fc, .fc > div	{ 	flex-direction: column; }
.jc, .jc > div 	{ 	justify-content: center; }
.ja, .ja > div 	{ 	justify-content: space-around; }
.jb, .jb > div 	{ 	justify-content: space-between; }
.je, .je > div 	{ 	justify-content: flex-end; }
.ac, .ac > div 	{ 	align-items: center; }
.as, .as > div 	{ 	align-items: flex-start; }
.fw, .fw > div 	{ 	flex-wrap: wrap; }
.gap1, .gap1 > div { gap: 1rem; }
.gap2, .gap2 > div { gap: 2rem; }


.red { color: #f00; }
.alignleft { float: left; margin: 0 24px 24px 0; }
.alignright { float: right; margin: 0 0 24px 24px; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
.center { text-align: center; }
.right { text-align: right; }
.fit-content { width: fit-content; }
.line-height-25 { line-height: 2.5; }
.hide { display: none; }
.nomar { margin: 0; }
.margin-2-0 { margin: 2rem 0; }
.margin-bottom-1 { margin-bottom: 1rem !important; }
.margin-bottom-2 { margin-bottom: 2rem; }
.reverse {
	padding: .5rem; 
	background-color: var(--dark1);
	color: var(--light2);
	border-radius: 5px;
}

p.intro {
	margin: 0 auto 2rem;
	width: 70%;
	text-align: center;
	text-wrap: pretty;
}



[hidden], 
[type="hidden"], 
.visually-hidden,
[aria-hidden="true"] {
	border: 0;
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}


/* Forms -------------------------------------------------------------------------- */

fieldset {
	border: 0;
}

label {
	display: block;
	font-weight: bold;
	font-size: .8em;
	text-transform: uppercase;
}

label:has(required)::after {
	content: "(Required)";
	color: #ccc;
}

label:has(>textarea) { display:block; }

button, a.btn, #lbc .em.pixelbones a.button,
input,
textarea,
select {
	padding: .5rem; 
	font: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
	width: 100%;
	text-decoration: none;
}

input {
	margin-bottom: 1rem;
}

input,
textarea,
button {
	margin: .25rem 0; 
	border: 1px solid #ccc;
	border-radius: 3px;
}

input:focus, textarea:focus {
	outline: none; 
	box-shadow: 0 0 5px rgba(0,0,0, .5);
}

textarea {
	min-height: 100px;
	border: 1px solid #ccc;
	border-radius: 3px;
}

input[type="radio"],
input[type="checkbox"] {
	width: auto; 
}

.frm_forms {
	margin: 0 auto;
	ax-width: 500px; 
}

.vertical_radio {
	margin: 1rem !important;
}

.frm_radio {
	display: flex; 
	justify-content: flex-start;
	align-items: center;
	margin-top: .5rem;
}



/* RESPONSIVE STYLES ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
@media (prefers-reduced-motion: no-preference) { :has(:target) { scroll-behavior: smooth; scroll-padding-top: 3rem; } }
@media (prefers-reduced-transparency: reduce) { * { opacity: 1; } }


@media (max-width: 782px) {
	.when .duo .right { border-left: 2px solid var(--light1); }
}

@media (max-width: 530px) {
	.site-header { padding: 1rem; }
	.site-header .inner { margin: 0; width: 100%;}
	.hero-home p { display: none; }
}

@media (max-width: 450px) {
	.youtube-video-grid > iframe { width: 100%; }
}