/*
Theme Name: Ashlar Stone & Render Care
Theme URI: https://ashlarcare.co.uk
Author: Ashlar Web Development
Description: Custom WordPress theme built with Bootstrap 5 for high-end exterior surface care and restoration services.
Version: 1.0.0
Text Domain: ashlar-care
*/

/* Custom Text Selection Styling */
::selection {
  background-color: #c4b79a; /* Sandstone Gold background */
  color: #1e1f21;            /* Dark Charcoal text */
}

/* Firefox Support */
::-moz-selection {
  background-color: #c4b79a;
  color: #1e1f21;
}

:root {
  --ashlar-charcoal: #1e1f21;
  --ashlar-sandstone: #c4b79a;
  --ashlar-ivory: #f4f2ee;
  --ashlar-sage: #6b7a6a;
  --ashlar-slate: #5a6166;
  --ashlar-font-heading: 'Cinzel', serif;
  --ashlar-font-body: 'Montserrat', sans-serif;
}

body {
  font-family: var(--ashlar-font-body);
  color: var(--ashlar-charcoal);
  background-color: #ffffff;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--ashlar-font-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ashlar-charcoal);
}

.bg-ashlar-charcoal {
  background-color: var(--ashlar-charcoal) !important;
}

.bg-ashlar-sandstone {
  background-color: var(--ashlar-sandstone) !important;
}

.bg-ashlar-ivory {
  background-color: var(--ashlar-ivory) !important;
}

.bg-ashlar-sage {
  background-color: var(--ashlar-sage) !important;
}

.text-ashlar-sandstone {
  color: var(--ashlar-sandstone) !important;
}

.text-ashlar-ivory {
  color: var(--ashlar-ivory) !important;
}

.text-ashlar-sage {
  color: var(--ashlar-sage) !important;
}

.text-ashlar-slate {
  color: var(--ashlar-slate) !important;
}

