/*
 Theme Name: Astra INP Child
 Template:   astra
 Version:    1.0.0
 Description: Child theme for ineedproduction.com
*/

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS — day + night
   Night-mode variables MUST live here so every page responds
   to the .inp-night class added by JavaScript.
   Per-page inline <style> blocks override these where needed.
═══════════════════════════════════════════════════════════════ */
:root {
  --paper:        #fbfaf6;
  --paper2:       #f3f0e7;
  --paper3:       #e9e4d3;
  --ink:          #13110d;
  --ink2:         #3a352b;
  --ink3:         #7a7363;
  --ink4:         #b3ac98;
  --line:         #d9d4c2;
  --lineSoft:     #e7e3d4;
  --accent:       #e3a008;
  --accentSoft:   #fbecbf;
  --accentInk:    #7a4f00;
  --signal-green: #3e9b3e;
  --signal-red:   #c0432d;
  --nav-bg:       rgba(251,250,246,0.97);
  --serif:        'Newsreader', 'Source Serif Pro', Georgia, serif;
  --sans:         'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, Menlo, monospace;
}

:root.inp-night {
  --paper:        #0e0d0a;
  --paper2:       #171510;
  --paper3:       #221f18;
  --ink:          #f5f2ea;
  --ink2:         #ccc6b6;
  --ink3:         #8a8272;
  --ink4:         #5a5448;
  --line:         #2e2b24;
  --lineSoft:     #262318;
  --accentSoft:   #2e2200;
  --accentInk:    #e3a008;
  --nav-bg:       rgba(14,13,10,0.97);
}

/* ═══════════════════════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════════════════════ */
html body.inp-page {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
  -webkit-font-smoothing: antialiased;
}
body.inp-page a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS — shared across all pages
═══════════════════════════════════════════════════════════════ */
.inp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; letter-spacing: -0.2px;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
  text-decoration: none; border: none;
  transition: background .15s, color .15s, border-color .15s;
}
.inp-btn--lg  { height: 52px; padding: 0 24px; font-size: 15px; }
.inp-btn--md  { height: 44px; padding: 0 18px; font-size: 14px; }
.inp-btn--sm  { height: 34px; padding: 0 14px; font-size: 13px; }
.inp-btn--primary   { background: var(--accent); color: var(--ink); }
.inp-btn--secondary { background: var(--ink);    color: var(--paper); }
.inp-btn--ghost     { background: transparent;   color: var(--ink);   border: 1.5px solid var(--line); }
.inp-btn--ghost-inv { background: transparent;   color: var(--paper) !important; border: 1.5px solid rgba(255,255,255,0.3); }

/* Night mode: --paper flips dark, so ghost-inv must use --ink (light) */
:root.inp-night .inp-btn--ghost-inv { color: var(--ink) !important; border-color: rgba(245,242,234,0.3); }

