/*
Theme Name: Rodla Construction
Theme URI: https://example.com/rodla-construction
Author: Rodla
Author URI: https://example.com
Description: Custom WordPress theme for Rodla Construction with static pages and a dynamic projects archive.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
Text Domain: rodla
*/

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

html:not(.dark) body {
  background-color: #f8fafc;
  color: #1f2937;
}

html.dark body {
  background-color: #0f172a;
  color: #e2e8f0;
}

main {
  min-height: 40vh;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.rodla-logo-image {
  height: 2.5rem;
  width: auto;
  object-fit: contain;
}

.rodla-logo-small {
  height: 1.5rem;
  width: auto;
  object-fit: contain;
}

.rodla-section-pattern {
  background-image: linear-gradient(to right bottom, rgba(15, 23, 42, 0.78), rgba(84, 0, 123, 0.66));
}

.rodla-prose p {
  margin-bottom: 1rem;
}

.rodla-card-shadow {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
}

.rodla-card-shadow:hover {
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.2);
}

.rodla-mobile-menu[data-open="true"] {
  display: block;
}

.current-page-link {
  color: #54007b !important;
  background-color: rgba(84, 0, 123, 0.1);
  border-radius: 0.375rem;
  padding: 0.4rem 0.7rem;
}

.current-page-link:hover {
  color: #3e005b !important;
}

.dark .current-page-link {
  color: #f8fafc !important;
  background-color: rgba(84, 0, 123, 0.38);
}

.dark .current-page-link:hover {
  color: #ffffff !important;
  background-color: rgba(84, 0, 123, 0.5);
}

.rodla-site-nav {
  background-color: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: #e2e8f0 !important;
}

.dark .rodla-site-nav {
  background-color: rgba(15, 23, 42, 0.92) !important;
  border-bottom-color: #1e293b !important;
}

.rodla-site-mobile-menu {
  background-color: #ffffff !important;
  border-top-color: #e2e8f0 !important;
}

.dark .rodla-site-mobile-menu {
  background-color: #0f172a !important;
  border-top-color: #1e293b !important;
}

.rodla-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.8rem;
  border-radius: 0.5rem;
  color: #1f2937;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.rodla-nav-link:hover {
  color: #4c1d95;
  background-color: #e2e8f0;
}

.dark .rodla-nav-link {
  color: #cbd5e1;
}

.dark .rodla-nav-link:hover {
  color: #f5f3ff;
  background-color: #1e293b;
}

.rodla-nav-link-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #54007b, #6d28d9);
  box-shadow: 0 8px 20px rgba(84, 0, 123, 0.24);
}

.rodla-nav-link-active:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #4a006e, #5b21b6);
  transform: translateY(-1px);
}

.dark .rodla-nav-link-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  box-shadow: 0 10px 24px rgba(124, 58, 237, 0.34);
}

.dark .rodla-nav-link-active:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #6d28d9, #7e22ce);
}

.rodla-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1rem;
  border-radius: 0.6rem;
  background: linear-gradient(135deg, #54007b, #6d28d9);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(84, 0, 123, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.rodla-nav-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 28px rgba(84, 0, 123, 0.36);
}

.rodla-nav-cta-active {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 1px;
}

.rodla-mobile-nav-link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 0.5rem;
  color: #334155;
  font-weight: 600;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.rodla-mobile-nav-link:hover {
  color: #54007b;
  background-color: #f1f5f9;
}

.dark .rodla-mobile-nav-link {
  color: #cbd5e1;
}

.dark .rodla-mobile-nav-link:hover {
  color: #f5f3ff;
  background-color: #1e293b;
}

.rodla-mobile-nav-link-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #54007b, #6d28d9);
}

.dark .rodla-mobile-nav-link-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
}

.rodla-mobile-nav-link-cta {
  margin-top: 0.25rem;
}

.bg-primary {
  background-color: #54007b !important;
}

.text-primary {
  color: #54007b !important;
}

.dark .text-primary {
  color: #c084fc !important;
}

.border-primary {
  border-color: #54007b !important;
}

.dark .border-primary {
  border-color: #c084fc !important;
}

.bg-primary-hover {
  background-color: #3e005b !important;
}

.bg-background-light {
  background-color: #f8fafc !important;
}

