/**
 * 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 { text-transform: uppercase; font-weight: 600; --bs-btn-border-radius: 0; }
.btn-info { --bs-btn-color: rgb( var(--bs-primary-rgb) ); --bs-btn-hover-color: rgb( var(--bs-info-rgb) ); --bs-btn-hover-bg: rgb( var(--bs-primary-rgb) ); }
a { font-weight: 600; }
a, a:visited, a.btn-link  { text-decoration: none; }
a:hover, a:active, a:focus { text-decoration: underline; }

/** header */
#head-block { width: 100%; }
#head-block .locations { font-size: 1rem; }
body > header { background: var( --bs-info-bg-subtle); border-bottom: 5px solid #ffffff; }

/** nav */
.navbar .container { align-items: flex-end; }
.brand-logo { max-width: 105px; }
#mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open + #mega-menu-primary { display: block; background: white; position: relative; width: 100%; height: auto; }

/** carousel */
.home .carousel-caption { background: rgba(234, 234, 234, .6); }
.carousel-item { background-position: -100px 0; }
.carousel-caption h1 { font-weight: 800; }
.aspect-image { max-height: 600px; }

/** gallery */
.wp-block-gallery.has-nested-images figure.wp-block-image { padding-bottom: 30px; }
.wp-block-gallery.has-nested-images figure.wp-block-image img { display: inline-block; margin-bottom: 0; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { background: none; position: relative; overflow: visible; padding-bottom: 0; }
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption a { text-decoration: none; }
.wp-block-gallery.has-nested-images figure:has( > a):hover > * { filter: drop-shadow(0 0 0 #ffffff); cursor: pointer; }

/** aspect ratio box */
.aspect-ratio-box { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; max-width: 300px; margin: auto; }
.aspect-ratio-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/** accordions */
.accordion-item .accordion-button { font-size: 1.25rem; font-weight: 600; }
.accordion-item .accordion-button::after { order: -1; margin-left: -.75rem; margin-right: 1rem; }
.accordion-item .accordion-button.collapsed::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%230055a5'%3e%3cpath fill-rule='evenodd' d='M248 72c0-13.3-10.7-24-24-24s-24 10.7-24 24V232H40c-13.3 0-24 10.7-24 24s10.7 24 24 24H200V440c0 13.3 10.7 24 24 24s24-10.7 24-24V280H408c13.3 0 24-10.7 24-24s-10.7-24-24-24H248V72z'/%3e%3c/svg%3e"); }
.accordion-item .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%230055a5'%3e%3cpath fill-rule='evenodd' d='M432 256c0 13.3-10.7 24-24 24L40 280c-13.3 0-24-10.7-24-24s10.7-24 24-24l368 0c13.3 0 24 10.7 24 24z'/%3e%3c/svg%3e"); }

/* eyecare services */
#eyecare-services .col { padding: 0 1.5rem; }
#eyecare-services .card { border: 0 none; }
#eyecare-services .card:hover .card-body { background: #6ccfcc !important; }
#eyecare-services .card .card-title a { display: block; padding-right: 20px; background: url('/wp-content/uploads/2025/09/services-arrow.png') no-repeat right center; }
#eyecare-services .card .card-title a:hover { color: var(--bs-link-color); text-decoration: none; }

/** footer */
.footer-image .wp-block-cover { aspect-ratio: 145/78; }
.footer-image .wp-block-cover__inner-container { width: 80%; height: -webkit-fill-available; padding-top: 5%; }
.footer-image .wp-block-cover__inner-container img { background: rgba( var(--bs-white-rgb), .6 ); padding: 10px; }
footer { font-size: 16px; }
footer a { font-weight: initial; }
footer .menu { list-style: none; padding-inline-start: 0; }
footer a:not(.btn), footer a:visited:not(.btn), footer a.btn-link  { color: #ffffff; }

/** sidebar */
#sidebar-default .widget_recent_entries li:nth-child(n+4) { display: none; }

/** media queries */
/** Small devices (landscape phones, 576px and up) [-sm] */
@media only screen and (min-width : 576px) {
  .home .aspect-image-inner { position: relative; height: 100%; }
  .home .carousel-caption { position: relative; max-width: 625px; top: 50%; transform: translateY(-50%); margin-right: calc((100vw - 540px) / 2); left: calc(100vw - ((100vw - 540px) / 2) - 440px); }
}
@media only screen and (max-width : 768px) {
  .row-cols-2>* { width: 50% !important; }
}

/** Medium devices (tablets, 768px and up) [-md] */
@media only screen and (min-width : 768px) {
	.float-md-right { float: right !important; }
	.ml-md-5 { margin-left: 3rem !important; }
  .carousel-item { background-position: -150px 0; }
  .home .carousel-caption { margin-right: calc((100vw - 720px) / 2); left: calc(100vw - ((100vw - 720px) / 2) - 530px); }
  .row-cols-md-3>* { width: 33.3333333333% !important; }

  .curved-images .order-md-first { border-radius: 0 50vw 50vw 0; overflow: hidden; }
  .curved-images .order-md-last { border-radius: 50vw 0 0 50vw; overflow: hidden; }
}

/** Large devices (desktops, 992px and up) [-lg] */
@media only screen and (min-width : 992px) {
  header .navbar > .container { padding: 10px 0; }
  #menu-main-menu > .menu-item > a.nav-link { padding: 0 15px; white-space:normal; color: rgb( var(--bs-primary-rgb) ); font-weight: 600; }
  .home .carousel-caption { margin-right: calc((100vw - 960px) / 2); left: calc(100vw - ((100vw - 960px) / 2) - 625px); }
  #inner-footer .wp-block-cover__inner-container img { background: none; padding: 0; }
  .wp-block-gallery.has-nested-images figure.wp-block-image { padding-bottom: 0; }
  .row-cols-lg-6>* { width: 16.6666666667% !important; }
  #head-block { max-width: min(790px, 100%); }
}

/** X-Large devices (large desktops, 1200px and up) [-xl] */
@media only screen and (min-width : 1200px) {
  .home .carousel-caption { margin-right: calc((100vw - 1140px) / 2); left: calc(100vw - ((100vw - 1140px) / 2) - 650px); }
  #menu-main-menu > .menu-item > a.nav-link { --bs-nav-link-font-size: 1.15rem; }
  #head-block { max-width: min(950px, 100%); }
}
@media only screen and (min-width : 885px) and (max-width : 1400px) {
}

/** larger desktops, 1400px and up [-xxl] */
@media only screen and (min-width : 1400px) {
  .carousel-item { background-position: var(--jwbs_banner_slide_image_focus); }
  .home .carousel-caption {margin-right: calc((100vw - 1320px) / 2);left: calc(100vw - ((100vw - 1320px) / 2) - 750px);}
  #menu-main-menu > .menu-item > a.nav-link { --bs-nav-link-font-size: 1.25rem; }
  #head-block { max-width: min(950px, 100%); }
}