/*
Theme Name: Custodyne
Theme URI: https://custodyne.ca
Author: Rob Gjertsen
Author URI: https://custodyne.ca
Description: Marketing website for Custodyne (Custodyne Inc.) — Chain of Custody and certified media destruction for Managed Service Providers. Block theme, "Assay" brand direction. Self-hosted fonts; no third-party requests.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.0
Version: 1.2.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custodyne
*/

/* ==========================================================================
   Custodyne supplemental styles
   Block structure + theme.json tokens carry most of the design; this sheet
   handles the marketing-specific details the block editor can't express as
   cleanly (the wordmark lockup, the certificate exhibit, the audit-log panel,
   hover states, and the responsive collapse). Brand rules from the handoff:
   Wax is NEVER a marketing accent; Parchment only on document surfaces; serials
   in IBM Plex Mono; transitions <= 150ms; no scroll animation or parallax.
   ========================================================================== */

:root {
  --cd-ink: #1B2331; --cd-ink-deep: #141926; --cd-parchment: #F5F1E8;
  --cd-verdigris: #2F5D49; --cd-umber: #5F594D; --cd-body: #3A4048;
  --cd-rule: #D9D2C2; --cd-surface-0: #FAFAF8; --cd-surface-1: #FFFFFF;
  --cd-hairline: #E7E4DD; --cd-ink-text: #E9E6DC; --cd-ink-text-2: #9AA2AC;
  --cd-accent-destroyed: #D08770; --cd-accent-sealed: #6FAE93; --cd-wax: #7C2B2B;
  --cd-serif: 'Source Serif 4', Georgia, serif;
  --cd-sans: 'Public Sans', -apple-system, sans-serif;
  --cd-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Form controls honour their set width (prevents padding pushing 100%-width inputs past the viewport). */
input, select, textarea { box-sizing: border-box; max-width: 100%; }

/* Transitions: short, still brand — never longer than 150ms. */
a, .wp-element-button, .wp-block-button__link { transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out; }

/* Micro / kicker caps label (mono, letterspaced). */
.cd-kicker { font-family: var(--cd-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cd-umber); }
.cd-micro { font-family: var(--cd-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cd-umber); }
.cd-mono { font-family: var(--cd-mono); }

/* --- Header / nav ------------------------------------------------------- */
.cd-header { background: var(--cd-surface-0); border-bottom: 1px solid var(--cd-hairline); }
.cd-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; min-height: 68px; }
.cd-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.cd-lockup img, .cd-lockup svg { width: 26px; height: 26px; display: block; }
.cd-wordmark { font-family: var(--cd-serif); font-weight: 600; font-size: 16px; letter-spacing: 0.14em; color: var(--cd-ink); text-transform: uppercase; }

/* Tagline lockup — brand guide v1.1.0. The tagline is Public Sans caps at 0.305x the wordmark with
   0.31em tracking and NO terminal period; the padding-left offsets the trailing letter-space so the
   two lines align on the left. The guide's hard rule: the tagline may only accompany a wordmark of
   30px or more — below that the wordmark stands alone, which is why the site header does not carry
   it. In running body copy the line is sentence case WITH the period ("Every item leaves a
   record."); as a lockup it is caps without one. */
.cd-lockup--brand { align-items: flex-start; gap: 12px; }
.cd-lockup--brand svg, .cd-lockup--brand img { width: 34px; height: 34px; }
.cd-lockup-text { display: flex; flex-direction: column; }
.cd-lockup--brand .cd-wordmark { font-size: 30px; line-height: 1; }
.cd-tagline { font-family: var(--cd-sans); font-weight: 600; font-size: 9.2px; line-height: 1; letter-spacing: 0.31em; text-transform: uppercase; color: var(--cd-ink); margin-top: 10px; padding-left: 0.31em; }
/* Reversed lockup, for the Ink CTA band. */
.cd-lockup--inverse .cd-wordmark, .cd-lockup--inverse .cd-tagline { color: var(--cd-parchment); }
/* Companion certificate beneath the hero exhibit — the device's certificate from the same signature. */
.cd-cert--companion { margin-top: 14px; padding: 18px 20px; }
.cd-cert--companion h3 { font-size: 15px; margin: 6px 0 4px; }
.cd-cert--companion .cd-cert-brand { font-family: var(--cd-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cd-umber); }
.cd-nav { display: flex; align-items: center; gap: 26px; }
.cd-nav a { font-family: var(--cd-sans); font-weight: 500; font-size: 14px; color: var(--cd-body); text-decoration: none; }
.cd-nav a:hover { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 3px; }
.cd-actions--desktop { display: flex; align-items: center; gap: 18px; }
.cd-signin { font-family: var(--cd-sans); font-weight: 500; font-size: 14px; color: var(--cd-body); text-decoration: none; }
.cd-signin:hover { color: var(--cd-ink); }

