/*
Theme Name: Parkside Carpets
Theme URI:
Author: Skyline Internet
Author URI:
Description:
Requires at least: 6.4
Tested up to: 6.5
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parkside-carpets
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

:root {
  --fonth: "ITC Avant Garde Gothic Pro";
  --fonth_weight: 500;
  --fontp: "itc-avant-garde-gothic-pro";
  --fontp_weight: 300;
  --white: #fff;
  --black: #000;
  --dark-blue: #003462;
  --yellow: #ffe543;
  --orange: #f26647;
  --light-blue: #96d9ec;
  --green: #a1ce58;
  --border-radius: 0.2em;
  --sidebarWidth: 80dvw;
}

html {
  scroll-behavior: smooth;
}

:where(.wp-site-blocks *:focus) {
  outline: none !important;
}

.wp-block-navigation a:where(:not(.wp-element-button)):hover {
  text-decoration: none;
}

header {
  margin-bottom: -175px;
  position: relative;
  z-index: 100;
}

/* Services */

.services .heading-bg {
  width: fit-content;
}

.link a {
  position: absolute;
  width: -webkit-fill-available;
  height: 100%;
  opacity: 0;
  z-index: 5;
}

.yoast-breadcrumbs span {
  font-size: 0.95em;
  color: rgba(255, 255, 255, 0.9);
}

.yoast-breadcrumbs span a:hover {
  color: var(--white);
}

/* Contact Page */

.map {
  z-index: 10;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  background: none;
  padding: 1.1em 1.75em !important;
  height: auto;
  font-family: var(--fontp);
  font-weight: var(--fontp_weight);
  font-size: 1em;
  margin: 0 0 1.5em 0 !important;
  border: 2px solid var(--dark-blue);
  border-radius: var(--border-radius);
  width: -webkit-fill-available;
  color: var(--black);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: var(--black);
  font-family: var(--fontp) !important;
}

.wpcf7-list-item {
  margin: 0 0 0 0;
  font-size: 0.95em;
}

.wpcf7-form input[type="submit"] {
  background: var(--orange);
  border: none;
  border-radius: var(--border-radius) var(--border-radius) !important;
  font-size: 1em;
  color: var(--white) !important;
  font-family: var(--fontp) !important;
  font-weight: 500;
  padding: 1.1em 2em !important;
  line-height: normal !important;
  min-height: auto !important;
  float: right;
  margin-top: 1.25em;
}

.wpcf7-response-output {
  border-top: none !important;
  border-bottom: none !important;
  border-right: none !important;
  display: block;
  padding: 1rem !important;
  background-color: #0a3991;
  border-left: 8px solid #011863;
  color: #fff;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
  background-color: #dfa50c;
  border-left: 8px solid #c38d00;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: #168629;
  border-left: 8px solid #095e17;
}

.manufacturer-button-wrapper {
  display: flex;
  gap: 1rem;
}

@media (max-width: 884px) {
  .manufacturer-button-wrapper {
    flex-direction: column;
  }

  .services.mb-flex-col,
  .mb-flex-col {
    flex-direction: column;
    gap: 1em;
  }

  .mb-showroom-padding {
    padding: 0 !important;
  }

  .mb-side-padding {
    padding-left: 1em !important;
    padding-right: 1em !important;
  }

  .mb-gallery-flex-col .tiled-gallery__row {
    flex-direction: column !important;
  }

  .mb-gap-1 {
    gap: 1em !important;
  }
}

/* Gallery */

.tiled-gallery__col {
  row-gap: 0.5em;
}

.tiled-gallery__row {
  column-gap: 0.5em;
}

/* Mobile Sidebar */

aside#sidebar {
  position: fixed;
  height: 100dvh;
  z-index: 999;
  background-color: #fff;
  left: 0;
  top: 0;
  min-width: 80dvw;
  transform: translateX(calc(var(--sidebarWidth) * -2));
  transition: all 0.25s;
}

aside#sidebar.open {
  transform: translate(0);
  z-index: 999;
}

body.sidebar-open {
  margin: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

body.sidebar-open:after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 991;
  background-color: rgba(0, 0, 0, 0.5);
}
