/* Legacy site stylesheet migrated into Blazor app */
body {
    background-color: #ff9933;
}

td {
    border-bottom: white;
    border-left: white;
    border-right: white;
    border-top: white;
    color: #333333;
    font-family: Arial, Helvetica;
    font-size: x-small;
    font-weight: bolder;
    text-decoration: none;
}

/* Home page content override */
.home-copy,
.home-copy p {
    font-size: 1rem; /* larger than legacy x-small */
    font-weight: normal;
    line-height: 1.45;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

th {
    font-family: Arial, Helvetica, Verdana;
    height: 45px;
    text-align: left;
    font-size: 18px;
}


h1.nav_button {
    /* Center the nav background behind the heading text and scale it larger */
    background: center/80% 90% no-repeat url('/images/misc/nav_background.gif');
    text-align: center;
    color: #582A0F;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18.85pt;
    /* Provide horizontal padding so the background shows like a button */
    padding: 20px 100px;
    display: block;
    width: fit-content;
    /* Center the whole element on the page */
    margin: 12px auto;
}

td.nav_button {
    background-image: url(/images/misc/nav_background.gif);
    background-repeat: no-repeat;
    color: #582A0F;
    font-family: Arial;
    font-size: 8.85pt;
    text-decoration: none;
}

a.nav_button:visited {
    color: #582A0F;
}

a.nav_button:active {
    color: #582A0F;
}

a.nav_button:hover {
    color: #582A0F;
    text-decoration: none;
}

a.nav_button {
    color: #582A0F;
}

a.pedigree_link {
    color: Black;
    text-decoration: none;
}

td.page_title_button {
    background-image: url(/images/misc/page_title_background.jpg);
    color: #6E3413;
    font-family: Arial;
    font-size: 18.85pt;
    text-decoration: none;
}


/* adjust legacy container to avoid overlaying following content and add spacing */
#imgcontainer {
    background-color: #ff9933;
    height: 331px;
    margin: 0 auto; /* center */
    margin-bottom: 12px; /* space below slideshow */
    padding: 2px;
    position: relative;
    width: 471px;
    /* removed z-index to avoid covering content below */
    background-image: url(/images/slideshow/DO_NOT_DELETE_THIS_IMAGE.gif);
}

/* legacy element: reduce stacking context */
#imgslideshow {
    padding-top: 0;
    position: relative;
    z-index: 1; /* was 100; keep low so it doesn't cover next content */
}

/* Lightweight CSS-only slideshow */
.slideshow {
 position: relative;
 width: 461px;
 height: 321px;
 margin: 0 auto;
 overflow: hidden;
}
.slideshow img.slide {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
 opacity: 0;
 animation-name: xfade;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-fill-mode: both;
 will-change: opacity;
}
@keyframes xfade {
0% { opacity: 0; }
5% { opacity: 1; }
25% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}

/* responsive banner row */
.banner-row {
 display:flex;
 align-items:center;
 justify-content:center;
 flex-wrap:wrap;
 gap:16px;
}
.banner-image {
 max-width:100%;
 height:auto;
}

/* slideshow scales on small screens */
.slideshow {
 position: relative;
 width: min(461px,90vw);
 height: calc(min(461px,90vw) *321 /461);
 margin:0 auto;
 overflow: hidden;
}
.slideshow img.slide {
 position: absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit: cover;
 opacity:0;
 animation-name: xfade;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-fill-mode: both;
 will-change: opacity;
}
@keyframes xfade {
0% { opacity:0; }
5% { opacity:1; }
25% { opacity:1; }
30% { opacity:0; }
100% { opacity:0; }
}

@media (max-width:640px) {
 td { font-size: smaller; }
 .banner-row span { font-size:12px; }
}

