/* =========================
   RESET & BASE
   ========================= */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, sans-serif;
  background: #f9f9f9;
  color: #333;
  line-height: 1.6;
  font-size: 17px; /* easier to read on desktop */
}

/* =========================
   HEADER (brand on left, welcome on right)
   ========================= */
.header-wrapper {
  background: #fff;
  border-bottom: 1px solid #ddd;
  padding: 1rem 1.25rem;

  /* two-column layout on desktop */
  display: grid;
  grid-template-columns: 1fr auto;  /* brand grows, profile hugs content */
  align-items: center;
  column-gap: 1.25rem;
}

/* brand (site title + strapline) */
.header-wrapper .brand .site-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: .2rem;
}
.header-wrapper .brand .site-subtitle {
  font-size: .95rem;
  color: #666;
}

/* profile block on the right */
.profile-header {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  justify-self: end;  /* push to the right column */
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-header .name {
  display: flex;
  flex-direction: column;
}
.profile-header .name h1 {
  font-size: 1.35rem;
  margin-bottom: .25rem;
  color: #2c3e50;
}
.profile-header .name a {
  font-size: .95rem;
  color: #2980b9;
  text-decoration: none;
}
.profile-header .name a:hover { text-decoration: underline; }

.switch-link { margin-top: .2rem; }
.switch-link a { color: #27ae60; font-size: .9rem; }
.switch-link a:hover { color: #1e8449; text-decoration: underline; }

/* stack neatly on mobile */
@media (max-width: 700px) {
  .header-wrapper {
    grid-template-columns: 1fr;     /* single column */
    text-align: center;
    row-gap: .6rem;
  }
  .profile-header {
    justify-self: center;           /* center the welcome block */
    flex-direction: column;
  }
  .avatar { margin: 0 0 .4rem 0; }
}

/* =========================
   FINANCE TABLE (modern look)
   ========================= */
.finance-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;   /* spacing between rows */
  margin: 1rem 0;
}

.finance-table th {
  background: #f0f4f7;
  color: #2c3e50;
  font-weight: 600;
  text-align: left;
  padding: 0.6rem;
  font-size: 0.95rem;
  border-bottom: 2px solid #e1e7ed;
}

.finance-table td {
  background: #fff;
  padding: 0.6rem;
  font-size: 0.9rem;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.finance-table tr td:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.finance-table tr td:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* =========================
   MEETING ATTENDANCE (RSVP box)
   ========================= */
.attendance-box {
  background: #fffef7;
  border: 1px solid #e8e1c7;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.04);
}

.attendance-box p {
  margin: 0 0 .75rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: #444;
}

.attendance-box .btn-primary,
.attendance-box .btn-secondary {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.attendance-box .btn-primary {
  background: #2980b9;
  color: #fff;
}
.attendance-box .btn-primary:hover {
  background: #1f6391;
}

.attendance-box .btn-secondary {
  background: #e0e6eb;
  color: #2c3e50;
}
.attendance-box .btn-secondary:hover {
  background: #d0d8de;
}

/* =========================
   SECTION BLOCK (icon + content)
   ========================= */
.section-block {
  display: flex;
  align-items: flex-start;  /* text aligns to top of image */
  gap: 1.25rem;
  margin: 2rem 0;
}

.section-image img {
  width: 200px;
  height: auto;
  border-radius: 6px;
  display: block;
}

.section-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #c0392b; /* red to match your Activities style */
  margin: 0 0 .75rem;
}

.section-content p {
  margin-bottom: 1rem;
}

/* On mobile: stack vertically */
@media (max-width: 700px) {
  .section-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .section-content {
    text-align: left; /* keep body text readable */
    width: 100%;
  }
}


/* =========================
   NAVIGATION (desktop sticky row; mobile hamburger)
   ========================= */

/* Hamburger (hidden on desktop) */
.menu-toggle {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  color: #34495e;
  cursor: pointer;
  margin: 0.5rem 1rem;
  z-index: 2001; /* above the menu */
}

/* Base nav (desktop defaults) */
#nav {
  background: #ecf0f1;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  position: sticky;   /* stays visible when scrolling */
  top: 0;             /* sits directly under the header */
  z-index: 2000;
}

#nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  margin: 0;
  gap: 0.5rem;
}

#nav a {
  display: inline-block;
  padding: 10px 16px;
  background: #34495e;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 1rem;
  transition: background 0.2s ease;
}

#nav a:hover,
#nav a.active { background: #1abc9c; }

