/* My Way Companions — site theme (14 Oct 2026).
   Header, footer, type, buttons and the page sections for Home, Services, About me and Contact.
   Palette set by Jazmin: cream background, deep teal for headings/buttons/links/menu, warm gold for small details
   only (never text — it is too pale on cream to read), dark charcoal text. White is used only for button text and
   card surfaces. Type is set large for older readers. Loaded after blocks.css by templates/header-site.php. */

/* ── VARIABLES ── */
:root {
  --cream: #F8F6EF;
  --teal: #2F5D62;
  --gold: #C9A227;
  --ink: #2B2B2B;
  --white: #FFFFFF;
  --line: rgba(47, 93, 98, .22);
  --radius: 14px;
  --font: "Atkinson Hyperlegible", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-heading: "Lora", Georgia, "Times New Roman", serif;

  /* Names blocks.css (blog + contact form) reads, so those blocks follow this palette too. */
  --accent: var(--teal);
  --accent-ink: var(--teal);
  --accent-hover: var(--teal);
  --ink-dim: var(--ink);
  --hairline: var(--line);
  --sheet-bg: var(--white);
  --block-text: var(--ink);
  --block-text-muted: var(--ink);
  --block-accent: var(--teal);
  --block-fill: var(--teal);
  --block-surface: var(--white);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  font-size: 19px;
  line-height: 1.7;
  background: var(--cream);
  color: var(--ink);
  overflow-x: clip;
}
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--teal); font-weight: 600; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.35rem; }
p { margin: 0 0 1em; }
a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--teal); padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

