:root{
  --color-white:#FFFFFF;
  --color-black:#111111;
  --color-gray:#CCCCCC;
  --color-primary:#1E88E5;
  --color-success:#43A047;
  --color-danger:#E53935;
}

*{ padding:0; margin:0; box-sizing:border-box; }

body{
  font-size:1rem;
  padding:100px 5px;
  color:#111;
  font-family:'Josefin Sans',sans-serif;
}

/* --- forms (unchanged semantics, flattened) --- */
label,
#cform span label{ font-family:'Josefin Sans',sans-serif !important; }
#cform span label{ padding-right:15px !important; }
form{ max-width:90%; }
fieldset{
  max-width:500px !important;
  padding:46px 32px 32px !important;
  margin-bottom:40px !important;
  border:2px solid var(--color-gray) !important;
  border-radius:3px !important;
  font-family:'Josefin Sans',sans-serif !important;
}
#cform > fieldset > span > div{ min-width:400px; }
#your_name,#email_address,#person_from{ max-width:200px; }
legend{
  font-size:1.2rem !important;
  padding:0 4px !important;
  margin-left:-4px !important;
  font-weight:700 !important;
  font-family:'Josefin Sans',sans-serif !important;
}
span{ margin-bottom:24px; display:flex; flex-wrap:wrap; }
label, form#cform fieldset span label{
  text-transform:none !important;
  font-weight:700 !important;
  padding:10px 0 !important;
  font-size:1.4rem !important;
  min-width:120px !important;
  font-family:'Josefin Sans',sans-serif !important;
}
input#username{ display:none; }
input{
  font-family:'Josefin Sans',sans-serif !important;
  height:inherit; flex-grow:1; font-size:1rem; padding:10px 0; line-height:1;
}
input + .underline{
  width:100%;
  border-bottom:2px solid var(--color-gray);
  transition:border ease-in-out .1s;
}
input:invalid + .underline{ border-color:var(--color-danger); }
input:focus + .underline{ border-color:var(--color-primary); }

button{
  border:2px solid var(--color-black);
  background:transparent;
  padding:8px 10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  border-radius:4px;
  cursor:pointer;
  transition:all ease-in-out .1s;
}
button.sm{ padding:4px 6px; }
button.lg{ padding:12px 14px; }
button:hover{
  background-color:var(--color-black);
  border-color:var(--color-black);
  color:var(--color-white);
}
button.primary{ color:var(--color-primary); border-color:var(--color-primary); }
button.primary:hover{ background-color:var(--color-primary); color:var(--color-white); }
button.confirm{ color:var(--color-success); border-color:var(--color-success); }
button.confirm:hover{ background-color:var(--color-success); color:var(--color-white); }
button.danger{ color:var(--color-danger); border-color:var(--color-danger); }
button.danger:hover{ background-color:var(--color-danger); color:var(--color-white); }

.ta-r{text-align:right;}
.mb32{margin-bottom:32px;}
.mb16{margin-bottom:16px;}

#cform div.file_upload div p.sub_filename input[type="file"]{
  background-color:#ccc; border:none; color:white; padding:15px 32px; text-align:center;
  text-decoration:none; display:inline-block; font-size:16px;
}
#cform div div.file_upload div p.file_existing{ display:none; }

body#submit img#lake{ width:25%; }
#cform > input[type="submit"]{
  background-color:#4CAF50; border:1px solid gray; color:white; padding:15px 32px;
  text-align:center; text-decoration:none; display:inline-block; font-size:16px; margin:10px 0;
}
#cform > fieldset > legend{ display:none; }
#cform > label:nth-child(7), #cform > label:nth-child(5){ margin-top:25px; display:block; }
#cform > fieldset > span > div{ margin-top:0; }

