/*
Theme Name: Brett & Beth Wedding Theme 2026
Author: Bethany Fowler  
Author URI: https://bethanyfowler.me/
Description: Theme for Luffman Wedding: updated style and email format, updated with blue floral pattern and weekend page
Version: 3.0.1
Text Domain: buildnbloom
*/

:root {
  --mauve: #724264;
  --navy: #244d8b;
}
.baskerville-regular {
    font-family: "Libre Baskerville", roboto;
    font-weight: 400;
    font-style: normal;
}
.baskerville-bold {
    font-family: "Libre Baskerville", roboto;
    font-weight: 700;
    font-style: bold;
}
.alex-brush {
    font-family: "Alex Brush", cursive;
    font-weight: 400;
    font-style: normal;
}

.capital-text {
    text-transform: uppercase;
    letter-spacing: 6px;
}

.floral-border-top {
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}
.floral-bouquet {
    height: 6rem;
    margin: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.floral-bouquet img {
    height: 100%;
}
.floral-border-top img, .floral-page-split, .floral-page-split img {
    width: 100%;
}
.floral-page-split img {
    max-width: 30rem;
}
.floral-page-split-sml {
    width: 100%;
    text-align: center;
}
.floral-page-split-sml img {
    width: 8rem;
}
img.border-side {
    width: 6rem;
}
img.border-side.border-right {
    transform: rotate(0.5turn);
}
  
body {
    background-color: white;
    margin: auto;
    max-width: 1000px;
    position: relative;
    color: var(--navy);
    padding: 1rem;
    text-align: center;
    max-width: 1000px;
    margin: auto;
}
a {
    color: var(--navy);
}
.text-left {
    text-align: left;
}
.names {
    font-size: 1.5rem;
    margin-top: 17%;
}
.weekend-top{
    margin-top: 17%;
}
.sm-font {
    font-size: .7rem;
}
.lg-font {
    font-size: 1.5rem;
}
.xl-font {
    font-size: 3rem;
}
.additional {
    font-size: 1.5rem;
}
.margin-1 {
    margin-top: 1rem;
}
hr {
    border-color: var(--navy);
}
.party {
    margin-top: 1rem;
    font-size: 4rem;
}
.party .capital-text {
    font-size: 2rem;
}

.rsvp-btn-container {
    margin-top: 2rem;
}

.rsvp-here-btn {
    display: block;
    padding: 1rem;
    background-color: var(--navy);
    color: white;
    text-decoration: none;
    border-radius: 10px;
}

.rsvp-here-btn:hover {
    color: var(--navy);
    background-color: white;
    border: 1px solid var(--navy);
}

.inline-image {
    height: 35vh;
    width: 100%;
    object-fit: cover;
}
@media only screen and (min-width: 500px) {
  .inline-image {
        width: 48%;
        display: inline-block;
        height: 45vh;
    }
}

.form-container {
    padding: 1rem;
    text-align: left;
    max-width: 600px;
    margin: auto;
}
.form-container .form-input {
    margin-bottom: 2rem;
}

.form-container input[type=text], .form-container input[type=number], .form-container textarea {
    width: -webkit-fill-available;
    font-size: 1rem;
    padding: .5rem;
    border-radius: .2rem;
    border: 1px solid var(--navy);
    margin-top: .2rem;
    margin-bottom: .2rem;
    font-family: "Libre Baskerville", roboto;
}
.form-container input::placeholder {
    color: #ccc;
}
.form-input label, .form-label {
    text-transform: uppercase;
    letter-spacing: 2px;
}
.form-input.checkbox-input {
    margin-bottom: 0px;
    display: flex;
    margin-bottom: .5rem;
}
.form-input p {
    margin-top: 5px;
}
.dietary-checkbox-group {
    margin-bottom: 2rem;
}
.form-input hr {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: .5px solid #ccc;
}

.radio-input {
    display: flex;
}
.radio-input label, .checkbox-input label {
    margin-top: auto;
    margin-bottom: auto;
    margin-left: 1rem;
    text-transform: none;
    flex-shrink: 10;
}

input[type="radio"], input[type="checkbox"]{
   appearance: none;
   border: 2px solid var(--navy);
   width: 30px;
   height: 30px;
   content: none;
   outline: none;
   margin: 0;
}

input[type="radio"]:checked, input[type="checkbox"]:checked {
  appearance: none;
  outline: none;
  padding: 0;
  content: none;
  border: none;
}

input[type="radio"]:checked::before, input[type="checkbox"]:checked::before{
  position: absolute;
  color: white !important;
  content: "\00A0\2713\00A0" !important;
  font-weight: bolder;
  font-size: 21px;
  background-color: var(--navy);
}

.hide-until-rsvp-selected, .hide-reject, .hide-accept, .weekend-only-hide, .party-only-hide, .dietary-options-hide, .not-staying-whole-weekend-hide {
    display: none;
}
.show-rsvp-selected, .show-reject, .show-accept, .weekend-only-show, .party-only-show, .dietary-options-show, .not-staying-whole-weekend-show {
    display: block;
}
label .show-reject, label .show-accept, .inline .show-reject, .inline .show-accept {
    display: inline;
}

.rsvp-btn {
    display: block;
    padding: 1rem;
    background-color: var(--navy);
    color: white;
    border-radius: 10px;
    box-shadow: none;
    border: 0px;
    cursor: pointer;
}
.rsvp-btn:hover {
    background-color: var(--navy);
    color: white;
}
.rsvp-btn.disabled, .rsvp-btn.disabled:hover {
    border: 2px solid #ccc;
    color: #ccc;
    cursor: auto;
    background-color: white;
}

/* RSVP Response*/
.form-response-box {
    position: fixed;
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 100%;
    z-index: 1;
    top: 0;
    left: 0;
    display: none;
    z-index: 2;
}

.form-response-content {
    background-color: white;
    top: 50%;
    left: 50%;
    height: auto;
    transform: translate(-50%, -50%);
    border: 5px solid var(--navy);
    border-radius: 2rem;
    padding: 1rem;
    color: var(--navy);
    width: 70vw;
    position: fixed;
    text-align: center;   
}
.loading-send img {
    width: 80%;
    max-width: 25rem;
}
.loaded-content {
    display: none;
}

.love-brett-beth {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 2rem;
    font-family: "Lavishly Yours", cursive;
}
.yes-response, .no-response {
    margin-top: 2rem;
    display: none;
}

.text-center {
    text-align: center;
}

.background-fade {
    background-color: rgba(255, 255, 255, 0.7);
    width: 100%;
    position: fixed;
    height: 100%;
    z-index: -1;
}

.close-btn {
    margin: auto;
    display: block;
    padding: 1rem;
    color: var(--navy);
    background-color: white;
    border: 2px solid var(--navy);
    border-radius: 10px;
    box-shadow: none;
    cursor: pointer;
}
.close-btn:hover {
    background-color: var(--navy);
    color: white;
}

/** RESULTS PAGE **/
.kpi-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px){ .kpi-grid-2{ grid-template-columns: 1fr; } }

