/*
Theme Name: Car Detailing 1
Theme URI: https://example.com
Description: Generated by the TFS Theme Factory. The design surface (token values, enqueues, behaviour) is written by the build phase.
Author: TFS Systems
Author URI: https://aptecsol.com
Version: 1.1.0
Requires at least: 6.6

Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: car-detailing
Tags: custom-header, custom-menu, featured-images, flexible-header, full-width-template
*/

/*
 * TOKENS — the page's own :root, copied exactly. The colour roles and the font families alias
 * theme.json presets that hold the page's values; everything else is written here directly.
 */
:root {
  --tfs-color-surface-page: var(--wp--preset--color--surface-page, #12120e);
  --tfs-color-surface-muted: var(--wp--preset--color--surface-muted, #1c1b15);
  --tfs-color-text-body: var(--wp--preset--color--text-body, #ece7d6);
  --tfs-color-text-muted: #b7b19c;
  --tfs-color-text-error: #ff8f7e;
  --tfs-color-action-primary: var(--wp--preset--color--action-primary, #c8a84a);
  --tfs-color-action-secondary: var(--wp--preset--color--action-secondary, #ece7d6);
  --tfs-color-accent: var(--wp--preset--color--accent, #d6b858);
  --tfs-color-on-primary: #12120e;
  --tfs-color-on-secondary: #12120e;
  --tfs-color-on-accent: #12120e;
  --tfs-color-border-hairline: rgba(200, 168, 74, 0.5);
  --tfs-color-border-soft: rgba(236, 231, 214, 0.2);
  --tfs-image-lamp-pool: radial-gradient(ellipse 62% 55% at 50% 40%, rgba(255, 196, 110, 0.16) 0%, rgba(18, 18, 14, 0) 70%), radial-gradient(ellipse 90% 85% at 50% 42%, rgba(18, 18, 14, 0) 38%, rgba(18, 18, 14, 0.55) 72%, rgba(18, 18, 14, 0.94) 100%);
  --tfs-image-scrim-up: linear-gradient(to top, rgba(18, 18, 14, 0.94) 0%, rgba(18, 18, 14, 0.87) 66%, rgba(18, 18, 14, 0.5) 86%, rgba(18, 18, 14, 0) 100%);
  --tfs-image-scrim-top: linear-gradient(to bottom, rgba(18, 18, 14, 0.92) 0%, rgba(18, 18, 14, 0.88) 220px, rgba(18, 18, 14, 0) 100%);
  --tfs-image-scrim-down: linear-gradient(to bottom, rgba(18, 18, 14, 0.88) 0%, rgba(18, 18, 14, 0.82) 65%, rgba(18, 18, 14, 0) 100%);
  --tfs-font-heading: var(--wp--preset--font-family--heading, "Epilogue", system-ui, sans-serif);
  --tfs-font-body: var(--wp--preset--font-family--body, "Source Serif 4", Georgia, serif);
  --tfs-font-size-xs: 0.8125rem;
  --tfs-font-size-sm: 0.9375rem;
  --tfs-font-size-base: 1.125rem;
  --tfs-font-size-lead: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --tfs-font-size-lg: 1.5rem;
  --tfs-font-size-xl: clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);
  --tfs-font-size-3xl: clamp(2rem, 1.3rem + 2.6vw, 3.55rem);
  --tfs-font-size-4xl: clamp(2.25rem, 1rem + 4vw, 4.75rem);
  --tfs-font-size-display: clamp(2.75rem, 1.1rem + 6vw, 6.25rem);
  --tfs-font-size-logo: clamp(1.0625rem, 0.8rem + 0.7vw, 1.25rem);
  --tfs-font-size-phone: clamp(1.125rem, 0.9rem + 0.5vw, 1.25rem);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  overflow-x: clip;
  font-family: var(--tfs-font-body);
  font-size: var(--tfs-font-size-base);
  line-height: 1.65;
  color: var(--tfs-color-text-body);
  background: var(--tfs-color-surface-page);
}
[id] { scroll-margin-top: 96px; }
::selection { background: var(--tfs-color-action-primary); color: var(--tfs-color-on-primary); }
.glightbox-container .gslide-description { background: var(--tfs-color-surface-muted); }
.glightbox-clean .gdesc-inner { font-family: var(--tfs-font-heading); color: var(--tfs-color-text-body); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Category composition. Keep the Mechanic 1 token names and WP preset aliases. */
:root {
  --tfs-space-section: clamp(3rem, 7vw, 6rem);
  --tfs-radius-sm: .25rem;
  --tfs-radius-md: .75rem;
  --tfs-container: 80rem;
}
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: visible; }
img, video { max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a, button, summary, input, textarea { outline-offset: 5px; }
:focus-visible { outline: 3px solid var(--tfs-color-action-primary); }
h1,h2,h3 { font-family: var(--tfs-font-heading); line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
h3 { font-size: var(--tfs-font-size-lg); }
p, blockquote { margin: 1rem 0 0; overflow-wrap: anywhere; }
figure { margin: 0; }
address { font-style: normal; overflow-wrap: anywhere; }
.cd-container { width: min(100% - 2.5rem, var(--tfs-container)); margin-inline: auto; }
.cd-section { padding-block: var(--tfs-space-section); border-bottom: 1px solid var(--tfs-color-border-soft); }
.cd-heading { font-size: var(--tfs-font-size-3xl); max-width: 24ch; }
.cd-display { font-size: var(--tfs-font-size-display); max-width: 16ch; }
.cd-eyebrow { margin: 0 0 1rem; font: 700 var(--tfs-font-size-xs)/1.5 var(--tfs-font-heading); letter-spacing: .1em; text-transform: uppercase; color: var(--tfs-color-accent); }
.cd-description { font-size: var(--tfs-font-size-lead); color: var(--tfs-color-text-muted); max-width: 65ch; }
.cd-copy { margin-top: 1.5rem; overflow-wrap: anywhere; }
.cd-copy > :first-child { margin-top: 0; }
.cd-copy a { text-decoration: underline; }
.cd-copy table { display: block; max-width: 100%; overflow: auto; }
.cd-split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cd-media { width: 100%; }
.cd-image { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: contain; background: var(--tfs-color-surface-muted); border-radius: var(--tfs-radius-sm); }
.cd-video iframe { width: 100%; aspect-ratio: 16/9; height: auto; border: 0; }
.cd-portrait { aspect-ratio: 1; }
.cd-signature { width: min(12rem,100%); aspect-ratio: auto; margin-top: 2rem; }
.cd-actions { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.cd-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .875rem 1.25rem; background: var(--tfs-color-action-primary); color: var(--tfs-color-on-primary); border: 1px solid var(--tfs-color-action-primary); border-radius: var(--tfs-radius-sm); font: 700 var(--tfs-font-size-sm)/1.5 var(--tfs-font-heading); text-decoration: none; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.cd-button:hover { filter: brightness(1.1); }
.cd-button-secondary { background: transparent; color: var(--tfs-color-text-body); }
.cd-text-link { display: inline-block; padding-block: .4rem; margin-right: 1rem; text-underline-offset: .25em; }
.cd-cards { display: grid; gap: 1.5rem; margin-top: 2.5rem; }
.cd-card { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--tfs-color-border-soft); border-radius: var(--tfs-radius-md); background: var(--tfs-color-surface-muted); min-width: 0; }
.cd-card .cd-image { margin-bottom: 1.5rem; }
.cd-card .cd-button { margin-top: 1.5rem; }
.cd-icon { display: block; color: var(--tfs-color-accent); font-size: 2rem; margin-bottom: 1rem; }
.cd-featured { border-color: var(--tfs-color-action-primary); }
.cd-price,.cd-stat { font: 700 var(--tfs-font-size-3xl)/1.2 var(--tfs-font-heading); color: var(--tfs-color-action-primary); }
.cd-list { padding-left: 1.2rem; }
.cd-list li + li { margin-top: .5rem; }
.cd-comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; }
.cd-comparison .cd-image { margin-bottom: .5rem; }
.cd-faq { max-width: 60rem; margin-top: 2.5rem; }
.cd-faq details { padding: 1.25rem 0; border-bottom: 1px solid var(--tfs-color-border-soft); }
.cd-faq summary { cursor: pointer; font-family: var(--tfs-font-heading); font-weight: 700; }
.cd-form { margin-top: 2rem; padding: clamp(1rem,3vw,2rem); background: var(--tfs-color-surface-muted); border-radius: var(--tfs-radius-md); }
.cd-form label { display: block; font-size: var(--tfs-font-size-sm); margin-bottom: .5rem; }
.cd-form input:not(.visually-hidden), .cd-form textarea { display: block; width: 100%; min-width: 0; padding: .8rem; border: 1px solid var(--tfs-color-border-hairline); border-radius: var(--tfs-radius-sm); background: var(--tfs-color-surface-page); color: var(--tfs-color-text-body); }
.cd-form textarea { resize: vertical; }
.cd-form > .cd-button { margin-top: 1.5rem; }
.cd-form [aria-invalid=true] { border-color: var(--tfs-color-text-error); }
.cd-form[data-state=sending] { opacity: .6; }
.cd-form[data-state=sending] button { cursor: wait; }
.cd-message { display: none; }
.cd-message[data-shown] { display: block; }
[data-field-message], [data-form-message=error] { color: var(--tfs-color-text-error); }
.cd-contact-details { display: grid; gap: 1.5rem; }
.cd-map { width: 100%; aspect-ratio: 4/3; border: 0; }
.cd-hours { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--tfs-font-size-sm); }
.cd-hours th,.cd-hours td { padding: .5rem .5rem .5rem 0; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cd-header { border-bottom: 1px solid var(--tfs-color-border-soft); }
.cd-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.cd-logo { font: 700 var(--tfs-font-size-logo)/1.2 var(--tfs-font-heading); max-width: min(18rem,65%); overflow-wrap: anywhere; text-decoration: none; }
.cd-logo .cd-image { max-height: 4rem; aspect-ratio: auto; width: auto; background: transparent; }
.cd-announcement { padding-block: .5rem; font-size: var(--tfs-font-size-sm); }
.cd-header .cd-actions { margin: 0; }
.cd-menu-button { padding: .5rem .75rem; min-height: 44px; border: 1px solid var(--tfs-color-border-hairline); background: transparent; color: inherit; }
.cd-nav { display: none; width: 100%; }
.cd-nav[data-open] { display: block; }
.cd-nav ul { list-style: none; padding: 0; margin: 0; }
.cd-nav li ul { padding-left: 1rem; }
.cd-nav a { padding-block: .6rem; }
.cd-footer { padding-block: 3rem; background: var(--tfs-color-surface-muted); }
.cd-footer-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap: 2.5rem; }
.cd-footer h2 { font-size: var(--tfs-font-size-lg); margin-bottom: 1rem; }
.cd-footer ul { list-style: none; padding: 0; }
.cd-footer-logo { max-width: 12rem; aspect-ratio: auto; margin-bottom: 1rem; }
.cd-copyright { border-top: 1px solid var(--tfs-color-border-soft); padding-top: 1.5rem; margin-top: 2rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.cd-skip { position: absolute; top: -10rem; left: 1rem; z-index: 100; padding: 1rem; background: var(--tfs-color-action-primary); color: var(--tfs-color-on-primary); }
.cd-skip:focus { top: 1rem; }
@media (min-width: 768px) {
 .cd-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .cd-split { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .cd-media-left .cd-media { order: -1; }
}
@media (min-width: 1200px) {
 .cd-cards { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .cd-nav { display: block; width: auto; }
 .cd-nav > ul { display: flex; flex-wrap: wrap; gap: .75rem; }
 .cd-nav li { position: relative; }
 .cd-nav li > ul { display: none; position: absolute; z-index: 20; min-width: 14rem; max-width: 18rem; padding: .75rem; background: var(--tfs-color-surface-muted); border: 1px solid var(--tfs-color-border-soft); }
 .cd-nav li:hover > ul, .cd-nav li:focus-within > ul { display: block; }
 .cd-nav li li > ul { position: static; border: 0; min-width: 0; }
 .cd-menu-button { display: none; }
}
@media (scripting: none) { .cd-nav { display: block; } .cd-menu-button { display: none; } }