/*!
 * AGFOCERT Design System — component & layout styles (static)
 * Plain-CSS port of the React component library, for use by
 * shortcodes, block patterns and theme templates.
 * Requires agfocert.css (tokens) to be loaded first.
 */

/* ============================================================
   Buttons
   ============================================================ */
.agfo-btn {
  --_bg: var(--color-primary);
  --_fg: var(--color-on-primary);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.005em;
  line-height: 1;
  border: var(--border-hairline) solid var(--_bd);
  border-radius: var(--radius-md);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.agfo-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.agfo-btn:active { transform: translateY(1px); }
.agfo-btn[disabled], .agfo-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.agfo-btn--sm { font-size: var(--text-sm); padding: 0.5rem 0.875rem; }
.agfo-btn--md { font-size: var(--text-body); padding: 0.6875rem 1.25rem; }
.agfo-btn--lg { font-size: 1.125rem; padding: 0.875rem 1.75rem; }
.agfo-btn--full { width: 100%; }
.agfo-btn__icon { display: inline-flex; }
.agfo-btn__icon svg { width: 1.15em; height: 1.15em; display: block; }

.agfo-btn--primary { --_bg: var(--color-primary); --_fg: var(--color-on-primary); }
.agfo-btn--primary:hover { --_bg: var(--color-primary-hover); }
.agfo-btn--primary:active { --_bg: var(--color-primary-active); }
.agfo-btn--accent { --_bg: var(--color-accent); --_fg: var(--color-on-accent); }
.agfo-btn--accent:hover { --_bg: var(--color-accent-hover); }
.agfo-btn--accent:active { --_bg: var(--color-accent-active); }
.agfo-btn--accent:focus-visible { box-shadow: var(--shadow-focus-accent); }
.agfo-btn--secondary { --_bg: transparent; --_fg: var(--color-primary); --_bd: var(--color-border-strong); }
.agfo-btn--secondary:hover { --_bg: var(--navy-50); --_bd: var(--color-primary); }
.agfo-btn--ghost { --_bg: transparent; --_fg: var(--color-primary); --_bd: transparent; }
.agfo-btn--ghost:hover { --_bg: var(--navy-50); }
.agfo-btn--link { --_bg: transparent; --_fg: var(--color-text-link); --_bd: transparent; padding-left: 0; padding-right: 0; border-radius: var(--radius-xs); }
.agfo-btn--link:hover { --_fg: var(--color-text-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.agfo-btn--on-dark.agfo-btn--secondary { --_fg: #fff; --_bd: rgba(255,255,255,0.4); }
.agfo-btn--on-dark.agfo-btn--secondary:hover { --_bg: rgba(255,255,255,0.08); --_bd: #fff; }
.agfo-btn--on-dark.agfo-btn--ghost { --_fg: #fff; }
.agfo-btn--on-dark.agfo-btn--ghost:hover { --_bg: rgba(255,255,255,0.10); }

/* ============================================================
   Badges — tones map to the certification lifecycle
   ============================================================ */
.agfo-badge {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--font-display); font-weight: var(--fw-bold); line-height: 1;
  border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap;
}
.agfo-badge--sm { font-size: 0.6875rem; padding: 0.25rem 0.5rem; letter-spacing: 0.02em; }
.agfo-badge--md { font-size: 0.75rem; padding: 0.3125rem 0.6875rem; letter-spacing: 0.01em; }
.agfo-badge--lg { font-size: 0.8125rem; padding: 0.4375rem 0.8125rem; }
.agfo-badge--square { border-radius: var(--radius-sm); }
.agfo-badge__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }
.agfo-badge--soft.t-neutral   { background: var(--ink-100); color: var(--ink-700); }
.agfo-badge--soft.t-navy      { background: var(--navy-100); color: var(--navy-700); }
.agfo-badge--soft.t-accent    { background: var(--red-100); color: var(--red-700); }
.agfo-badge--soft.t-valid     { background: var(--color-valid-soft); color: var(--green-600); }
.agfo-badge--soft.t-pending   { background: var(--color-pending-soft); color: var(--amber-600); }
.agfo-badge--soft.t-suspended { background: var(--color-suspended-soft); color: var(--red-700); }
.agfo-badge--soft.t-expired   { background: var(--color-expired-soft); color: var(--ink-600); }
.agfo-badge--solid.t-neutral   { background: var(--ink-700); color: #fff; }
.agfo-badge--solid.t-navy      { background: var(--navy-800); color: #fff; }
.agfo-badge--solid.t-accent    { background: var(--red-500); color: #fff; }
.agfo-badge--solid.t-valid     { background: var(--green-500); color: #fff; }
.agfo-badge--solid.t-pending   { background: var(--amber-500); color: #fff; }
.agfo-badge--solid.t-suspended { background: var(--red-500); color: #fff; }
.agfo-badge--solid.t-expired   { background: var(--ink-400); color: #fff; }
.agfo-badge--outline { background: transparent; }
.agfo-badge--outline.t-neutral   { border-color: var(--ink-300); color: var(--ink-700); }
.agfo-badge--outline.t-navy      { border-color: var(--navy-300); color: var(--navy-700); }
.agfo-badge--outline.t-accent    { border-color: var(--red-300); color: var(--red-700); }
.agfo-badge--outline.t-valid     { border-color: var(--green-500); color: var(--green-600); }
.agfo-badge--outline.t-pending   { border-color: var(--amber-500); color: var(--amber-600); }
.agfo-badge--outline.t-suspended { border-color: var(--red-400); color: var(--red-700); }
.agfo-badge--outline.t-expired   { border-color: var(--ink-300); color: var(--ink-600); }

/* ============================================================
   Stat — big-number statistic
   ============================================================ */
.agfo-stat { display: flex; flex-direction: column; gap: 0.35rem; }
.agfo-stat__value {
  font-family: var(--font-display); font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tighter); line-height: 1; color: var(--color-primary);
  display: flex; align-items: baseline; gap: 0.1em;
}
.agfo-stat--sm .agfo-stat__value { font-size: 2rem; }
.agfo-stat--md .agfo-stat__value { font-size: 2.75rem; }
.agfo-stat--lg .agfo-stat__value { font-size: 3.5rem; }
.agfo-stat__suffix { font-size: 0.5em; font-weight: var(--fw-bold); color: var(--color-accent); }
.agfo-stat__label { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.4; }
.agfo-stat--on-dark .agfo-stat__value { color: #fff; }
.agfo-stat--on-dark .agfo-stat__label { color: var(--navy-300); }
.agfo-stat--rule { border-top: 2px solid var(--color-accent); padding-top: 0.85rem; }

/* ============================================================
   Alert
   ============================================================ */
.agfo-alert {
  display: flex; gap: var(--space-3); align-items: flex-start;
  border: 1px solid var(--color-border); border-left-width: 4px;
  border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); font-family: var(--font-body);
}
.agfo-alert__icon { flex: none; display: inline-flex; margin-top: 1px; }
.agfo-alert__icon svg { width: 20px; height: 20px; display: block; }
.agfo-alert__body { display: flex; flex-direction: column; gap: 2px; }
.agfo-alert__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-body); color: var(--color-text); }
.agfo-alert__msg { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
.agfo-alert--info    { background: var(--navy-50);  border-color: var(--navy-200); border-left-color: var(--navy-600); }
.agfo-alert--info    .agfo-alert__icon { color: var(--navy-600); }
.agfo-alert--success { background: var(--color-valid-soft); border-color: #BCE0CB; border-left-color: var(--green-500); }
.agfo-alert--success .agfo-alert__icon { color: var(--green-600); }
.agfo-alert--warning { background: var(--color-pending-soft); border-color: #F0DEAE; border-left-color: var(--amber-500); }
.agfo-alert--warning .agfo-alert__icon { color: var(--amber-600); }
.agfo-alert--danger  { background: var(--red-50); border-color: var(--red-200); border-left-color: var(--red-500); }
.agfo-alert--danger  .agfo-alert__icon { color: var(--red-600); }

/* ============================================================
   Card
   ============================================================ */
.agfo-card {
  background: var(--color-surface); border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--color-border); overflow: hidden;
}
.agfo-card--pad-sm { padding: var(--space-4); }
.agfo-card--pad-md { padding: var(--space-6); }
.agfo-card--pad-lg { padding: var(--space-8); }
.agfo-card--flat { box-shadow: none; }
.agfo-card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.agfo-card--floating { box-shadow: var(--shadow-lg); border-color: transparent; }
.agfo-card--tint { background: var(--color-surface-tint); }
.agfo-card--brand { background: var(--color-surface-brand); border-color: transparent; color: var(--color-text-on-brand); }
.agfo-card--top-rule { border-top: 3px solid var(--color-accent); }
.agfo-card--interactive { transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); cursor: pointer; }
.agfo-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-border-strong); }

/* ============================================================
   Service card
   ============================================================ */
.agfo-svc {
  display: flex; flex-direction: column; gap: var(--space-4);
  background: var(--color-surface); border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
a.agfo-svc:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--color-border-strong); }
a.agfo-svc:hover .agfo-svc__arrow { transform: translateX(3px); color: var(--color-accent); }
a.agfo-svc:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.agfo-svc__icon { width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--color-surface-tint); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; }
.agfo-svc__icon svg { width: 26px; height: 26px; display: block; }
.agfo-svc--accent .agfo-svc__icon { background: var(--red-50); color: var(--color-accent); }
.agfo-svc__title { font-family: var(--font-display); font-size: var(--text-h4); font-weight: var(--fw-bold); color: var(--color-text); margin: 0; }
.agfo-svc__desc { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-muted); margin: 0; }
.agfo-svc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.agfo-svc__tag { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-subtle); background: var(--color-surface-subtle); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 7px; }
.agfo-svc__foot { margin-top: auto; display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--color-primary); }
.agfo-svc__arrow { display: inline-flex; transition: transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.agfo-svc__arrow svg { width: 16px; height: 16px; display: block; }

/* ============================================================
   Form fields (input, textarea, select, checkbox)
   ============================================================ */
.agfo-field { display: flex; flex-direction: column; gap: 0.375rem; font-family: var(--font-body); }
.agfo-field__label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.agfo-field__req { color: var(--color-accent); margin-left: 2px; }
.agfo-field__hint { font-size: var(--text-xs); color: var(--color-text-subtle); }
.agfo-field__error { font-size: var(--text-xs); color: var(--red-600); font-weight: var(--fw-medium); }
.agfo-input, .agfo-textarea, .agfo-select {
  width: 100%; font-family: var(--font-body); font-size: var(--text-body); color: var(--color-text);
  background: var(--color-surface); border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-md); padding: 0.625rem 0.875rem;
  transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.agfo-textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.agfo-input::placeholder, .agfo-textarea::placeholder { color: var(--ink-400); }
.agfo-input:hover, .agfo-textarea:hover, .agfo-select:hover { border-color: var(--ink-400); }
.agfo-input:focus, .agfo-textarea:focus, .agfo-select:focus { outline: none; border-color: var(--navy-500); box-shadow: var(--shadow-focus); }
.agfo-input:disabled, .agfo-select:disabled { background: var(--ink-50); color: var(--ink-400); cursor: not-allowed; }
.agfo-input--error { border-color: var(--red-400) !important; }
.agfo-select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7184' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 18px; }

/* ============================================================
   Layout — sections, containers, grids
   ============================================================ */
.agfo-section { padding-block: var(--space-16); }
.agfo-section--tight { padding-block: var(--space-12); }
.agfo-section--subtle { background: var(--color-surface-subtle); }
.agfo-section--tint { background: var(--color-surface-tint); }
.agfo-section--navy { background: var(--color-surface-brand); color: #fff; }
.agfo-section--navy-deep { background: var(--color-surface-brand-deep); color: #fff; }
.agfo-section--navy h1, .agfo-section--navy h2, .agfo-section--navy h3,
.agfo-section--navy-deep h1, .agfo-section--navy-deep h2, .agfo-section--navy-deep h3 { color: #fff; }

.agfo-grid { display: grid; gap: var(--space-5); }
.agfo-grid-2 { grid-template-columns: repeat(2, 1fr); }
.agfo-grid-3 { grid-template-columns: repeat(3, 1fr); }
.agfo-grid-4 { grid-template-columns: repeat(4, 1fr); }

.agfo-section-head { max-width: 680px; margin-bottom: var(--space-8); }
.agfo-section-head--center { margin-inline: auto; text-align: center; }
.agfo-section-head h2 { font-size: var(--text-h2); margin-top: var(--space-3); }
.agfo-section-head p { font-size: var(--text-lead); line-height: 1.6; color: var(--color-text-muted); margin-top: var(--space-3); }
.agfo-section--navy .agfo-section-head p, .agfo-section--navy-deep .agfo-section-head p { color: var(--color-text-on-brand); }

/* ============================================================
   Hero
   ============================================================ */
.agfo-hero { background: var(--color-surface-brand); color: #fff; position: relative; overflow: hidden; }
.agfo-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(rgba(255,255,255,0.10) 1px, transparent 1px);
  background-size: 22px 22px;
}
.agfo-hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-10); align-items: center; padding-block: var(--space-16); }
.agfo-hero__title { font-size: var(--text-display); color: #fff; margin: var(--space-4) 0 0; letter-spacing: var(--ls-tighter); }
.agfo-hero__lead { font-size: var(--text-lead); line-height: 1.6; color: var(--color-text-on-brand); margin-top: var(--space-5); max-width: 33rem; }
.agfo-hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-7); flex-wrap: wrap; }
.agfo-hero__stats { display: flex; gap: var(--space-7); margin-top: var(--space-9); flex-wrap: wrap; }

/* Photo placeholder (replace with real <img>) */
.agfo-photo { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); min-height: 320px; display: flex; align-items: flex-end; justify-content: center; }
.agfo-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.agfo-photo__label { position: absolute; bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* ============================================================
   CTA band
   ============================================================ */
.agfo-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; }
.agfo-cta h2 { font-size: var(--text-h2); color: #fff; max-width: 36rem; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .agfo-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); }
  .agfo-grid-3, .agfo-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .agfo-grid-2, .agfo-grid-3, .agfo-grid-4 { grid-template-columns: 1fr; }
}