/*
Theme Name: Red Clay Strategies
Theme URI: https://redclaystrategiesllc.com
Author: Gorai Strategies
Author URI: https://goraistrategies.com
Description: A one-page marketing theme for Red Clay Strategies LLC, a Southeastern political consulting firm. Navy and clay-red palette, Playfair Display and Barlow typography, sticky nav with scroll progress, animated section reveals, selectable service packages, and a built-in consultation form.
Version: 1.2.5
Requires at least: 5.9
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: red-clay-strategies
*/

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #faf8f5;
  color: #14294B;
  font-family: Barlow, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: #14294B; text-decoration: none; }
a:hover { color: #D8232A; }
::selection { background: #D8232A; color: #fff; }

/* WP admin bar offset for the sticky header */
body.admin-bar .rc-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .rc-header { top: 46px; }
}

/* ============================================================
   Motion
   ============================================================ */
@keyframes rcRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.rc-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.rc-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rc-reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; }
}

/* ============================================================
   Hover / focus states
   (originally handled by the design runtime; real CSS here)
   ============================================================ */
.rc-nav a:hover { color: #fff; }
.rc-nav-cta:hover { background: #b91b22 !important; color: #fff; }

.rc-btn-primary:hover { background: #b91b22 !important; color: #fff; }
.rc-btn-ghost:hover { border-color: #fff !important; color: #fff; }

.rc-card:hover { background: rgba(255,255,255,0.08); }
.rc-choice:hover { border-color: #D8232A !important; }

.rc-input:focus,
.rc-textarea:focus { border-bottom-color: #D8232A !important; }

.rc-footer-links a:hover { color: #fff; }
.rc-totop:hover { background: #b91b22 !important; color: #fff; }


/* ============================================================
   Responsive (from the original redesign)
   ============================================================ */
@media (max-width: 1080px) {
  .rc-pillars { grid-template-columns: repeat(3, 1fr) !important; }
  .rc-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .rc-approach { grid-template-columns: 1fr !important; gap: 36px !important; }
}
@media (max-width: 900px) {
  .rc-shell { padding-left: 26px !important; padding-right: 26px !important; }
  .rc-header-inner { height: 74px !important; }
  .rc-burger { display: flex !important; }
  .rc-nav {
    position: absolute !important; left: 0; right: 0; top: 100%;
    background: #14294B; border-bottom: 3px solid #D8232A;
    flex-direction: column !important; align-items: stretch !important;
    gap: 0 !important;
    padding: 0 26px !important; border-bottom-width: 0 !important;
    box-shadow: 0 22px 40px rgba(0,0,0,0.35);
    max-height: 0; overflow: hidden; opacity: 0;
    visibility: hidden; pointer-events: none;
    transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.25s, padding 0.3s, visibility 0.35s;
  }
  .rc-nav[data-open="true"] {
    max-height: 440px; opacity: 1; visibility: visible; pointer-events: auto;
    padding: 8px 26px 26px !important; border-bottom-width: 3px !important;
  }
  .rc-nav a { padding: 22px 0 !important; min-height: 48px; display: flex; align-items: center; font-size: 14px !important; border-bottom: 1px solid rgba(255,255,255,0.12); }
  .rc-nav a span.rc-underline { display: none !important; }
  .rc-nav-cta { text-align: center; margin-top: 20px !important; padding: 17px 24px !important; border-bottom: none !important; }
  .rc-hero { padding-top: 90px !important; padding-bottom: 76px !important; }
  .rc-about-cols { grid-template-columns: 1fr !important; gap: 30px !important; }
  .rc-services-grid { grid-template-columns: 1fr !important; }
  .rc-contact { grid-template-columns: 1fr !important; gap: 48px !important; }
  .rc-section { padding-top: 76px !important; padding-bottom: 76px !important; }
  .rc-form { padding: 32px !important; }
  .rc-email { white-space: normal !important; overflow-wrap: anywhere !important; font-size: 18px !important; }
  .rc-footer-inner { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; }
}
@media (max-width: 620px) {
  .rc-pillars { grid-template-columns: repeat(2, 1fr) !important; }
  .rc-form-row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Anchor offset for the sticky header + generic content pages
   ============================================================ */
#top, #about, #services, #contact { scroll-margin-top: 90px; }

.rc-content-wrap { max-width: 820px; margin: 0 auto; padding: 130px 40px 90px; }
.rc-content-wrap h1.rc-page-title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(34px, 4vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 32px; }
.rc-content-wrap article { margin-bottom: 56px; }
.rc-content-wrap article h2 { font-family: 'Playfair Display', Georgia, serif; }
.rc-content-wrap a { color: #D8232A; }
.rc-content-wrap img { height: auto; }
.rc-entry { font-size: 17px; line-height: 1.75; color: rgba(20,41,75,0.85); }
.rc-entry h2, .rc-entry h3 { color: #14294B; }
.rc-nav-pagination { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; }

/* Custom logo sizing (Appearance > Customize > Site Identity) */
.rc-header .custom-logo { height: 56px; width: auto; display: block; }
.rc-footer .custom-logo { height: 52px; width: auto; display: block; }

/* ============================================================
   Contact Form 7 integration (.rc-form-wrap wraps the shortcode)
   Makes the CF7-generated form match the navy panel exactly.
   ============================================================ */
.rc-form-wrap .wpcf7-form {
  background: #14294B;
  padding: 46px;
  display: grid;
  gap: 24px;
  align-content: start;
}
@media (max-width: 900px) {
  .rc-form-wrap .wpcf7-form { padding: 32px; }
}
.rc-form-wrap .wpcf7-form-control-wrap { display: block; width: 100%; }

/* Base control look (was inline on the built-in form) */
.rc-input,
.rc-textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.32);
  color: #fff;
  font-family: Barlow, sans-serif;
  font-size: 16px;
  padding: 9px 0;
  outline: none;
}
.rc-textarea { resize: vertical; min-height: 96px; }
.rc-input::placeholder,
.rc-textarea::placeholder { color: rgba(255,255,255,0.5); }

.rc-submit {
  margin-top: 12px;
  background: #D8232A;
  color: #fff;
  border: none;
  font-family: Barlow, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 19px 24px;
  cursor: pointer;
  transition: background 0.25s;
}
.rc-submit:hover { background: #b91b22 !important; }

/* Hidden package field that the service cards / choice buttons populate */
.rc-package-hidden { display: none !important; }

/* CF7 status + validation messages, legible on navy */
.rc-form-wrap .wpcf7-response-output {
  margin: 6px 0 0 !important;
  padding: 12px 16px !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #fff;
  font-size: 14px;
}
.rc-form-wrap .wpcf7-not-valid-tip { color: #ffb3b3; font-size: 12px; margin-top: 6px; }
.rc-form-wrap .wpcf7-spinner { margin: 0 0 0 8px; }

/* Neutralize any auto-inserted CF7 spacing inside the styled form */
.rc-form-wrap .wpcf7-form p { margin: 0; }
.rc-form-wrap .wpcf7-form br { display: none; }
.rc-form-wrap .wpcf7-form label { margin: 0; }

/* ============================================================
   Mobile fine-tuning (phones)
   ============================================================ */
@media (max-width: 600px) {
  /* Scale the hero headline so it never crowds the screen edge */
  #top h1 { font-size: 48px !important; }
  #top .rc-hero p { font-size: 18px !important; margin-top: 24px !important; }

  /* Trim tall vertical paddings so the page isn't endless on a phone */
  .rc-section  { padding-top: 60px !important; padding-bottom: 60px !important; }
  .rc-contact  { padding-top: 60px !important; padding-bottom: 60px !important; }
  .rc-approach { padding-top: 60px !important; padding-bottom: 60px !important; }

  /* Tighten the form panel on small screens */
  .rc-form,
  .rc-form-wrap .wpcf7-form { padding: 26px !important; }

  /* Keep the back-to-top button clear of the thumb zone / submit */
  .rc-totop { right: 18px; bottom: 18px; width: 46px; height: 46px; }
}

@media (max-width: 400px) {
  #top h1 { font-size: 40px !important; }
  .rc-shell { padding-left: 20px !important; padding-right: 20px !important; }
}

/* Never allow a stray element to cause sideways scrolling on mobile */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }

/* ============================================================
   JotForm embed variant (light card so the form blends on cream)
   ============================================================ */
.rc-form-wrap--jotform {
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 24px 50px rgba(20,41,75,0.10);
  align-self: start;
}
.rc-form-wrap--jotform iframe,
.rc-form-wrap--jotform .jotform-form {
  width: 100% !important;
  min-width: 100% !important;
  border: 0;
  display: block;
}
@media (max-width: 900px) {
  .rc-form-wrap--jotform { padding: 12px; }
}