/*
Theme Name: simplicity.online 2025
Theme URI: http://simplicity.online
Description: Custom Bootstrap 5 Theme Designed by simplicity.online
Version: 1.0
Author: simplicity.online
Author URI: https://simplicity.online
Text Domain: simplicity-online
*/

:root {
	--primary: #33647e;
	--btn-primary:#e47e3d;
	--btn-primary-hover:#b35e2f;
	--btn-secondary:#b0d8d6;
	--btn-secondary-hover:#7aa7a5;
	--bg-color: #33647e;
	--gradient-end: #1f3e4f;
	--dot-color: rgba(255, 255, 255, 0.10);
	--symbol-color: rgba(255, 255, 255, 0.15);
	--secondary:#789a4e;
	--bs-pagination-color:#33647e;
	--bs-nav-link-color:#33647e;
	--bs-nav-link-hover-color:#333;
	--loader-size: 64px;
	--loader-stroke: 6px;
	--loader-color: #fff;
	--overlay-bg: hsl(0 0% 0% / 0.6);
	--label-color: #fff;
	--label-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	--wc-nav-bg: #ffffff;
	--wc-nav-border: #e7e9ee;
	--wc-nav-hover: #f6f8fb;
	--wc-nav-active-bg: #e8f1ff;
	--wc-nav-active-text:#154769;
	--wc-nav-text: #1f2937;
	--wc-nav-muted: #6b7280;
	--wc-radius: 12px;
	--wc-gap: 8px;
}

