/**
 * Color classes and default styling are in /assets/main.css, focus your efforts there
 * @import external fonts at top of this page before default.css
 * remove comment for dark-mode.css if you want to enable that -- will not be 100%, you will need to fix minor things
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("./assets/default-settings.css");
/** @import url("assets/dark-mode.css"); */

.btn { --bs-btn-border-radius: 0; }
:root { --bs-border-radius: 0; }
.bg-primary a { color: var(--jwbs-text-on-primary-bg-color); }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
#content { min-height: 66vh; }

/** header */
header .navbar .container { align-items: flex-end; }
.navbar { --bs-navbar-toggler-border-color: #ab1a2d; --bs-navbar-toggler-collapsed-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ab1a2d' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 20 30' xmlns='http://www.w3.org/2000/svg' version='1.1'%3e%3cg stroke='%23ab1a2d'%3e%3cline x1='0' y1='25' x2='20' y2='5' stroke-width='2' /%3e%3cline x1='0' y1='5' x2='20' y2='25' stroke-width='2' /%3e%3c/g%3e%3c/svg%3e"); }
.navbar-toggler { margin-bottom: 10px; }
.navbar-brand { width: 385px; padding: 10px 0; }
#menu-main-menu > li > a { border-bottom: 2px solid transparent; font-weight: 600; color: #000; }
#menu-main-menu > li > a:hover, #menu-main-menu > li > a:focus, #menu-main-menu > li > a:active, #menu-main-menu > li.current-menu-item > a, #menu-main-menu > li.current-menu-ancestor > a, #menu-main-menu > li.current_page_item > a, #menu-main-menu > li.current_page_ancestor > a { border-bottom-color: rgb(var(--bs-primary-rgb)); }

/** carousel */
.jwbs-banner { padding: .15rem 0 2rem 0; }
.carousel-caption { top: 50%; bottom: auto; transform: translateY(-50%); }
.content-overlay .carousel-caption > .container { padding: 1rem; background: rgba(255, 255, 255, .85); }
.jwbs-banner:not(.content-overlay) .carousel-item { max-height: 75px; }
.jwbs-banner:not(.content-overlay) .carousel-item h1 { margin: 0; }

/** callout */
.callout-title.text-dark.h6 { color: rgb(var(--bs-primary-rgb)) !important; font-weight: 700; }

/** project grid */
/* Card container */
.project-grid-card { position: relative; overflow: hidden; }
.project-grid-card img { transition: transform .3s ease; }
.project-grid-card:hover img { transform: scale(1.05); }
.project-grid-card .card-img-overlay { opacity: 0; display: flex; align-items: center; justify-content: center; text-align: center; background: rgba(var(--bs-primary-rgb), .8); transition: opacity .3s ease; }
.project-grid-card:hover .card-img-overlay { opacity: 1; }

/* portfolio */
.wp-block-cover p a { font-size: 2.25rem; color: #fff !important; text-decoration: none !important; }
.portfolio { position: relative; }
.portfolio > figcaption { position: absolute; margin: 0; padding-right: 1em; top: auto; right: 0; bottom: 0; left: 0; font-size: 1.5rem; text-align: right; color: #fff; background-color: rgba(0, 0, 0, 0.6); }
.portfolio > figcaption a { color: #fff; }
.card .h2, .card .btn { text-transform: uppercase; }

/** footer */
#inner-footer img[src$=".svg"] { width: 300px; max-width: 100%; }
#inner-footer .menu { list-style: none; }
#inner-footer .menu li { padding-bottom: 0.25rem; }
#inner-footer .menu li a { color: #fff; text-decoration: none; }
#inner-footer .menu li a:hover { text-decoration: underline; }

/** media queries */
/** Small devices (landscape phones, 576px and up) [-sm] */
@media only screen and (min-width : 576px) {
}

/** Medium devices (tablets, 768px and up) [-md] */
@media only screen and (min-width : 768px) {
  #block-7 { position: relative; }
  #block-7 > .wp-block-group { position: absolute; pointer-events: none; z-index: 10; left: 0; right: 0; margin-right: 10px; }
  #block-7 span { float: right; pointer-events: auto; position: relative; z-index: 20; }
  #block-7 > .wp-block-group { margin-right: calc( ( (100% - 720px ) / 2 ) + 10px ); }
  .content-overlay .carousel-caption > .container { max-width: 545px; margin-left: calc((100% - 690px) / 2); padding: 2rem; }
}

/** Large devices (desktops, 992px and up) [-lg] */
@media only screen and (min-width : 992px) {
  #block-7 > .wp-block-group { margin-right: calc( ( (100% - 960px ) / 2 ) + 10px ); }
  #menu-main-menu { display: flex; width: 100%; padding: 0; margin: 0; }
  #menu-main-menu > li { flex: 1; display: flex; justify-content: end; }
  .content-overlay .carousel-caption > .container { margin-left: calc((100% - 930px) / 2); padding: 3rem; }
  #inner-footer .menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; max-width: 100%; }
  #inner-footer .menu li { white-space: nowrap; }
  #inner-footer .menu li::after { content: '|'; margin-left: 0.75rem; color: #fff; }
  #inner-footer .menu li:last-child::after { content: ''; }
}

/** X-Large devices (large desktops, 1200px and up) [-xl] */
@media only screen and (min-width : 1200px) {
  #block-7 > .wp-block-group { margin-right: calc( ( (100% - 1140px ) / 2 ) + 10px ); }
  .content-overlay .carousel-caption > .container { margin-left: calc((100% - 1110px) / 2); }
}

/** larger desktops, 1400px and up [-xxl] */
@media only screen and (min-width : 1400px) {
  #block-7 > .wp-block-group { margin-right: calc( ( (100% - 1320px ) / 2 ) + 10px ); }
  .content-overlay .carousel-caption > .container { margin-left: calc((100% - 1290px) / 2); }
}