/* CAJ411 Cross‑Compat — compat.css
   Opinionated normalize + form hardening + grid→flex fallback.
   Brand defaults: blue #004aad on white.
*/

/* 1) Base Reset */
:root{
  --brand:#004aad;
  --ink:#0a0a0a;
  --muted:#546170;
  --bg:#ffffff;
  --line:#e6ebf5;
  --radius:10px;
  --vh: 1vh; /* updated by JS for mobile */
}
*{box-sizing:border-box}
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
button,[type=button],[type=submit]{cursor:pointer}

/* 2) Typography */
.caj411cc h1,.caj411cc h2,.caj411cc h3{line-height:1.2;margin:0 0 .6em}
.caj411cc p{margin:.6em 0}

/* 3) Container utility (opt-in if needed) */
.caj411cc .wrap{max-width:1100px;margin:0 auto;padding:16px}

/* 4) Card & Panel */
.caj411cc .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 1px 2px rgba(0,0,0,.04)}
.caj411cc .card>.pad{padding:16px}

/* 5) Buttons */
.caj411cc .btn{display:inline-block;padding:12px 18px;border-radius:8px;border:1px solid transparent;font-weight:600;text-align:center}
.caj411cc .btn.primary{background:var(--brand);color:#fff}
.caj411cc .btn.primary:hover{filter:brightness(.95)}
.caj411cc .btn.ghost{background:#fff;border-color:var(--brand);color:var(--brand)}

/* 6) Forms — normalize inputs */
.caj411cc form{width:100%;max-width:var(--form-max, 100%)}
.caj411cc label{display:block;font-weight:600;margin:10px 0 6px}
.caj411cc input, .caj411cc select, .caj411cc textarea{
  width:100%;padding:12px 14px;border:1px solid #cfd6e4;border-radius:8px;background:#fff;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  font-size:16px;line-height:1.3; color:#111;
}
.caj411cc input[type=checkbox], .caj411cc input[type=radio]{width:auto;display:inline-block;margin-right:8px}
.caj411cc .help{font-size:12px;color:#555;margin-top:4px}
.caj411cc .row{display:grid;gap:12px;grid-template-columns:repeat(12,1fr)}
.caj411cc .col-6{grid-column:span 6}
.caj411cc .col-12{grid-column:span 12}

/* 7) Grid → Flex fallback */
@supports not (display: grid){
  .caj411cc .row{display:flex;flex-wrap:wrap}
  .caj411cc .col-6{flex:0 0 50%;padding-right:12px}
  .caj411cc .col-12{flex:0 0 100%}
}

/* 8) Reduce motion, safer focus */
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
.caj411cc :focus{outline:2px solid #7aa7ff;outline-offset:2px}

/* 9) Mobile viewport height fix */
.caj411cc .vh-100{height:calc(var(--vh, 1vh) * 100)}

/* 10) Limit one form (hide duplicates if page builder duplicated blocks) */
body.caj411cc-limit-one-form .ff-el-form:not(:first-of-type),
body.caj411cc-limit-one-form form[id^="wpforms-"]:not(:first-of-type),
body.caj411cc-limit-one-form .wpcf7 form:not(:first-of-type){
  display:none !important;
}

/* 11) Blue theme accents inside Shadow DOM scope */
:host([data-theme="blue"]) .btn.primary{background:var(--brand)}
:host([data-theme="blue"]) a{color:var(--brand)}

/* 12) Safe table styling for job boards */
.caj411cc table{width:100%;border-collapse:collapse}
.caj411cc th, .caj411cc td{padding:10px;border-bottom:1px solid var(--line);text-align:left}
.caj411cc thead th{background:#f6f8fc;font-weight:700}

/* Optional utility for "View Details" buttons */
.caj411cc .view-btn{display:inline-block;width:140px;height:38px;line-height:38px;text-align:center;background:#004aad;color:#fff;border-radius:6px}
.caj411cc .view-btn:hover{filter:brightness(.95)}