/*
Theme Name:   Ametide
Theme URI:    https://ametide.com
Description:  Child theme for Ametide — association websites, built by Purple Wave Creative. Design tokens live in theme.json; this file carries the component styles.
Author:       Purple Wave Creative
Author URI:   https://purplewavecreative.com
Template:     kadence
Version:      0.1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  ametide
*/

/* -------------------------------------------------------------------------
 * Tokens
 *
 * These mirror theme.json so the same values are available to hand-written
 * CSS. Change a brand color in theme.json AND here, or better: change it in
 * theme.json and reference var(--wp--preset--color--brand) below.
 * ---------------------------------------------------------------------- */

:root{
  --am-ink:        var(--wp--preset--color--ink,        #1B1633);
  --am-ink-2:      var(--wp--preset--color--ink-muted,  #4A4560);
  --am-ink-3:      #7A7590;
  --am-brand:      var(--wp--preset--color--brand,      #4632C9);
  --am-brand-deep: var(--wp--preset--color--brand-dark, #251A72);
  --am-warm:       var(--wp--preset--color--warm,       #C08343);
  --am-warm-soft:  var(--wp--preset--color--warm-soft,  #FBF3E9);
  --am-surface:    var(--wp--preset--color--surface,    #FFFFFF);
  --am-surface-2:  var(--wp--preset--color--surface-alt,#F3F2F8);
  --am-surface-3:  #EAE8F3;
  --am-line:       var(--wp--preset--color--line,       #DEDBEB);
  --am-neutral:    #8E8AA3;

  --am-display: "Newsreader", Georgia, serif;
  --am-body:    "Inter", system-ui, -apple-system, sans-serif;
  --am-figure:  "IBM Plex Mono", ui-monospace, monospace;
}

body{
  font-family: var(--am-body);
  color: var(--am-ink);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.entry-title,
.wp-block-heading{
  font-family: var(--am-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
}

/* -------------------------------------------------------------------------
 * Shared bits used by the block patterns
 * ---------------------------------------------------------------------- */

.am-eyebrow{
  font-family: var(--am-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--am-brand);
}
.am-eyebrow::after{
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--am-warm);
  margin-top: .6rem;
}

.am-lede{
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--am-ink-2);
  max-width: 34ch;
}

/* The one decorative device — earned by the name. */
.am-tide{ display:block; width:100%; height:14px; color: var(--am-line); }
.am-tide path{ fill:none; stroke:currentColor; stroke-width:1.5; }

/* -------------------------------------------------------------------------
 * Cost comparison — the signature element
 * Rendered by the [ametide_calculator] shortcode.
 * ---------------------------------------------------------------------- */

.am-bill{
  background: var(--am-surface-2);
  border: 1px solid var(--am-line);
  border-radius: 12px;
  padding: clamp(1.25rem, 3vw, 1.9rem);
}
.am-bill__head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; flex-wrap:wrap;
}
.am-bill__title{
  font-family: var(--am-body); font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color: var(--am-ink-3);
}
.am-bill__count{ font-family: var(--am-figure); font-size:1.05rem; font-weight:500; }
.am-bill__slider{ width:100%; margin:1.4rem 0 .35rem; accent-color: var(--am-brand); }
.am-bill__scale{
  display:flex; justify-content:space-between;
  font-family: var(--am-figure); font-size:.7rem; color: var(--am-ink-3);
}

.am-bill__rows{ margin-top:1.6rem; display:grid; gap:1.1rem; }
.am-bill__label{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; margin-bottom:.4rem;
}
.am-bill__name{ font-size:.9rem; font-weight:500; }
.am-bill__name span{ display:block; font-weight:400; font-size:.78rem; color: var(--am-ink-3); }
.am-bill__cost{ font-family: var(--am-figure); font-size:1.15rem; font-weight:500; white-space:nowrap; }
.am-bill__track{ height:12px; border-radius:99px; background: var(--am-surface-3); overflow:hidden; }
.am-bill__fill{ height:100%; border-radius:99px; transition: width .35s cubic-bezier(.4,0,.2,1); }
.am-bill__fill--them{ background: var(--am-neutral); }
.am-bill__fill--us{ background: var(--am-brand); }

.am-bill__delta{
  margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--am-line);
  font-size:.95rem; color: var(--am-ink-2);
}
.am-bill__delta strong{
  font-family: var(--am-figure); font-weight:500;
  color: var(--am-warm); font-size:1.05rem;
}
.am-bill__foot{ margin-top:.9rem; font-size:.72rem; line-height:1.5; color: var(--am-ink-3); }

/* -------------------------------------------------------------------------
 * Feature grid
 * ---------------------------------------------------------------------- */

.am-feats{
  display:grid; gap:1px; background: var(--am-line);
  border:1px solid var(--am-line); border-radius:12px; overflow:hidden;
}
@media (min-width:680px){ .am-feats{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .am-feats{ grid-template-columns:1fr 1fr 1fr; } }
.am-feat{ background: var(--am-surface); padding:1.6rem; }
.am-feat h3{
  font-family: var(--am-body); font-size:.98rem; font-weight:600;
  margin:0 0 .45rem; letter-spacing:0;
}
.am-feat p{ font-size:.9rem; color: var(--am-ink-2); margin:0; }

/* -------------------------------------------------------------------------
 * Pricing plans
 * ---------------------------------------------------------------------- */

.am-plans{ display:grid; gap:1.25rem; }
@media (min-width:880px){ .am-plans{ grid-template-columns:repeat(3,1fr); } }

.am-plan{
  border:1px solid var(--am-line); border-radius:12px; padding:1.75rem;
  background: var(--am-surface); display:flex; flex-direction:column;
}
.am-plan--feature{
  border-color: var(--am-warm);
  background: var(--am-warm-soft);
  box-shadow: 0 0 0 1px var(--am-warm);
}
.am-plan__tag{
  font-size:.7rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; margin-bottom:.75rem;
  background: var(--am-warm); color:#fff;
  padding:.3rem .65rem; border-radius:99px;
  display:inline-block; align-self:flex-start;
}
.am-plan h3{ font-family: var(--am-body); font-size:1.05rem; font-weight:600; margin:0; letter-spacing:0; }
.am-plan__price{ font-family: var(--am-figure); font-size:2rem; font-weight:500; margin:.85rem 0 .2rem; }
.am-plan__price span{ font-family: var(--am-body); font-size:.85rem; font-weight:400; color: var(--am-ink-3); }
.am-plan ul{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.6rem; flex:1; }
.am-plan li{ font-size:.9rem; color: var(--am-ink-2); padding-left:1.3rem; position:relative; }
.am-plan li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:99px; background: var(--am-brand);
}
.am-plan .wp-block-button{ margin-top:1.75rem; }

/* -------------------------------------------------------------------------
 * Add-on list
 * ---------------------------------------------------------------------- */

.am-addons{ border-top:1px solid var(--am-line); }
.am-addon{
  display:flex; justify-content:space-between; gap:1.5rem;
  padding:1rem 0; border-bottom:1px solid var(--am-line); align-items:baseline;
}
.am-addon__name{ font-size:.95rem; }
.am-addon__name span{ display:block; font-size:.82rem; color: var(--am-ink-3); margin-top:.15rem; }
.am-addon__price{ font-family: var(--am-figure); font-size:.95rem; white-space:nowrap; }

/* -------------------------------------------------------------------------
 * Credibility figures
 * ---------------------------------------------------------------------- */

.am-creds{ border-left:2px solid var(--am-brand); padding-left:1.5rem; display:grid; gap:1.4rem; }
.am-cred__fig{ font-family: var(--am-figure); font-size:1.5rem; font-weight:500; }
.am-cred__txt{ font-size:.9rem; color: var(--am-ink-2); margin-top:.15rem; }

/* -------------------------------------------------------------------------
 * Members-only gate (from Ametide Core)
 * ---------------------------------------------------------------------- */

.ametide-gate{
  border:1px dashed var(--am-brand); border-radius:10px;
  padding:1.5rem; background: var(--am-surface-2); text-align:center;
}

/* Footer credit mark. Branded anchor text only. */
.ametide-credit{ font-size:.8rem; color: var(--am-ink-3); }
.ametide-credit a{ color: var(--am-ink-2); }

/* -------------------------------------------------------------------------
 * Accessibility floor
 * ---------------------------------------------------------------------- */

:focus-visible{ outline:2px solid var(--am-brand); outline-offset:3px; border-radius:3px; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}


/* -------------------------------------------------------------------------
 * Page frame — cap the measure and give every section gutters
 * ---------------------------------------------------------------------- */

.entry-content > *{
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}