/* Custom Buttons */
.btn-ashlar-gold {
  background-color: var(--ashlar-sandstone);
  color: var(--ashlar-charcoal);
  border: 1px solid var(--ashlar-sandstone);
  font-family: var(--ashlar-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.75rem;
  transition: all 0.3s ease;
}

.btn-ashlar-gold:hover {
  background-color: var(--ashlar-charcoal);
  color: var(--ashlar-sandstone);
  border-color: var(--ashlar-sandstone);
}

.btn-ashlar-outline {
  background-color: transparent;
  color: var(--ashlar-sandstone);
  border: 1px solid var(--ashlar-sandstone);
  font-family: var(--ashlar-font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.75rem 1.75rem;
  transition: all 0.3s ease;
}

.btn-ashlar-outline:hover {
  background-color: var(--ashlar-sandstone);
  color: var(--ashlar-charcoal);
}

/* Header & Navigation */
.ashlar-navbar {
  background-color: var(--ashlar-charcoal);
  border-bottom: 2px solid var(--ashlar-sandstone);
}

.ashlar-navbar .nav-link {
  color: var(--ashlar-ivory);
  font-family: var(--ashlar-font-body);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.ashlar-navbar .nav-link:hover,
.ashlar-navbar .nav-link.active {
  color: var(--ashlar-sandstone);
}

/* Cards & Components */
.card-ashlar {
  border: 1px solid rgba(196, 183, 154, 0.3);
  border-radius: 0;
  background-color: #ffffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-ashlar:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  border-color: var(--ashlar-sandstone);
}

/* Hero & Banners */
.hero-section {
  background-color: var(--ashlar-charcoal);
  color: var(--ashlar-ivory);
  padding: 6rem 0;
  position: relative;
}

.divider-gold {
  width: 60px;
  height: 2px;
  background-color: var(--ashlar-sandstone);
  margin: 1.5rem 0;
}

.divider-gold-center {
  width: 60px;
  height: 2px;
  background-color: var(--ashlar-sandstone);
  margin: 1.5rem auto;
}

/* Form Styles */
.forminator-custom .forminator-input,
.forminator-custom .forminator-textarea {
  border-radius: 0 !important;
  border: 1px solid var(--ashlar-slate) !important;
  background-color: var(--ashlar-ivory) !important;
}

.forminator-custom .forminator-button-submit {
  background-color: var(--ashlar-sandstone) !important;
  color: var(--ashlar-charcoal) !important;
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  font-weight: 600 !important;
}

/* Footer Navigation & Link Styles */
footer a {
  color: var(--ashlar-ivory);
  text-decoration: none;
  transition: color 0.3s ease;
}

footer a:hover,
footer a:focus {
  color: var(--ashlar-sandstone) !important;
  text-decoration: none;
}

/* Specific menu links generated by WordPress in the footer */
footer .menu,
footer .menu-footer-container ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

footer .menu li,
footer .menu-footer-container ul li {
  margin-bottom: 0.5rem;
}

footer .menu li a,
footer .menu-footer-container ul li a {
  color: var(--ashlar-ivory);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

footer .menu li a:hover,
footer .menu-footer-container ul li a:hover {
  color: var(--ashlar-sandstone);
}

/* Animated Hamburger Menu Button */
.ashlar-toggler {
  width: 30px;
  height: 24px;
  position: relative;
  background: transparent;
  cursor: pointer;
}

.hamburger-icon {
  width: 30px;
  height: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-icon span {
  display: block;
  height: 2px;
  width: 100%;
  background-color: var(--ashlar-sandstone);
  border-radius: 2px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* Transform to 'X' when open (when NOT collapsed) */
.ashlar-toggler:not(.collapsed) .hamburger-icon span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.ashlar-toggler:not(.collapsed) .hamburger-icon span:nth-child(2) {
  opacity: 0;
  transform: translateX(-10px);
}

.ashlar-toggler:not(.collapsed) .hamburger-icon span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Service Card Image Ratio & Styling */
.service-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3; /* Enforces a uniform, tall landscape rectangle */
  object-fit: cover;   /* Clips edges so images fill space without stretching */
  border-radius: 4px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.card-ashlar:hover .service-card-img {
  transform: scale(1.02);
  opacity: 0.95;
}

/* Service Card Link Styles */
.btn-link-ashlar {
  color: var(--ashlar-sandstone, #c4b79a);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.btn-link-ashlar:hover {
  color: var(--ashlar-charcoal, #1e1f21);
  transform: translateX(3px);
}

/* Service Card Heading Hyperlinks */
.card-ashlar .card-title a {
  color: var(--ashlar-charcoal, #1e1f21) !important;
  text-decoration: none;
  transition: color 0.3s ease;
}

.card-ashlar .card-title a:hover,
.card-ashlar .card-title a:focus {
  color: var(--ashlar-sandstone, #c4b79a) !important;
  text-decoration: none;
}

/* Forminator Dark Theme Overrides for Ashlar */
.forminator-custom-form {
  margin: 0 auto;
}

/* Label styling */
.forminator-custom-form .forminator-label {
  color: var(--ashlar-sandstone, #c4b79a) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Input, Select, and Textarea fields */
.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form .forminator-select .forminator-select2-render {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(196, 183, 154, 0.4) !important;
  color: #f4f2ee !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
}

.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus {
  border-color: #c4b79a !important;
  box-shadow: 0 0 0 0.2rem rgba(196, 183, 154, 0.25) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Submit Button */
.forminator-custom-form .forminator-button-submit {
  background-color: #c4b79a !important;
  color: #1e1f21 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  border: none !important;
  transition: all 0.3s ease !important;
  width: 100%;
}

.forminator-custom-form .forminator-button-submit:hover {
  background-color: #f4f2ee !important;
  color: #1e1f21 !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   Forminator Select2 Dropdown Styling
   ========================================================================== */

/* Dropdown Field Container */
.forminator-custom-form .forminator-select .forminator-select2-render {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(196, 183, 154, 0.4) !important;
  color: #f4f2ee !important;
  border-radius: 4px !important;
  min-height: 48px !important;
  display: flex !items-center !important;
}

/* Arrow Indicator Color */
.forminator-custom-form .forminator-select .forminator-select2-render .select2-selection__arrow b {
  border-color: #c4b79a transparent transparent transparent !important;
}

/* Selected Text inside the Box */
.forminator-custom-form .forminator-select .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #f4f2ee !important;
  line-height: 48px !important;
  padding-left: 12px !important;
}

/* --------------------------------------------------------------------------
   Floating Dropdown Menu (Open Panel & Options)
   -------------------------------------------------------------------------- */

/* Dropdown Panel Container */
.select2-container--default .select2-dropdown {
  background-color: #1e1f21 !important; /* Ashlar Charcoal */
  border: 1px solid #c4b79a !important;   /* Ashlar Sandstone */
  border-radius: 4px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
}

/* Individual Dropdown Items */
.select2-container--default .select2-results__option {
  color: #f4f2ee !important;
  padding: 10px 15px !important;
  font-size: 0.9rem !important;
  background-color: transparent !important;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover & Active/Highlighted States */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: #c4b79a !important; /* Sandstone Background */
  color: #1e1f21 !important;           /* Charcoal Text */
}

/* Native HTML Select Fallback (For Mobile Devices) */
.forminator-custom-form select.forminator-select {
  background-color: #1e1f21 !important;
  color: #f4f2ee !important;
  border: 1px solid rgba(196, 183, 154, 0.4) !important;
  border-radius: 4px !important;
  padding: 12px !important;
}

.forminator-custom-form select.forminator-select option {
  background-color: #1e1f21 !important;
  color: #f4f2ee !important;
}

/* Fix Forminator Dropdown Border & Placeholder Contrast */
.forminator-custom-form .forminator-select {
  border: 1px solid rgba(196, 183, 154, 0.4) !important;
  border-radius: 4px !important;
  background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Dropdown Rendered Box Text (Selected Item / Placeholder) */
.forminator-custom-form .forminator-select .select2-container--default .select2-selection--single .select2-selection__rendered,
.forminator-custom-form .forminator-select .forminator-select2-render {
  color: #f4f2ee !important; /* Brighter Ivory Text */
  opacity: 0.9 !important;
}

/* Ensure Placeholder Text is Readable */
.forminator-custom-form .forminator-select .select2-selection__placeholder {
  color: #c4b79a !important; /* Sandstone Gold */
  opacity: 0.8 !important;
}

/* Update Label from 'SELECT' to 'SERVICE REQUIRED' */
.forminator-custom-form .forminator-field-select .forminator-label {
  color: #c4b79a !important;
}

/* 404 Secondary Link Hover State */
.hover-sandstone {
  transition: color 0.2s ease;
}

.hover-sandstone:hover {
  color: var(--ashlar-sandstone, #c4b79a) !important;
}