/*
Theme Name: Dry First Restoration
Theme URI: https://dryfirst.com
Author: Dry First
Author URI: https://dryfirst.com
Description: Custom WordPress theme for Dry First Restoration — a pixel-faithful conversion of the approved static HTML/Figma design. Requires Advanced Custom Fields (FREE) for editable page content, WPForms for the contact form, and Rank Math for SEO. No ACF Pro features are used.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dryfirst
Tags: custom-theme, restoration, business

The approved visual design lives in css/style.css (the source of truth) and is
enqueued from functions.php. This root style.css only carries the required theme
header plus the small amount of CSS needed to integrate WordPress-generated
markup (WPForms, the admin bar, core alignment classes) with the approved design.
Nothing here redesigns the approved look — it only makes plugin output match it.
*/

/* ==========================================================================
   WordPress core / editor safety
   ========================================================================== */
.sticky,
.gallery-caption,
.bypostauthor { /* required by Theme Check; harmless */ }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--color-text-muted); text-align: center; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; margin: 0 0 16px 24px; }
.alignleft { float: left; margin: 0 24px 16px 0; }
img.wp-post-image,
.wp-block-image img { max-width: 100%; height: auto; }

/* Keep the fixed admin bar from overlapping the sticky header for logged-in users */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  /* At <=782px WordPress switches #wpadminbar to position:absolute, so it
     scrolls away with the page instead of staying fixed. Pinning the header at
     46px would then leave a 46px empty gap above it on scroll — so stick to 0.
     (At scroll 0 the header still sits below the bar via html's 46px margin.) */
  .admin-bar .site-header { top: 0; }
}

/* ==========================================================================
   WPForms — styled to match the approved Dry First contact form design
   (see css/style.css: .contact-form, .form-control, .form-checkbox, .btn).
   These overrides only apply inside our themed wrapper so other plugins/forms
   are untouched.
   ========================================================================== */
.dryfirst-form .wpforms-container {
  margin: 0;
}

.dryfirst-form .wpforms-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Fields live inside .wpforms-field-container; space them evenly there so the
   layout matches the approved form's 18px rhythm. */
.dryfirst-form .wpforms-field-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Field wrapper */
.dryfirst-form .wpforms-field {
  padding: 0;
  margin: 0;
}

/* Two-column rows: WPForms uses .wpforms-field-row with halves.
   The approved form pairs Name + Phone on one row. */
.dryfirst-form .wpforms-field-row {
  display: block;
}

/* Labels */
.dryfirst-form .wpforms-field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.dryfirst-form .wpforms-field-sublabel {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-top: 4px;
}
.dryfirst-form .wpforms-required-label {
  color: var(--color-fire);
}

/* Inputs, selects, textareas — mirror .form-control */
.dryfirst-form .wpforms-field input[type="text"],
.dryfirst-form .wpforms-field input[type="email"],
.dryfirst-form .wpforms-field input[type="tel"],
.dryfirst-form .wpforms-field input[type="url"],
.dryfirst-form .wpforms-field input[type="number"],
.dryfirst-form .wpforms-field select,
.dryfirst-form .wpforms-field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: none;
}
.dryfirst-form .wpforms-field select { cursor: pointer; }
.dryfirst-form .wpforms-field textarea {
  min-height: 120px;
  resize: vertical;
}
.dryfirst-form .wpforms-field input:focus,
.dryfirst-form .wpforms-field select:focus,
.dryfirst-form .wpforms-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}
.dryfirst-form .wpforms-field input::placeholder,
.dryfirst-form .wpforms-field textarea::placeholder {
  color: #9AA5B4;
}

/* Checkbox / radio choices — mirror .form-checkbox */
.dryfirst-form .wpforms-field-checkbox .wpforms-field-label,
.dryfirst-form .wpforms-field-radio .wpforms-field-label {
  margin-bottom: 10px;
}
.dryfirst-form .wpforms-field-checkbox ul,
.dryfirst-form .wpforms-field-radio ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dryfirst-form .wpforms-field-checkbox li,
.dryfirst-form .wpforms-field-radio li {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 14px 16px;
  background: var(--color-background);
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  transition: all var(--transition-fast);
  margin: 0;
}
.dryfirst-form .wpforms-field-checkbox li label,
.dryfirst-form .wpforms-field-radio li label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  cursor: pointer;
}
.dryfirst-form .wpforms-field-checkbox input,
.dryfirst-form .wpforms-field-radio input {
  width: 18px;
  height: 18px;
  accent-color: var(--color-fire-light);
  flex-shrink: 0;
  margin: 0;
}