/* body a. specificity beats Astra's a { color } and a:hover { color:#602bb7 } */
body a.inp-btn--secondary   { color: var(--paper) !important; text-decoration: none; }
body a.inp-btn--ghost-inv   { color: var(--paper) !important; text-decoration: none; }
/* Hover states */
body a.inp-btn--primary:hover   { background: #13110d; color: #f5f2ea; text-decoration: none; }
body .inp-footer a.inp-btn--primary:hover { background: #f5f2ea; color: #13110d; text-decoration: none; }
body a.inp-btn--secondary:hover { background: var(--ink2);  color: var(--accent); text-decoration: none; }
body a.inp-btn--ghost:hover     { border-color: var(--ink); background: var(--paper2); color: var(--accent); text-decoration: none; }
body a.inp-btn--ghost-inv:hover { border-color: rgba(255,255,255,0.7); color: var(--accent); text-decoration: none; }
/* Night mode: ghost hovers → white fill, dark text (paper2 goes dark in night) */
:root.inp-night body a.inp-btn--ghost:hover     { background: #f5f2ea !important; color: #13110d !important; border-color: #f5f2ea !important; }
:root.inp-night body a.inp-btn--ghost-inv:hover { background: #f5f2ea !important; color: #13110d !important; border-color: #f5f2ea !important; }
/* --lg primary hover matches the nav button (cream fill / dark text) - dark mode only, light mode untouched */
:root.inp-night body a.inp-btn--primary.inp-btn--lg:hover { background: var(--ink) !important; color: var(--paper) !important; }

/* ═══════════════════════════════════════════════════════════════
   PRODUCER ON DUTY CARD — consistent across all pages
═══════════════════════════════════════════════════════════════ */
.inp-producer-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.inp-producer-avatar {
  width: 44px; height: 44px; border-radius: 22px;
  background: var(--paper3); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  position: relative; flex-shrink: 0;
}
.inp-producer-avatar img {
  width: 44px; height: 44px; border-radius: 22px;
  object-fit: cover; object-position: center top; display: block;
}
.inp-producer-avatar .avatar-status {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px; border-radius: 6px;
  background: var(--signal-green); border: 2px solid var(--paper);
  transition: background .3s;
}
.inp-producer-avatar .avatar-status--offline { background: var(--ink4); box-shadow: none; }
.inp-producer-name { font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--ink); }
.inp-producer-meta { font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-top: 2px; }

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
═══════════════════════════════════════════════════════════════ */
.inp-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--ink3); font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   NAV — logo hover lock
═══════════════════════════════════════════════════════════════ */
body a.inp-nav__logo:hover            { color: var(--ink) !important;    text-decoration: none !important; }
body a.inp-nav__logo:hover .logo-dot  { color: var(--accent) !important; }

/* ═══════════════════════════════════════════════════════════════
   NIGHT MODE — FORM ELEMENTS
   Prevents browser / Astra / GravityForms from rendering
   light inputs, labels, and selects on dark night-mode pages.
═══════════════════════════════════════════════════════════════ */
:root.inp-night input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
:root.inp-night textarea,
:root.inp-night select {
  background-color: var(--paper2) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
  color-scheme: dark;
}
:root.inp-night input::placeholder,
:root.inp-night textarea::placeholder {
  color: var(--ink3) !important;
  opacity: 1;
}

/* Chosen enhanced dropdown: keep the search box light to match the white results panel (dark mode only, light mode untouched) */
:root.inp-night .chosen-container .chosen-drop .chosen-search input[type="text"],
:root.inp-night .chosen-container .chosen-search input[type="text"] { background-color:#fff !important; color:#1a1a1a !important; border:1px solid #d0d0d0 !important; color-scheme:light !important; }

/* GF submit button: match the primary CTA (gold) buttons in dark mode - gold idle, cream-fill hover. Light mode keeps the ink/paper scheme. */
:root.inp-night .gform_wrapper .gform_footer input[type=submit],
:root.inp-night .gform_wrapper .gform_page_footer input[type=submit] { background: var(--accent) !important; color: var(--ink) !important; }
:root.inp-night .gform_wrapper .gform_footer input[type=submit]:hover,
:root.inp-night .gform_wrapper .gform_page_footer input[type=submit]:hover { background: var(--ink) !important; color: var(--paper) !important; }
:root.inp-night label,
:root.inp-night .gfield_label,
:root.inp-night legend.gfield_label,
:root.inp-night .gform-field-label,
:root.inp-night .gform_wrapper label,
:root.inp-night .gform_wrapper .gfield_label,
:root.inp-night .gform_wrapper legend.gfield_label,
:root.inp-night .gform_wrapper .gform-field-label {
  color: var(--ink2) !important;
}
:root.inp-night .gform_wrapper .gfield_required,
:root.inp-night .gform_wrapper .gfield_required span,
:root.inp-night .ginput_complex label {
  color: var(--ink3) !important;
}
:root.inp-night select option {
  background-color: var(--paper2);
  color: var(--ink);
}
:root.inp-night .paj-field-label { color: var(--ink2) !important; }
:root.inp-night .paj-field-label .req { color: var(--accent) !important; }

/* Gravity Forms consent line — injected after submit button on all forms */
.gform_wrapper .inp-gf-consent,
.inp-gf-consent {
  font-family: var(--mono) !important; font-size: 10px !important; color: var(--ink4) !important;
  line-height: 1.6 !important; margin-top: 10px !important;
}
.gform_wrapper .inp-gf-consent a,
.inp-gf-consent a { color: var(--ink3) !important; text-decoration: underline !important; }
.gform_wrapper .inp-gf-consent a:hover,
.inp-gf-consent a:hover { color: var(--ink2) !important; }