/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* One place to tune the wood-grain wash used by the body, navbar, and status bar.
   Higher alpha = lighter/more washed out (more readable); lower = more grain. */
:root {
    --wood-wash: rgba(255, 255, 255, 0.1);
    --wood-line: transparent;   /* divider lines under the navbar and status bar (set a grey like #888 to show them) */
}

header {
    margin: 0;
}

#status-bar {
    padding: 3px 12px;
    font-size: 0.82em;
    color: #666;
    background-color: #f8f8f8;   /* fallback shown under the texture */
    background-image:
        linear-gradient(var(--wood-wash), var(--wood-wash)),
        url("../img/fine-wood-grain-3.d05a65e32f33.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--wood-line);
}

/* Navbar shares the same fixed texture so nav + status + body read as one surface. */
#site-nav {
    background-image:
        linear-gradient(var(--wood-wash), var(--wood-wash)),
        url("../img/fine-wood-grain-3.d05a65e32f33.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* Darken the divider (overrides Bootstrap's light .border-bottom). */
    border-bottom: 1px solid var(--wood-line) !important;
}

#status-bar .status-sep {
    margin: 0 0.5em;
    color: #bbb;
}

body {
    margin: 8px;
    margin-bottom: 60px; /* Margin bottom by footer height */
    /* Wood-grain page background, lightened by the shared --wood-wash (defined
       above) so text stays readable. Tune it in that one place. */
    background-image:
        linear-gradient(var(--wood-wash), var(--wood-wash)),
        url("../img/fine-wood-grain-3.d05a65e32f33.png");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.container {
  max-width: 960px;
}

.pricing-header {
  max-width: 700px;
}

.cards {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-contents: center;
    grid-auto-rows: auto;
    gap: 8px;
    font-family: sans-serif;
    padding-top: 20px;
    padding-bottom: 30px;
}

.cards * {
    box-sizing: border-box;
}

.card {
    position: relative;
    width: 175px;
    max-width: 175px;
    background-color: #dddddd;
}

/* Grid card size slider: zoom scales the whole card (image, text, padding)
   uniformly and reflows the grid, so the same text fits at any size.
   Detail hero (#big_card/.big-card) is excluded. */
.cards .card:not(#big_card):not(.big-card) {
    zoom: var(--card-zoom, 1);
}

.image-card:focus,
.image-card:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px #64968c;
}


#big_card, .big-card {
    width: 400px;
    max-width: 400px;
}


.card__image {
    width: auto;
    height: auto;
    object-fit: cover;
    display: block;
    border-top: 2px solid #333333;
    border-right: 2px solid #333333;
    border-left: 2px solid #333333;
}

.card__content {
    line-height: 1.0;
    font-size: 0.9em;
    background: #fafafa;
    border-right: 2px solid #333333;
    border-bottom: 2px solid #333333;
    border-left: 2px solid #333333;
    padding: 3px;
}


.card__content > p:first-of-type {
    margin-top: 0;
}

.card__content > p:last-of-type {
    margin-bottom: 0;
}

.card__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #555555;
    background: #eeeeee;
    font-size: 0.8em;
    border-bottom: 2px solid #333333;
    border-right: 2px solid #333333;
    border-left: 2px solid #333333;
    padding: 3px;
}

/* Collapse the info bar when it has no buttons (e.g. logged-out visitors),
   so it doesn't render a grey strip + second bottom border. Placed AFTER the
   base .card__info rule: both selectors have equal specificity, so source
   order decides which display value wins. */
.card__info:not(:has(*)) {
    display: none;
}

.card__info i {
    font-size: 0.9em;
    margin-right: 8px;
}

/* Score radio buttons — display horizontally */
.score-radios .form-check {
    display: inline-flex;
    align-items: center;
    margin-right: 1.2em;
}
.score-radios .form-check-input {
    margin-top: 0;
}

.card__link {
    color: #64968c;
    text-decoration: none;
}

