/*
Theme Name: Adam Sayler Capital Advisory
Theme URI: https://adamsayler.com
Description: Custom Astra child theme for Adam Sayler's capital advisory one-pager.
Author: Adam Sayler
Version: 1.5.0
Template: astra
Text Domain: cap-advisory
*/

/* Force Astra's content wrappers to be edge-to-edge on this template
   so the custom one-pager renders full width regardless of Customizer settings. */
body.page-template-template-capital,
body.page-template-template-capital #page,
body.page-template-template-capital #content,
body.page-template-template-capital .site-content,
body.page-template-template-capital .ast-container,
body.page-template-template-capital .ast-container-fluid,
body.page-template-template-capital .entry-content,
body.page-template-template-capital article.post,
body.page-template-template-capital .ast-article-single,
body.page-template-template-capital .ast-article-post {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Astra sets .entry-content[data-ast-blocks-layout] > * to max-width:1200 with
   auto margins. That constrains .cap-page and breaks the layout. Lift the cap. */
body.page-template-template-capital .entry-content > *,
body.page-template-template-capital .entry-content[data-ast-blocks-layout] > *,
body.page-template-template-capital .cap-page {
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Re-affirm the inner container centers itself at 1180px regardless of what
   any parent rule does. */
body.page-template-template-capital .cap-container {
    max-width: var(--cap-container) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    width: auto !important;
}

body.page-template-template-capital .entry-content > * { margin-top: 0; }

:root {
  --cap-bg: #f6f6f3;
  --cap-surface: #ffffff;
  --cap-bg-soft: #efece5;
  --cap-border: #e0dcd2;
  --cap-text: #1a1816;
  --cap-muted: #5a5550;
  --cap-muted-2: #8a847d;
  --cap-accent: #8a6d3b;
  --cap-accent-dark: #6b541a;
  --cap-shadow-sm: 0 1px 3px rgba(20,18,15,0.05);
  --cap-shadow: 0 4px 14px rgba(20,18,15,0.08);
  --cap-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --cap-sans: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cap-container: 1180px;
}

/* Scope reset to the custom page so Astra defaults don't leak in */
.cap-page * { box-sizing: border-box; }
.cap-page { margin: 0; padding: 0; }
.cap-page,
.cap-page p,
.cap-page h1,
.cap-page h2,
.cap-page h3,
.cap-page h4,
.cap-page h5,
.cap-page a,
.cap-page input,
.cap-page select,
.cap-page textarea,
.cap-page button,
.cap-page label {
  font-family: var(--cap-sans);
  color: var(--cap-text);
}

/* Reset all link styling inside the custom template so Astra's defaults
   (underline, theme link color) don't bleed onto wordmark, nav, or buttons.
   Components below set their own colors. !important defeats any Customizer
   CSS variable Astra injects with high specificity. */
.cap-page a,
.cap-page a:link,
.cap-page a:visited,
.cap-page a:hover,
.cap-page a:focus,
.cap-page a:active {
  color: inherit;
  text-decoration: none !important;
  box-shadow: none;
  border-bottom: 0;
}
.cap-page html, .cap-page body { background: var(--cap-bg); }

.cap-container { max-width: var(--cap-container); margin: 0 auto; padding: 0 28px; }

/* ===== Header ===== */
.cap-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(246,246,243,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--cap-border);
}
.cap-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.cap-page .cap-wordmark {
  font-family: var(--cap-serif);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--cap-text) !important;
  font-weight: 600;
}
.cap-page .cap-wordmark span { color: var(--cap-accent) !important; }
.cap-nav { display: flex; gap: 32px; align-items: center; }
.cap-page .cap-nav a {
  color: var(--cap-text) !important;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.cap-page .cap-nav a:hover { color: var(--cap-accent) !important; }
.cap-page .cap-nav .cap-btn-cta {
  background: var(--cap-text);
  color: #fff !important;
  padding: 10px 18px;
  border-radius: 4px;
  font-weight: 600;
}
.cap-page .cap-nav .cap-btn-cta:hover { background: var(--cap-accent-dark); color: #fff !important; }
.cap-menu-btn { display: none; }

/* ===== Hero ===== */
.cap-hero {
  padding: 110px 0 0;
  background: #ffffff;
}
.cap-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: end;
}
.cap-hero-text { min-width: 0; padding-bottom: 56px; }
.cap-hero-portrait {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.cap-hero-portrait img {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  margin-bottom: -1px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.cap-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cap-accent);
  font-weight: 700;
  margin-bottom: 18px;
}
.cap-page .cap-hero h1 {
  font-family: var(--cap-serif);
  font-weight: 600;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  color: var(--cap-text);
}
.cap-page .cap-hero p.cap-lede {
  font-size: 18px;
  color: var(--cap-muted);
  margin: 0 0 36px;
}
.cap-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.cap-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--cap-sans);
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.cap-page .cap-btn-primary {
  background: var(--cap-text) !important;
  color: #fff !important;
  border: 1px solid var(--cap-text) !important;
}
.cap-page .cap-btn-primary:hover {
  background: var(--cap-accent-dark) !important;
  color: #fff !important;
  border-color: var(--cap-accent-dark) !important;
}
.cap-page .cap-btn-secondary {
  background: transparent !important;
  color: var(--cap-text) !important;
  border: 1px solid var(--cap-text) !important;
}
.cap-page .cap-btn-secondary:hover {
  background: var(--cap-text) !important;
  color: #fff !important;
  border-color: var(--cap-text) !important;
}
.cap-trust {
  margin-top: 56px;
  font-size: 13px;
  color: var(--cap-muted-2);
  letter-spacing: 0.02em;
}
.cap-trust strong { color: var(--cap-text); font-weight: 600; }

