/* ============================================================
   The Beer Championships - shared stylesheet
   Single source of truth for the People Portal (and, post-competition,
   the Entry Portal). Brand tokens and Focal Maxi font match the entry
   portal's account/dashboard pages. Fonts load same-origin from ./fonts.
   ============================================================ */

@font-face { font-family:'Focal Maxi'; src:url('fonts/FocalMaxi-Light-Web.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Focal Maxi'; src:url('fonts/FocalMaxi-Regular-Web.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Focal Maxi'; src:url('fonts/FocalMaxi-Medium-Web.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Focal Maxi'; src:url('fonts/FocalMaxi-Bold-Web.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Focal Maxi'; src:url('fonts/FocalMaxi-Extrabold-Web.woff2') format('woff2'); font-weight:800; font-style:normal; font-display:swap; }

:root {
  --cream:#fff4e4; --orange:#f58d2d; --orange-dark:#da7227;
  --brown-dark:#321e10; --brown-darkest:#231810; --white:#ffffff;
  --error:#c0392b; --error-bold:#e74c3c; --success:#27ae60;
  --grey-light:#e8ddd0; --grey-mid:#b5a898;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  background:var(--cream); color:var(--brown-dark);
  font-family:'Focal Maxi', Arial, sans-serif; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
}

a { color:var(--orange-dark); }

/* ---------- Header ---------- */
.site-header {
  background:var(--brown-darkest); padding:8px 32px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,.3); min-height:56px;
}
.site-header .logo { display:flex; align-items:center; }
.site-header .logo img { height:44px; width:auto; display:block; }
.site-header nav { display:flex; align-items:center; gap:18px; }
.site-header nav a {
  color:var(--cream); text-decoration:none; font-size:.82rem;
  font-weight:600; opacity:.85; transition:opacity .2s;
}
.site-header nav a:hover { opacity:1; text-decoration:underline; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top:auto; background:var(--brown-darkest); color:var(--cream);
  padding:16px 32px; font-size:.72rem; text-align:center;
}
.site-footer a { color:var(--cream); }

/* ---------- Page wrap ---------- */
.page-wrap { width:100%; max-width:860px; margin:0 auto; padding:24px 24px 64px; flex:1; }
.page-wrap.narrow { max-width:460px; margin-top:48px; }

/* ---------- Card ---------- */
.card {
  background:var(--white); border:1px solid var(--grey-light);
  border-radius:8px; padding:28px 28px; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.card-title { font-size:1.25rem; font-weight:800; color:var(--brown-darkest); margin-bottom:4px; }
.card-subtitle { font-size:.84rem; color:var(--grey-mid); margin-bottom:20px; }

/* ---------- Form sections ---------- */
.form-section { padding:14px 0; border-top:1px solid var(--grey-light); }
.form-section:first-of-type { border-top:none; padding-top:4px; }
.form-section-title { font-size:.95rem; font-weight:700; color:var(--orange-dark); margin-bottom:12px; }
/* Collapsible sections (matches entry portal) */
.collapse { border:1px solid var(--grey-light); border-radius:6px; margin-bottom:14px; overflow:hidden; }
.collapse-head { background:var(--orange-dark); color:var(--cream); padding:10px 16px; font-size:.95rem; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none; }
.collapse-head.dark { background:var(--brown-darkest); }
.collapse-head .t { font-size:1rem; line-height:1; }
.collapse-body { padding:16px; }
.collapse-body.collapsed { display:none; }
.form-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:4px; }
.form-group { flex:1; min-width:140px; margin-bottom:12px; }
.form-group.full { flex:0 0 100%; }
.form-group.half { flex:1 1 calc(50% - 7px); min-width:180px; }
.form-group label { display:block; font-size:.78rem; font-weight:600; color:var(--brown-dark); margin-bottom:4px; }
.form-group label .req, .req { color:var(--error); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:9px 11px; border:1px solid var(--grey-light);
  border-radius:4px; font-size:.86rem; color:var(--brown-dark);
  font-family:'Focal Maxi', Arial, sans-serif; background:var(--white); transition:border-color .2s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--orange); }
.form-group input[readonly] { background:var(--grey-light); cursor:not-allowed; }
.form-group .hint { color:var(--grey-mid); font-size:.72rem; margin-top:3px; }
.form-group textarea { min-height:80px; resize:vertical; }

/* ---------- Checkbox group ---------- */
.checkbox-group { display:flex; flex-wrap:wrap; gap:8px 22px; }
.checkbox-group label {
  display:flex; align-items:center; gap:7px; font-size:.84rem;
  font-weight:500; color:var(--brown-dark); cursor:pointer; flex:0 0 auto;
}
.checkbox-group input[type="checkbox"] { width:16px; height:16px; accent-color:var(--orange); cursor:pointer; }

/* ---------- Buttons ---------- */
.btn {
  display:inline-block; padding:10px 20px; border:none; border-radius:4px;
  font-size:.86rem; font-weight:700; cursor:pointer; text-decoration:none;
  font-family:'Focal Maxi', Arial, sans-serif; transition:background-color .2s, color .2s; text-align:center;
}
.btn-primary { background:var(--orange); color:var(--white); }
.btn-primary:hover { background:var(--orange-dark); }
.btn-primary:disabled { background:var(--grey-mid); cursor:not-allowed; }
.btn-outline { background:transparent; color:var(--orange-dark); border:1px solid var(--orange); }
.btn-outline:hover { background:var(--orange); color:var(--white); }
.btn-dark { background:var(--brown-darkest); color:var(--cream); }
.btn-dark:hover { background:var(--brown-dark); }
.btn-sm { padding:7px 14px; font-size:.78rem; }

/* ---------- Alerts ---------- */
.alert { padding:11px 15px; border-radius:4px; font-size:.84rem; font-weight:500; margin-bottom:16px; }
.alert p { margin:0; }
.alert p + p { margin-top:4px; }
.alert-error { background:#fbe9e7; color:var(--error-bold); border:1px solid #ef9a9a; }
.alert-success { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.alert-info { background:#fff3e0; color:var(--orange-dark); border:1px solid var(--orange); }
.alert-warning { background:#fff3e0; color:var(--orange-dark); border:1px solid var(--orange); display:flex; align-items:center; flex-wrap:wrap; gap:8px; }

/* ---------- Dashboard cards ---------- */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.dash-card { border:1px solid var(--grey-light); border-radius:6px; padding:18px; background:var(--white); }
.dash-card h3 { font-size:.98rem; color:var(--brown-darkest); margin-bottom:8px; }
.dash-card p { font-size:.84rem; margin-bottom:14px; }

/* ---------- Badges ---------- */
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:.72rem; font-weight:700; }
.badge-submitted { background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7; }
.badge-invite { background:#fff3e0; color:var(--orange-dark); border:1px solid var(--orange); }
.badge-accepted { background:#e3f2fd; color:#1565c0; border:1px solid #90caf9; }
.badge-declined { background:#fbe9e7; color:var(--error-bold); border:1px solid #ef9a9a; }
.badge-draft { background:#f0ece4; color:#8a7a66; border:1px solid #d9cdbb; }
.badge-withdrawn { background:#efe7f5; color:#7b4fa0; border:1px solid #cdb6e0; }
.badge-completed { background:#e3f2fd; color:#0d47a1; border:1px solid #64b5f6; }

/* ---------- Tooltip ---------- */
.tooltip-wrap { position:relative; display:inline-block; }
.tooltip-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%; background:var(--grey-mid);
  color:var(--white); font-size:10px; font-weight:700; cursor:help; vertical-align:middle;
}
.tooltip-box {
  visibility:hidden; opacity:0; position:absolute; z-index:20; left:50%; bottom:130%;
  transform:translateX(-50%); width:230px; background:var(--brown-darkest); color:var(--cream);
  font-size:.72rem; font-weight:400; line-height:1.45; padding:8px 10px; border-radius:5px;
  transition:opacity .15s;
}
.tooltip-wrap:hover .tooltip-box, .tooltip-icon:focus + .tooltip-box { visibility:visible; opacity:1; }

/* ---------- Sensory skills table ---------- */
.sensory-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.sensory-table th, .sensory-table td { border:1px solid var(--grey-light); padding:6px 8px; text-align:center; }
.sensory-table thead th { background:var(--orange-dark); color:var(--cream); font-weight:700; font-size:.74rem; }
.sensory-table .compound-col, .sensory-table .compound-name { text-align:left; font-weight:600; min-width:150px; }
.sensory-table tbody tr:nth-child(even) { background:#fbf4ea; }
.sensory-table .radio-label { display:none; }
.sensory-table input[type="radio"] { accent-color:var(--orange); width:16px; height:16px; cursor:pointer; }

/* ---------- Applications-closed panel ---------- */
.closed-wrap {
  background:var(--white); border:1px solid var(--grey-light); border-radius:8px;
  padding:32px 28px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.closed-wrap h2 { color:var(--brown-darkest); font-size:1.2rem; margin-bottom:8px; }
.closed-wrap p { font-size:.88rem; color:var(--brown-dark); }

/* ---------- Responsive ---------- */
@media (max-width:600px) {
  .site-header { padding:8px 16px; }
  .page-wrap { padding:16px 16px 48px; }
  .card { padding:20px 18px; }
  .form-row { flex-direction:column; gap:0; }
  .form-group.half { flex:0 0 100%; }
  .sensory-table .radio-label { display:inline; margin-left:4px; font-size:.7rem; }
  .sensory-table td { text-align:left; }
}