/* Balloonspider.com — shared modern theme (2026 rebuild) */
:root{
  /* Gold palette. --accent is the main one; --accent-deep is used where
     white text sits on top, so it stays readable. */
  --accent:#D4AF37;        /* gold */
  --accent-deep:#8C6D10;   /* deep gold — buttons, links, headings */
  --accent-hover:#6D5308;  /* darker still, for hover */
  --accent-soft:#FBF3D9;   /* pale gold — notice backgrounds */
  --pink:var(--accent);    /* legacy alias, kept so nothing breaks */
  --dark:#2C2820;          /* warm near-black, replaces the cold #1a1a1a */
  --bg:#FDFAF0;
  --card:#ffffff;
  --border:#EBE2CB;
  --text:#2A251C;
  --muted:#6B6252;
  --radius:10px;
  --maxw:960px;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:Arial,Helvetica,sans-serif; color:var(--text);
  background:var(--bg); line-height:1.5;
}
a{color:var(--accent-deep); text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%; height:auto;}

.site-header{background:var(--dark); color:#fff;}
.site-header .bar{
  max-width:var(--maxw); margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.site-header .brand{display:flex; align-items:center; gap:10px; font-size:20px; font-weight:bold; color:#fff;}
.site-header .brand img{height:40px; width:auto;}
.site-header nav ul{list-style:none; display:flex; gap:18px; margin:0; padding:0; flex-wrap:wrap;}
.site-header nav a{color:#eee; font-weight:bold; font-size:14px;}
.site-header nav a:hover{color:var(--accent); text-decoration:none;}

#nav-toggle{display:none;}
.nav-toggle-label{display:none; cursor:pointer; color:#fff; font-size:26px;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:24px 20px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px;}
h1,h2,h3{font-family:Arial,Helvetica,sans-serif;}
h1{font-size:28px; margin-top:0;}
h2{font-size:20px; border-bottom:2px solid var(--accent); padding-bottom:6px; display:inline-block;}
h3{font-size:16px; color:var(--accent-deep);}

table.data{width:100%; border-collapse:collapse; background:var(--card);}
table.data th, table.data td{border:1px solid var(--border); padding:8px 10px; text-align:left; font-size:14px;}
table.data th{background:var(--accent-soft);}

form label{display:block; margin:12px 0 4px; font-weight:bold; font-size:14px;}
input[type=text], input[type=email], input[type=password], input[type=date], textarea, select{
  width:100%; max-width:420px; padding:9px 10px; border:1px solid var(--border); border-radius:6px; font-size:14px;
}
textarea{max-width:100%;}
button, input[type=submit]{
  background:var(--accent-deep); color:#fff; border:none; padding:10px 20px; border-radius:6px;
  font-weight:bold; cursor:pointer; font-size:14px; margin-top:10px;
}
button:hover, input[type=submit]:hover{background:var(--accent-hover);}
fieldset{border:1px solid var(--accent); border-radius:6px; padding:12px;}
.notice{background:var(--accent-soft); border:1px solid var(--accent); border-radius:6px; padding:12px; margin-bottom:16px;}
.error{background:#FBF0EC; border:1px solid #B4553C; color:#8C3B26; border-radius:6px; padding:12px; margin-bottom:16px;}

#map{width:100%; height:360px; border-radius:var(--radius); border:1px solid var(--border);}

.site-footer{background:var(--dark); color:#aaa; text-align:center; padding:18px; font-size:13px; margin-top:40px;}
.site-footer a{color:#ddd;}


.btn-small{padding:5px 12px; font-size:12px; margin-top:0;}
.btn-danger{background:#c0392b;}
.btn-danger:hover{background:#a93226;}

/* --- account area in the top bar (always visible, never collapses) --- */
.account-bar{display:flex; align-items:center; gap:12px; margin-left:auto;}
.account-link{
  display:flex; align-items:center; gap:7px;
  background:var(--accent-deep); color:#fff; font-weight:bold; font-size:14px;
  padding:7px 14px; border-radius:20px; white-space:nowrap;
}
.account-link:hover{background:var(--accent-hover); color:#fff; text-decoration:none;}
.account-icon{font-size:15px; line-height:1;}
.account-name{max-width:130px; overflow:hidden; text-overflow:ellipsis;}
.account-alt{color:#ccc; font-size:13px; font-weight:bold; white-space:nowrap;}
.account-alt:hover{color:var(--accent); text-decoration:none;}

/* --- mobile: keep the account button visible, collapse only the nav links --- */
@media (max-width: 700px){
  .site-header .bar{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
  }
  .nav-toggle-label{display:block; order:0;}
  .site-header .brand{order:1; justify-self:start;}
  .site-header .brand img{height:32px;}
  .account-bar{order:2; margin-left:0; justify-self:end; gap:8px;}
  .account-name{max-width:70px;}
  .account-alt{display:none;}          /* log off lives on the account page */

  .site-header nav{order:3; grid-column:1 / -1; width:100%;}
  .site-header nav ul{display:none; flex-direction:column; width:100%; gap:0;}
  #nav-toggle:checked ~ .bar nav ul{display:flex;}
  .site-header nav li{border-top:1px solid #333;}
  .site-header nav a{display:block; padding:11px 2px;}
}

/* --- video --- */
.bs-video{
  width:100%; max-width:720px; display:block;
  border-radius:var(--radius); border:1px solid var(--border);
  background:#000;
}
.bs-hero{
  max-width:100%; margin:0 0 18px;
  aspect-ratio:16/9; object-fit:cover;
}

/* --- photos --- */
.photo-row{margin-bottom:16px;}
.photo-row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
@media (max-width:600px){ .photo-row-2{grid-template-columns:1fr;} }
.balloon-photo{margin:0 0 16px;}
.photo-row-2 .balloon-photo{margin:0;}
.balloon-photo figcaption{
  font-size:12px; color:var(--muted); margin-top:6px; text-align:center;
}
.balloon-photo img{
  width:100%; max-height:420px; object-fit:cover; display:block;
  border-radius:var(--radius); border:1px solid var(--border);
}
.field-hint{font-size:12px; color:var(--muted); margin:4px 0 0;}
#photo-preview{
  max-width:220px; margin-top:10px; display:block;
  border-radius:8px; border:1px solid var(--border);
}
input[type=file]{
  width:100%; max-width:420px; padding:8px; font-size:14px;
  border:1px solid var(--border); border-radius:6px; background:#fff;
}