/**
 * KYBREC Trust — Saath design layer.
 *
 * The templates carry their layout as inline styles (copied from the reference
 * design). This file holds only what inline styles cannot do: base typography,
 * :hover states, keyframes, and a few helpers. Responsive behaviour is driven by
 * the ported kindred.js (data-cols / data-stack / data-flexcol / data-hide-below).
 */

:root {
  --cream: #FBF5EC;
  --card: #FFFDF8;
  --forest: #2F5D45;
  --dark: #21392A;
  --terra: #D2603A;
  --terra-dark: #BE5230;
  --gold: #E5A23A;
  --ink: #34302A;
}

html, body { margin: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Hanken Grotesk', 'Noto Sans Devanagari', system-ui, sans-serif;
  overflow-x: hidden;
}

/* The base Underscores stylesheet (style.css) still loads first; make sure the
   body font wins over its defaults. */
.kyb-serif { font-family: 'Newsreader', 'Noto Serif Devanagari', serif; }

a { color: var(--forest); }

img { max-width: 100%; height: auto; }

/* Screen-reader-only, kept from the base theme for skip links. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

/* --- keyframes (ported from the Saath templates) ------------------------- */
@keyframes kndrFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes kndrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes kndrPop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

/* --- hover states (replace the templates' style-hover attribute) --------- */
.kyb-navlink:hover { background: #F2E8D8; color: var(--forest); }
.kyb-donate:hover { background: var(--terra-dark) !important; }
.kyb-cta1:hover { background: var(--terra-dark) !important; }
.kyb-cta2:hover { background: rgba(251, 245, 236, 0.22) !important; }
.kyb-cta-soft:hover { background: #EAF1E6 !important; }
.kyb-arrow:hover { background: rgba(251, 245, 236, 0.3) !important; }
.kyb-more:hover { color: var(--terra) !important; }
.kyb-lift { transition: opacity .7s ease, transform .25s ease; }
.kyb-lift:hover { transform: translateY(-3px); }
.kyb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -26px rgba(36, 59, 44, 0.4);
  border-color: #DCCFB8 !important;
}
.kyb-cta-light:hover { background: #FFEFDD !important; }
.kyb-cta-ghost:hover { background: rgba(255, 246, 236, 0.12) !important; }
.kyb-sub:hover { background: #F0B25A !important; }
.kyb-social:hover { background: var(--gold) !important; color: var(--dark) !important; }
.kyb-flink:hover { color: var(--gold) !important; }

/* Form focus, from the Saath contact/donate helmets. */
input:focus, select:focus, textarea:focus { border-color: var(--forest) !important; }

/* Placeholder shown by kyb_image() when a slot has no photo yet. */
.kyb-photo-placeholder {
  background: linear-gradient(135deg, #E8DCC6 0%, #D7C7AA 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.kyb-photo-placeholder span {
  font-size: 12.5px;
  font-weight: 600;
  color: #8A7B62;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  line-height: 1.4;
}