.kpi-title{ font-weight:800; color:#111; margin-bottom:12px; }

.kpi-split{
  display:flex;
  justify-content: space-between;
  gap:16px;
}

.kpi-mini-label{
  font-size:12px;
  color:#666;
  text-transform: uppercase;
  letter-spacing:.06em;
}

.kpi-mini-value{
  font-size:32px;
  font-weight:800;
  line-height:1;
  color: var(--navy);
}
/* Dashboard container */
.rsvp-dashboard{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:16px;
  margin: 18px 0 26px;
}

@media (max-width: 900px){
  .rsvp-dashboard{ grid-template-columns: 1fr; }
}

/* Card styling */
.dash-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  padding:16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  border-top: 4px solid #00000008;
}

/* Make the Responses card span both columns on desktop */
.dash-card-wide{
  grid-column: 1 / -1;
}

.dash-title{
  font-size: 20px;
  font-weight: 700;
  color:#111;
  margin-bottom: 12px;
}

/* Two-column split inside a card */
.dash-split{
  display:flex;
  justify-content: space-between;
  gap:16px;
}

.dash-progress-row{
  display:flex;
  justify-content: space-between;
  gap:4px;
  flex-wrap: wrap;
}

/* Metric blocks */
.dash-metric{
  min-width: 100px;
}

.dash-label{
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:#666;
  margin-bottom: 6px;
}

.dash-value{
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
}
.dash-muted{
  opacity: 0.75;
}
.dash-value.dash-muted { font-size: 30px; }

/* Progress bar */
.dash-bar{
  margin-top: 14px;
  height: 10px;
  background: #f1f1f1;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #eee;
}

.dash-bar-fill{
  height: 100%;
  background: var(--navy);
  border-radius: 999px;
}

/* Little footer text */
.dash-foot{
  margin-top: 10px;
  font-size: 13px;
  color:#666;
}


/* --- Tables --- */
.table-tools{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content: space-between;
  margin: 10px 0 12px;
  flex-wrap: wrap;
}
.table-search {
    flex: 1;
}
.table-search input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
}

.table-search input:focus{
  outline: none;
  border-color: #ddd;
}

.table-count{
  font-size: 13px;
  color: #666;
}

.btn-export{
  display:inline-block;
  padding:10px 12px;
  border:1px solid #eee;
  border-radius:12px;
  background:#fff;
  text-decoration:none;
  font-size:14px;
  color: var(--navy);
}
.btn-export:hover{ background:#fafafa; }


/* Accessible helper */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}

.table-list{
  overflow-x:auto;            /* mobile + narrow screens */
  margin: 18px 0 40px;
}

table{
  width:100%;
  border-collapse:separate;   /* allows rounded corners */
  border-spacing:0;
  background:#fff;
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  font-family: arial, sans-serif;
  font-size: 14px;
}

/* Sticky header */
thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background:#fafafa;
  border-bottom:1px solid #eee;
  padding:12px 10px;
  text-align:left;
  white-space:nowrap;
}

td{
  padding:10px;
  border-bottom:1px solid #f1f1f1;
  vertical-align:top;
}

/* Lighter zebra + hover */
tbody tr:nth-child(even){ background:#fcfcfc; }
tbody tr:hover{ background:#f6f8ff; }

/* Reduce heavy borders */
td, th{
  border-left:none;
  border-right:none;
}

/* Keep names & date tidy */
td:first-child{ font-weight:700; white-space:nowrap; }
td:last-child{ white-space:nowrap; }

/* Existing accept colours */
tr.accept-0 td{ color:#777; }
tr.accept-1 td{ color:var(--navy); }

/* Make long text readable without exploding rows */
td:nth-child(9),  /* message col in weekend table if unchanged */
td:nth-child(5),
td:nth-child(7){
  max-width: 280px;
  white-space: normal;
  word-break: break-word;
}

/* Optional: make tick/cross columns centered if you add a class */
td.yn, th.yn{
  text-align:center;
  width:70px;
}

/* WEEKEND PAGE */
.and-page-break {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 1rem;
    margin-bottom: 1rem;
    align-items: center;
}
.and-page-break .and-text {
    padding-left: 6px;
}