/*
Theme Name: DKCS Car Service
Theme URI: https://dkcarservice.com/
Author: DKCS Car Service
Author URI: https://dkcarservice.com/
Description: Production-ready custom WordPress theme for DKCS Car Service — a private chauffeur company. Includes dynamic fleet, service, testimonial, FAQ and team content types, a built-in inquiry system with dashboard storage and HTML email notifications, full Customizer control over branding and contact details, and integrated SEO/schema output.
Version: 1.1.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dkcs
Tags: business, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, block-styles, wide-blocks

DKCS Car Service is distributed under the terms of the GNU GPL v2 or later.

--------------------------------------------------------------------------
NOTE ON STYLESHEET ARCHITECTURE
--------------------------------------------------------------------------
The visual design lives in four cascade-ordered files that are enqueued
before this one and are kept byte-identical to the original static build so
the UI is preserved exactly:

  assets/css/variables.css   design tokens (color, type, spacing, motion)
  assets/css/base.css        element + layout primitives
  assets/css/components.css  component library
  assets/css/animations.css  reveal / counter / parallax motion

This file adds ONLY what WordPress itself requires (core output classes,
editor blocks, comments) plus the small number of states introduced by the
dynamic front end (form validation errors, notices, image fallbacks). It is
enqueued last so it can layer on top without overriding the design.
*/

/* ==========================================================================
   1. WordPress core output classes
   ========================================================================== */

.alignleft {
  float: left;
  margin: 0 var(--space-5) var(--space-4) 0;
}

.alignright {
  float: right;
  margin: 0 0 var(--space-4) var(--space-5);
}

.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  max-width: min(1180px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  max-width: 100%;
}

.wp-caption {
  max-width: 100%;
}

.wp-caption img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.wp-caption-text,
.wp-element-caption,
figcaption {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute !important;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  clip: auto !important;
  clip-path: none;
  color: var(--color-text);
  display: block;
  font-size: var(--fs-sm);
  height: auto;
  left: var(--space-4);
  line-height: normal;
  padding: var(--space-3) var(--space-5);
  text-decoration: none;
  top: var(--space-4);
  width: auto;
  z-index: var(--z-modal);
}

/* Admin bar must not hide the sticky header. */
body.admin-bar .site-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }
}

/* ==========================================================================
   2. Editor content (page/post body, single, archive)
   ========================================================================== */

.entry-content > * + * {
  margin-top: var(--space-5);
}

.entry-content h2 {
  margin-top: var(--space-8);
}

.entry-content h3,
.entry-content h4 {
  margin-top: var(--space-7);
}

.entry-content ul,
.entry-content ol {
  padding-left: var(--space-6);
  list-style: revert;
}

.entry-content li + li {
  margin-top: var(--space-2);
}

.entry-content a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content blockquote {
  border-left: 2px solid var(--color-accent);
  padding-left: var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.entry-content img,
.entry-content iframe,
.entry-content video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.entry-content pre {
  overflow-x: auto;
  padding: var(--space-5);
  background: var(--ivory);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   3. Post meta / archive / pagination
   ========================================================================== */

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--gray-500);
}

.entry-meta a {
  color: inherit;
}

.entry-meta a:hover {
  color: var(--color-accent);
}

.post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.post-card__title {
  font-size: var(--fs-lg);
  margin-top: var(--space-3);
}

.post-card__excerpt {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background var(--duration-fast) var(--ease-premium),
    color var(--duration-fast) var(--ease-premium),
    border-color var(--duration-fast) var(--ease-premium);
}

.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

.post-navigation {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   4. Search form
   ========================================================================== */

.search-form {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.search-form__field {
  flex: 1 1 240px;
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--fs-base);
  background: var(--white);
  transition: border-color var(--duration-fast) var(--ease-premium),
    box-shadow var(--duration-fast) var(--ease-premium);
}

.search-form__field:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198, 163, 93, 0.18);
}

/* ==========================================================================
   5. Comments
   ========================================================================== */

.comment-list {
  list-style: none;
  padding: 0;
}

.comment-list ol.children {
  list-style: none;
  padding-left: var(--space-6);
}

.comment-body {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}

.comment-author img {
  border-radius: var(--radius-pill);
  vertical-align: middle;
  margin-right: var(--space-3);
}

/* ==========================================================================
   6. Form states introduced by server-side validation
   --------------------------------------------------------------------------
   The base component library styles .form-field and .form-success already.
   These rules add the error / notice states the dynamic forms need, using
   the same tokens so they read as part of the original design.
   ========================================================================== */

.form-field__error {
  display: none;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #b3261e;
}

.form-field.has-error .form-field__error {
  display: block;
}

.form-field.has-error label {
  color: #b3261e;
}

.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea,
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: #b3261e;
}

.form-field.has-error input:focus,
.form-field.has-error select:focus,
.form-field.has-error textarea:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.16);
}

.section--dark .form-field.has-error label,
.section--dark .form-field__error {
  color: #ff9c94;
}

/* Required-field marker keeps the uppercase label rhythm intact. */
.form-field label .required {
  color: var(--gold-dark);
  margin-left: 2px;
}

.section--dark .form-field label .required {
  color: var(--gold-light);
}

/* Error summary mirrors .form-success but in the alert palette. */
.form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(179, 38, 30, 0.08);
  border: 1px solid rgba(179, 38, 30, 0.28);
  color: #8c1d18;
  font-weight: 600;
  margin-bottom: var(--space-5);
}

.section--dark .form-error {
  background: rgba(255, 156, 148, 0.1);
  border-color: rgba(255, 156, 148, 0.32);
  color: #ff9c94;
}

/* Honeypot: removed from the visual and accessibility trees, but still a
   real focusable-by-bots input in the DOM. */
.form-hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit button busy state during async submission. */
.btn.is-busy {
  opacity: 0.65;
  pointer-events: none;
}

.btn.is-busy::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-2);
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: dkcs-spin 700ms linear infinite;
  vertical-align: -2px;
}

@keyframes dkcs-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-busy::after {
    animation-duration: 0s;
  }
}

/* ==========================================================================
   7. Image fallbacks
   --------------------------------------------------------------------------
   Portrait imagery (testimonial avatars, leadership headshots) is uploaded
   by the site owner. Until one is set we render a monogram at the exact
   dimensions of the image it replaces, so the grid never shifts and no
   broken-image icon is ever shown.
   ========================================================================== */

.monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--charcoal) 0%, var(--gray-800) 100%);
  color: var(--gold-light);
  font-family: var(--font-display);
  letter-spacing: var(--ls-wide);
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}

.testimonial-card__avatar .monogram {
  font-size: var(--fs-sm);
}

.card__media .monogram {
  font-size: var(--fs-display-sm);
}

/* ==========================================================================
   8. Empty-state notice (admin-facing, front-end rendered)
   ========================================================================== */

.dkcs-empty {
  grid-column: 1 / -1;
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.section--dark .dkcs-empty {
  border-color: var(--color-border-dark);
  color: var(--color-text-on-dark-muted);
}

/* ==========================================================================
   9. Overflow guards
   --------------------------------------------------------------------------
   Long unbroken strings (pasted URLs, email addresses) are something a client
   can add that the original static build never had to survive. base.css
   already clips horizontal overflow; these make the content wrap instead of
   pushing against that clip.
   ========================================================================== */

.entry-content,
.footer__links a,
.form-field {
  overflow-wrap: break-word;
}