/*
Theme Name: Access to Aquaponics MTC
Theme URI: https://accesstoaquaponics.com/
Author: Access to Aquaponics editorial
Author URI: https://accesstoaquaponics.com/about/
Description: Custom FSE block theme for accesstoaquaponics.com. Practical builder editorial layout with Tank / Rust / Leaf / Cream palette, Fraunces + Inter + JetBrains Mono, custom blocks for BOM, water parameters, FTC disclosure, build-difficulty pills, state-legality warnings, Guidebook CTA, IBC-tote callout. Voice: practical backyard builder.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: accesstoaquaponics-mtc
Tags: full-site-editing, block-theme, editorial, affiliate
*/

/* ==========================================================================
 * Access to Aquaponics MTC theme front-end + editor styles
 * All colours pulled from theme.json. Voice: practical builder.
 * ========================================================================== */

:root {
  --a2a-tank:       #1E3A52;
  --a2a-tank-deep:  #152A3D;
  --a2a-rust:       #C45A2C;
  --a2a-rust-light: #D9744A;
  --a2a-leaf:       #5E8B4C;
  --a2a-leaf-light: #7FA968;
  --a2a-cream:      #F5EFE0;
  --a2a-vellum:     #E9DFCB;
  --a2a-ink:        #1B1F24;
  --a2a-ivory:      #F8F2E4;
  --a2a-slate:      #6C7A8A;
  --a2a-slate-deep: #2C3A48;
  --a2a-cyan:       #4A97B8;
  --a2a-amber:      #D6A73B;
}

/* Base body */
body {
  background: var(--a2a-cream);
  color: var(--a2a-ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Skip link for a11y */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--a2a-rust);
  color: var(--a2a-ivory);
  padding: 8px 16px;
  z-index: 999;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* Focus states */
:focus-visible {
  outline: 2px solid var(--a2a-rust);
  outline-offset: 2px;
}

/* ==========================================================================
 * Byline card (build guides)
 * ========================================================================== */
.a2a-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  padding: 16px 20px;
  background: var(--a2a-vellum);
  border-radius: 4px;
  font-size: 14px;
  color: var(--a2a-slate-deep);
  margin: 16px 0 32px;
}
.a2a-byline strong { color: var(--a2a-ink); font-weight: 600; }
.a2a-byline__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--a2a-slate);
}
.a2a-byline__cost {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--a2a-rust);
  font-weight: 600;
}

/* ==========================================================================
 * Build difficulty pill
 * ========================================================================== */
.a2a-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
}
.a2a-pill--beginner    { background: var(--a2a-leaf);  color: var(--a2a-ivory); }
.a2a-pill--intermediate{ background: var(--a2a-amber); color: var(--a2a-ink);   }
.a2a-pill--advanced    { background: var(--a2a-rust);  color: var(--a2a-ivory); }

/* ==========================================================================
 * FTC disclosure block
 * ========================================================================== */
.a2a-ftc {
  border-top: 4px solid var(--a2a-rust);
  border-radius: 4px;
  background: var(--a2a-cream);
  color: var(--a2a-ink);
  padding: 24px;
  margin: 24px 0;
  box-shadow: 0 1px 3px rgba(27,31,36,0.08);
}
.a2a-ftc__label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--a2a-rust);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.a2a-ftc p { margin: 0; font-size: 15px; line-height: 1.55; }
.a2a-ftc a { color: var(--a2a-rust); text-decoration: underline; }

/* ==========================================================================
 * State-legality warning
 * ========================================================================== */
.a2a-legality {
  border-left: 4px solid var(--a2a-amber);
  background: var(--a2a-vellum);
  padding: 20px 24px;
  margin: 24px 0;
  font-size: 15px;
  line-height: 1.55;
}
.a2a-legality__label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--a2a-slate-deep);
  margin-bottom: 6px;
}

/* ==========================================================================
 * Common-mistake callout
 * ========================================================================== */