/* Mobile: floating donut + slide-down menu */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: fixed;
    top: 10px;
    right: 10px;
    background: #fff;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  #nav {
    position: fixed;      /* float with the button */
    top: 50px;            /* just below the donut */
    left: 0;
    right: 0;
    max-height: 0;        /* hidden by default */
    overflow: hidden;
    background: #34495e;
    transition: max-height 0.3s ease;
  }
  #nav.open { max-height: 70vh; } /* slide down */

  #nav ul {
    flex-direction: column;
    padding: 0;
    margin: 0;
    gap: 0;
  }

  #nav a {
    width: 100%;
    border-radius: 0;
    padding: 12px;
    text-align: center;
  }
}



/* =========================
   LAYOUT & TYPOGRAPHY
   ========================= */
#wrapper { max-width: 1000px; margin: 2rem auto; padding: 1rem; }

.container {
  background: #fff; padding: 1.5rem; margin-bottom: 1.5rem;
  border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,.05);
}

h3 { font-size: 1.35rem; color: #2c3e50; margin-bottom: .75rem; }

table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
th, td { padding: .5rem; border: 1px solid #ddd; text-align: left; font-size: .95rem; }
th { background: #f8f9fa; font-weight: 700; }

/* Buttons & links */
input[type="submit"], button {
  background: #2980b9; color: #fff; border: none; padding: .5rem 1rem;
  border-radius: 4px; cursor: pointer; font-size: .95rem;
}
input[type="submit"]:hover, button:hover { background: #1f6391; }

a { color: #2980b9; text-decoration: none; transition: color .2s ease; }
a:hover { color: #1abc9c; text-decoration: underline; }

/* Info box */
.info-box {
  background: #eef9ff; border: 1px solid #cce7f5; padding: 1rem; margin: 1rem 0;
  text-align: center; border-radius: 6px;
}
.info-highlight { color: #2980b9; font-weight: bold; }

/* Banner image */
 img {
  width: 100%;
  height: auto;
  display: block;
  max-height: none;      /* remove the cap */
  object-fit: contain;   /* fit inside, no cropping */
}


/* =========================
   OUTSTANDING PAYMENTS (Finances section)
   Clean card style + total row inline
   ========================= */
#five .container.alert {
  background: #fff; border: 1px solid #ddd; border-radius: 8px;
  padding: 1rem; margin: 2rem 0;
}
#five .container.alert h4 {
  margin: 0 0 1rem 0; font-size: 1.1rem; font-weight: 600; color: #2c3e50;
}
#five .container.alert .finance-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }

/* card-look rows */
#five .container.alert .finance-table tr {
  display: block; margin-bottom: .75rem; border: 1px solid #eee;
  border-radius: 6px; padding: .5rem .75rem; background: #fafafa;
}
#five .container.alert .finance-table td {
  display: block; border: none; padding: .25rem 0; font-size: .95rem;
}

/* total row back to inline table */
#five .container.alert .finance-table tr:last-child {
  display: table-row; background: #f0f4f7; font-weight: 700;
}
#five .container.alert .finance-table tr:last-child td {
  display: table-cell; padding: .5rem;
}

/* outstanding amount highlight */
#five .container.alert td span.alert { color: #c0392b; font-weight: 700; }

/* PayPal button alignment */
#five .container.alert div[align="right"] { text-align: right; margin-top: .5rem; }
#five .container.alert div[align="right"] img { max-height: 38px; width: auto; }

/* =========================
   OTHER ALERTS (general)
   ========================= */
.container.alert:not(#five .container.alert) {
  /* keep other alerts readable but neutral (no orange bar) */
  background: #fffef7; border: 1px solid #e8e1c7; border-radius: 8px; padding: 1rem;
}


/* =========================
   ACTIVITIES (dropdown + buttons)
   ========================= */
.activities-controls {
  margin: 1rem 0;
}

/* Dropdown styling */
.activities-controls select {
  width: 100%;
  padding: 0.6rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 0.75rem; /* space below dropdown */
}

/* Buttons: default reset */
.activities-controls input[type="submit"] {
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 0.6rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0; /* remove old spacing */
}

/* Primary: Book now */
.activities-controls input[name="submit"] {
  display: block;
  width: 100%;
  background: #2980b9;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.activities-controls input[name="submit"]:hover {
  background: #1f6391;
}

/* Secondary: More Info + View who is attending */
.activities-controls input[name="information"],
.activities-controls input[name="booked"] {
  background: #e0e6eb;
  color: #2c3e50;
  flex: 1 1 48%;
}

/* Secondary buttons wrapper (flex layout) */
.activities-controls .secondary-btns {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Mobile: stack secondary buttons */
@media (max-width: 500px) {
  .activities-controls .secondary-btns {
    flex-direction: column;
  }
  .activities-controls input[name="information"],
  .activities-controls input[name="booked"] {
    flex: 1 1 100%;
  }
}

/* =========================
   COMMUNICATION (contact + SMS)
   ========================= */
.comm-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 5px rgba(0,0,0,.05);
  margin-top: 1rem;
}

.comm-card .subhead {
  margin: 0 0 .5rem 0;
  font-size: 1.15rem;
  color: #2c3e50;
}

.comm-card p { margin-bottom: 1rem; }

/* Controls */
.comm-card select,
.comm-card input[type="text"],
.comm-card textarea {
  width: 100%;
  padding: 0.65rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 1rem;
  transition: border-color .2s ease;
}
.comm-card select:focus,
.comm-card input[type="text"]:focus,
.comm-card textarea:focus {
  border-color: #2980b9; outline: none;
}
.comm-card textarea { min-height: 120px; resize: vertical; }

/* Email row: select + manage link */
.comm-row {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1rem;
}
.comm-row select { flex: 1; margin-bottom: 0; }

/* Link styled like a button */
.link-btn {
  font-size: .9rem;
  color: #2980b9;
  text-decoration: none;
  background: #eef6fb;
  padding: .5rem .75rem;
  border-radius: 4px;
  white-space: nowrap;
}
.link-btn:hover { background: #d8ebf7; text-decoration: underline; }

/* Actions */
.comm-actions {
  display: flex;
  gap: .75rem;
}
.comm-actions.single { justify-content: flex-end; }

/* Buttons */
.btn-primary,
.btn-secondary {
  flex: 1;
  padding: .65rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}
.btn-primary { background: #2980b9; color: #fff; font-weight: 600; }
.btn-primary:hover { background: #1f6391; }
.btn-secondary { background: #e0e6eb; color: #2c3e50; }
.btn-secondary:hover { background: #d0d8de; }

/* SMS input grid */
.sms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .75rem;
  margin-bottom: .5rem;
}
@media (min-width: 680px) {
  .sms-grid { grid-template-columns: repeat(3, 1fr); }
}




/* =========================
   PHOTOS (grid)
   ========================= */
.photo-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px; margin: 1rem 0;
}
@media (min-width: 720px) { .photo-grid { grid-template-columns: 1fr 1fr; } }

.photo-card { margin: 0; }
.photo-card img {
  width: 100%; height: 220px; object-fit: cover; display: block;
  border-radius: 6px; box-shadow: 0 2px 4px rgba(0,0,0,.08);
}
.photo-card figcaption { text-align: center; margin-top: .45rem; font-size: 1rem; color: #555; }
.photo-card .pw { font-size: .9rem; color: #777; margin-top: .15rem; }

/* =========================
   RESPONSIVE header tweaks
   ========================= */
@media (max-width: 600px) {
  .header-wrapper { text-align: center; }
  .profile-header { flex-direction: column; align-items: center; }
  .avatar { margin-right: 0; margin-bottom: .5rem; }
}

/* =========================
   BOTTOM TABS (Members page)
   ========================= */

#main {
  padding-bottom: 92px; /* space for fixed bottom bar */
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Fixed bottom tab bar */
.bottom-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: #fff;
  border-top: 1px solid rgba(0,0,0,0.14);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
}

/* Inner layout */
.bottom-tabs .tabs-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* Buttons / links */
.bottom-tabs button,
.bottom-tabs a {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.14);
  background: #f6f6f6;
  border-radius: 12px;
  padding: 10px 6px;
  font-size: 14px;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* Active tab */
.bottom-tabs button.active {
  background: #e9eefc;
  border-color: #c7d2fe;
  font-weight: 600;
}

/* Spacer for Communication docking */
.tab-dock {
  margin-top: 22px;
}

/* Print behaviour */
@media print {
  #main {
    padding-bottom: 0 !important;
  }
  .bottom-tabs {
    display: none !important;
  }
  .tab-panel {
    display: block !important;
  }
}

/* =========================
   DIARY (flat list + inline expand)
   ========================= */

.diary-heading {
  margin-bottom: .75rem;
}

/* list wrapper */
.diary-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* each expandable row */
.diary-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* clickable header row */
.diary-row {
  list-style: none;              /* removes default marker in some browsers */
  cursor: pointer;
  padding: 12px 12px;
  display: grid;
  grid-template-columns: 110px 80px 1fr 22px;
  gap: 10px;
  align-items: center;
}

/* remove default triangle marker */
.diary-row::-webkit-details-marker { display: none; }
.diary-row::marker { content: ""; }

/* text */
.diary-date { font-weight: 700; color: #2c3e50; }
.diary-time { color: #555; }
.diary-title { color: #333; }

/* chevron rotates when open */
.diary-chevron {
  text-align: right;
  opacity: .7;
  transition: transform .2s ease;
}
.diary-item[open] .diary-chevron {
  transform: rotate(180deg);
}

/* expanded panel */
.diary-expand {
  border-top: 1px solid #eee;
  padding: 12px;
  background: #f8fbff; /* subtle like your info-box family */
}

.diary-fulltext {
  margin: 0;
  color: #333;
}

/* Mobile: stack the row nicely */
@media (max-width: 600px) {
  .diary-row {
    grid-template-columns: 1fr 22px;
    grid-template-rows: auto auto;
    gap: 6px 10px;
  }
  .diary-date { grid-column: 1 / 2; grid-row: 1; }
  .diary-chevron { grid-column: 2 / 3; grid-row: 1; }
  .diary-time { grid-column: 1 / 2; grid-row: 2; opacity: .9; }
  .diary-title { grid-column: 1 / 3; grid-row: 3; }
}

/* =========================
   DIARY – expanded meta table
   ========================= */

.diary-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.diary-meta-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid #e6edf3;
}

.diary-meta-row:last-child {
  border-bottom: none;
}

.diary-meta-label {
  font-weight: 700;
  color: #2c3e50;
  font-size: 0.95rem;
}

.diary-meta-value {
  font-size: 0.95rem;
  color: #333;
}

/* Mobile: stack label above value */
@media (max-width: 600px) {
  .diary-meta-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .diary-meta-label {
    font-size: 0.85rem;
    opacity: 0.85;
  }
}
/* =========================
   DIARY FILTER BUTTONS
   ========================= */

.diary-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.diary-filter {
  background: #e0e6eb;
  border: 1px solid #ccc;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

.diary-filter.active {
  background: #2980b9;
  color: #fff;
  border-color: #1f6391;
}

.diary-filter:hover {
  background: #d0d8de;
}

/* =========================
   DIARY COLOUR STATES
   ========================= */

/* Default meeting = light green */
.diary-item.is-meeting {
  border-color: #cfe8d6;
  background: #f3fbf5;
}

/* Meeting absent (status=3) = light red */
.diary-item.is-meeting.is-absent {
  border-color: #f0bcbc;
  background: #fff3f3;
}

/* Default event = yellow */
.diary-item.is-event {
  border-color: #f2e3a1;
  background: #fffbe8;
}

/* Event provisional = orange */
.diary-item.is-event.is-provisional {
  border-color: #f1c08b;
  background: #fff2e5;
}

/* Event confirmed = light blue */
.diary-item.is-event.is-confirmed {
  border-color: #bcd7f2;
  background: #eef6ff;
}

/* Keep the summary row readable against tinted backgrounds */
.diary-row {
  background: transparent;
}

/* Allow a second line (subline) under the main row */
.diary-row {
  grid-template-columns: 110px 80px 1fr 22px;
  grid-template-rows: auto auto;
}

.diary-date { grid-column: 1; grid-row: 1; }
.diary-time { grid-column: 2; grid-row: 1; }
.diary-title { grid-column: 3; grid-row: 1; }
.diary-chevron { grid-column: 4; grid-row: 1; }

.diary-subline {
  grid-column: 1 / 4;
  grid-row: 2;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 2px;
}

/* Mobile already stacks; just ensure subline sits naturally */
@media (max-width: 600px) {
  .diary-subline {
    grid-column: 1 / 3;
    grid-row: 4;
    margin-top: 0;
  }
}

/* Date cell becomes a mini-column: date on top, button underneath */
.diary-date {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.diary-abs-btn--summary {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.85rem;
  border-radius: 8px;
}

/* Put volunteer line under the TITLE column (meetings only) */
.diary-volline {
  grid-column: 3;
  grid-row: 2;
  font-size: 0.85rem;
  opacity: 0.8;
  margin-top: 0;
}


.diary-row {
  grid-template-rows: auto auto;
  row-gap: 2px;
  align-items: start;
}

.diary-title-block {
  line-height: 1.25;
  font-size: 1rem;
}

.diary-title-block strong {
  font-weight: 700;
}

.diary-title-block strong {
  font-size: 1.15rem;   /* title line only */
  font-weight: 700;
}

.diary-helping {
	color: #c0392b; /* readable red */
	font-weight: 600;
}

.diary-thumb {
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 6px;
	float: left;
	margin: 0 10px 4px 0;
}

/* default: show desktop thumb, hide "under" thumb */
.diary-thumb--under { display: none; }
.diary-thumb--desktop { display: inline-block; }

/* mobile: hide desktop thumb, show thumb under mark absent, make it bigger */
@media (max-width: 640px) {
	.diary-thumb--desktop { display: none; }
	.diary-thumb--under {
		display: block;
		width: 120px;
		height: 120px;
		object-fit: cover;
		border-radius: 8px;
		margin: 8px 0 0 0;
	}
}