/* Mobile disclosure menu — hidden on desktop, revealed below 900px. */
.cd-menu { display: none; position: relative; }
.cd-menu-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--cd-hairline); border-radius: 3px; background: var(--cd-surface-1); color: var(--cd-ink); }
.cd-menu-toggle::-webkit-details-marker { display: none; }
.cd-menu[open] .cd-menu-toggle { background: #F3F0E8; }
.cd-menu-panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 60; min-width: 244px; display: flex; flex-direction: column; padding: 10px; background: var(--cd-surface-0); border: 1px solid var(--cd-hairline); border-radius: 4px; box-shadow: 0 16px 34px -18px rgba(20,25,38,0.32); }
.cd-menu-panel a { padding: 11px 12px; font-family: var(--cd-sans); font-weight: 500; font-size: 15px; color: var(--cd-ink); text-decoration: none; border-radius: 3px; }
.cd-menu-panel a:hover { background: #F3F0E8; }
.cd-menu-panel .cd-menu-signin { border-top: 1px solid var(--cd-hairline); margin-top: 6px; padding-top: 14px; }
.cd-menu-panel .cd-menu-cta { margin-top: 10px; text-align: center; color: var(--cd-parchment); }
.cd-menu-panel .cd-menu-cta:hover { background: var(--cd-ink-deep); }

/* --- Buttons ------------------------------------------------------------ */
.wp-block-button.cd-btn .wp-block-button__link,
.cd-btn-primary { background: var(--cd-ink); color: var(--cd-parchment); border-radius: 3px; font-family: var(--cd-sans); font-weight: 600; font-size: 13.5px; padding: 11px 20px; text-decoration: none; display: inline-block; }
.wp-block-button.cd-btn .wp-block-button__link:hover, .cd-btn-primary:hover { background: var(--cd-ink-deep); }
.cd-btn-inverse .wp-block-button__link, .cd-btn-inverse { background: var(--cd-parchment); color: var(--cd-ink); border-radius: 3px; font-family: var(--cd-sans); font-weight: 600; font-size: 13.5px; padding: 11px 20px; text-decoration: none; display: inline-block; }
.cd-btn-inverse .wp-block-button__link:hover, .cd-btn-inverse:hover { background: #EDE7D8; }
.cd-textlink a, a.cd-textlink { font-family: var(--cd-sans); font-weight: 500; font-size: 14px; color: var(--cd-verdigris); text-decoration: none; }
.cd-textlink a:hover, a.cd-textlink:hover { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Hero --------------------------------------------------------------- */
.cd-hero { padding-top: 88px; padding-bottom: 64px; }
.cd-hero .wp-block-columns { align-items: center; gap: 56px; }
.cd-hero h1 { font-family: var(--cd-serif); font-weight: 600; font-size: clamp(36px, 5vw, 52px); line-height: 1.12; letter-spacing: -0.01em; color: var(--cd-ink); margin: 14px 0 0; }
.cd-hero .cd-lead { font-size: 17.5px; line-height: 1.65; color: var(--cd-body); margin: 20px 0 0; max-width: 34em; }
.cd-hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 28px; }

/* Standards strip */
.cd-standards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--cd-hairline); }
.cd-standards b { display: block; font-family: var(--cd-sans); font-weight: 600; font-size: 14px; color: var(--cd-ink); }
.cd-standards span { color: var(--cd-umber); font-size: 12.5px; }

/* Certificate exhibit (decorative proof; Parchment is allowed here). */
/* No rotation. The card originally carried transform: rotate(0.5deg) as a "document on a desk"
   touch, which worked when the hero held a single certificate. It fails badly now that two are
   stacked: the pair reads as crooked, and — the worse problem — a rotated element forces the
   browser to resample its text, so the type renders soft and smeared instead of crisp. Straight
   also suits the brand better; an unimpeachable record should not look casually tossed down. */