.bg-background-dark {
  background-color: #0f172a !important;
}

.bg-surface-light {
  background-color: #ffffff !important;
}

.bg-surface-dark {
  background-color: #1e293b !important;
}

.hover\:bg-primary-hover:hover {
  background-color: #3e005b !important;
}

.hover\:text-primary:hover {
  color: #54007b !important;
}

.dark .hover\:text-primary:hover {
  color: #e9d5ff !important;
}

.dark .dark\:bg-background-dark {
  background-color: #0f172a !important;
}

.dark .dark\:bg-surface-dark {
  background-color: #1e293b !important;
}

.dark .dark\:text-white {
  color: #ffffff !important;
}

.text-purple-100 {
  color: #ede9fe !important;
}

.text-purple-200 {
  color: #ddd6fe !important;
}

.rodla-kicker-pill {
  border: 1px solid rgba(84, 0, 123, 0.18);
}

.dark .rodla-kicker-pill {
  border-color: rgba(192, 132, 252, 0.45);
  background-color: rgba(192, 132, 252, 0.12);
}

.rodla-kicker-text {
  color: #54007b !important;
}

.dark .rodla-kicker-text {
  color: #e9d5ff !important;
}

.rodla-hero-copy {
  color: #cbd5e1 !important;
}

.rodla-text-body {
  color: #475569 !important;
}

.dark .rodla-text-body {
  color: #94a3b8 !important;
}

.rodla-text-emphasis {
  color: #334155 !important;
}

.dark .rodla-text-emphasis {
  color: #cbd5e1 !important;
}

.rodla-stat-label {
  color: #475569 !important;
}

.dark .rodla-stat-label {
  color: #94a3b8 !important;
}

.rodla-stat-number {
  color: #0f172a !important;
}

.dark .rodla-stat-number {
  color: #f8fafc !important;
}

.rodla-card-surface {
  background-color: #ffffff !important;
}

.dark .rodla-card-surface {
  background-color: #1e293b !important;
}

.rodla-card-title,
.rodla-quote-text {
  color: #0f172a !important;
}

.dark .rodla-card-title,
.dark .rodla-quote-text {
  color: #f8fafc !important;
}

.rodla-card-copy,
.rodla-card-meta {
  color: #475569 !important;
}

.dark .rodla-card-copy,
.dark .rodla-card-meta {
  color: #cbd5e1 !important;
}

.rodla-about-hero-tint {
  background: linear-gradient(to bottom, rgba(248, 250, 252, 0.78), rgba(248, 250, 252, 0.9));
  pointer-events: none;
}

.dark .rodla-about-hero-tint {
  background: linear-gradient(to bottom, rgba(15, 23, 42, 0.25), rgba(15, 23, 42, 0.45));
}

.rodla-panel-subtle {
  background-color: #f8fafc !important;
  border-color: #e2e8f0 !important;
}

.dark .rodla-panel-subtle {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

.rodla-panel-year {
  color: rgba(84, 0, 123, 0.35) !important;
}

.dark .rodla-panel-year {
  color: rgba(226, 232, 240, 0.28) !important;
}

.rodla-panel-title {
  color: #0f172a !important;
}

.dark .rodla-panel-title {
  color: #f8fafc !important;
}

.rodla-panel-copy {
  color: #475569 !important;
}

.dark .rodla-panel-copy {
  color: #cbd5e1 !important;
}

.rodla-list-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
}

.dark .rodla-list-card {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

.rodla-list-title {
  color: #0f172a !important;
}

.dark .rodla-list-title {
  color: #f8fafc !important;
}

.rodla-list-items {
  color: #334155 !important;
}

.dark .rodla-list-items {
  color: #cbd5e1 !important;
}

.rodla-cta-surface {
  background-color: #54007b !important;
}

.rodla-cta-panel-primary {
  background-color: #54007b;
  color: #ffffff;
}

.rodla-cta-panel-secondary {
  background-color: #ffffff;
}

.dark .rodla-cta-panel-secondary {
  background-color: #1e293b;
}

.rodla-cta-subtext {
  color: #ede9fe !important;
}

.rodla-btn-primary {
  background-color: #54007b;
  color: #ffffff !important;
  border: 1px solid rgba(84, 0, 123, 0.4);
}

.rodla-btn-primary:hover {
  background-color: #3e005b;
  color: #ffffff !important;
}

.rodla-btn-light {
  color: #54007b !important;
}

.dark .rodla-btn-light {
  color: #54007b !important;
}

.rodla-btn-dark {
  color: #ffffff !important;
}

.rodla-form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #334155;
}

