/* ---- Layout / Base ---- */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100svh;        /* ensures footer sits at bottom on short pages */
  background-color: #f4f4f4;
  /* removed: align-items, justify-content, padding-bottom */
}
h1, h2 {
    text-align: center;
    margin: 10px 0;
}
h1 { font-size: 2em; color: #333; }
h2 { font-size: 1.5em; color: #555; }

/* Top hero image (on <picture>, not <img>) */
  .top-image{
  display:block;              /* ensures width/centering work */
  width:50%;                  /* same as before */
  max-width:400px;
  margin:0 auto;              /* explicit centering */
  height: auto;
}

/* Make the inner img fill the picture’s box */
.top-image img{
  display:block;
  width:100%;
  height:auto;
}

/* ---- Link cards  ---- */
.links-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 20px;
  width: 100%;
}
.link-item {
  margin: 10px;
  text-align: center;
  flex: 1 1 45%; /* two per row on small screens */
  max-width: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
  background-color: white;
  transition: transform 0.3s;
}
.link-item img { width: 100%; height: auto; }
.link-item:hover { transform: scale(1.05); }
.link-item a {
    display: block; text-decoration: none; color: #333; font-weight: bold; padding: 10px;
}

/* ---- Sample thumbnails (optimized) ---- */
.sample-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:16px;
  margin:40px auto;
  width:min(100%, 900px);
  padding:0 16px;
}
.sample{ list-style:none; text-align:center; }
.sample a{ display:block; text-decoration:none; }
.sample picture, .sample img{ display:block; max-width:100%; }
.sample .thumb{
    width:100%;
    aspect-ratio:4/3;        /* reserves space -> less CLS */
    object-fit:cover;        /* neat, uniform tiles from any source aspect */
    border-radius:8px;
    transition:transform .25s ease;
}
.sample .thumb:hover{ transform:scale(1.03); }
.thumbnail-caption{ font-size:14px; color:#555; margin-top:6px; }

/* ---- Footer: normal flow (not fixed) ---- */
.footer {
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: auto;
}

.footer img { width: 100px; height: auto; margin-bottom: 10px; }
.footer p { margin: 0; font-size: 14px; }

/* ---- Responsive tweaks ---- */
@media (min-width: 768px) {
    .link-item { flex: 1 1 22%; }
    .footer { flex-direction: column; justify-content: space-between; padding: 10px 50px; }
    .footer p { margin-left: 20px; }
}

/* ===========================
   Range items (for alerts on results pages)
   =========================== */
.range-items{
  display:grid;
  gap:8px;
  grid-template-columns: 1fr;     /* single column on narrow screens */
  align-items:start;               /* avoid stretching cards vertically */
}

@media (min-width:576px){
  .range-items{
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

.range-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-left:4px solid #856404;  /* warning accent */
  border-radius:8px;
  padding:8px 10px;
  line-height:1.3;
}

/* Chrome-friendly centering for the file input if you can't wrap it */
input[type="file"]{
  display:block;
  margin:0 auto;   /* centers the block element */
  max-width:max-content; /* prevents weird stretching in some themes */
}

/* Clemson orange token */
:root {
  --cu-orange: #F56600;
}

/* Crop box outline */
.cropper-view-box {
  outline: 2px solid var(--cu-orange) !important;
  /* optional: faint white inset to keep visible on bright images */
  box-shadow: 0 0 0 1px #fff inset;
}

/* Corner handles + edge handles + center dot */
.cropper-point,
.cropper-line,
.cropper-center {
  background-color: var(--cu-orange) !important;
}

/* Optional: make handles a touch bigger & rounded */
.cropper-point {
  width: 20px !important;
  height: 20px !important;
  border-radius: 3px !important;
}

/* Optional: adjust dashed guides & overlay tint */
.cropper-dashed {
  border-color: rgba(245, 102, 0, 0.6) !important;
}
.cropper-modal {
  background-color: rgba(0,0,0,0.35) !important; /* lighter overlay */
}


/* Bootstrap-friendly custom button */
.btn-cu-orange {
  color: #fff;
  background-color: var(--cu-orange);
  border-color: var(--cu-orange);
}
.btn-cu-orange:hover,
.btn-cu-orange:focus {
  background-color: #d95500;
  border-color: #d95500;
}