.cd-cert { background: var(--cd-parchment); border: 1px solid var(--cd-rule); border-radius: 0; padding: 26px; box-shadow: 0 18px 40px -24px rgba(27,35,49,0.35); color: var(--cd-ink); font-family: var(--cd-serif); }
.cd-cert .cd-cert-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--cd-rule); }
.cd-cert .cd-cert-brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--cd-serif); font-weight: 600; letter-spacing: 0.12em; font-size: 12px; }
.cd-cert .cd-cert-brand img { width: 18px; height: 18px; }
.cd-cert .cd-tenant-ph { font-family: var(--cd-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--cd-umber); border: 1px dashed var(--cd-rule); padding: 4px 8px; }
.cd-cert h3 { font-family: var(--cd-serif); font-weight: 600; font-size: 15px; margin: 16px 0 2px; letter-spacing: 0.02em; }
.cd-cert .cd-cert-no { font-family: var(--cd-mono); font-size: 13px; color: var(--cd-verdigris); }
.cd-cert dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 16px 0; font-size: 12.5px; }
.cd-cert dt { color: var(--cd-umber); }
.cd-cert dd { color: var(--cd-ink); margin: 0; }
.cd-cert .cd-cert-foot { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--cd-rule); margin-top: 12px; }
.cd-cert .cd-verified { font-size: 11.5px; color: var(--cd-verdigris); }
.cd-cert .cd-sig { border-bottom: 1px solid var(--cd-ink); width: 130px; height: 26px; margin: 8px 0 4px; }
.cd-cert .cd-stamp { text-align: right; }
.cd-cert .cd-stamp .cd-destroyed { font-family: var(--cd-mono); font-weight: 600; letter-spacing: 0.14em; color: var(--cd-wax); font-size: 15px; }
.cd-cert .cd-stamp .cd-date { font-family: var(--cd-mono); font-size: 11px; color: var(--cd-umber); }

/* --- How it works ------------------------------------------------------- */
.cd-band-white { background: var(--cd-surface-1); border-top: 1px solid var(--cd-hairline); border-bottom: 1px solid var(--cd-hairline); padding-top: 72px; padding-bottom: 72px; }
.cd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.cd-step { border: 1px solid var(--cd-hairline); border-radius: 0; background: var(--cd-surface-1); padding: 28px; }
.cd-step .cd-step-no { font-family: var(--cd-mono); font-weight: 500; font-size: 13px; color: var(--cd-verdigris); }
.cd-step h3 { font-family: var(--cd-serif); font-weight: 600; font-size: 18px; margin: 12px 0 8px; color: var(--cd-ink); }
.cd-step p { font-size: 14.5px; line-height: 1.6; color: var(--cd-body); margin: 0; }

/* --- Built for the audit ------------------------------------------------ */
.cd-audit { padding-top: 72px; padding-bottom: 72px; }
.cd-audit .wp-block-columns { gap: 48px; align-items: start; }
.cd-audit .cd-points p { font-size: 15px; line-height: 1.6; color: var(--cd-body); margin: 0 0 16px; }
.cd-audit .cd-points p b { color: var(--cd-ink); font-weight: 600; }
.cd-inkpanel { background: var(--cd-ink); color: var(--cd-ink-text); border-radius: 4px; padding: 24px; min-width: 0; }
/* Let the audit-log panel shrink so its <pre> scrolls internally rather than
   forcing page-wide horizontal scroll (grid children default to min-width:auto). */
.cd-audit .wp-block-columns > div { min-width: 0; }
.cd-inkpanel .cd-panel-head { font-family: var(--cd-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--cd-ink-text-2); text-transform: uppercase; margin-bottom: 12px; }
.cd-log { font-family: var(--cd-mono); font-size: 13px; line-height: 2.3; color: var(--cd-ink-text); white-space: pre; overflow-x: auto; }
.cd-log .cd-destroyed { color: var(--cd-accent-destroyed); }
.cd-log .cd-sealed { color: var(--cd-accent-sealed); }

/* --- CTA band ----------------------------------------------------------- */
.cd-cta { background: var(--cd-ink); color: var(--cd-parchment); text-align: center; padding: 72px 24px; }
.cd-cta img { width: 44px; height: 44px; margin: 0 auto 20px; }
.cd-cta h2 { font-family: var(--cd-serif); font-weight: 600; font-size: 34px; color: var(--cd-parchment); margin: 0 0 10px; }
.cd-cta p { color: var(--cd-ink-text-2); max-width: 34em; margin: 0 auto 24px; }

/* --- Footer ------------------------------------------------------------- */
.cd-footer { background: var(--cd-surface-0); border-top: 1px solid var(--cd-hairline); padding-top: 48px; padding-bottom: 48px; }
.cd-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.cd-footer .cd-foot-addr { font-family: var(--cd-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--cd-umber); margin-top: 12px; }
.cd-footer .cd-foot-col h4 { font-family: var(--cd-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cd-umber); margin: 0 0 10px; }
.cd-footer .cd-foot-col a { display: block; font-size: 14px; color: var(--cd-body); text-decoration: none; margin: 6px 0; }
.cd-footer .cd-foot-col a:hover { color: var(--cd-ink); text-decoration: underline; text-underline-offset: 3px; }

