/* =========================================================================
   Convivator CSS  —  /staging/go/css/style.css
   - App (logged-in) styles + shared components
   - Public landing/auth header styles for index.php, login.php, contact.php
   ------------------------------------------------------------------------- */

/* ===========================
   Global base (system stack)
   =========================== */
:root{
  --brand-1:#006AB4;
  --brand-2:#F5F7F9;
  --brand-3:#0A2538;
  --brand-4:#0C324D;
  --brand-5:#84251e;
  --brand-6:#E7ECEF;

  --link-color: var(--brand-1);
  --h2-color: var(--brand-1);
  --highlight-bg: var(--brand-2);
  --table-th-bg: var(--brand-3);
  --user-menu-bg: var(--brand-4);
  --oops-color: var(--brand-5);
  --deck-tab-bg: var(--brand-6);

  --footer-muted: #B8B8B8;
  --muted-ink: #B8B8B8;

  --ink:#111;
  --ink-2:#555;
  --line:#e6e6e6;
  --bg:#fff;
  --hover:#f6f6f6;
  --radius:12px;

  /* Public header logo height override; change to 50px/67px/88px as desired */
  --public-logo-height: 50px;
}

* { box-sizing: border-box; }

html, body { height:100%; }
html { overflow:auto; }
body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", "Liberation Sans", Arial, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  line-height: 1.45;
}

/* ===========================
   Typography & links
   =========================== */
h1 { font-size: 28px; margin: 10px 0 16px; text-align:center; }
h2 { font-size: 20px; margin: 14px 0 10px; color: var(--h2-color); }
h3 { font-size: 16px; margin: 10px 0 6px; color: var(--ink-2); }
p  { margin: 8px 0 10px; }

a, a:visited { color: var(--link-color); text-decoration: none; }
a:hover, a:active { text-decoration: none; filter: brightness(.92); }

/* fluid images */
.img-fluid { max-width: 100%; height: auto; display: block; }

