/* ===================================
    Square Code - Custom Styles
====================================== */

/*
 * This file contains Square Code specific customizations
 * that override or extend the Crafto template styles.
 *
 * Load this file AFTER all template CSS files.
 */

/* Custom color overrides (if needed in future) */
:root {
  /* Template colors - keeping for now */
  --base-color: #d5d52b;
  --dark-gray: #313e3b;
  --medium-gray: #828c8a;
  --yellow: #d5d52c;

  /* Future: Add Square Code brand colors here when ready */
  /* --brand-primary: #your-color; */
  /* --brand-secondary: #your-color; */
}

/* Custom utility classes */
.square-code-section {
  /* Add any custom section styling */
}

/* Logo adjustments (when logo is ready) */
.square-code-logo {
  /* Custom logo styles */
}

/* Service cards custom styling */
.service-card-custom {
  /* Future service card enhancements */
}

/* T-Square product page specific styles */
.T-Square-features {
  /* T-Square feature styling */
}

/* Contact form customizations */
.square-code-contact-form {
  /* Custom form styles */
}

/* Responsive overrides */
@media (max-width: 991px) {
  /* Tablet overrides */
}

@media (max-width: 767px) {
  /* Mobile overrides */
}

/* Add your custom styles below this line */
/* ======================================= */

.btn.btn-switch-text .btn-icon {
  display: inline-flex;
  align-items: center;
}

.btn.btn-switch-text span.btn-icon:last-child {
  margin-left: 10px;
}

/* Equal height feature boxes - About page "Our Story" section */
/* Make each column a flex container so the box inside can stretch */
.col.icon-with-text-style-07 {
  display: flex !important;
}

/* Make the hover box stretch to fill the entire column height */
.col.icon-with-text-style-07 > .hover-box.feature-box {
  flex: 1 !important;
  width: 100%;
}

/* Contact form checkbox styling with visible checkmark */
#privacyPolicy {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 1em;
  height: 1em;
  border: 2px solid #828c8a;
  border-radius: 0.25em;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-top: 0.25em;
}

#privacyPolicy:hover {
  border-color: #313e3b;
}

#privacyPolicy:checked {
  background-color: #d5d52b;
  border-color: #d5d52b;
}

#privacyPolicy:checked::after {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.05em;
  width: 0.25em;
  height: 0.5em;
  border: solid #313e3b;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Contact page map z-index fixes */
#map {
  position: relative;
  z-index: 1;
}

/* Contact info overlay should be above the map */
.contact-form-style-03 {
  z-index: 10 !important;
}

/* Ensure header stays on top of everything */
header {
  z-index: 999 !important;
}

/* Custom marker styling */
.custom-marker {
  background: transparent;
  border: none;
}

/* Leaflet popup styling to match site theme */
.leaflet-popup-content-wrapper {
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4);
}

.leaflet-popup-tip {
  background-color: #fff;
}

/* ===================================
   Language Switcher Styles
====================================== */

.language-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-switcher a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.language-switcher a:hover {
  background-color: rgba(213, 213, 43, 0.1);
  color: #d5d52b;
}

.language-switcher a.active {
  background-color: #d5d52b;
  color: #313e3b;
}

.language-switcher .separator {
  color: rgba(255, 255, 255, 0.3);
  font-weight: 300;
}

.language-switcher i {
  font-size: 16px;
}

/* Sticky header adjustments */
header.sticky.sticky-active [data-header-hover="light"] .language-switcher a {
  color: #313e3b;
  background-color: transparent;
}

header.sticky.sticky-active
  [data-header-hover="light"]
  .language-switcher
  a:hover {
  color: #5a6966;
  background-color: rgba(90, 105, 102, 0.08);
}

header.sticky.sticky-active
  [data-header-hover="light"]
  .language-switcher
  a.active {
  color: #313e3b;
}

/* Responsive adjustments for language switcher */
@media (max-width: 991px) {
  .language-switcher a {
    font-size: 13px;
    padding: 5px 10px;
  }
}

@media (max-width: 575px) {
  .language-switcher {
    gap: 5px;
  }

  .language-switcher a {
    font-size: 12px;
    padding: 4px 8px;
    gap: 3px;
  }

  .language-switcher i {
    font-size: 14px;
  }
}

/* ===================================
   Service Cards - Align Links to Bottom
====================================== */

/* Our Solutions section - Make cards flex containers */
.bg-white.border-radius-6px.h-100.box-shadow-medium {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Push the "Learn more" link to the bottom */
.bg-white.border-radius-6px.h-100.box-shadow-medium a.btn {
  margin-top: auto !important;
}

/* Ensure all card titles (including multi-line) are centered */
.bg-white.border-radius-6px.h-100.box-shadow-medium
  .alt-font.text-dark-gray.fw-600.fs-20.d-block {
  text-align: center !important;
}

/* Feature boxes with icon-with-text-style-08 - center all content */
.icon-with-text-style-08 .feature-box {
  text-align: center !important;
}

.icon-with-text-style-08 .feature-box-icon,
.icon-with-text-style-08 .feature-box-content {
  text-align: center !important;
}

.icon-with-text-style-08 .feature-box-content .d-block {
  text-align: center !important;
}

/* About page "Our Story" cards - keep icons aligned at the top */
.icon-with-text-style-07 .hover-box.feature-box {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
}

.icon-with-text-style-07 .hover-box .feature-box-icon {
  margin-bottom: 20px !important;
}

/* ===================================
   Equal Height Cards
====================================== */

/* Make all card columns flex containers so cards can stretch */
.row.row-cols-1.row-cols-lg-3 > .col,
.row.row-cols-1.row-cols-lg-4 > .col,
.row.row-cols-1.row-cols-md-2 > .col {
  display: flex !important;
  flex-direction: column !important;
}

/* Force cards inside to fill 100% of their parent column height */
.row.row-cols-1.row-cols-lg-3 > .col > .bg-white.border-radius-6px.h-100,
.row.row-cols-1.row-cols-lg-4 > .col > .bg-white.border-radius-6px.h-100,
.row.row-cols-1.row-cols-md-2 > .col > .bg-white.border-radius-6px.h-100 {
  height: 100% !important;
}