/*
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.8.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);
}


/* -------------------------------------------------------------------------
 * Block palette classes
 *
 * Declared directly rather than relying on theme.json generation — Kadence
 * is a classic theme and does not always emit these from a child theme.json.
 * ---------------------------------------------------------------------- */

.has-surface-background-color{background-color:#FFFFFF}
.has-surface-alt-background-color{background-color:#F5F4FA}
.has-brand-background-color{background-color:#4632C9}
.has-brand-dark-background-color{background-color:#251A72}
.has-warm-background-color{background-color:#C08343}
.has-warm-soft-background-color{background-color:#FBF3E9}
.has-surface-color{color:#FFFFFF}
.has-ink-color{color:#191531}
.has-ink-muted-color{color:#5A5A6E}
.has-brand-color{color:#4632C9}
.has-brand-light-color{color:#9B8AE6}

/* Dark sections: element styles beat inherited colour, so state it. */
.has-brand-dark-background-color,
.has-brand-dark-background-color h2,
.has-brand-dark-background-color h3,
.has-brand-dark-background-color p{ color:#FFFFFF; }
.has-brand-dark-background-color .has-brand-light-color{ color:#9B8AE6; }
.has-brand-dark-background-color .wp-block-column p{ margin-block:0 .5rem; }

/* -------------------------------------------------------------------------
 * Full-bleed sections, constrained content
 * ---------------------------------------------------------------------- */

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

/* -------------------------------------------------------------------------
 * Grid and card corrections
 * ---------------------------------------------------------------------- */

/* Feature grid: block margins were blowing out the 1px gap */
.am-feats{ gap:1px; }
.am-feats > .wp-block-group{ margin-block:0; }

/* Pricing cards: reserve the tag's space so all three prices align */
.am-plan{ position:relative; padding-top:3rem; }
.am-plan__tag{ position:absolute; top:1.1rem; left:1.5rem; margin:0; }

/* Keep the tier-cliff note tight against the calculator */
.am-bill + .wp-block-paragraph{ margin-top:.9rem; }

/* -------------------------------------------------------------------------
 * Legibility — the audience is 50+, assume tired eyes
 * ---------------------------------------------------------------------- */

body{ font-size:18px; }
.am-eyebrow{ font-size:.875rem; letter-spacing:.10em; }


/* -------------------------------------------------------------------------
 * The poster wall
 *
 * Rendered by [ametide_events]. Every card is one uploaded flyer shown whole,
 * never cropped — that is the whole reason for standardising on portrait.
 * ---------------------------------------------------------------------- */

.am-wall{
  display:grid; gap:1.75rem;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
}
.am-wall__empty{ color:var(--am-ink-3); }

.am-ev{ display:flex; flex-direction:column; }

.am-ev__poster{
  position:relative; display:flex; flex-direction:column;
  aspect-ratio:8.5/11; overflow:hidden;
  border:1px solid var(--am-line); border-radius:10px;
  background:var(--am-surface-2);
  box-shadow:0 10px 26px -18px rgba(25,21,49,.55);
  transition:transform .18s ease, box-shadow .18s ease;
}
.am-ev__poster:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px -18px rgba(25,21,49,.45);
}
.am-ev__img{
  width:100%; height:100%; object-fit:contain; background:var(--am-surface-2);
}

.am-ev__flag{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(255,255,255,.94); color:var(--am-ink-2);
  padding:.25rem .5rem; border-radius:99px;
}
.am-ev__flag--auto{ background:rgba(255,255,255,.16); color:#fff; }

/* --- generated panel when no flyer was uploaded ------------------------ */
.am-ev__auto{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.75rem;
  padding:1.25rem; text-align:center;
  background:var(--am-brand-deep); color:#fff;
}
.am-ev__auto-org{
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--am-brand-light, #9B8AE6);
}
.am-ev__auto-name{
  font-family:var(--am-display); font-weight:600;
  font-size:1.3rem; line-height:1.1;
}
.am-ev__auto-wave{ color:var(--am-warm); opacity:.8; }
.am-ev__auto-date{
  font-family:var(--am-figure); font-size:.72rem; font-weight:500;
}

/* --- the details beneath the card -------------------------------------- */
.am-ev__meta{ padding:.85rem .1rem 0; }
.am-ev__when{
  font-family:var(--am-figure); font-size:.74rem;
  color:var(--am-warm); letter-spacing:.02em;
}
.am-ev__title{
  font-family:var(--am-display); font-weight:500;
  font-size:1.12rem; line-height:1.25; margin:.28rem 0 .2rem;
  letter-spacing:0;
}
.am-ev__title a{ color:var(--am-ink); text-decoration:none; }
.am-ev__title a:hover{ color:var(--am-brand); }
.am-ev__where{ font-size:.83rem; color:var(--am-ink-3); display:block; }
.am-ev__foot{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem; margin-top:.5rem;
}
.am-ev__price{ font-family:var(--am-figure); font-size:.82rem; color:var(--am-ink-2); }
.am-ev__types{
  display:block; font-family:var(--am-body); font-size:.72rem;
  color:var(--am-ink-3); margin-top:.1rem;
}
.am-ev__cta{ font-size:.82rem; font-weight:600; color:var(--am-brand); white-space:nowrap; }

@media (prefers-reduced-motion:reduce){
  .am-ev__poster{ transition:none; }
  .am-ev__poster:hover{ transform:none; }
}


/* --- poster wall corrections ------------------------------------------- */

/* the card is a link; stop the underline leaking into the generated panel */
.am-ev__poster,
.am-ev__poster *{ text-decoration:none; }
.am-ev__poster{ color:inherit; }

/* keep cards a sane size when there are only a few events */
.am-wall{ justify-content:start; }
.am-ev{ max-width:300px; }




/* =============================================================================
   DETROIT RIMS — palette override
   Paste at the END of style.css on the Detroit site only.
   Everything above stays exactly as the blueprint ships it.
   ============================================================================= */

:root{
  --am-brand:      #16274A;  /* chapter navy — wordmark */
  --am-brand-deep: #0D1830;  /* deeper navy for full-bleed bands */
  --am-warm:       #2E8FE0;  /* the swoosh blue, used where ochre was */
  --am-warm-soft:  #EAF2FB;  /* its tint, for the featured card */
  --am-ink:        #141C2B;
  --am-ink-2:      #4A5568;
  --am-ink-3:      #7A869A;
  --am-surface-2:  #F2F5F9;
  --am-surface-3:  #E4EAF2;
  --am-line:       #DCE3EC;
  --am-neutral:    #8894A6;
}

/* Block palette classes — restated with Detroit values */
.has-surface-background-color{background-color:#FFFFFF}
.has-surface-alt-background-color{background-color:#F2F5F9}
.has-brand-background-color{background-color:#16274A}
.has-brand-dark-background-color{background-color:#0D1830}
.has-warm-background-color{background-color:#2E8FE0}
.has-warm-soft-background-color{background-color:#EAF2FB}
.has-surface-color{color:#FFFFFF}
.has-ink-color{color:#141C2B}
.has-ink-muted-color{color:#4A5568}
.has-brand-color{color:#16274A}
.has-brand-light-color{color:#7E9BC4}

.has-brand-dark-background-color,
.has-brand-dark-background-color h2,
.has-brand-dark-background-color h3,
.has-brand-dark-background-color p{ color:#FFFFFF; }
.has-brand-dark-background-color .has-brand-light-color{ color:#7E9BC4; }

/* The generated event poster reads navy with a blue wave rather than
   violet with ochre. Same structure, chapter's colours. */
.am-ev__auto{ background:#0D1830; }
.am-ev__auto-org{ color:#7E9BC4; }
.am-ev__auto-wave{ color:#2E8FE0; }