/* ===== Sections ===== */
.cap-section { padding: 96px 0; }
.cap-section.cap-section-alt {
  background: var(--cap-surface);
  border-top: 1px solid var(--cap-border);
  border-bottom: 1px solid var(--cap-border);
}
.cap-section-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cap-accent);
  font-weight: 700;
  margin-bottom: 14px;
}
.cap-page .cap-section h2,
.cap-page .cap-section-title {
  font-family: var(--cap-serif);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
  max-width: 760px;
  color: var(--cap-text);
}
.cap-section-intro {
  font-size: 17px;
  color: var(--cap-muted);
  max-width: 720px;
  margin: 0 0 56px;
}

/* ===== Services cards ===== */
.cap-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.cap-card {
  background: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-radius: 8px;
  padding: 34px 32px;
  box-shadow: var(--cap-shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.cap-card:hover { transform: translateY(-2px); box-shadow: var(--cap-shadow); }
.cap-card-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cap-accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.cap-page .cap-card h3 {
  font-family: var(--cap-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--cap-text);
}
.cap-page .cap-card p { color: var(--cap-muted); margin: 0 0 16px; font-size: 15px; }
.cap-page .cap-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--cap-text);
}
.cap-page .cap-card ul li {
  padding: 6px 0 6px 22px;
  position: relative;
  border-top: 1px solid var(--cap-border);
}
.cap-page .cap-card ul li:first-child { border-top: 0; }
.cap-page .cap-card ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 12px;
  height: 1px;
  background: var(--cap-accent);
}

