/* ==========================================================================
   WBF — People Finder
   ========================================================================== */

/* --- Tokens --- */
:root{
  --wbf-ink:#111;
  --wbf-muted:#5a6b66;
  --wbf-bg:#f6f7f8;
  --wbf-surface:#fff;

  --wbf-green:#0c5241;
  --wbf-accent:#146f84;

  --wbf-border:rgba(0,0,0,.12);
  --wbf-ring:rgba(20,111,132,.35);

  --radius:12px;
  --shadow:0 10px 30px rgba(0,0,0,.10);
  --shadow-soft:0 2px 12px rgba(0,0,0,.06);

  --grad:linear-gradient(118deg,#07342b 0%,#0d524c 32%,#146f84 64%,#2a88a6 100%);
}

/* --- Base --- */
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--wbf-bg);
  color:var(--wbf-ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* --- Neutralize legacy Bootstrap spacing --- */
.container,.container-fluid,.row,[class^="col-"],[class*=" col-"]{margin:0;padding:0;border:0}
.container-fluid.padding{max-width:980px;margin:32px auto;padding:0 20px}

/* --- Header/intro block --- */
.bgblue{
  background:var(--grad);
  color:#fff;
  padding:56px 48px 40px; /* generous top / sides / bottom */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin:0 0 16px 0;
}
.bgblue a{
  color:#c7f3e7;
  text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.35);
}
.bgblue a:hover{color:#fff;border-bottom-color:#fff}
.bgblue p{color:#fff;opacity:.9;margin:10px auto 0;max-width:60ch;text-align:center;line-height:1.45}

/* --- Typography --- */
h3.people-finder-top{color:var(--wbf-green);margin:0 0 10px;font-size:1.25rem;font-weight:700}
label{display:inline-block;font-weight:600;letter-spacing:.2px;margin:4px 0 0 14px}

/* --- Layout of field rows inside the green block --- */
.bgblue .row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 16px;           /* row-gap / column-gap */
  padding-inline:12px;     /* inner gutters */
}
.bgblue .row + .row{margin-top:22px}

/* --- Inputs/selects --- */
.bgblue label+span input[type="text"],
.bgblue label+span select{margin-left:8px}

input[type="text"],select{
  width:100%;
  max-width:360px;         /* offcanvas-friendly width */
  display:inline-block;
  padding:10px 12px;
  border:1px solid var(--wbf-border);
  border-radius:10px;
  background:#fff;
  color:var(--wbf-ink);
  outline:none;
  transition:border-color .15s,box-shadow .15s;
  margin-top:10px;         /* pulls off top edge */
  margin-inline:8px;       /* side breathing */
}
input[type="text"]::placeholder{color:#8a9591}
input[type="text"]:focus,select:focus{
  border-color:var(--wbf-accent);
  box-shadow:0 0 0 3px var(--wbf-ring);
}
.bgblue select{margin-bottom:18px} /* space under Country */

/* --- Buttons --- */
.bluebutton,
input[type="button"].bluebutton,
input[type="reset"].bluebutton{
  appearance:none;
  display:inline-block;
  border:0;
  background:var(--wbf-green);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  margin:12px 8px 0 0;
  box-shadow:var(--shadow-soft);
  transition:transform .08s,filter .15s,background .15s;
}
.bluebutton:hover{filter:brightness(1.04)}
.bluebutton:active{transform:translateY(1px)}
.bluebutton:focus-visible{outline:3px solid var(--wbf-ring)}
input[type="reset"].bluebutton{background:var(--wbf-accent)}
.bgblue .center{margin-top:28px;text-align:center}

/* --- Table skin (if results appear) --- */
.table{
  width:100%;
  border-collapse:collapse;
  background:var(--wbf-surface);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.table th,.table td{border-bottom:1px solid var(--wbf-border);padding:12px 14px;font-size:.95rem}
.table th{text-transform:uppercase;letter-spacing:.3px;background:var(--wbf-green);color:#fff}
.table tr:last-child td{border-bottom:0}
.table a{color:var(--wbf-accent);text-decoration:none}
.table a:hover{text-decoration:underline}

/* --- A11y focus --- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--wbf-ring);
  outline-offset:2px;
}

/* --- Responsive --- */
@media (max-width:640px){
  .container-fluid.padding{padding:0 14px}
  .bgblue{padding:38px 24px 24px}
  .bgblue .row{padding-inline:8px;gap:10px 12px}
  input[type="text"],select{
    max-width:100%;
    margin-inline:6px;
    margin-bottom:14px;
  }
}
@media (max-width:520px){
  .bgblue{padding:34px 22px 22px}
  input[type="text"],select{max-width:280px}
}

/* --- Safety against leftover Bootstrap columns --- */
[class^="col-"],[class*=" col-"]{width:100%!important;padding:0!important}

/* === Center buttons + wider Family Name field === */

/* center the button row */
.bgblue .center {
  display: flex;
  justify-content: center;
  gap: 12px;           /* space between buttons */
  margin-top: 28px;
}

/* make the Family Name input wider */
.bgblue input[type="text"] {
  width: 90%;      /* fills most of the card */
}

/* on very small screens keep it safe */
@media (max-width: 520px){
  .bgblue input[type="text"] {
    max-width: 100%;
  }
}

/* === Fix: centered buttons + no overflow on small screens === */

/* center buttons robustly */
.bgblue .center{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 28px;
  text-align: initial; /* override old center text-align */
}

/* symmetric button margins */
.bluebutton,
input[type="button"].bluebutton,
input[type="reset"].bluebutton{
  margin: 12px 8px 0 8px;
}

/* desktop/tablet: Family Name fills ~90% of the card */
@media (min-width: 521px){
  .bgblue input[type="text"]{
    width: 90%;
    max-width: none;   /* let 90% rule apply */
  }
}

/* small offcanvas: prevent horizontal overflow */
@media (max-width: 520px){
  .bgblue input[type="text"],
  .bgblue select{
    width: 100%;
    max-width: 100%;
    margin-inline: 0;  /* remove side margins that caused overflow */
  }
}

/* === Hard fix: truly centered buttons + no overflow on small screens === */

/* kill previous center rules and center robustly */
.bgblue .center{
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  margin: 28px 0 0 !important;
  padding: 0 !important;
  text-align: initial !important;
}

/* neutralize any stray floats and keep symmetric spacing */
.bluebutton,
input[type="button"].bluebutton,
input[type="reset"].bluebutton{
  float: none !important;
  margin: 12px 8px 0 8px !important;
}

/* desktop/tablet: wider Family Name */
@media (min-width: 521px){
  .bgblue input[type="text"]{
    width: 90% !important;
    max-width: none !important;
    margin-inline: 0 !important;  /* avoid pushing past the sides */
  }
}

/* small screens/offcanvas: never overflow the green card */
@media (max-width: 520px){
  .bgblue input[type="text"],
  .bgblue select{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* === Compact fields + perfectly centered & aligned buttons === */

/* smaller card padding */
.bgblue{
  padding: 40px 32px 28px !important;
}

/* compact inputs/selects */
.bgblue input[type="text"],
.bgblue select{
  width: 80% !important;      /* less wide on desktop */
  max-width: 560px !important; /* hard cap so they don't look gigantic */
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  margin-inline: 0 !important;
}

/* tighten vertical rhythm */
.bgblue .row + .row{ margin-top: 16px !important; }

/* center helper paragraph still nicely */
.bgblue p{ max-width: 52ch !important; }

/* button row: true center, no drifting */
.bgblue ~ .center,
.bgblue .center{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 22px auto 0 !important;
  padding: 0 !important;
  text-align: initial !important;
}

/* buttons: equal height, aligned text */
.bluebutton,
input[type="button"].bluebutton,
input[type="reset"].bluebutton{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 12px 8px 0 8px !important;
  line-height: 1 !important;
}

/* mobile/offcanvas: full width, no overflow */
@media (max-width: 520px){
  .bgblue{ padding: 28px 20px 20px !important; }
  .bgblue input[type="text"],
  .bgblue select{
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* === Final fix: center buttons under the green card === */
.bgblue + .center{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 22px 0 0 !important;
  padding: 0 !important;
  text-align: initial !important;
  float: none !important;
  clear: both !important;
}

/* no floats on buttons */
.bgblue + .center .bluebutton,
.bgblue + .center input[type="button"].bluebutton,
.bgblue + .center input[type="reset"].bluebutton{
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 12px 8px 0 8px !important;
  line-height: 1 !important;
}

/* === Button row: target the real wrapper (.row.center) === */
.row.center{
  /* center for real, regardless of legacy styles */
  display: inline-flex !important;  /* inline so it sizes to content, then centered via text-align on parent */
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;    /* fallback if buttons render inline */
  float: none !important;
  clear: both !important;
}

/* buttons: no floats, same height, aligned text */
.row.center .bluebutton,
.row.center input[type="button"].bluebutton,
.row.center input[type="reset"].bluebutton{
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 5px 8px 0 8px !important;
  line-height: 1 !important;
}

/* field width tweaks: 90% on desktop, full on small, no overflow */
@media (min-width: 521px){
  .bgblue input[type="text"]{
    width: 90% !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }
}
@media (max-width: 520px){
  .bgblue input[type="text"],
  .bgblue select{
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}