/* Description text under fields */
.dryfirst-form .wpforms-field-description {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

/* Submit button — reuse the approved .btn / .btn-primary look, full width */
.dryfirst-form .wpforms-submit-container {
  margin-top: 4px;
}
.dryfirst-form button[type="submit"].wpforms-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 15px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.dryfirst-form button[type="submit"].wpforms-submit:hover {
  background: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Validation + error messages */
.dryfirst-form .wpforms-field input.wpforms-error,
.dryfirst-form .wpforms-field select.wpforms-error,
.dryfirst-form .wpforms-field textarea.wpforms-error {
  border-color: var(--color-fire);
  box-shadow: 0 0 0 3px rgba(216, 67, 21, 0.12);
}
.dryfirst-form label.wpforms-error,
.dryfirst-form .wpforms-error-container {
  color: var(--color-fire);
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
  display: block;
}

/* Success / confirmation message — mirror .form-success */
.dryfirst-form .wpforms-confirmation-container-full,
.wpforms-confirmation-container-full.dryfirst-form {
  background: #E8F5E9;
  border: 1px solid #BFE6C2;
  border-radius: var(--radius-md);
  padding: 32px 28px;
  color: var(--color-text);
  text-align: center;
  font-size: 15px;
  margin: 0;
}
.dryfirst-form .wpforms-confirmation-container-full p:last-child {
  margin-bottom: 0;
}

/* Honeypot / hidden helper fields stay hidden */
.dryfirst-form .wpforms-field-hp { display: none !important; }

/* Two-up name/phone row on wider screens, stack on mobile — matches .form-row */
@media (min-width: 560px) {
  .dryfirst-form .wpforms-form.dryfirst-form-grid {
    /* left as single column; WPForms field widths are controlled per-field
       in the form builder (Advanced > Field Size / CSS classes). See README. */
  }
}

/* ==========================================================================
   Long-form article prose (single.php / page.php content)
   Uses the approved design tokens so blog posts read like the rest of the site.
   ========================================================================== */
.dryfirst-rte { font-size: 17px; line-height: 1.8; color: var(--color-text); }
.dryfirst-rte > *:first-child { margin-top: 0; }
.dryfirst-rte p { margin: 0 0 22px; }
.dryfirst-rte h2 { font-size: clamp(24px, 3vw, 32px); margin: 40px 0 16px; line-height: 1.25; }
.dryfirst-rte h3 { font-size: clamp(20px, 2.4vw, 24px); margin: 32px 0 14px; line-height: 1.3; }
.dryfirst-rte h4 { font-size: 18px; margin: 26px 0 12px; }
.dryfirst-rte ul,
.dryfirst-rte ol { margin: 0 0 22px; padding-left: 24px; }
.dryfirst-rte li { margin-bottom: 8px; }
.dryfirst-rte a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.dryfirst-rte a:hover { color: var(--color-primary-dark); }
.dryfirst-rte img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 8px 0 24px; }
.dryfirst-rte blockquote {
  margin: 28px 0;
  padding: 20px 28px;
  border-left: 4px solid var(--color-primary);
  background: var(--color-background);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 18px;
  color: var(--color-text);
}
.dryfirst-rte blockquote p:last-child { margin-bottom: 0; }
.dryfirst-rte figure { margin: 0 0 24px; }
.dryfirst-rte figcaption { font-size: 13px; color: var(--color-text-muted); text-align: center; margin-top: 8px; }
.dryfirst-rte pre {
  background: var(--color-dark);
  color: #fff;
  padding: 20px;
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: 14px;
  margin: 0 0 24px;
}
.dryfirst-rte code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
.dryfirst-rte table { width: 100%; border-collapse: collapse; margin: 0 0 24px; }
.dryfirst-rte th,
.dryfirst-rte td { border: 1px solid var(--color-border); padding: 10px 14px; text-align: left; }
.dryfirst-rte hr { border: 0; border-top: 1px solid var(--color-border); margin: 32px 0; }

.dryfirst-tags a {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  background: #EEF4FD;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

/* ==========================================================================
   Pagination
   ========================================================================== */
.dryfirst-pagination .nav-links,
.dryfirst-pagination .page-numbers {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
}
.dryfirst-pagination .page-numbers {
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition-fast);
}
.dryfirst-pagination a.page-numbers:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dryfirst-pagination .page-numbers.current { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.dryfirst-pagination .page-numbers.dots { border-color: transparent; }

/* ==========================================================================
   Search form
   ========================================================================== */
.search-form { display: flex; gap: 10px; }
.search-form .search-field {
  flex: 1;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
}
.search-form .search-field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15); }
.search-form .search-submit {
  padding: 13px 24px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-family: var(--font-body);
  cursor: pointer;
}
.search-form .search-submit:hover { background: var(--color-primary-dark); }