.dark .rodla-form-label {
  color: #cbd5e1;
}

.rodla-form-input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.rodla-form-input:focus {
  outline: 2px solid #54007b;
  outline-offset: 1px;
  border-color: #54007b;
}

.rodla-form-input::placeholder {
  color: #64748b;
}

.dark .rodla-form-input {
  border-color: #475569;
  background-color: #1e293b;
  color: #f8fafc;
}

.dark .rodla-form-input::placeholder {
  color: #94a3b8;
}

.rodla-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background-color: rgba(84, 0, 123, 0.12);
}

.dark .rodla-contact-icon {
  background-color: rgba(192, 132, 252, 0.2);
}

.rodla-filter-tab {
  color: #475569 !important;
}

.dark .rodla-filter-tab {
  color: #cbd5e1 !important;
}

.rodla-filter-tab:hover {
  background-color: #f3e8ff !important;
  color: #54007b !important;
}

.dark .rodla-filter-tab:hover {
  background-color: #334155 !important;
  color: #e9d5ff !important;
}

.rodla-filter-tab-active {
  background-color: #54007b !important;
  color: #ffffff !important;
}

.rodla-filter-tab-active:hover {
  background-color: #54007b !important;
  color: #ffffff !important;
}

.rodla-project-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.375rem;
  background-color: #f1f5f9;
  color: #54007b !important;
}

.dark .rodla-project-card-arrow {
  background-color: #334155;
  color: #e9d5ff !important;
}

.rodla-project-back-link {
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: #54007b !important;
}

.rodla-project-back-link:hover {
  background-color: rgba(243, 232, 255, 0.95);
  color: #3e005b !important;
}

.dark .rodla-project-back-link {
  background-color: rgba(15, 23, 42, 0.65);
  border-color: rgba(71, 85, 105, 0.65);
  color: #e9d5ff !important;
}

.dark .rodla-project-back-link:hover {
  background-color: rgba(30, 41, 59, 0.9);
  color: #f5f3ff !important;
}

.rodla-project-search-input {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a;
  caret-color: #54007b;
  background-color: #ffffff !important;
}

.rodla-project-search-input::placeholder {
  color: #64748b !important;
}

.dark .rodla-project-search-input {
  color: #f8fafc !important;
  -webkit-text-fill-color: #f8fafc;
  caret-color: #c084fc;
  background-color: #1e293b !important;
}

.dark .rodla-project-search-input::placeholder {
  color: #94a3b8 !important;
}

.rodla-pagination ul {
  display: inline-flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.rodla-pagination li {
  list-style: none;
}

.rodla-pagination a,
.rodla-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  color: #334155;
  background-color: #ffffff;
}

.dark .rodla-pagination a,
.dark .rodla-pagination span {
  border-color: #334155;
  color: #cbd5e1;
  background-color: #1e293b;
}

.rodla-pagination .current {
  background-color: #54007b !important;
  border-color: #54007b !important;
  color: #ffffff !important;
}

.rodla-services-groups-surface {
  background-color: #ffffff !important;
  border-top-color: #e2e8f0 !important;
  border-bottom-color: #e2e8f0 !important;
}

.dark .rodla-services-groups-surface {
  background-color: #1e293b !important;
  border-top-color: #334155 !important;
  border-bottom-color: #334155 !important;
}

.rodla-services-group-header {
  border-bottom-color: #e2e8f0 !important;
}

.dark .rodla-services-group-header {
  border-bottom-color: #334155 !important;
}

.rodla-services-group-title {
  color: #0f172a !important;
}

.dark .rodla-services-group-title {
  color: #f8fafc !important;
}

.rodla-strong-heading {
  color: #0f172a !important;
}

.dark .rodla-strong-heading {
  color: #ffffff !important;
}

.material-icons-outlined {
  font-family: "Material Icons Outlined", "Material Symbols Outlined";
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}