/* ============================================================
   Simmons Shores POA — styles.css
   ============================================================ */

/* BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{font-family:Georgia,serif;background:#f4f1eb;color:#2c2a22;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}

/* SKIP LINK */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;top:0;left:0;width:auto;height:auto;padding:0.75rem 1.25rem;background:#1a3a5c;color:#d4c89a;font-family:Arial,sans-serif;font-size:0.9rem;font-weight:bold;z-index:9999;border-radius:0 0 6px 0;outline:2px solid #d4c89a;outline-offset:2px}

/* NAV */
nav{background:#1a3a5c;padding:0 1.25rem;display:flex;align-items:center;height:56px;position:sticky;top:0;z-index:100;border-bottom:2px solid #d4c89a}
.hamburger{display:inline-flex;flex-direction:row;align-items:center;gap:8px;cursor:pointer;padding:6px 10px;background:none;border:0.5px solid rgba(212,200,154,0.35);border-radius:6px;transition:background 0.15s}
.hamburger:hover{background:rgba(255,255,255,0.07)}
.hamburger:focus-visible{outline:2px solid #d4c89a;outline-offset:2px}
.hamburger .bars{display:flex;flex-direction:column;justify-content:center;gap:4px}
.hamburger .bars span{display:block;width:18px;height:2px;background:#d4c89a;border-radius:2px;transition:transform 0.2s,opacity 0.2s}
.hamburger.open .bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger.open .bars span:nth-child(2){opacity:0}
.hamburger.open .bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-label{color:#d4c89a;font-family:Arial,sans-serif;font-size:0.75rem;letter-spacing:0.07em;text-transform:uppercase}
.nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:#1a3a5c;flex-direction:column;border-top:1px solid rgba(255,255,255,0.1);z-index:99;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.nav-links.open{display:flex}
.nav-link{background:none;border:none;text-align:left;width:100%;color:#b8cfc4;font-family:Arial,sans-serif;font-size:0.82rem;letter-spacing:0.06em;text-transform:uppercase;height:48px;padding:0 1.25rem;display:flex;align-items:center;border-bottom:0.5px solid rgba(255,255,255,0.08);cursor:pointer}
.nav-link:hover{color:#fff;background:rgba(255,255,255,0.05)}
.nav-link:focus-visible{outline:2px solid #d4c89a;outline-offset:-2px}
.nav-link.active{border-left:3px solid #d4c89a;color:#d4c89a;padding-left:calc(1.25rem - 3px)}

/* PAGES */
.page{display:none}
.page.active{display:block}

/* HEROES */
.hero-home{position:relative;background:linear-gradient(to bottom,rgba(10,25,40,0.55),rgba(10,25,40,0.35)),url('ss boat ramp.webp') center center/cover no-repeat;color:#fff;text-align:center;padding:2rem 1.5rem 3rem}
.hero-home::after{content:'';display:block;position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(to right,transparent,#d4c89a,transparent)}
.hero-inner{position:relative;background:linear-gradient(to bottom,rgba(10,25,40,0.55),rgba(10,25,40,0.35)),url('ss boat ramp.webp') center center/cover no-repeat;color:#fff;text-align:center;padding:2rem 1.5rem 3rem}
.hero-inner::after{content:'';display:block;position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(to right,transparent,#d4c89a,transparent)}
.hero-inner h1{display:inline-block;font-size:1.5rem;font-weight:normal;margin-bottom:0.5rem;background:transparent;color:#d4c89a;border:1.5px solid #d4c89a;padding:0.35rem 1.4rem;border-radius:999px;letter-spacing:0.04em}
.hero-sub{font-family:Arial,sans-serif;font-size:0.9rem;color:#b8d4c4;max-width:460px;margin:0 auto;line-height:1.6}

/* LAYOUT */
.section{max-width:860px;margin:0 auto;padding:2rem 1.25rem}
.section-title{font-size:1.25rem;font-weight:normal;color:#1a3a5c;margin-bottom:0.4rem}
.divider{width:48px;height:2px;background:#d4c89a;margin-bottom:1.25rem}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;margin-bottom:2rem}

/* CARDS */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:2rem}
.history-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:2rem}
.card{background:#fff;border:0.5px solid #ccc9bb;border-radius:8px;padding:1.2rem}
.card-icon{font-size:1.3rem;margin-bottom:0.6rem}
.card h3{font-size:0.92rem;font-weight:bold;font-family:Arial,sans-serif;color:#1a3a5c;margin-bottom:0.35rem}
.card p{font-family:Arial,sans-serif;font-size:0.84rem;color:#555;line-height:1.55}
.card a{color:#1a3a5c;font-size:0.8rem}

/* ANNOUNCEMENTS */
.announce-list{list-style:none;margin-bottom:2rem}
.announce-item{background:#fff;border:0.5px solid #ccc9bb;border-left:3px solid #1a3a5c;border-radius:0 8px 8px 0;padding:0.9rem 1.1rem;margin-bottom:0.65rem;font-family:Arial,sans-serif}
.announce-item .date{font-size:0.73rem;color:#888;text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.2rem}
.announce-item .title{font-size:0.88rem;font-weight:bold;color:#2c2a22}
.announce-item .body{font-size:0.84rem;color:#555;margin-top:0.2rem;line-height:1.55}

/* CONTACT */
.contact-info{font-family:Arial,sans-serif}
.contact-info h3{font-size:0.88rem;color:#1a3a5c;font-weight:bold;margin-bottom:0.9rem}
.contact-row{display:flex;gap:0.65rem;margin-bottom:0.8rem;align-items:flex-start}
.contact-row .icon{font-size:0.95rem;margin-top:2px}
.contact-row .label{font-size:0.73rem;color:#888;text-transform:uppercase;letter-spacing:0.05em}
.contact-row .val{font-size:0.86rem;color:#2c2a22}
.board-list{list-style:none;font-family:Arial,sans-serif}
.board-list li{padding:0.5rem 0;border-bottom:0.5px solid #e5e2d8;font-size:0.86rem}
.board-list li:last-child{border-bottom:none}
.board-list .role{font-size:0.73rem;color:#888}

/* FORMS */
.form-card{background:#fff;border:0.5px solid #ccc9bb;border-radius:8px;padding:1.4rem;max-width:540px}
.form-card h3{font-family:Arial,sans-serif;font-size:0.88rem;color:#1a3a5c;font-weight:bold;margin-bottom:1rem}
label{display:block;font-family:Arial,sans-serif;font-size:0.73rem;color:#555;text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.25rem;margin-top:0.75rem}
label:first-of-type{margin-top:0}
input,textarea,select{width:100%;padding:0.5rem 0.75rem;border:0.5px solid #ccc;border-radius:6px;font-family:Arial,sans-serif;font-size:0.9rem;background:#faf9f6;color:#2c2a22;-webkit-appearance:none}
input:focus,textarea:focus,select:focus{border-color:#1a3a5c;outline:2px solid #1a3a5c;outline-offset:1px}
textarea{min-height:90px;resize:vertical}
.btn{margin-top:1rem;background:#1a3a5c;color:#d4c89a;border:none;padding:0.65rem 1.5rem;border-radius:6px;font-family:Arial,sans-serif;font-size:0.88rem;cursor:pointer;width:100%;text-align:center}
.btn:hover{background:#2e6094}
.btn:focus-visible{outline:2px solid #1a3a5c;outline-offset:2px}
.success-msg{display:none;font-family:Arial,sans-serif;font-size:0.84rem;color:#1a3a5c;background:#e6eef5;border-radius:6px;padding:0.55rem 0.85rem;margin-top:0.65rem}

/* DOCUMENTS */
.docs-cat{margin-bottom:2rem}
.docs-cat h3{font-family:Arial,sans-serif;font-size:0.73rem;text-transform:uppercase;letter-spacing:0.1em;color:#888;margin-bottom:0.75rem}
.doc-row{display:flex;align-items:center;justify-content:space-between;background:#fff;border:0.5px solid #ccc9bb;border-radius:8px;padding:0.75rem 1rem;margin-bottom:0.45rem;font-family:Arial,sans-serif;gap:0.75rem}
.doc-row:hover{border-color:#1a3a5c}
.doc-left{display:flex;align-items:center;gap:0.65rem;min-width:0}
.doc-name{font-size:0.86rem;font-weight:bold;color:#2c2a22}
.doc-meta{font-size:0.73rem;color:#888;margin-top:1px}
.doc-badge{font-size:0.7rem;padding:0.18rem 0.5rem;border-radius:2rem;background:#e6eef5;color:#1a3a5c;font-weight:bold;white-space:nowrap}
.doc-badge-warn{font-size:0.7rem;padding:0.18rem 0.5rem;border-radius:2rem;background:#fff3cd;color:#856404;font-weight:bold;white-space:nowrap}
.doc-link{font-size:0.76rem;color:#1a3a5c;text-decoration:none;border:0.5px solid #1a3a5c;padding:0.22rem 0.6rem;border-radius:4px;white-space:nowrap;flex-shrink:0}
.doc-link:hover{background:#1a3a5c;color:#d4c89a}
.doc-link:focus-visible{outline:2px solid #1a3a5c;outline-offset:2px}
.search-bar{margin-bottom:1.75rem}
.search-bar input{max-width:400px}

/* ARCHIVE */
.archive-card{background:#fff;border:0.5px solid #ccc9bb;border-radius:8px;padding:1rem 1.1rem;margin-bottom:0.75rem;font-family:Arial,sans-serif}
.archive-title{font-size:0.73rem;text-transform:uppercase;letter-spacing:0.08em;color:#1a3a5c;font-weight:bold;margin-bottom:0.5rem}
.vote-row{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:0.5rem 0.75rem;background:#f4f1eb;border-radius:6px;margin-bottom:0.4rem}
.vote-row:last-child{margin-bottom:0}
.vote-text{font-size:0.84rem;color:#2c2a22;flex:1}
.vote-count{font-size:0.84rem;font-weight:bold;color:#1a3a5c;white-space:nowrap}

/* PAY DUES */
.pay-btn{display:block;background:#1a3a5c;color:#d4c89a;font-family:Arial,sans-serif;font-size:0.88rem;padding:0.65rem 1.5rem;border-radius:6px;text-decoration:none;text-align:center;letter-spacing:0.04em}
.pay-btn:hover{background:#2e6094;color:#d4c89a}
.pay-btn:focus-visible{outline:2px solid #1a3a5c;outline-offset:2px}

/* FOOTER */
footer{background:#2c2a22;color:#888;text-align:center;font-family:Arial,sans-serif;font-size:0.78rem;margin-top:2rem;padding:1rem}
.back-top{display:block;width:100%;text-align:center;padding:0.65rem;font-family:Arial,sans-serif;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;color:#d4c89a;background:none;border:none;border-top:0.5px solid #3e3c35;cursor:pointer}
.back-top:hover{color:#fff}
.back-top:focus-visible{outline:2px solid #d4c89a;outline-offset:2px}

/* NAV — user auth area */
#nav-user-area { margin-left:auto;display:flex;align-items:center;gap:0.6rem;padding-left:0.75rem;flex-shrink:0 }
#nav-user-name { color:#b8cfc4;font-family:Arial,sans-serif;font-size:0.74rem;letter-spacing:0.03em;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.nav-user-btn { background:none;border:0.5px solid rgba(212,200,154,0.4);border-radius:6px;color:#d4c89a;font-family:Arial,sans-serif;font-size:0.72rem;letter-spacing:0.04em;padding:0.28rem 0.7rem;cursor:pointer;white-space:nowrap }
.nav-user-btn:hover { background:rgba(255,255,255,0.08) }
.nav-user-btn:focus-visible { outline:2px solid #d4c89a;outline-offset:2px }
.nav-user-signout { border-color:rgba(184,207,196,0.3);color:#b8cfc4 }

/* DOCUMENTS — locked state */
.docs-locked-banner { display:flex;align-items:flex-start;gap:0.75rem;background:#fff8e1;border:1px solid #f0c040;border-left:3px solid #f0c040;border-radius:0 8px 8px 0;padding:0.9rem 1rem;margin-bottom:1rem;font-family:Arial,sans-serif;font-size:0.84rem;color:#555;line-height:1.55 }
.docs-locked-banner strong { color:#2c2a22 }
.docs-locked-banner a { color:#1a3a5c;font-weight:bold;text-decoration:underline }
.doc-row-locked { opacity:0.6;pointer-events:none }
.doc-locked-pill { font-size:0.72rem;background:#f1eeea;color:#888;padding:0.18rem 0.55rem;border-radius:2rem;white-space:nowrap;font-family:Arial,sans-serif }

/* ADMIN BAR — pending badge */
.pending-badge { display:inline-block;background:#c0392b;color:#fff;border-radius:10px;padding:0.05rem 0.45rem;font-size:0.62rem;font-weight:bold;margin-left:0.3rem;vertical-align:middle }

/* MODAL — tabs */
.modal-tabs { display:flex;border-bottom:1px solid #e5e2d8;margin-bottom:1.25rem }
.modal-tab { background:none;border:none;border-bottom:2px solid transparent;font-family:Arial,sans-serif;font-size:0.82rem;color:#888;padding:0.5rem 1.1rem;cursor:pointer;margin-bottom:-1px }
.modal-tab.active { color:#1a3a5c;border-bottom-color:#1a3a5c;font-weight:bold }
.modal-tab:focus-visible { outline:2px solid #1a3a5c;outline-offset:2px }

/* USER MANAGEMENT — status badges */
.status-pending  { background:#fff3cd;color:#856404;font-size:0.7rem;padding:0.18rem 0.5rem;border-radius:2rem;font-weight:bold;white-space:nowrap;font-family:Arial,sans-serif }
.status-approved { background:#d4edda;color:#155724;font-size:0.7rem;padding:0.18rem 0.5rem;border-radius:2rem;font-weight:bold;white-space:nowrap;font-family:Arial,sans-serif }
.status-rejected { background:#f8d7da;color:#721c24;font-size:0.7rem;padding:0.18rem 0.5rem;border-radius:2rem;font-weight:bold;white-space:nowrap;font-family:Arial,sans-serif }
.user-row { padding:0.75rem 0;border-bottom:0.5px solid #e5e2d8;font-family:Arial,sans-serif }
.user-row:last-child { border-bottom:none }
.user-row-name { font-size:0.88rem;font-weight:bold;color:#2c2a22;margin-bottom:0.2rem }
.user-row-meta { font-size:0.76rem;color:#666;line-height:1.5 }
.user-row-actions { display:flex;gap:0.35rem;margin-top:0.5rem;flex-wrap:wrap }

/* RESIDENT CTA */
.resident-cta{background:#fff;border:0.5px solid #ccc9bb;border-left:3px solid #d4c89a;border-radius:0 8px 8px 0;padding:1.2rem 1.4rem;margin-bottom:2rem;font-family:Arial,sans-serif}
.resident-cta h3{font-size:0.95rem;font-weight:bold;color:#1a3a5c;margin-bottom:0.4rem}
.resident-cta p{font-size:0.84rem;color:#555;line-height:1.6;margin-bottom:0.75rem}
.resident-cta-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.resident-cta-actions .btn{width:auto;margin:0}
.resident-cta-signin{font-size:0.8rem;color:#888}
.resident-cta-signin button{background:none;border:none;color:#1a3a5c;cursor:pointer;font-size:0.8rem;text-decoration:underline;padding:0;font-family:Arial,sans-serif}

/* ADMIN — home page inline edit buttons */
.admin-section-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.4rem}
.admin-section-header .section-title{margin-bottom:0}
.admin-section-actions{display:flex;gap:0.35rem;flex-wrap:wrap}

/* SECURITY LOG */
.log-entry { padding:0.55rem 0.75rem;border-left:3px solid #ccc;margin-bottom:0.4rem;border-radius:0 4px 4px 0;background:#fafafa;font-family:Arial,sans-serif }
.log-entry.info     { border-left-color:#1a3a5c;background:#f0f4f8 }
.log-entry.warn     { border-left-color:#f0c040;background:#fffbf0 }
.log-entry.critical { border-left-color:#c0392b;background:#fdf3f2 }
.log-entry-header { display:flex;align-items:center;gap:0.4rem;margin-bottom:0.25rem;flex-wrap:wrap }
.log-badge { font-size:0.6rem;font-weight:bold;padding:0.1rem 0.4rem;border-radius:3px;text-transform:uppercase;white-space:nowrap }
.log-badge.info     { background:#e6eef5;color:#1a3a5c }
.log-badge.warn     { background:#fff3cd;color:#856404 }
.log-badge.critical { background:#f8d7da;color:#721c24 }
.log-event { font-family:monospace;font-size:0.76rem;color:#1a3a5c }
.log-ts    { font-size:0.72rem;color:#aaa;margin-left:auto }
.log-entry-body { font-size:0.76rem;color:#555;display:flex;flex-wrap:wrap;gap:0.5rem 1rem;line-height:1.5 }
.log-who   { color:#2c2a22 }
.log-target{ color:#1a3a5c }
.log-ip    { color:#888;font-family:monospace }
.log-detail{ color:#666;font-style:italic }
.log-filters { display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.75rem }
.log-filters select, .log-filters input {
  padding:0.35rem 0.6rem;border:0.5px solid #ccc;border-radius:6px;
  font-family:Arial,sans-serif;font-size:0.78rem;background:#faf9f6;color:#2c2a22 }
.log-filters input { flex:1;min-width:140px }
.log-stat { font-family:Arial,sans-serif;font-size:0.76rem;color:#888;margin-bottom:0.5rem }

/* RESPONSIVE */
@media(max-width:600px){
  .two-col{grid-template-columns:1fr}
  .history-grid{grid-template-columns:1fr}
  .form-card{max-width:100%}
  .search-bar input{max-width:100%}
  .hero-home svg{width:260px;height:90px}
}