/* ===== Sweet spot strip ===== */
.cap-sweet-spot {
  background: var(--cap-text);
  color: #f6f6f3;
  padding: 64px 0;
}
.cap-sweet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.cap-ss-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(246,246,243,0.55);
  font-weight: 700;
  margin-bottom: 10px;
}
.cap-ss-value {
  font-family: var(--cap-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #f6f6f3;
}
.cap-ss-sub {
  font-size: 13px;
  color: rgba(246,246,243,0.65);
  margin-top: 6px;
}

/* ===== Steps ===== */
.cap-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cap-step { padding-right: 14px; }
.cap-step-num {
  font-family: var(--cap-serif);
  font-size: 42px;
  font-weight: 600;
  color: var(--cap-accent);
  line-height: 1;
  margin-bottom: 18px;
}
.cap-page .cap-step h4 {
  font-family: var(--cap-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--cap-text);
}
.cap-page .cap-step p { color: var(--cap-muted); margin: 0; font-size: 15px; }

/* ===== About ===== */
.cap-about-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}
.cap-page .cap-about p { font-size: 17px; color: var(--cap-muted); margin: 0 0 16px; }
.cap-page .cap-about p:first-child { color: var(--cap-text); font-size: 19px; font-weight: 500; }
.cap-about-side {
  background: var(--cap-bg-soft);
  border: 1px solid var(--cap-border);
  border-radius: 8px;
  padding: 28px;
}
.cap-page .cap-about-side h4 {
  font-family: var(--cap-serif);
  font-size: 20px;
  margin: 0 0 14px;
  font-weight: 600;
  color: var(--cap-text);
}
.cap-page .cap-about-side ul { list-style: none; padding: 0; margin: 0; }
.cap-page .cap-about-side li {
  padding: 10px 0;
  border-top: 1px solid var(--cap-border);
  font-size: 14px;
  color: var(--cap-text);
}
.cap-page .cap-about-side li:first-child { border-top: 0; }
.cap-page .cap-about-side li strong {
  display: block;
  color: var(--cap-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

/* ===== Submit form ===== */
.cap-submit-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
}
.cap-form-wrap {
  background: var(--cap-surface);
  border: 1px solid var(--cap-border);
  border-radius: 8px;
  padding: 36px;
  box-shadow: var(--cap-shadow-sm);
}
.cap-submit-side h3 {
  font-family: var(--cap-serif);
  font-size: 24px;
  margin: 0 0 16px;
  font-weight: 600;
  color: var(--cap-text);
}
.cap-page .cap-submit-side p { color: var(--cap-muted); font-size: 15px; margin: 0 0 14px; }
.cap-page .cap-submit-side ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}
.cap-page .cap-submit-side ul li {
  padding: 10px 0 10px 22px;
  position: relative;
  font-size: 14px;
  color: var(--cap-text);
  border-top: 1px solid var(--cap-border);
}
.cap-page .cap-submit-side ul li:first-child { border-top: 0; }
.cap-page .cap-submit-side ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  width: 12px;
  height: 1px;
  background: var(--cap-accent);
}
.cap-submit-side .cap-direct {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--cap-border);
  font-size: 14px;
  color: var(--cap-muted);
}
.cap-submit-side .cap-direct strong { color: var(--cap-text); }

/* ===== Contact Form 7 overrides ===== */
.cap-form-wrap .wpcf7 { margin: 0; }
.cap-form-wrap .wpcf7-form p { margin: 0 0 14px; }
.cap-form-wrap .wpcf7 label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--cap-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.cap-form-wrap .wpcf7 input[type="text"],
.cap-form-wrap .wpcf7 input[type="email"],
.cap-form-wrap .wpcf7 input[type="tel"],
.cap-form-wrap .wpcf7 select,
.cap-form-wrap .wpcf7 textarea {
  width: 100%;
  padding: 11px 13px;
  font-family: var(--cap-sans);
  font-size: 15px;
  color: var(--cap-text);
  background: var(--cap-bg);
  border: 1px solid var(--cap-border);
  border-radius: 4px;
  transition: border-color .15s, background .15s;
}
.cap-form-wrap .wpcf7 input:focus,
.cap-form-wrap .wpcf7 select:focus,
.cap-form-wrap .wpcf7 textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--cap-accent);
}
.cap-form-wrap .wpcf7 textarea { min-height: 120px; resize: vertical; }
.cap-form-wrap .cap-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cap-form-wrap .wpcf7-submit {
  background: var(--cap-text);
  color: #fff;
  padding: 14px 28px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 15px;
  border: 0;
  cursor: pointer;
}
.cap-form-wrap .wpcf7-submit:hover { background: var(--cap-accent-dark); }
.cap-form-wrap .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14px;
  border: 1px solid transparent;
  font-weight: 500;
}
.cap-form-wrap .wpcf7 form.sent .wpcf7-response-output {
  background: #e3f1eb;
  border-color: #b9dbcc;
  color: #1f7a4d;
}
.cap-form-wrap .wpcf7 form.invalid .wpcf7-response-output,
.cap-form-wrap .wpcf7 form.unaccepted .wpcf7-response-output,
.cap-form-wrap .wpcf7 form.payment-required .wpcf7-response-output {
  background: #faf2dc;
  border-color: #e6d8a6;
  color: #856e1f;
}
.cap-form-wrap .wpcf7 form.failed .wpcf7-response-output,
.cap-form-wrap .wpcf7 form.aborted .wpcf7-response-output,
.cap-form-wrap .wpcf7 form.spam .wpcf7-response-output {
  background: #f6e3e1;
  border-color: #e1b7b3;
  color: #b8423a;
}
.cap-form-wrap .wpcf7-not-valid-tip {
  color: #b8423a;
  font-size: 12px;
  margin-top: 4px;
  display: block;
}

