/* ============================================================================
   Walk Interview Jobs - shared site theme
   Loads AFTER each page's own stylesheet and after homepage.css, which is the
   design system. This file does two jobs:
     1. retints the legacy palettes (style.css, premium.css) to the site theme
     2. normalises the legacy layout components so every page matches the shell
   Add new pages by reusing the shell markup - no new CSS needed.
   ========================================================================= */

/* ---- 1. one palette for every stylesheet on the page --------------------- */
:root{
  --navy:#20496e; --blue:#2c6ea1; --blue2:#20496e; --sky:#eef4f8;
  --ink:#233646; --text:#233646; --muted:#61717e; --line:#e2e8ed;
  --canvas:#f4f6f8; --green:#348359; --red:#b4514f; --amber:#8a6532;
  --lime:#65a18c; --white:#fff;
  --shadow:0 6px 18px rgba(32,73,110,.06);
  --radius:4px;
}
body{background:#f4f6f8;color:var(--ink);font:15px/1.75 'Segoe UI',Arial,sans-serif}

/* ---- 2. site shell ------------------------------------------------------ */
.site{max-width:1240px;background:#fff;margin:0 auto;box-shadow:0 0 0 1px #e8edf1}
.masthead-note{display:none}                    /* retired from the header */
.topbar{display:none}                           /* legacy announcement strip */
.page-layout.single{grid-template-columns:minmax(0,1fr)}
.page-layout>main{min-width:0}
.page-head{margin-bottom:26px}
.page-head p{font-size:14px;color:#63727e;margin-top:12px;max-width:72ch}

/* legacy width/padding wrappers: the shell already provides both */
.page-layout .container{width:auto;max-width:100%;margin:0}
.page-layout .section{padding:0 0 32px}
.page-layout .section:first-child{padding-top:0}

/* ---- 3. legacy components restyled to the theme ------------------------- */
.page-layout .panel,.page-layout .card,.page-layout .explorer-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:none}
.page-layout .panel h2,.page-layout .card h2{font-size:19px;letter-spacing:-.3px}
.page-layout .split{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,.8fr);gap:28px}
.page-layout .grid{gap:16px}

.page-layout .btn,.page-layout .button,.page-layout .nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:3px;padding:11px 15px;background:var(--blue);color:#fff;
  font-size:12px;font-weight:600;line-height:1.4;min-height:40px;cursor:pointer;text-decoration:none}
.page-layout .btn:hover,.page-layout .button:hover{background:#245c88;text-decoration:none}
.page-layout .btn.outline,.page-layout .btn.ghost,.page-layout .btn.secondary{
  background:#f2f6f9;color:#365e7d;border:1px solid #dde6ee}
.page-layout .btn.outline:hover{background:#e9f0f5}

.page-layout .page-hero,.page-layout .hero{
  background:#eef3f7;border:1px solid #dde7ee;border-radius:var(--radius);
  padding:26px 24px;margin-bottom:26px;color:var(--ink)}
.page-layout .hero h1,.page-layout .page-hero h1,
.page-layout .hero p,.page-layout .page-hero p{color:inherit}
.page-layout .hero .eyebrow,.page-layout .page-hero .eyebrow{color:#397b9f}

.page-layout .notice,.page-layout .warning,.page-layout .success{
  border-radius:var(--radius);padding:16px 18px;font-size:13px;line-height:1.7;margin:16px 0}
.page-layout .notice{background:#f4f9fc;border:1px solid #d8e6ef;color:#3d5c72}
.page-layout .warning{background:#fff8eb;border:1px solid #eee0c4;border-left:4px solid #ceab69;color:#7b6038}
.page-layout .success{background:#f4faf6;border:1px solid #d6e9df;color:#365c45}

.page-layout table{width:100%;border-collapse:collapse;font-size:13px}
.page-layout th,.page-layout td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left}
.page-layout th{background:#f5f8fa;color:#40596d;font-weight:600;font-size:12px}

/* article / guide prose - shared by every text page */
.prose h2{font-size:22px;margin:32px 0 12px}
.prose h3{font-size:16px;margin:24px 0 8px}
.prose p,.prose li{font-size:14px;color:#5f707e;line-height:1.85}
.prose ul,.prose ol{padding-left:20px;margin:12px 0}
.prose li{margin:6px 0}
.prose>*:first-child{margin-top:0}

/* ---- 4. footer ---------------------------------------------------------- */
.site>footer{border-top:1px solid var(--line);background:#f8fafb;padding:28px 32px;
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px}
.site>footer .footer-brand{font-size:18px;font-weight:650;color:var(--navy)}
.site>footer>div{display:flex;gap:20px;font-size:11px;align-items:center;flex-wrap:wrap}
.site>footer p{flex-basis:100%;font-size:10px;color:#738593}

/* ---- 5. responsive ------------------------------------------------------ */
@media(max-width:1000px){
  .page-layout .split{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media(max-width:720px){
  .site{box-shadow:none}
  .page-layout .panel,.page-layout .card{padding:16px}
  .page-layout .page-hero,.page-layout .hero{padding:20px 16px}
  .page-layout .btn,.page-layout .button{width:100%}
  .page-layout .table-scroll,.page-layout .table-wrap{overflow-x:auto}
  .prose h2{font-size:20px}
}

/* ---- 6. specificity fixes over the legacy stylesheets -------------------- */
.masthead .brand .brand-mark{color:#fff}          /* style.css .brand span wins otherwise */
.masthead .brand .brand-mark>span{color:#fff;font-size:0;background:#65a18c}
.masthead .brand .brand-mark>span::before{content:"\2197";font-size:12px;line-height:1}
.masthead .brand>span{color:#20496e}
.masthead .brand b{color:#378bb3}
.masthead .brand small{color:#6d8293}
.navigation a{color:#fff}
.navigation .active{background:#153b5c}
.site>footer a{color:#3a6c92}

/* ---- 7. page heroes: one navy treatment for the dark variants ------------ */
.page-layout .career-hero,.page-layout .hero.hero-premium,.page-layout .hero{
  background:linear-gradient(135deg,#20496e 0%,#2c6ea1 100%)!important;
  border-radius:var(--radius);border:0;padding:34px 30px;margin-bottom:28px;color:#fff}
.page-layout .career-hero h1,.page-layout .hero h1{color:#fff;margin-bottom:14px}
.page-layout .career-hero em{color:#a9d6c6;font-style:italic}
.page-layout .career-hero p,.page-layout .hero p{color:#d5e3ee}
.page-layout .career-hero .btn{background:#fff;color:#20496e}
.page-layout .career-hero .btn:hover{background:#eaf1f6}
.page-layout .career-hero-card{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius)}
.page-layout .jobs-hero{background:#eef3f7;border:1px solid #dde7ee;border-radius:var(--radius);padding:30px 26px;margin-bottom:26px}

/* ---- 8. mobile safety: nothing may push the page sideways ---------------- */
@media(max-width:720px){
  .page-layout input,.page-layout select,.page-layout textarea,.page-layout img{max-width:100%;min-width:0}
  .page-layout .grid,.page-layout [class*="-grid"]{grid-template-columns:1fr}
  .page-layout pre,.page-layout code{overflow-x:auto;max-width:100%}
}
/* cv-builder keeps its file input visually hidden behind a styled control */
.page-layout .photo-control input[type=file]{position:absolute;width:1px;height:1px;min-width:0;opacity:0}