/* --- Document-styled surfaces (compliance exhibits, legal pages) -------- */
.cd-doc { background: var(--cd-parchment); border: 1px solid var(--cd-rule); border-radius: 0; padding: 32px; color: var(--cd-ink); font-family: var(--cd-serif); }
.cd-doc h2, .cd-doc h3 { font-family: var(--cd-serif); color: var(--cd-ink); }

/* --- Legal documents (privacy policy, terms of service) ----------------- */
/* A "draft pending review" caution bar. Deliberately NOT Wax — Wax is reserved
   for destroyed/final states, never a notice colour. Neutral parchment caution. */
.cd-draftbar { max-width: 800px; margin: 0 auto 22px; padding: 13px 16px; border: 1px solid var(--cd-rule); border-left: 3px solid var(--cd-umber); background: #EFE8D6; border-radius: 2px; font-family: var(--cd-sans); font-size: 13px; line-height: 1.55; color: var(--cd-ink); }
.cd-draftbar b { display: inline-block; font-family: var(--cd-mono); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; font-size: 11px; color: var(--cd-umber); }
.cd-legal { font-family: var(--cd-serif); }
.cd-legal .cd-legal-meta { font-family: var(--cd-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--cd-umber); margin: 0 0 4px; }
.cd-legal h1 { font-family: var(--cd-serif); font-weight: 600; font-size: 32px; line-height: 1.15; color: var(--cd-ink); margin: 6px 0 10px; }
.cd-legal .cd-legal-lead { font-size: 15.5px; line-height: 1.62; color: var(--cd-body); margin: 0 0 8px; }
.cd-legal h2 { font-family: var(--cd-serif); font-weight: 600; font-size: 20px; line-height: 1.25; color: var(--cd-ink); margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--cd-rule); }
.cd-legal h3 { font-family: var(--cd-serif); font-weight: 600; font-size: 15.5px; color: var(--cd-ink); margin: 18px 0 6px; }
.cd-legal p, .cd-legal li { font-size: 14.5px; line-height: 1.68; color: var(--cd-ink); }
.cd-legal p { margin: 0 0 12px; }
.cd-legal ul, .cd-legal ol { margin: 0 0 14px; padding-left: 22px; }
.cd-legal li { margin: 0 0 7px; }
.cd-legal a { color: var(--cd-verdigris); }
.cd-legal strong { font-weight: 600; }
/* Ungrounded facts the owner must confirm before publishing. */
.cd-legal .cd-ph { font-family: var(--cd-mono); font-size: 12px; background: #EDE4CF; border: 1px dashed var(--cd-rule); padding: 1px 5px; border-radius: 2px; color: var(--cd-umber); overflow-wrap: anywhere; }

/* --- Verify tool -------------------------------------------------------- */
.cd-verify-input { font-family: var(--cd-mono); font-size: 15px; letter-spacing: 0.04em; padding: 12px 14px; border: 1px solid var(--cd-hairline); border-radius: 3px; background: var(--cd-surface-1); width: 100%; }
.cd-result-found { border: 1px solid var(--cd-verdigris); background: #E4EDE7; border-radius: 3px; padding: 18px; }
.cd-result-none { border: 1px solid var(--cd-hairline); background: var(--cd-surface-1); border-radius: 3px; padding: 18px; color: var(--cd-body); }

/* --- Section rhythm ----------------------------------------------------- */
.cd-section { padding-top: 64px; padding-bottom: 64px; }
.cd-lead { font-size: 17px; line-height: 1.65; color: var(--cd-body); }

/* --- Responsive: single column below 900px ------------------------------ */
@media (max-width: 900px) {
  .cd-hero { padding-top: 56px; }
  .cd-hero .wp-block-columns { flex-wrap: wrap; gap: 32px; }
  .cd-standards, .cd-steps { grid-template-columns: 1fr; }
  .cd-audit .wp-block-columns { flex-wrap: wrap; }
  /* Swap the inline nav + actions for the disclosure menu. */
  .cd-nav--desktop, .cd-actions--desktop { display: none; }
  .cd-menu { display: block; }
  .cd-doc { padding: 22px 18px; }
  .cd-legal h1 { font-size: 27px; }
  .cd-foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  /* Collapse inline multi-column grids to a single column on phones. Attribute
     selectors match the inline style; !important is required to beat it. Covers
     the hero (1.1fr 1fr), two-up sections (1fr 1fr) and the pricing table (repeat). */
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(3"] { grid-template-columns: 1fr !important; }
}