/* ===== Post-submit thank-you state ===== */
.cap-form-wrap.cap-form-sent .wpcf7,
.cap-form-wrap.cap-form-sent .wpcf7-form { display: none; }
.cap-form-wrap .cap-thanks {
  display: none;
  text-align: center;
  padding: 48px 32px;
}
.cap-form-wrap.cap-form-sent .cap-thanks { display: block; }
.cap-page .cap-thanks .cap-thanks-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #e3f1eb;
  color: #1f7a4d;
}
.cap-page .cap-thanks .cap-thanks-icon svg { width: 28px; height: 28px; }
.cap-page .cap-thanks h3 {
  font-family: var(--cap-serif);
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--cap-text);
}
.cap-page .cap-thanks p {
  color: var(--cap-muted);
  max-width: 460px;
  margin: 0 auto 8px;
  font-size: 15px;
}
.cap-page .cap-thanks .cap-thanks-note {
  margin-top: 18px;
  font-size: 13px;
  color: var(--cap-muted-2);
}

/* ===== Footer ===== */
.cap-footer {
  background: var(--cap-text);
  color: rgba(246,246,243,0.7);
  padding: 64px 0 32px;
  font-size: 14px;
}
.cap-footer-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.cap-page .cap-footer h5 {
  font-family: var(--cap-serif);
  color: #fff;
  font-size: 16px;
  margin: 0 0 14px;
  font-weight: 600;
}
.cap-footer a { color: rgba(246,246,243,0.85); }
.cap-footer a:hover { color: #fff; }
.cap-page .cap-footer ul { list-style: none; padding: 0; margin: 0; }
.cap-page .cap-footer ul li { padding: 4px 0; }
.cap-footer-bottom {
  border-top: 1px solid rgba(246,246,243,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(246,246,243,0.5);
  flex-wrap: wrap;
  gap: 16px;
}
.cap-footer-disclosure {
  font-size: 11px;
  color: rgba(246,246,243,0.45);
  margin-top: 22px;
  max-width: 880px;
  line-height: 1.55;
}

/* ===== Responsive ===== */
@media (max-width: 920px) {
  .cap-nav { display: none; }
  .cap-nav.cap-nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 72px;
    right: 0;
    left: 0;
    background: var(--cap-bg);
    border-bottom: 1px solid var(--cap-border);
    padding: 20px 28px;
  }
  .cap-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--cap-border);
    background: var(--cap-surface);
    border-radius: 4px;
    cursor: pointer;
  }
  .cap-menu-btn span,
  .cap-menu-btn span::before,
  .cap-menu-btn span::after {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--cap-text);
    position: relative;
  }
  .cap-menu-btn span::before { content: ""; position: absolute; top: -6px; }
  .cap-menu-btn span::after  { content: ""; position: absolute; top: 6px; }
  .cap-cards, .cap-steps, .cap-sweet-grid { grid-template-columns: 1fr 1fr; }
  .cap-about-grid, .cap-submit-grid { grid-template-columns: 1fr; gap: 36px; }
  .cap-footer-row { grid-template-columns: 1fr; }
  .cap-hero { padding: 72px 0 0; }
  .cap-hero-grid { grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
  .cap-hero-text { padding-bottom: 0; }
  .cap-hero-portrait { order: 2; justify-content: center; }
  .cap-hero-portrait img { max-width: 420px; }
  .cap-section { padding: 64px 0; }
}
@media (max-width: 560px) {
  .cap-cards, .cap-steps, .cap-sweet-grid { grid-template-columns: 1fr; }
  .cap-form-wrap .cap-row-2 { grid-template-columns: 1fr; }
  .cap-form-wrap { padding: 24px; }
  .cap-page .cap-hero h1 { font-size: 36px; }
}