table tr, td{ padding:3px; border:1px solid #ccc; vertical-align:top; }

/* --- layout wrappers --- */
.page-wrapper{ padding:2rem 1rem; }
.content.container{ max-width:960px; margin:0 auto; }
.remembrances-wrapper{ display:flex; flex-direction:column; gap:2rem; }
.remembrances-header .page-title{ font-size:2rem; font-weight:700; margin-bottom:.5rem; }
.container{ overflow-x:auto; }

/* photos */
.photos-cell .photo-thumbs{ display:flex; flex-wrap:wrap; gap:.5rem; }
.photos-cell img{ border-radius:6px; width:100px; height:100px; object-fit:cover; }

/* table (desktop) */
.table{ width:100%; border-collapse:collapse;
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.table th,.table td{ padding:.75rem .875rem; border-bottom:1px solid #e5e7eb; vertical-align:top; }
.table th{ text-align:left; font-weight:700; background:#f9fafb; }
.table td a img{
  display:inline-block; width:96px; height:96px; object-fit:cover; border-radius:8px; margin-right:.5rem;
}
.table td a:last-child img{ margin-right:0; }
.table hr{ border:0; border-top:1px solid #e5e7eb; margin:.5rem 0; }

button:hover{ box-shadow:0 0 4px rgba(3,3,3,.8); opacity:.9; }
button.edit{ background:#6F9; }
button.delete{ background:#F69; }

/* --- mobile table card layout (FIXED: don't hide first data row) --- */
@media screen and (max-width: 800px){
  .table thead{
    position:absolute !important;
    width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap;
  }

  .table, .table tbody, .table tr, .table td{ display:block; width:100%; }

  .table tr{
    background:#fff; border:1px solid #e5e7eb; border-radius:12px;
    padding:.75rem; margin:0 0 1rem; box-shadow:0 1px 0 rgba(0,0,0,.03);
  }

  .table td{
    display:grid; grid-template-columns:minmax(7.5rem,32%) 1fr;
    gap:.5rem .75rem; padding:.5rem 0; border:0;
  }
  .table td + td{ border-top:1px dashed #e5e7eb; }

  .table tr > td:nth-child(1)::before{ content:"Name"; }
  .table tr > td:nth-child(2)::before{ content:"From"; }
  .table tr > td:nth-child(3)::before{ content:"Tribute"; }
  .table tr > td:nth-child(4)::before{ content:"Photos"; }

  .table td::before{ font-weight:600; color:#6b7280; align-self:start; }
  .table tr > td:nth-child(3){ grid-template-columns:1fr; }
  .table tr > td:nth-child(3)::before{ margin-bottom:.25rem; }
  .table tr > td:nth-child(4){ grid-template-columns:minmax(7.5rem,32%) 1fr; }
  .table tr > td:nth-child(4) > *:not(:first-child){ display:flex; flex-wrap:wrap; gap:.5rem; }

  .table tr > td:nth-child(3) > *{
    display:-webkit-box; -webkit-line-clamp:12; -webkit-box-orient:vertical; overflow:hidden;
  }
}

/* video */
img#lake, img#hug{ max-width:100%; }
.video-wrapper{ position:relative; width:100%; max-width:800px; margin:2rem auto; }
.video-wrapper iframe{ width:100%; aspect-ratio:16/9; border:none; }

@media screen and (max-width:1000px){
  .video-wrapper{ max-width:90%; }
  body{ font-size:1.3rem; padding:10px 0; }
  body#submit img#lake, body#submit img#hug{ max-width:100% !important; }
  fieldset{ padding:0 !important; }
  #cform fieldset span div{ max-width:95%; }
  #cform > fieldset > span > div > div.ck.ck-editor__top.ck-reset_all > div > div.ck.ck-sticky-panel__content{ max-width:95%; }
}

/* (Optional) Flex-table helpers kept as-is */
.flex-table{ display:block; }
.flex-table .row{ display:flex; flex-wrap:wrap; border-top:1px solid #ddd; }
.flex-table .cell{ flex:1 1 200px; min-width:0; padding:.5rem; }
@media (max-width:1000px){
  .flex-table .row{ flex-direction:column; }
  .flex-table .cell{ flex:1 1 auto; }
}

/* print */

@media print {
  /* Prevent any image or its container from breaking across pages */
  .image-container,
  .image-container figure,
  .image-container img,
  td {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Ensure each image scales to fit the printable area */
  .image-container img {
    display: block;
    max-width: 100%;
    height: auto;
    max-height: 90vh; /* fit within page height */
    object-fit: contain;
    margin: 0 auto 1em auto;
  }

  /* Avoid large white gaps or double breaks */
  tr, td {
    page-break-before: auto;
    page-break-after: auto;
  }

  /* Optional: reduce table spacing for print */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  /* Optional: tidy up body for print layout */
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
    overflow: visible !important;
  }
}