html, body {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
main {min-height:100vh;line-height:1.9;}
section {padding:60px 0;}
iframe,
img {max-width:100%;height:auto;}
cite {display:block;}
section.primary {background:linear-gradient(to right, #33647e, #2a5065, #1f3e4f), #33647e;background-blend-mode: soft-light;}
section.secondary {background:var(--secondary);}
section.primary.heading {padding:20px 0 15px;}
section.nopad {padding:0;}
section.nopad #breadcrumbs {margin:5px 0 8px;padding:0;}
section.breadcrumbs {background:#f1f1f1;border-bottom:1px solid #eee;}
section.hero {background-size:cover;min-height:85vh;background-repeat:no-repeat;background-position:bottom center;}
#breadcrumbs span {margin: 0 8px;text-transform: capitalize;}
#breadcrumbs span:first-child {margin-left: 0;}
.blockquote {font-size:2rem;}
.page-sidebar .mysearchform {border:1px solid #ddd;padding:15px;border-radius:12px;margin:30px 0;background:#f8f9fa;}
main .page-sidebar ol li, 
main .page-sidebar ul li {margin:.60rem 0;}
section.green {background-color:var(--secondary);background-image:url('https://simplicity.online/wp-content/uploads/sites/25/2021/07/corner-art.png');background-repeat:no-repeat;background-position:top right;background-size:20%;}
.cta {border:1px solid #ddd;border-radius:12px;padding:30px;box-shadow: 0px 0px 4px 4px #ddd;background-image:url('https://simplicity.online/wp-content/uploads/sites/25/2021/07/corner-art.png');background-position:top right;background-size:30%;background-repeat:no-repeat;}
html body main .gform_wrapper .gform_footer input[type="submit"],
html body main .gform_wrapper .gform_page_footer input[type="submit"] {background-color: var(--primary)!important;border: none!important;padding: 15px 30px!important;font-size:large!important;border-radius: 0!important;text-transform:uppercase!important;}
#wp-admin-bar-my-account,
#wp-admin-bar-cmp-admin-notice {display:none;}
.height100 {height:100%;}

/* loader */
.loader-overlay{position: fixed;inset: 0;display: grid;place-items: center;gap: 0.75rem;background: var(--overlay-bg);z-index: 9999;opacity: 0;visibility: hidden;pointer-events: none;transition: opacity .2s ease, visibility .2s ease;user-select: none;}
body.is-loading .loader-overlay{opacity: 1;visibility: visible;pointer-events: auto;}
body.is-loading{overflow: clip;overflow: hidden;}
.loader-ring{width: var(--loader-size);height: var(--loader-size);border-radius: 50%;border: var(--loader-stroke) solid transparent;border-top-color: var(--loader-color);border-right-color: var(--loader-color);animation: spin 0.9s linear infinite;}

@keyframes spin{
  to { transform: rotate(360deg); }
}

.loader-label{color: var(--label-color);font: 600 0.95rem/1 var(--label-font);letter-spacing: .02em;}
@media (prefers-reduced-motion: reduce){
  .loader-ring{ animation: none; border-color: var(--loader-color); }
}

/* text */
address {display:inline;}
main ol, main ul {margin:.75rem 0;}
main ol li, main ul li {margin-bottom:.75rem;}
a {color:var(--primary);}
.page-template-template-flx section h2,
.home section h2 {margin-bottom:60px;text-transform:uppercase;}
.home section.primary h2 {color:white;}
section.primary h1 {color: white;text-transform: capitalize;}
section.image {min-height:40vh;background-position:bottom right;background-repeat:no-repeat;background-size:contain;}
section.grey {background:#f1f1f1;border-top:1px solid #eee;}
h1 strong, 
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {font-weight:normal;}
.checklist {list-style: none;padding: 0;}
.checklist li::before {content: '\2713';color:var(--secondary);font-weight: bold;display: inline-block;width: 1em;margin-right: 0.5em;}
.input-group-text {padding:0;}
section.green h2,
section.primary h2 {color:white;}
section.primary p {color:white;}
section.primary p.card-text {color:black;}
article h2 + h3 {margin-top:20px;}
.search h1.h3 {margin-bottom:25px;}

/* bootstrap */
.card {border-radius:12px;}
.home .card {border-color:var(--primary);}
.card-img-top {border-radius:12px 12px 0 0;}
.active > .page-link, .page-link.active {background-color: var(--primary);}
.pagination {
	--bs-pagination-padding-x: 0.75rem;
	--bs-pagination-padding-y: 0.375rem;
	--bs-pagination-font-size: 1rem;
	--bs-pagination-color: var(--primary);
	--bs-pagination-bg: var(--bs-body-bg);
	--bs-pagination-border-width: var(--bs-border-width);
	--bs-pagination-border-color: var(--bs-border-color);
	--bs-pagination-border-radius: var(--bs-border-radius);
	--bs-pagination-hover-color: var(--bs-link-hover-color);
	--bs-pagination-hover-bg: var(--bs-tertiary-bg);
	--bs-pagination-hover-border-color: var(--bs-border-color);
	--bs-pagination-focus-color: var(--bs-link-hover-color);
	--bs-pagination-focus-bg: var(--bs-secondary-bg);
	--bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
	--bs-pagination-active-color: #fff;
	--bs-pagination-active-bg: #0d6efd;
	--bs-pagination-active-border-color: var(--primary);
	--bs-pagination-disabled-color: var(--bs-secondary-color);
	--bs-pagination-disabled-bg: var(--bs-secondary-bg);
	--bs-pagination-disabled-border-color: var(--bs-border-color);
	list-style: none;
}
.nav-tabs {border:none;margin-top:60px;}
.tab-pane {border:1px solid #dee2e6;border-radius:12px;padding:30px;background:white;}
.tab-pane p:last-child {margin-bottom:0;padding-bottom:0;}
.embed-responsive {position: relative;display: block;width: 100%;padding: 0;overflow: hidden;}
.nav-tabs .nav-link {color:var(--primary);}
.btn-default {border:1px solid #ddd;}
.btn-group .btn-default {border-radius:0 8px 8px 0;}
.btn-group .btn-default:hover {border-radius:0 8px 8px 0;background:#eee;}
.btn-group .btn-default.preview-filing-system {border-radius: 8px 0 0 8px;}
/* ==== Bootstrap 3 Panel Shim for Bootstrap 5 ==== */
.panel {
  --_radius: var(--bs-border-radius, .375rem);
  --_border: var(--bs-border-color, #dee2e6);

  background-color: #fff;
  border: 1px solid var(--_border);
  border-radius: var(--_radius);
  margin-bottom: 1.5rem;
  box-shadow: 0 .05rem .1rem rgba(0,0,0,.05);
}

.panel-heading {
  padding: .625rem .9375rem; /* 10px 15px */
  background-color: var(--bs-light, #f8f9fa);
  color: inherit;
  border-bottom: 1px solid var(--_border);
  border-top-left-radius: calc(var(--_radius) - 1px);
  border-top-right-radius: calc(var(--_radius) - 1px);
}

.panel-title {
  margin: 0;
  font-size: 1rem; /* ~16px like BS3; bump to 1.125rem if you want */
  font-weight: 600;
}

.panel-body {
  padding: .9375rem; /* 15px */
}

.panel-footer {
  padding: .625rem .9375rem; /* 10px 15px */
  background-color: var(--bs-light, #f8f9fa);
  border-top: 1px solid var(--_border);
  border-bottom-left-radius: calc(var(--_radius) - 1px);
  border-bottom-right-radius: calc(var(--_radius) - 1px);
}

/* Contextual variants (match BS3 names, use BS5 vars) */
.panel-default { border-color: var(--_border); }
.panel-default > .panel-heading { background-color: var(--bs-light, #f8f9fa); color: inherit; }

.panel-primary { border-color: var(--bs-primary); }
.panel-primary > .panel-heading { background-color: var(--bs-primary); color: #fff; border-color: var(--bs-primary); }

.panel-success { border-color: var(--bs-success); }
.panel-success > .panel-heading { background-color: var(--bs-success); color: #fff; border-color: var(--bs-success); }

.panel-info { border-color: var(--bs-info); }
.panel-info > .panel-heading { background-color: var(--bs-info); color: #fff; border-color: var(--bs-info); }

.panel-warning { border-color: var(--bs-warning); }
.panel-warning > .panel-heading { background-color: var(--bs-warning); color: #000; border-color: var(--bs-warning); }

.panel-danger { border-color: var(--bs-danger); }
.panel-danger > .panel-heading { background-color: var(--bs-danger); color: #fff; border-color: var(--bs-danger); }

/* Optional: panel groups spacing (accordion-like stacks) */
.panel-group .panel { margin-bottom: 0; border-radius: var(--_radius); }
.panel-group .panel + .panel { margin-top: .3125rem; } /* 5px */

.single-label .panel-heading {
	height: 116px;
}

/* navigation */
.navbar-brand img {max-width:36px;}
.main-nav {backgroud:white;border-bottom:1px solid #ddd;box-shadow:0px 0px 5px 0px #333;}
.navbar-toggler {border:none;}
main ul li.nav-item {margin-bottom:0;}
main ul li .nav-link {color:white;}
#menu-main-navigation li:last-child {background:var(--secondary);}
#menu-main-navigation li:last-child a {color:white;text-transform:uppercase;}

/* buttons */
.btn {border-radius:0 0 0 0;text-shadow:none;}
.btn-primary {background-color:var(--btn-primary);border-color:var(--btn-primary);}
.btn-primary:hover {background-color:var(--btn-primary-hover);border-color:var(--btn-primary-hover);}
.btn-secondary {background-color:var(--btn-secondary);border-color:var(--btn-secondary);color:black;}
.btn-secondary:hover {background-color:var(--btn-secondary-hover);border-color:var(--btn-secondary-hover);}

/* graph paper */
.grid-container {margin: 0;height: 69vh;background-color: var(--bg-color);}
.background-wrapper {position: relative;width: 100%;height: 100%;overflow: hidden;background:linear-gradient(to right, #33647e, #2a5065, #1f3e4f), #33647e;background-blend-mode: soft-light;}
.dot-pattern {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image:radial-gradient(circle, var(--dot-color) 1px, transparent 0),radial-gradient(circle, var(--dot-color) 1px, transparent 0),radial-gradient(circle, var(--dot-color) 1px, transparent 0),radial-gradient(circle, var(--dot-color) 1px, transparent 0),radial-gradient(circle, var(--dot-color) 1px, transparent 0),radial-gradient(circle, var(--dot-color) 1px, transparent 0),radial-gradient(circle, var(--dot-color) 1px, transparent 0),radial-gradient(circle, var(--dot-color) 1px, transparent 0);background-size: 60px 60px;background-position: 0 0, 30px 0, 60px 0, 0 30px, 60px 30px, 0 60px, 30px 60px, 60px 60px;z-index: 0;}
.plus-grid {position: absolute;top: 10px;left: 10px;width: 100%;height: calc(100% - 10px);display: grid;grid-template-columns: repeat(auto-fill, 40px);grid-template-rows: repeat(auto-fill, 40px); gap: 20px;z-index: 1;pointer-events: none;}
.plus, .times {position: relative;width: 40px;height: 40px;background: transparent;}
.plus::before, .plus::after, .times::before, .times::after {content: '';position: absolute;background-color: var(--symbol-color);}
.plus::before {width: 2px;height: 10px;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.plus::after {height: 2px;width: 10px;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.times::before {width: 2px;height: 14px;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(45deg);}
.times::after {width: 2px;height: 14px;left: 50%;top: 50%;transform: translate(-50%, -50%) rotate(-45deg);}

/* home page */
.blueprint-text {font-family:monospace; color: rgba(255, 255, 255, 0.8); padding: 0.5em 1em;font-size: 2rem;letter-spacing: 2px;text-shadow:0 0 2px #ffffff,0 0 4px #00c3ff,1px 1px 0 #0a2a43;}
.home .blueprint-text {z-index:20;position:relative;}
.home .blueprint-text h1 {margin-bottom:40px;}
.home .integrations {text-align:center;}
.home .integrations img {width:200px;filter: grayscale(100%);transition: filter 0.3s ease;}
.home .integrations img:hover {filter: grayscale(0%);}
.home .primary .card {box-shadow: 0px 0px 4px 0px var(--gradient-end);}

/* about page */
.page-template-template-about section.secondary {padding:0;color:white;background-image:url('img/piano-graphic.png');background-position:bottom right;background-repeat:no-repeat;background-size:contain;}
.page-template-template-about .center-vertical {min-height:69vh;}
.page-template-template-about .center-vertical cite {margin-top:20px;}
.page-template-template-about .impact {background-image:url('https://simplicity.online/wp-content/uploads/sites/25/2021/07/corner-art.png');background-repeat:no-repeat;background-position:top right;background-size:20%;background-color:var(--primary);color:white;padding:30px 40px;border-radius:15px;}
.page-template-template-about .impact a {color:white;}

/* blog */
.post-thumbnail {display: flex; align-items: center; justify-content: center;border-radius:12px 0 0 12px;overflow:hidden;border-right:1px solid #d2d2d2;}
.post-thumbnail img {border-radius:12px 0 0 12px;}
.excerpt p {margin:0;}

/* landing page */
.page-template-template-landing-page main section.grey .checklist {margin-bottom:0;}
.page-template-template-landing-page main section.grey .checklist li:last-child {margin-bottom:0;}
.accordion {margin-top:30px;}

/* list page */
.page-template-template-shop main .card,
.page-template-template-list-page main .card {margin-bottom:30px;}
.page-template-template-shop main .card-body,
.page-template-template-list-page main .card-body {position:relative;display: flex;flex-direction: column;height: 100%;}
.page-template-template-shop main .card-body .btn-primary,
.page-template-template-list-page main .card-body .btn-primary {margin-top: auto;}

/* contact page */
.google-map {margin-bottom:20px;}
.google-map iframe {width:100%;height:300px;}
.contact-info ul {list-style-type:none;margin:0 0 0 10px;padding:0;}
.contact-info ul span,
.contact-info ul a {text-decoration:none;margin-left:8px;}

/* file label express */
.page-template-template-flx section.hero .center-vertical {height:85vh;}
.page-template-template-flx section.hero h1 {font-size:3.5rem;font-weight:bold;}
.page-template-template-flx section.hero p {font-size:x-large;margin:1.5rem 0;line-height:1.6;}
.page-template-template-flx .hero .text-center {background:rgba(255, 255, 255, .6);padding:40px 50px 50px;}
.page-template-template-flx section.primary div.text-center .btn,
.page-template-template-flx .hero .btn-secondary,
.page-template-template-flx .hero .btn-primary {padding:10px 20px;font-size:large;text-transform:uppercase;font-weight:bold;letter-spacing:1px;}
.page-template-template-flx section.primary div.text-center .btn {margin-top:50px;}
.page-template-template-flx section.primary .card-img-top {border-bottom:1px solid #ddd;padding:10px 5px;}

/* shop */
.woocommerce-page .tab-pane {border-radius:0 12px 12px 12px}
.woo-product .img {position:relative;height:245px;background-size:98%!important;border-bottom:1px solid rgba(0, 0, 0, 0.175);}
.woo-product a .h5 {font-size:medium;margin-bottom:12px;}
.woo-product a:not(.btn-primary) {text-decoration:none;color:black;}
.single-product .tab-content h3 {font-size:x-large;color:#444;text-transform:capitalize;}
.single-product .tab-content p {font-size:medium;}
.single-product .tab-content ul+h3,
.single-product .tab-content p+h3 {margin-top:40px;}
form.cart {margin-top:20px;}
.single-product [name="quantity"] {max-width:80px;}
.woo-product h2 small {margin-top:8px;display:block;}
.cart-icon {float:right;position:relative;font-size:large;border-radius:20px;}
.cart-icon svg {vertical-align:text-bottom;}
.cart-icon .text-bg-danger {position:absolute;top:-11px;right:0;font-size:small;}
.my-account {float:right;font-size:large;border-radius:20px;margin-right:25px;}
html body main section article .woocommerce-form-login {width:380px;margin:0 auto!important;padding-top:12px!important;}
h2:has(~ .woocommerce-form-login) {text-align:center;margin-bottom:30px;text-transform:uppercase;}
p.woocommerce-LostPassword {margin:0;}
/* Container UL */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 12px;
  background: var(--wc-nav-bg);
  border: 1px solid var(--wc-nav-border);
  border-radius: var(--wc-radius);
  display: grid;
  gap: var(--wc-gap);
}

/* LI reset */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link {
  margin: 0;
  padding: 0;
}

/* Links */
.woocommerce-MyAccount-navigation a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--wc-nav-text);
  text-decoration: none;
  font-weight: 500;
  line-height: 1.2;
  border: 1px solid transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
}

/* Hover */
.woocommerce-MyAccount-navigation a:hover {
  background: var(--wc-nav-hover);
  border-color: var(--wc-nav-border);
}

/* Focus-visible for keyboard users */
.woocommerce-MyAccount-navigation a:focus-visible {
  outline: 0;
  border-color: var(--wc-nav-active-text);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wc-nav-active-text), transparent 75%);
}

/* Active item (Woo adds .is-active to the LI) */
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active > a,
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link > a[aria-current="page"] {
  background: var(--wc-nav-active-bg);
  color: var(--wc-nav-active-text);
  border-color: color-mix(in srgb, var(--wc-nav-active-text), #ffffff 75%);
  font-weight: 600;
  position: relative;
}

/* Optional: Subtle icon placeholder circle, if you add icons later */
.woocommerce-MyAccount-navigation a::after {
  content: "";
  margin-left: auto;                  /* keeps text left, adds a tiny chevron feel */
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--wc-nav-muted);
  border-bottom: 2px solid var(--wc-nav-muted);
  transform: rotate(-45deg);
  opacity: .6;
}
.woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link.is-active > a::after {
  border-color: var(--wc-nav-active-text);
  opacity: 1;
}

/* Compact mode on small screens */
@media (max-width: 576px) {
  .woocommerce-MyAccount-navigation {
    padding: 8px;
    gap: 6px;
  }
  .woocommerce-MyAccount-navigation a {
    padding: 10px 12px;
    border-radius: 8px;
  }
}

body:not(.postid-4046) .img-wrapper {
  position: relative;
  display: inline-block;
}

body:not(.postid-4046) .img-wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 171px;
  height: 80px;
  padding:8px;
  background-color:rgba(255, 255, 255, .6);
  background-image: url('img/flx.png');
  background-repeat:no-repeat;
  background-position:center center;
  background-size: contain;
  transform: translate(-50%, -50%);  
  pointer-events: none;
  z-index: 10;
}
.woo-product:not([data-id="4046"]) .img::after {
  content: url('img/flx.png');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5); /* center and shrink */
  pointer-events: none;
  background:rgba(255, 255, 255, .6);
  padding:8px;
}

/* footer */
footer.main {background:#333;color:white;padding:30px 0;}
footer.main p {margin:0;}
footer.main a {color:white;}

/* Desktop */
@media (min-width: 991px) {
	.main-nav.navbar-expand-lg .navbar-nav .nav-link {padding-right:20px;padding-left:20px;}
	.single article {margin-right:80px;}
	.page-template-template-landing-page article{margin-left:40px;}
	.page-template-template-list-page main .card-img-top {height:200px;}
	.page-template-template-contact .column-content {margin-right:40px;}
	.page-template-template-flx .primary .card,
	.home .primary .card {margin:0 15px;}
	.page-template-template-flx .row.first {margin-bottom:60px;}
	.home .primary .row.first {margin-bottom:60px;}	
	.center-vertical {display: grid;place-items: center;}
	.page-template-template-about .impact {margin:60px 0 15px;}
	.page-template-template-about main article {margin-right:80px;}
}

/* Mobile */
@media (max-width: 992px) {
	.cta {margin-top:30px;}
	section {padding:15px 0;}
	.grid-container {height: 40vh;}	
	.home .blueprint-text h1 {margin-bottom: 10px;}	
	section.logos {padding-bottom:0;}
	.home .primary .card {margin-bottom:30px;}
	.home section.primary {padding-bottom:5px;}
	footer.main {padding: 25px;font-size:small;}
	.home section.logos h2 {margin-bottom:80px;}
	aside.page-sidebar {display:none;}
	.page-template-template-about section.secondary {background-size: 30%;}
	.page-template-template-about .blockquote {font-size:large;text-align:center;padding:30px;}
	.page-template-template-about .center-vertical {min-height: 30vh;}
	.page-template-template-landing-page .img-thumbnail {margin-bottom:30px;}
	#wp-admin-bar-cmp-admin-notice {display:none!important;}
}



/* Dark mode overrides 
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}
*/