/* ==========================================================================
   Comments
   ========================================================================== */
.comments-area { margin-top: 8px; }
.comments-area .comment-list { list-style: none; margin: 0 0 32px; padding: 0; }
.comments-area .comment-list ol { list-style: none; }
.comments-area .comment-body {
  padding: 20px 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  background: var(--color-surface);
}
.comments-area .comment-author { font-weight: 700; }
.comments-area .comment-metadata { font-size: 13px; color: var(--color-text-muted); margin-bottom: 8px; }
.comment-respond .comment-form { display: flex; flex-direction: column; gap: 16px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
}
.comment-respond .submit {
  align-self: flex-start;
  padding: 13px 28px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Testimonials carousel
   Progressive enhancement: without JS the track is a horizontal, swipeable,
   scroll-snapping row (still fully usable). JS adds prev/next + dot paging.
   Shows 3 cards per view on desktop, 2 on tablet, 1 on mobile. Controls
   auto-hide when everything fits on a single page (see [data-static]).
   --------------------------------------------------------------------------- */
.testimonial-slider {
  position: relative;
}
.testimonial-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  /* No scroll-snap: with per-card start-snapping, a partial final page (e.g. 4
     cards at 3-per-view) has no reachable snap point past the first, so the
     viewport springs back to the start. Paging is driven by JS instead; native
     touch/trackpad swiping still works.
     Smooth animation is done in JS (rAF) rather than CSS scroll-behavior so it
     works even where the engine won't animate programmatic scrolls. */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.testimonial-slider__viewport::-webkit-scrollbar {
  display: none;
}
.testimonial-slider__track {
  display: flex;
  gap: 28px;
  /* Top/bottom padding leaves room for the card hover-lift and focus ring. */
  padding: 6px 2px 10px;
}
.testimonial-slider__slide {
  flex: 0 0 calc((100% - 2 * 28px) / 3);
  display: flex;
}
.testimonial-slider__slide > .testimonial-card {
  flex: 1 1 auto;
  width: 100%;
}
@media (max-width: 980px) {
  .testimonial-slider__slide {
    flex-basis: calc((100% - 28px) / 2);
  }
}
@media (max-width: 640px) {
  .testimonial-slider__slide {
    flex-basis: 100%;
  }
}

.testimonial-slider__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.testimonial-slider[data-static] .testimonial-slider__controls {
  display: none;
}
.testimonial-slider__nav {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), opacity var(--transition-fast);
}
.testimonial-slider__nav:hover:not(:disabled) {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.testimonial-slider__nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.testimonial-slider__nav svg {
  display: block;
}
.testimonial-slider__dots {
  display: flex;
  align-items: center;
  gap: 9px;
}
.testimonial-slider__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.testimonial-slider__dot:hover {
  background: var(--color-primary-light, var(--color-primary));
}
.testimonial-slider__dot.is-active {
  background: var(--color-primary);
  transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
  .testimonial-slider__viewport {
    scroll-behavior: auto;
  }
}