.a2a-mistake {
  border-left: 4px solid var(--a2a-amber);
  background: var(--a2a-vellum);
  padding: 20px 24px;
  margin: 24px 0;
}
.a2a-mistake__label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--a2a-slate-deep);
  margin-bottom: 6px;
}

/* ==========================================================================
 * Water-parameter table
 * ========================================================================== */
.a2a-waterparam {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  background: var(--a2a-cream);
  border: 1px solid var(--a2a-vellum);
}
.a2a-waterparam caption {
  caption-side: top;
  text-align: left;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  padding: 8px 0 12px;
  color: var(--a2a-ink);
}
.a2a-waterparam th,
.a2a-waterparam td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--a2a-vellum);
}
.a2a-waterparam th {
  background: var(--a2a-vellum);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--a2a-slate-deep);
}
.a2a-waterparam td.a2a-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--a2a-slate-deep);
}
.a2a-chip--cyan {
  display: inline-block;
  background: var(--a2a-cyan);
  color: var(--a2a-ivory);
  padding: 2px 8px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}

/* ==========================================================================
 * BOM table
 * ========================================================================== */
.a2a-bom {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
  background: var(--a2a-cream);
  border: 1px solid var(--a2a-vellum);
}
.a2a-bom caption {
  caption-side: top;
  text-align: left;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  padding: 8px 0 4px;
  color: var(--a2a-ink);
}
.a2a-bom__stamp {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--a2a-slate);
  margin-bottom: 12px;
}
.a2a-bom th,
.a2a-bom td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--a2a-vellum);
  vertical-align: top;
  text-align: left;
}
.a2a-bom th {
  background: var(--a2a-vellum);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--a2a-slate-deep);
}
.a2a-bom tr:nth-child(even) td { background: rgba(233,223,203,0.35); }
.a2a-bom td.a2a-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--a2a-slate-deep);
  white-space: nowrap;
}
.a2a-bom tfoot td {
  background: var(--a2a-vellum);
  font-weight: 700;
  color: var(--a2a-ink);
}
.a2a-bom .a2a-btn--sm {
  display: inline-block;
  background: var(--a2a-rust);
  color: var(--a2a-ivory);
  padding: 6px 12px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.a2a-bom .a2a-btn--sm:hover { background: var(--a2a-rust-light); }

/* ==========================================================================
 * Verdict badge (gear reviews)
 * ========================================================================== */
.a2a-verdict {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--a2a-rust);
  color: var(--a2a-ivory);
  padding: 8px 16px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
  font-weight: 700;
}
.a2a-verdict__label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

/* ==========================================================================
 * Guidebook CTA band
 * ========================================================================== */
.a2a-guidebook {
  background: var(--a2a-vellum);
  border-radius: 4px;
  padding: 32px;
  margin: 32px 0;
  display: grid;
  gap: 16px;
}
@media (min-width: 720px) {
  .a2a-guidebook { grid-template-columns: 1.4fr 1fr; align-items: center; }
}
.a2a-guidebook h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 26px;
  margin: 0 0 8px;
  color: var(--a2a-ink);
}
.a2a-guidebook p { margin: 0 0 12px; font-size: 15px; }
.a2a-guidebook__price {
  display: inline-block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--a2a-rust);
  font-weight: 700;
  margin-right: 8px;
}
.a2a-guidebook__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.a2a-guidebook__form input[type="email"] {
  flex: 1;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid var(--a2a-slate-deep);
  border-radius: 3px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  background: var(--a2a-ivory);
}
.a2a-guidebook__form button {
  background: var(--a2a-rust);
  color: var(--a2a-ivory);
  border: 0;
  padding: 10px 20px;
  border-radius: 3px;
  font-weight: 600;
  cursor: pointer;
  font-size: 15px;
}
.a2a-guidebook__form button:hover { background: var(--a2a-rust-light); }

