html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* Formatted text from the editor (event descriptions). */
.rich-text img { max-width: 100%; height: auto; }
.rich-text h2 { font-size: 1.4rem; margin-top: 1rem; }
.rich-text h3 { font-size: 1.15rem; margin-top: .75rem; }
.rich-text blockquote { border-left: 4px solid #d1d5db; padding-left: 1rem; color: #4b5563; }
.rich-text .ql-align-center { text-align: center; }
.rich-text .ql-align-right { text-align: right; }
.rich-text .ql-align-justify { text-align: justify; }
.rich-text .ql-indent-1 { padding-left: 2em; }
.rich-text .ql-indent-2 { padding-left: 4em; }
.rich-text .ql-indent-3 { padding-left: 6em; }
.rich-text a { overflow-wrap: anywhere; }
.rich-text a.mn-button { display: inline-block; padding: .5rem 1.25rem; background: #0d6efd; color: #fff; border-radius: .375rem; text-decoration: none; font-weight: 600; }

/* Tables marked .table-stack become one card per row on phones; each cell shows its data-label. */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .75rem; }
  .table-stack td { border: 0; padding: .2rem 0; text-align: start !important; }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .03em; }
  .table-stack td:empty { display: none; }
  .table-responsive:has(> .table-stack) { overflow: visible; }
}

/* Organization logo in the site header. */
.site-logo { height: 52px; width: auto; max-width: 200px; object-fit: contain; }
.site-logo-sm { height: 34px; max-width: 120px; }
@media (max-width: 575.98px) { .site-logo { height: 40px; max-width: 150px; } .site-logo-sm { height: 28px; } }
/* Round logos: square image, circle shown (the corners are cut off). */
.site-logo-round { aspect-ratio: 1; width: auto; object-fit: cover; border-radius: 50%; }

/* Member site footer. */
.site-footer { background: #1f2937; color: #cbd5e1; }
.site-footer a { color: #e5e7eb; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer li { margin-bottom: .4rem; }
.site-footer .bi { color: #94a3b8; }
.site-footer-heading { color: #fff; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; margin-bottom: .75rem; }
.site-footer-logo { height: 48px; width: auto; max-width: 160px; object-fit: contain; background: #fff; border-radius: .375rem; padding: 2px; }
.site-footer-logo.site-logo-round { padding: 0; border-radius: 50%; }
.site-footer-bottom { border-top: 1px solid #374151; color: #94a3b8; }
.site-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff !important; font-size: 1.15rem; }
.site-social:hover { opacity: .85; text-decoration: none !important; }
.site-social .bi { color: #fff; }
.site-social-facebook { background: #1877f2; }
.site-social-instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.site-social-youtube { background: #ff0000; }
.site-social-twitter-x { background: #000; }
.site-social-linkedin { background: #0a66c2; }
.site-social-whatsapp { background: #25d366; }

/* Member site: the footer sits at the bottom even on short pages. */
body.member-site { min-height: 100vh; display: flex; flex-direction: column; }
body.member-site > .container { flex: 1 0 auto; }

/* ---------- Website pages (blocks) ---------- */
.page-block { margin-bottom: 3rem; }
.page-block:last-child { margin-bottom: 1.5rem; }
.block-banner { position: relative; overflow: hidden; border-radius: 1rem; padding: 4.5rem 1.5rem; color: #fff;
  background: var(--bs-primary) center / cover no-repeat; }
.block-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.55)); }
.block-banner-plain::before { display: none; }
.block-banner-inner { position: relative; max-width: 46rem; }
@media (max-width: 575.98px) { .block-banner { padding: 3rem 1.25rem; } }
.block-empty { border: 2px dashed var(--bs-border-color); border-radius: .75rem; padding: 1.5rem; text-align: center; color: var(--bs-secondary-color); }
.gallery-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5rem; transition: opacity .15s; }
.gallery-item:hover .gallery-thumb, .gallery-item:focus .gallery-thumb { opacity: .85; }
/* Event photo albums: thumbnails scroll inside the box, so long albums don't make the page endless. */
.photo-drop { border: 2px dashed var(--bs-border-color); cursor: pointer; }
.photo-drop.dragging, .photo-drop:hover { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.photo-album { max-height: 34rem; overflow-y: auto; padding: .5rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; }
.subpage-card .card-img-top { height: 170px; object-fit: cover; }
.subpage-card:hover { box-shadow: 0 .25rem 1rem rgba(0,0,0,.08); }
.column-image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.contact-list li { display: flex; gap: .75rem; align-items: baseline; margin-bottom: .75rem; overflow-wrap: anywhere; }
.contact-list .bi { color: var(--bs-primary); }
.block-html-frame { display: block; width: 100%; height: 300px; border: 0; }
.lightbox .modal-content { background: #111; color: #fff; }
.lightbox img { max-height: 80vh; width: 100%; object-fit: contain; }

/* ---------- Admin: page tree and page editor ---------- */
.page-tree .page-row { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; }
.page-children { margin-left: 2rem; min-height: .25rem; }
@media (max-width: 575.98px) { .page-children { margin-left: 1rem; } }
body.tree-dragging .page-children { min-height: 2.5rem; border: 2px dashed var(--bs-border-color); border-radius: .5rem; margin-bottom: .5rem; }
.drag-handle { cursor: grab; touch-action: none; }
.sortable-ghost { opacity: .4; }
.block-list .block-item { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; }
.block-list .block-item.is-current { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(13,110,253,.2); }
.preview-frame { width: 100%; height: 78vh; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; }
.block-type-option { text-align: start; height: 100%; }
.member-site .navbar-nav .nav-link { white-space: nowrap; }

/* ---------- Officer photos ---------- */
.officer-photo { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; object-fit: cover; }
.officer-initials { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); font-weight: 600; letter-spacing: .02em; }
.crop-stage { position: relative; width: min(280px, 100%); aspect-ratio: 1 / 1; overflow: hidden; border-radius: 50%; background: #e5e7eb;
  cursor: grab; touch-action: none; box-shadow: 0 0 0 4px var(--bs-primary-bg-subtle); }
.crop-stage:active { cursor: grabbing; }
.crop-stage img { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.board-card .officer-photo { margin-bottom: .75rem; }

/* ---------- Sponsor carousel ---------- */
.sponsor-banner { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: contain; background: var(--bs-tertiary-bg); border-radius: var(--bs-border-radius-lg); }
@media (max-width: 575.98px) { .sponsor-banner.has-phone { aspect-ratio: 4 / 5; } }
.sponsor-carousel .carousel-control-prev, .sponsor-carousel .carousel-control-next { width: 3rem; opacity: 0; transition: opacity .2s; bottom: 2rem; }
.sponsor-carousel:hover .carousel-control-prev, .sponsor-carousel:hover .carousel-control-next,
.sponsor-carousel .carousel-control-prev:focus, .sponsor-carousel .carousel-control-next:focus { opacity: .8; }
.sponsor-dots { position: static; margin: .75rem 0 0; }
.sponsor-dots [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; margin: 0 5px; background-color: #6b7280; }
@media (hover: none) { .sponsor-carousel .carousel-control-prev, .sponsor-carousel .carousel-control-next { display: none; } }