/* Slideshow state-driven fade and controls */
.slideshow img.slide { animation: none; opacity:0; transition: opacity .8s ease-in-out; position: absolute; inset:0; width:100%; height:100%; object-fit: cover; }
.slideshow img.slide.active { opacity:1; }
.slideshow .nav { position: absolute; top:50%; left:0; right:0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 6px; z-index: 2; }
.slideshow .nav button { background: rgba(0,0,0,.35); color:#fff; border:0; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:18px; line-height:36px; display:inline-flex; align-items:center; justify-content:center; }
.slideshow .nav button:hover { background: rgba(0,0,0,.5); }
.slideshow .dots { position: absolute; left:0; right:0; bottom:8px; display:flex; justify-content:center; gap:6px; z-index: 2; }
.slideshow .dots button.dot { width:10px; height:10px; border-radius:50%; border:0; padding:0; background: rgba(255,255,255,.5); cursor:pointer; }
.slideshow .dots button.dot.active { background: #fff; }

/* Controls outside the image area */
.slideshow-area { display:flex; flex-direction:column; align-items:center; gap:8px; }
.slideshow-controls { display:flex; align-items:center; justify-content:center; gap:16px; margin:8px; }
.slideshow-controls .nav { position: static; transform:none; display:flex; gap:8px; }
.slideshow-controls .dots { position: static; display:flex; gap:6px; }
.slideshow-controls .count { font-size: 0.9rem; color:#582A0F; }
.slideshow-controls .resume { margin-left:12px; padding:6px 10px; border:0; border-radius:4px; background:#582A0F; color:#fff; cursor:pointer; }
.slideshow-controls .resume:hover { background:#6e3a19; }
/* BigTemplate responsive container */
.bigtemplate {
 max-width:900px;
 margin:0 auto;
 padding:012px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
}
.bigtemplate img.preview {
 max-width:100%;
 height: auto;
 display: inline-block;
}
.bigtemplate .desc {
 max-width:640px;
 margin:8px auto 0 auto;
 padding:08px;
 font-size:0.95rem;
 line-height:1.35;
 overflow-wrap: anywhere;
 text-align: center;
}
@media (max-width:640px) {
 .bigtemplate .desc { max-width:92vw; font-size:0.9rem; }
}

/* CSS-driven slideshow (no JS) */
.css-slideshow {
 position: relative;
 width: min(461px,90vw);
 height: calc(min(461px,90vw) *321 /461);
 margin:0 auto;
 overflow: hidden;
 /* Add visible drop shadow around the slideshow container */
 background: none;
 border-radius: 6px;
 box-shadow: 0 8px 14px 2px rgba(0,0,0,.35);
}
.css-slideshow img {
 position: absolute;
 inset:0;
 width:100%;
 height:100%;
 object-fit: cover;
 opacity:0;
 animation-name: cssfade;
 animation-timing-function: ease-in-out;
 animation-iteration-count: infinite;
 animation-fill-mode: both;
 /* duration = segment * count; delay = segment * index */
 animation-duration: calc(var(--seg,6s) * var(--n,5));
 animation-delay: calc(var(--seg,6s) * var(--i,0));
}
.css-slideshow:hover img { animation-play-state: paused; }
@keyframes cssfade {
0% { opacity:0; }
4% { opacity:1; }
20% { opacity:1; }
24% { opacity:0; }
100% { opacity:0; }
}
/* Ensure the very first slide is visible immediately on load */
.css-slideshow img:first-child {
 animation-name: cssfadeFirst;
}
@keyframes cssfadeFirst {
  0% { opacity: 1; }
  20% { opacity: 1; }
  24% { opacity: 0; }
  100% { opacity: 0; }
}

/* Reusable rounded + shadow card for images */
.img-card {
 display:inline-block;
 margin:8px auto;
 background:#fff;
 border-radius:6px;
 overflow:hidden;
 position:relative;
 z-index:1;
 box-shadow:0 8px 14px 2px rgba(0,0,0,.35);
 /* Make a predictable container size so image can fill it */
 width: min(92vw,580px);
 aspect-ratio:4 /3;
}
.img-card > img { display:block; width:100%; height:100%; object-fit:cover; }

/* Reusable drop shadow style for images/containers */
.img-dropshadow {
 display:inline-block;
 background:#fff;
 border-radius:6px;
 overflow:hidden;
 position:relative;
 z-index:1;
 box-shadow:0 8px 14px 2px rgba(0,0,0,.35);
}
.img-dropshadow > img { display:block; max-width:100%; height:auto;}

/* Contact form layout (reset) */
.form-container { display:flex; flex-direction:column; gap:10px; max-width:720px; width:100%; }
/* neutralize grid wrapper if present - scoped to contact form only */
.form-container .form-grid { display: contents; }
/* one row per field */
.form-row { display:flex; align-items:flex-start; gap:12px; width:100%; }
/* label on the left, larger and bold */
.form-label {
 width:180px; flex:00180px; text-align:right;
 font-weight:700; font-size:1.1rem; color:#582A0F;
 padding-top:6px; /* align with input top */
}
/* input column fills the rest */
.form-field { flex:11 auto; min-width:0; }
.form-field .input,
.form-field input,
.form-field select,
.form-field textarea {
 width:100%;
 display:block;
 box-sizing:border-box;
 padding:6px 8px;
 font-size:1rem;
 border:1px solid rgba(0,0,0,0.15);
 border-radius:4px;
}
.form-row textarea { align-self:flex-start; min-height:100px; }
/* stack on small screens */
@media (max-width:640px){
 .form-row { flex-direction:column; align-items:stretch; }
 .form-label { width:auto; flex:none; text-align:left; padding-top:0; padding-bottom:4px; }
}

/* Side buttons around the slideshow */
.slideshow-row { display:flex; align-items:center; gap:8px; }
.slideshow-row .side { background: rgba(0,0,0,.35); color:#fff; border:0; width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:18px; line-height:36px; display:inline-flex; align-items:center; justify-content:center; }
.slideshow-row .side:hover { background: rgba(0,0,0,.5); }
.slideshow-row .img-dropshadow { flex: 0 1 auto; }
@media (max-width:640px){ .slideshow-row { gap:6px; } .slideshow-row .side { width:32px; height:32px; font-size:16px; } }

/* --- Admin shared styles (global) --- */
.admin-index {
 max-width:1000px;
 margin:12px auto;
 padding:16px;
 background: #f7efe6; /* warm parchment */
 border:1px solid #e3d8cc;
 border-radius:16px;
 overflow: hidden; /* clip inner white sections at rounded corners */
 box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.admin-section {
 background: #f1e6d7; /* slightly darker than parchment for contrast */
 border:1px solid #d6c8b7;
 border-radius:8px;
 padding:12px;
 margin:12px 0;
 box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.06);
}
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.link-grid .admin-link {
 display: block;
 width: 100%;
 text-align: center;
 text-decoration: none;
 margin: 8px 0;
 padding: 10px;
 cursor: pointer;
 color: #582A0F;
 background: center/100% 90% no-repeat url('/images/misc/page_title_background.jpg');
 font-weight: 600;
 border: 0;
 border-radius: 6px;
}
.link-grid .admin-link:hover { opacity: 0.95; }
.link-grid .admin-link:active { transform: translateY(1px); }

/* --- Admin form/layout shared styles (applies only inside admin pages) --- */
.admin-section .edit-container{ display:grid; grid-template-columns:240px 1fr; gap:12px; align-items:start; }
.admin-section .edit-container > * { min-width:0; }
.admin-section .dog-thumb{ width:240px; height:240px; object-fit:cover; border-radius:6px; border:1px solid #ddd; background:#f3f4f6; box-shadow:0px 8px 24px 0px rgba(0,0,0,.35); }

.admin-section .dog-form-grid { display:grid; grid-template-columns:200px minmax(440px,1fr); column-gap:16px; row-gap:10px; align-items:start; grid-auto-flow:row; }
.admin-section .dog-form-grid > * { min-width:0; }
.admin-section .form-label { font-weight:600; justify-self:end; grid-column:1; color:black; }
.admin-section .form-input { justify-self:start; grid-column:2; }
.admin-section .checkbox-cell{ display:flex; align-items:center; grid-column:2; }
.admin-section .form-actions{ display:flex; gap:12px; justify-content:flex-start; margin-top:6px; grid-column:2; }
.admin-section .form-input > input, .admin-section .form-input > textarea, .admin-section .form-input > select, .admin-section .form-input > .input { width:100%; max-width:100%; }

@media (max-width:800px){
  .admin-section .edit-container{ grid-template-columns:1fr; }
  .admin-section .dog-thumb{ width:150%; height:auto; max-width:360px; }
}
@media (max-width:700px){
  .admin-section .dog-form-grid{ grid-template-columns:1fr; }
  .admin-section .form-label{ justify-self:start; grid-column:1; }
  .admin-section .form-input, .admin-section .checkbox-cell, .admin-section .form-actions{ grid-column:1; }
}