/* ==========================================================================
 * IBC-tote callout (KD 0 keyword hook)
 * ========================================================================== */
.a2a-ibc {
  background: var(--a2a-tank);
  color: var(--a2a-ivory);
  padding: 32px;
  border-radius: 4px;
  margin: 32px 0;
  display: grid;
  gap: 16px;
  border-left: 4px solid var(--a2a-rust);
}
.a2a-ibc h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 24px;
  margin: 0;
  color: var(--a2a-ivory);
}
.a2a-ibc__cost {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--a2a-rust-light);
  font-size: 14px;
}
.a2a-ibc a.a2a-btn {
  display: inline-block;
  background: var(--a2a-rust);
  color: var(--a2a-ivory);
  padding: 10px 18px;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
  width: max-content;
}
.a2a-ibc a.a2a-btn:hover { background: var(--a2a-rust-light); }

/* ==========================================================================
 * Card grids used across patterns
 * ========================================================================== */
.a2a-card {
  background: var(--a2a-cream);
  border: 1px solid var(--a2a-vellum);
  border-radius: 4px;
  padding: 24px;
  transition: transform 150ms ease-out, border-color 150ms ease-out;
}
.a2a-card:hover {
  transform: translateY(-4px);
  border-bottom: 4px solid var(--a2a-rust);
}
.a2a-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
  line-height: 1.2;
}
.a2a-card p { margin: 0 0 12px; font-size: 15px; }
.a2a-card__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  color: var(--a2a-slate);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.a2a-card a { color: var(--a2a-rust); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
 * Fish species card
 * ========================================================================== */
.a2a-species-card .a2a-latin {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  color: var(--a2a-slate);
  font-size: 14px;
  display: block;
  margin-bottom: 8px;
}

/* ==========================================================================
 * Kit review card
 * ========================================================================== */
.a2a-review-card {
  background: var(--a2a-cream);
  border: 1px solid var(--a2a-vellum);
  border-radius: 4px;
  padding: 24px;
  display: grid;
  gap: 12px;
}
.a2a-review-card__verdict {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--a2a-ink);
}
.a2a-review-card__cons {
  background: var(--a2a-vellum);
  padding: 12px 16px;
  border-left: 3px solid var(--a2a-amber);
  font-size: 14px;
}
.a2a-review-card__cons strong { font-weight: 700; color: var(--a2a-slate-deep); }
.a2a-review-card .a2a-btn {
  display: inline-block;
  background: var(--a2a-rust);
  color: var(--a2a-ivory);
  padding: 10px 18px;
  border-radius: 3px;
  font-weight: 600;
  text-decoration: none;
  width: max-content;
}
.a2a-review-card__ftc {
  font-size: 12px;
  color: var(--a2a-slate);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* ==========================================================================
 * Utility: hide but keep for screen readers
 * ========================================================================== */
.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px; height: 1px;
  overflow: hidden;
  word-wrap: normal !important;
}

/* ==========================================================================
 * Overlay treatments (Tank Wash / Rust Foil / Cream Frame)
 * Applied to figures via CSS class
 * ========================================================================== */
.img-tank-wash { position: relative; overflow: hidden; isolation: isolate; }
.img-tank-wash img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-tank-wash::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30,58,82,0.35) 0%, rgba(30,58,82,0.75) 100%);
  pointer-events: none;
  z-index: 1;
}

.img-rust-foil { position: relative; overflow: hidden; isolation: isolate; }
.img-rust-foil img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.03) saturate(0.95); }
.img-rust-foil::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(196,90,44,0.18) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

.img-cream-frame {
  padding: 12px;
  background: var(--a2a-cream);
  border: 1px solid var(--a2a-vellum);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(27,31,36,0.06);
  display: inline-block;
}
.img-cream-frame img { width: 100%; height: auto; display: block; border-radius: 2px; }

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
  .a2a-card { transition: none; }
  .a2a-card:hover { transform: none; }
}