/* Honeypot: present in DOM, hidden from humans & AT */
.hp-field{
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* utility */
.highlight { background: var(--highlight-bg); padding: 10px 12px; border-radius: 10px; }
.oops-text { color: var(--oops-color); font-weight: 700; }

/* ===========================
   Header (matches header.php)
   =========================== */
.site-header { width:100%; background:#fff; border-bottom:0px solid var(--line); }

/* Wide: 3 columns (brand | primary | user) */
.site-header .header-row{
  display:grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "brand primary user";
  align-items:center;
  min-height:64px;
  gap:12px;
  padding: 8px 16px;
}

/* Map elements to named areas */
.site-header .brand  { grid-area: brand;  justify-self:start;  display:inline-flex; align-items:center; gap:10px; }
.site-header .primary{ grid-area: primary; justify-self:center; display:flex; gap:24px; flex-wrap:wrap; }
.site-header .user   { grid-area: user;   justify-self:end;   position:relative; }

/* Header logo (keep small, distinct from public pages) */
.site-header .brand img.logo-img { height:36px; width:auto; display:block; }

/* Primary nav links */
.site-header .primary a {
  text-decoration:none; color:var(--ink);
  padding:6px 2px;
}
.site-header .primary a:hover {
  color: var(--link-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* User toggle/badge */
.site-header .user-toggle {
  all: unset; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-weight:600; padding:6px 10px; border-radius:10px; color: var(--brand-3, var(--brand-1, #0b63c4));
}
.site-header .user-toggle:hover { background: var(--hover); }
.site-header .user-toggle .super-badge { flex:0 0 auto; }

/* Keep name from wrapping weirdly on narrow screens */
.site-header .user-name {
  max-width: 42vw;            /* trimmed on small screens */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* User menu */
.site-header .user-menu {
  position:absolute; top:calc(100% + 8px); right:0; min-width:100px;
  background: var(--user-menu-bg); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); padding:6px;
}
.site-header .user-menu a {
  display:block; padding:10px 12px; border-radius:8px; color:#fff; text-decoration:none;
}
.site-header .user-menu a:hover { background: rgba(255,255,255,.12); }

/* Narrow: 2 rows — row 1 (brand | user), row 2 (primary) */
@media (max-width: 740px){
  .site-header .header-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand user"
      "primary primary";
    row-gap:6px;
    padding: 8px 12px;
  }
  .site-header .brand { padding-left:0; }
  .site-header .user  { padding-right:0; }
  .site-header .primary{
    justify-self:center;
    gap:16px 18px;         /* slightly tighter spacing on mobile */
  }
  .site-header .user-name { max-width: 48vw; } /* allow a bit more name space */
}

/* Tiny phones: shrink nav text a touch */
@media (max-width: 380px){
  .site-header .primary a { font-size: 15px; }
}

/* ===========================
   Forms & buttons
   =========================== */
input[type=text], input[type=url], input[type=email], input[type=password],
input[type=color], textarea, select {
  width: 100%;
  max-width: 520px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:#fff;
  color: var(--ink);
}

textarea { min-height: 110px; }

.btn,
.btn:link,
.btn:visited{
  color:#111;                  /* text for neutral buttons */
  text-decoration:none;
}

.btn-primary,
.btn-primary:link,
.btn-primary:visited{
  background: var(--brand-1);
  border-color: var(--brand-1);
  color:#fff !important;
}
.btn-primary:hover{ filter: brightness(.92); }

.btn-ghost,
.btn-ghost:link,
.btn-ghost:visited{
  background: transparent;
  border: 1px solid var(--brand-1);
  color: var(--brand-1);
}
.btn-ghost:hover{ background: var(--brand-2); }

/* Size variant for bigger call-to-action buttons */
.btn-lg {
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.1;
  min-height: 40px;
  border-radius: 16px; 
}

.btn-sm {
    padding:6px 10px; 
    font-size:12px; 
    font-weight:600; 
    line-height: 1.0;
    border-radius:16px; 
    text-decoration:none;
}

/* Make the ghost outline feel sturdier at large size (optional) */
.btn-ghost.btn-lg { border-width: 2px; }



/* ===== FINAL PUBLIC BUTTON OVERRIDES ===== */
a.btn, button.btn, input[type="submit"].btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--brand-1);
  cursor: pointer;

  /* kill native/bevel styles */
  -webkit-appearance: none;
  appearance: none;
  background-image: none !important;
  box-shadow: none !important;
}

/* variants */
.btn.btn-primary {
  background: var(--brand-1) !important;
  border-color: var(--brand-1) !important;
  color: #fff !important;
}
.btn.btn-primary:hover { filter: brightness(.95); }

.btn.btn-ghost {
  background: transparent !important;
  border: 1px solid var(--brand-1) !important;
  color: var(--brand-1) !important;
}
.btn.btn-ghost:hover { background: var(--brand-2); }



/* ===========================
   Tables
   =========================== */
table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid #f0f0f0; }
th { background: var(--table-th-bg); color:#fff; border-bottom-color: transparent; }
tr:hover td { background: #fafafa; }

/* ===========================
   Deck bits
   =========================== */
.deck-tabs { display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 10px; }
.deck-tabs .tab {
  background: var(--deck-tab-bg);
  padding: 8px 10px; border-radius: 10px; font-weight:600;
}
.deck-footer { color: var(--ink-2); font-size: 13px; margin-top: 14px; }

/* ===========================
   Layout helpers
   =========================== */
.container { max-width: 1100px; margin: 0 auto; padding: 12px 16px; }
.center   { text-align:center; }
.row      { display:flex; gap:16px; flex-wrap:wrap; }
.col-6    { flex: 1 1 320px; }
.card     { background:#F7F7F7; border-radius: 12px; padding: 16px; }
.preview-logo { display:inline-block; border:1px dashed var(--line); padding:8px; border-radius:10px; background:#fff; }
.preview-logo img { max-height: 64px; display:block; }
.note { color: var(--ink-2); font-size: 12px; }

/* ===========================
   Footer (centered everywhere)
   =========================== */
.footer-wrapper{
  border-top: 0px solid var(--line);
  margin-top: 24px;
  width: 100%;
}
.footer-wrapper > footer{
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--muted-ink);
  text-align: center;
}
.footer-wrapper > footer p{ margin: 0; }

/* ===========================
   List / simple components
   =========================== */
.user-list{ list-style:none; padding:0; margin:0; }
.user-list li{ padding:10px 0; border-top:1px solid #eee; }
.user-list li:first-child{ border-top:0; }

/* 2-up cards that wrap on small screens */
.two-col-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 880px){
  .two-col-cards{ grid-template-columns: 1fr 1fr; }
}

/* =========================================================================
   PUBLIC LANDING/AUTH HEADER (futureindex.php, login.php, contact.php)
   - Use this markup on those pages:

   <div class="public-hero">
     <a class="public-brand" href="/" aria-label="Home">
       <img class="public-logo" src="/staging/go/images/app-logo.png" alt="Convivator">
     </a>
     <h1 class="page-title">Login</h1>
   </div>
   ------------------------------------------------------------------------- */
.public-hero{ text-align:center; margin:24px 0 8px; }
.public-hero .public-brand{ display:inline-block; line-height:0; }
.public-hero .public-logo{
  height: var(--public-logo-height);
  width:auto;
  display:block;
  margin:0 auto;        /* center image inside link */
}
.page-title{ text-align:center; margin:12px 0 16px; }

/* Optional CTA row under titles on public pages */
.public-hero .cta-row{
  display:flex; justify-content:center; gap:12px; margin:14px 0 0; flex-wrap:wrap;
}

/* ========================================================================= */