/* Content pages: the CMS wraps every page in .rp-page > .rp-container. */
.rp-page { padding: 48px 0 72px; }
.rp-container { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.rp-container p, .rp-container li { font-size: 19px; line-height: 1.7; }
.rp-container ul, .rp-container ol { padding-left: 1.3em; }
.rp-container li { margin: .35em 0; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; padding: 14px 30px; border-radius: 999px;
  font-family: var(--font); font-size: 1.1rem; font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; border: 2px solid var(--teal);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(47, 93, 98, .25); }
.btn-primary, .rp-container a.btn-primary { background: var(--teal); color: var(--white); }
.btn-outline, .rp-container a.btn-outline { background: var(--white); color: var(--teal); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ── NAVBAR ── */
.site-header { background: var(--white); border-bottom: 3px solid var(--gold); position: sticky; top: 0; z-index: 50; }
.site-header-inner {
  max-width: 1180px; margin: 0 auto; padding: 14px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
}
.rp-brand { color: var(--teal); font-family: var(--font-heading); font-weight: 700; font-size: 1.45rem; text-decoration: none; line-height: 1.2; }
.rp-brand:hover { text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.site-nav a {
  color: var(--teal); font-size: 1.08rem; font-weight: 700; text-decoration: none;
  padding: 10px 14px; border-radius: 10px;
}
.site-nav a:hover { text-decoration: underline; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 3px; text-underline-offset: 7px; }
.site-nav .btn { min-height: 50px; padding: 10px 24px; margin-left: 8px; }
.site-nav .btn:hover { text-decoration: none; }
.site-nav a.btn-primary { color: var(--white); }

/* ── HERO ── */
.hero-band { padding: 36px 0 12px; }
.hero-band h1 { max-width: 16ch; }
.hero-band .lead { font-size: 1.3rem; max-width: 40ch; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
.hero-card { background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--gold); border-radius: var(--radius); padding: 30px 30px 18px; }
.hero-card h2 { font-size: 1.45rem; }
.tick-list { list-style: none; padding: 0 !important; margin: 0 0 1em; }
.tick-list li { position: relative; padding-left: 38px; margin: .7em 0; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* ── SECTIONS ── */
.section { padding: 56px 0 8px; }
.section-head { max-width: 720px; margin-bottom: 28px; }
.section-head::before { content: ""; display: block; width: 56px; height: 4px; background: var(--gold); border-radius: 2px; margin-bottom: 18px; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; }
.panel-gold { border-left: 8px solid var(--gold); }

/* ── FEATURES (service cards, steps) ── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; }
.card-icon { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--gold); color: var(--teal); display: grid; place-items: center; margin-bottom: 14px; }
.card-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.steps { counter-reset: step; }
.steps .card { position: relative; padding-top: 74px; }
.steps .card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 22px; left: 26px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal); color: var(--white); font-weight: 700; font-size: 1.15rem; display: grid; place-items: center;
}

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

/* ── FAQ ── */
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 12px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; position: relative;
  font-weight: 700; font-size: 1.12rem; color: var(--teal);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 1.8rem; line-height: 1; color: var(--teal); }
.faq details[open] summary::after { content: "\2212"; }
.faq details > div { padding: 0 24px 10px; }

/* ── CALL TO ACTION ── */
.cta { text-align: center; margin-top: 56px; border-top: 6px solid var(--gold); }
.cta p { max-width: 46ch; margin-left: auto; margin-right: auto; }
.cta .btn-row { justify-content: center; }

/* ── ABOUT ── */
.about-badge { display: block; width: 180px; height: 180px; border-radius: 50%; border: 4px solid var(--gold); margin: 0 auto 18px; object-fit: cover; background: var(--cream); }

/* ── CONTACT (overrides blocks.css, which was written for the old shop look) ── */
.rp-container .cf h1 { font-family: var(--font-heading); color: var(--teal); font-size: clamp(2.1rem, 5vw, 3rem); }
.rp-container .cf-lede { font-size: 1.2rem; color: var(--ink); }
.rp-container .cf-side { color: var(--ink); font-size: 1.05rem; }
.rp-container .cf-side h3 { font-family: var(--font-heading); font-size: 1.2rem; text-transform: none; letter-spacing: 0; color: var(--teal); }
.rp-container .cf-side p { font-size: 1.05rem; line-height: 1.6; }
.cf-form { background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--gold); }
.cf-form .cf1-form label { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.cf-form .cf1-form label span[aria-hidden] { display: inline; color: var(--ink); }
.cf-form .cf1-form input:not([type=checkbox]), .cf-form .cf1-form select, .cf-form .cf1-form textarea {
  font-size: 1.05rem; padding: 14px 16px; min-height: 54px; border: 2px solid var(--line); background: var(--white); color: var(--ink);
}
.cf-form .cf1-form input:focus, .cf-form .cf1-form select:focus, .cf-form .cf1-form textarea:focus { border-color: var(--teal); }
.cf-form .cf1-form ::placeholder { color: transparent; }
.cf-form .cf1-btn { background: var(--teal); color: var(--white); min-height: 56px; padding: 14px 34px; font-size: 1.1rem; font-weight: 700; border-radius: 999px; }
.cf-form .cf1-btn:hover { background: var(--teal); box-shadow: 0 6px 18px rgba(47, 93, 98, .25); }
.cf-form .cf1-msg { font-size: 1rem; }
.cf-form .cf1-thanks { color: var(--teal); }
.rp-container .cf-note { font-size: 1rem; color: var(--ink); }

/* Blog (kept for the News page). */
.rp-container .blog-hero p, .blog-card-date, .rp-container .blog-card-excerpt, .article-date, .rp-container .article-back { color: var(--ink); }

/* ── FOOTER ── */
.site-footer { background: var(--white); border-top: 3px solid var(--gold); margin-top: 40px; padding: 44px 0 30px; }
.site-footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 22px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 32px; }
.site-footer h2 { font-size: 1.2rem; margin-bottom: .6em; }
.site-footer p, .site-footer li { font-size: 1.05rem; margin: 0 0 .5em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--teal); font-weight: 700; }
.site-footer-base { max-width: 1180px; margin: 28px auto 0; padding: 18px 22px 0; border-top: 1px solid var(--line); font-size: 1rem; }

/* ── RESPONSIVE ── */
@media (max-width: 860px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 28px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .rp-container p, .rp-container li { font-size: 18px; }
  .site-header { position: static; }
  .site-header-inner { justify-content: center; padding: 12px 14px; }
  .site-nav { justify-content: center; gap: 2px; }
  .site-nav a { padding: 10px 10px; font-size: 1.05rem; }
  .site-nav .btn { flex-basis: 100%; margin: 6px 0 0; }
  .rp-page { padding: 28px 0 56px; }
  .rp-container { padding: 0 16px; }
  .panel { padding: 24px 20px; }
  .hero-band .lead { font-size: 1.18rem; }
  .btn-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}