.card__link:hover {
    text-decoration: underline;
}

/* Drag-and-drop file inputs (image_dropzone.js) */
.dz-hint { font-size: 0.8rem; color: #999; margin-top: 0.25rem; }
.dz-file { font-size: 0.82rem; color: #198754; margin-top: 0.15rem; }
.dz-over { outline: 2px dashed #64968c; outline-offset: 4px; background: rgba(100,150,140,0.06); border-radius: 4px; }

/* A <button> styled as a card link: strip the default button chrome so it looks
   like the plain highlighted text links used elsewhere in cards. */
button.card__link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.nav-active {
    font-weight: bold;
    text-decoration: underline;
}

#footer {
    display: flex;
    flex-direction: row;
    background-color: lightgray;
    border: 2px solid black;
    justify-content: space-between;
    padding: 10px
}

.asteriskField {
    color: #dc3545;
}

.footlet {
    /* height: 200px;
    width: 200px; */
    font-size: 0.8em;
    background-color: lightgray;
}

h1,h2,h3,h4,h5 {
    font-weight: bold;
}

h1 {
    margin: 0 0 20px;
    font-weight: 300;
    font-size: 1.25rem;
}

h2 {
    font-size: 1rem;
    margin: 1em 0 .5em 0;
}

h2.subhead {
    font-weight: normal;
    margin-top: 0;
}

h3 {
    font-size: 0.875rem;
    margin: .8em 0 .3em 0;
    color: var(--body-medium-color);
    font-weight: bold;
}

h4 {
    font-size: 0.75rem;
    margin: 1em 0 .8em 0;
    padding-bottom: 3px;
    color: var(--body-medium-color);
}

h5 {
    font-size: 0.625rem;
    margin: 1.5em 0 .5em 0;
    color: var(--body-quiet-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

th, td {
  padding: 8px; /* Adds 8px padding on all sides of the cell content */
}

.social-login-page {
    min-height: calc(100vh - 180px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
        radial-gradient(circle at 15% 10%, #f8f4ec 0%, #f8f4ec 15%, transparent 45%),
        radial-gradient(circle at 85% 80%, #e6e0d2 0%, #e6e0d2 20%, transparent 42%),
        linear-gradient(145deg, #f3eee4 0%, #e5dece 100%);
}

.social-login-card {
    width: 100%;
    max-width: 560px;
    border: 3px solid #333333;
    background: #fffdf8;
    padding: 0;
    box-shadow: 10px 10px 0 #d2ccbf;
}

.social-login-header {
    padding: 24px 24px 14px;
    border-bottom: 2px solid #ded8cb;
    background: linear-gradient(180deg, #fffcf5 0%, #f8f2e6 100%);
}

.social-login-eyebrow {
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    color: #6f6859;
    font-weight: 700;
}

.social-login-title {
    font-size: 1.55rem;
    margin: 0 0 8px;
    color: #2b2b2b;
    line-height: 1.2;
}

.social-login-copy {
    color: #4a4a4a;
    margin: 0;
    line-height: 1.45;
}

.social-login-provider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 24px 0;
    padding: 10px 12px;
    border: 2px solid #d8d0be;
    background: #faf5ea;
    font-size: 0.93rem;
}

.social-login-provider-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6f6859;
    font-weight: 700;
}

.social-login-form {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 24px 10px;
}

.social-login-button {
    border-radius: 0;
    border: 2px solid #7b1919;
    min-width: 150px;
    font-weight: 700;
}

.social-login-cancel {
    color: #366f67;
    text-decoration: none;
    font-weight: 600;
}

.social-login-cancel:hover {
    text-decoration: underline;
}

.social-login-note {
    margin: 2px 24px 22px;
    color: #6a665c;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .social-login-page {
        padding: 16px;
    }

    .social-login-header,
    .social-login-form {
        padding-left: 16px;
        padding-right: 16px;
    }

    .social-login-provider,
    .social-login-note {
        margin-left: 16px;
        margin-right: 16px;
    }

    .social-login-form {
        flex-direction: column;
        align-items: stretch;
    }

    .social-login-button {
        width: 100%;
    }
}
.section-label {
    padding: 0.75rem 0;
}

.section-label h2 {
    margin: 0;
}

.dim-input {
    width: 7.5em !important;   /* 1.5x the original 5em */
    display: inline-block;
    text-align: center;
}

.dim-sep {
    font-size: 1.2em;
    padding: 0 2px;
    line-height: 2.4;
}

/* Show-page controls: a wrapping row of buttons and small dropdown menus. Gap does
   the spacing, so a group that is empty for this viewer costs no room at all —
   the old layout used fixed full-width spacers and left holes instead. */
/* Must not defeat the .card__info:not(:has(*)) hide-when-empty rule above: equal
   specificity, and this comes later in the file. The template also refuses to emit
   the element when there is nothing in it, which is the real guard. */
.show-actions:not(:has(*)) {
    display: none;
}
.show-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
}
.show-actions .dropdown-toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.show-actions .dropdown-menu {
    font-size: .9rem;
    --bs-dropdown-min-width: 11rem;
}
.show-actions .dropdown-menu form {
    margin: 0;
}
.show-actions .dropdown-item {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
}

/* "Add to calendar" — small on purpose: it repeats on every future row of the agenda, so a
   full button would outweigh the event it belongs to. */
.add-to-cal { white-space: nowrap; font-size: .85rem; }
/* The agenda repeats this on every future row, so it shrinks there. */
.add-to-cal--compact { font-size: .8rem; }
.add-to-cal a {
  display: inline-block;
  padding: .1rem .4rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .25rem;
  text-decoration: none;
  color: #2f7d55;
  line-height: 1.4;
  vertical-align: middle;
}
.add-to-cal a:hover { background: #f2f8f4; border-color: #2f7d55; }
.add-to-cal svg { vertical-align: -2px; margin-right: .15rem; }
/* Joined to the button before it, so the pair reads as one control. */
.add-to-cal__ics { border-left: 0 !important; border-top-left-radius: 0 !important;
                   border-bottom-left-radius: 0 !important; margin-left: -1px;
                   color: #777 !important; }

/* Room under the reply form: the description used to sit against the Send button, so the two
   read as one block. */
.rsvp { margin-bottom: 1rem; }

/* Reply + add-to-calendar, sitting on the same line as an event's date. These live inside
   headings, so the font size has to be overridden or they inherit h3/h4 and dwarf the date they
   belong to. */
/* em, not rem: these sit inside an h3 on a show page and an h4 on a card, which this stylesheet
   sets to 0.875rem and 0.75rem — and .card__content scales by another 0.9. A fixed size came out
   smaller than the date in one place and larger than it in the other.

   Sized once, here, and inherited by both children. Setting it on the group *and* on the links
   was the previous bug: .85 × .85 made the .ics link visibly smaller than the RSVP beside it. */
.event-actions {
  white-space: nowrap;
  font-weight: 400;
  font-size: .85em;
}

/* One rule for both, so they cannot end up different sizes again. */
.event-actions .event-actions__rsvp,
.event-actions .add-to-cal a {
  display: inline-block;
  font-size: inherit;
  padding: .1rem .4rem;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .25rem;
  line-height: 1.4;
  text-decoration: none;
  vertical-align: middle;
}
.event-actions .event-actions__rsvp { color: #2f7d55; }
.event-actions .event-actions__rsvp:hover { background: #f2f8f4; border-color: #2f7d55; }
/* Neutralise the standalone sizes: inside this group the container decides. */
.event-actions .add-to-cal,
.event-actions .add-to-cal--compact { font-size: inherit; margin-left: .25rem; }
.event-actions .add-to-cal svg { width: 1em; height: 1em; }