* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #7a3899; color: #fff; font-family: Verdana, Arial, sans-serif; overflow-x: hidden; }
img, video, iframe, object, embed { max-width: 100%; }

/* Page shell: 1024px design, fluid below that */
.page { width: 1024px; max-width: 100%; margin: 0 auto; box-shadow: 0 0 18px rgba(0,0,0,.45); overflow-x: clip; }

/* Banner keeps the 1024x197 artwork, scales proportionally */
.banner { position: relative; aspect-ratio: 1024 / 197; min-height: 110px; background: #7a3899 url('../annefiles/UI/Top.png') no-repeat left top; background-size: cover; }
.menubar { position: absolute; left: 8.3%; right: 0; bottom: 6px; background: transparent; }
nav { display: block; }
.menu-toggle { display: none; }
ul.topmenu { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }
ul.topmenu > li { position: relative; }
.topmenu a, .topmenu .drop > span { display: inline-block; padding: 5px 10px; text-decoration: none; text-align: center; white-space: nowrap; }
.homeitem img { height: 28px; width: auto; vertical-align: middle; border: 0; }
.topmenu .drop > span { background: #cc99ff; color: #2B1815; border: 2px solid #fff; cursor: pointer; }
.topmenu .sub { display: none; position: absolute; left: 0; top: 100%; list-style: none; margin: 0; padding: 0; z-index: 20; min-width: 200px; }
.topmenu .drop:hover .sub, .topmenu .drop:focus-within .sub, .topmenu .drop.open .sub { display: block; }
.topmenu .sub a { display: block; margin-top: 2px; text-align: left; white-space: normal; }
.topmenu .sub li { width: 100%; }
.topmenu a img, .topmenu .drop > span img { height: 18px; vertical-align: middle; margin-right: 6px; border: 0; }

.content { padding: 10px 20px 30px 100px; }

/* Legacy CMS content: neutralise fixed pixel widths, keep readable */
.pagebody { overflow-wrap: break-word; word-wrap: break-word; min-width: 0; }
.pagebody table { color: #fff; background: rgba(255,255,255,.09); border-radius: 12px; line-height: 1.7; max-width: 100%; }
.pagebody table[width] { width: 100% !important; }
.pagebody td[width] { width: auto !important; }
.pagebody table[style*="width"], .pagebody td[style*="width"], .pagebody div[style*="width"] { max-width: 100%; }
.pagebody p[style*="padding-left"], .pagebody p[style*="padding:"] { padding-left: 0 !important; }
.pagebody a { color: #ffd8ff; }
.pagebody img { max-width: 100%; height: auto; }
.pagebody object, .pagebody embed, .pagebody iframe, .pagebody video { width: 100%; max-width: 800px; aspect-ratio: 4 / 3; height: auto; }
footer { margin-top: 30px; font-size: 11px; color: #e6c9f2; }

/* Guestbook */
.guestbook { margin-top: 12px; max-width: 100%; }
.gb-entry { border: 1px solid #cc99ff; background: rgba(255,255,255,.07); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; overflow-wrap: break-word; }
.gb-head { color: #fff; font-weight: bold; font-size: 15px; }
.gb-date { color: #F9BDF1; font-weight: normal; font-size: 11px; }
.gb-body { color: #fff; font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* Gallery: fluid grid instead of fixed thumbnails */
.gallery { margin-top: 16px; }
.gallery h3 { color: #fff; }
.gallery { display: block; }
.gallery a { display: inline-block; margin: 0 10px 10px 0; max-width: 100%; }
.gallery img { width: 220px; max-width: 100%; height: auto; border: 2px solid #fff; border-radius: 6px; }

/* Forms */
.wallform label { display: block; margin: 8px 0; font-size: 13px; }
.wallform input[type=text], .wallform textarea { width: 100%; max-width: 480px; padding: 8px; border-radius: 8px; border: 1px solid #d9c6ee; font: inherit; }
.wallform button, .annepoll button, .menu-toggle { background: #cc99ff; border: 2px solid #fff; border-radius: 10px; padding: 8px 16px; font-weight: bold; cursor: pointer; }
.form-error { color: #ff9d9d; font-weight: bold; }

/* Poll: wraps instead of overflowing */
.annepoll { background: rgba(255,255,255,.07); border: 1px solid #cc99ff; border-radius: 12px; padding: 16px; margin: 16px 0; max-width: 560px; width: 100%; }
.annepoll h3 { margin-top: 0; }
.pollopt { display: block; margin: 4px 0; }
.poll-message { font-weight: bold; }
.pollresults { margin-top: 12px; }
.pollrow { display: flex; align-items: center; gap: 10px; margin: 6px 0; flex-wrap: wrap; }
.polllabel { flex: 1 1 200px; min-width: 0; font-size: 13px; overflow-wrap: break-word; }
.pollbar { flex: 2 1 180px; min-width: 120px; background: #E9DBF9; border: 1px solid #fff; height: 16px; border-radius: 4px; overflow: hidden; }
.pollbar > div { background: #B668BA; height: 100%; }
.polltotal { font-size: 12px; color: #e6c9f2; }

/* Tablet: reclaim the 100px left gutter, let menu wrap inside banner */
@media (max-width: 900px) {
    .content { padding: 10px 16px 24px; }
    .menubar { left: 4%; }
    .pagebody table[style], .pagebody td[style] { height: auto !important; }
    .pagebody table[width="700"], .pagebody table[width="700px"] { width: 100% !important; }
}

/* Small screens: banner becomes cover strip, menu becomes hamburger panel */
@media (max-width: 720px) {
    .banner { aspect-ratio: auto; min-height: 96px; background-size: cover; background-position: left top; display: flex; align-items: flex-end; }
    .menubar { position: static; background: rgba(0,0,0,.25); padding: 6px 8px; width: 100%; }
    .menubar nav .menu-toggle { display: inline-block; margin-bottom: 6px; font-size: 15px; }
    ul.topmenu { display: none; flex-direction: column; align-items: stretch; gap: 4px; }
    .menubar nav.nav-open ul.topmenu { display: flex; }
    ul.topmenu > li { width: 100%; }
    .topmenu a, .topmenu .drop > span { display: block; width: 100%; text-align: left; white-space: normal; font-size: 15px !important; }
    .topmenu .drop > span { cursor: pointer; }
    .topmenu .sub { position: static; min-width: 0; border: 0; margin-left: 12px; }
    .topmenu .drop:hover .sub { display: none; }
    .topmenu .drop:focus-within .sub, .topmenu .drop.open .sub { display: block; }

    .content { padding: 10px 12px 24px; }

    /* Stack legacy two-column tables (fact box + photo) vertically */
    .pagebody table, .pagebody tbody, .pagebody tr, .pagebody td { display: block; width: 100% !important; max-width: 100%; }
    .pagebody td { padding: 6px 4px; }
    .pagebody td:empty { display: none; }
    .pagebody td[style*="text-align: right"], .pagebody td[style*="text-align:right"] { text-align: center !important; }
    .pagebody td[width="400"] { width: 100% !important; }
    .pagebody p { margin: 0.6em 0; }
    .pagebody p:empty { display: none; }

    .gallery a { margin: 0 0 10px 0; width: calc(50% - 5px); vertical-align: top; }
    .gallery a:nth-child(odd) { margin-right: 10px; }
    .gallery img { width: 100%; }
    .polllabel { flex-basis: 100%; }
    .pollbar { flex-basis: 100%; }
}

@media (max-width: 400px) {
    .gallery a { width: 100%; margin-right: 0; }
    .banner { min-height: 76px; }
}