/* Domke Family Website */

.family-page {
  min-height: 100vh;
  background: #edf3ea;
}

.family-header {
  background: #315d42;
  color: white;
  padding: 24px;
  text-align: center;
}

.family-header h1 {
  margin: 0;
  font-size: 2rem;
}

.family-content {
  max-width: 1200px;
  margin: 30px auto;
  padding: 0 20px;
}

.family-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px;
}
/* Family navigation */

.family-nav a {
  color: #315d42;
  background: white;
  padding: 12px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
}

.family-nav a:hover {
  background: #d7e8d8;
}

/* Family content cards */

.family-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.family-card {
  background: white;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #dce7dc;
}

.family-card h2 {
  color: #315d42;
  margin-top: 0;
}

/* Family photo thumbnails */

.photo-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, minmax(min(100%, 180px), 1fr)
  );
  gap: 12px;
  margin-top: 16px;
}

.photo-grid a {
  display: block;
  overflow: hidden;
  border-radius: 12px;
}

.photo-grid img {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.photo-grid a:hover img {
  opacity: 0.85;
}

/* Member profiles */
.profile-avatar{width:92px;height:92px;border-radius:50%;background:#e2eee5;display:flex;align-items:center;justify-content:center;font-size:46px;margin:16px 0}
.profile-unconfirmed{color:#755600;font-weight:700}
.profile-bio{white-space:pre-wrap;overflow-wrap:anywhere}
.family-card input:not([type=checkbox]),.family-card select,.family-card textarea{max-width:100%;box-sizing:border-box;padding:9px;border:1px solid #9fac9d;border-radius:6px}
.family-card textarea{width:min(100%,620px)}

.profile-avatar-img{width:92px;height:92px;border-radius:50%;object-fit:cover;display:block;margin:16px 0;background:#e2eee5}

/* Family homepage: recent albums and videos */
.family-media-columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}
.family-media-columns>div{
  min-width:0;
  padding:14px;
  background:#f5f8f4;
  border-radius:10px;
}
.family-recent-albums a{
  display:block;
  padding:9px 0;
  overflow-wrap:anywhere;
}
@media(max-width:640px){
  .family-media-columns{grid-template-columns:1fr}
}

/* Family homepage album actions */
.family-album-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 24px;
}

/* Family Home: newest video previews */
.family-recent-videos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  gap:14px;
}
.family-recent-video{
  display:block;
  min-width:0;
  color:inherit;
  text-decoration:none;
}
.family-recent-video-image{
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:8px;
  background:#26352d;
}
.family-recent-video-image img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.family-recent-video-play{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:white;
  font-size:23px;
}
.family-recent-video-title{
  display:block;
  margin-top:7px;
  font-weight:600;
  overflow-wrap:anywhere;
}
.family-recent-video:hover .family-recent-video-title{
  text-decoration:underline;
}

/* KENNETHDOMKE_FAMILY_DESIGN_V1
   Private portal style layer. Shared variables come from /static/kd-tokens.css.
   Intentionally does not change application layout identifiers or JS hooks.
*/
body{background:var(--kd-color-background,#f8f7f2);color:var(--kd-color-text,#243b37);font-family:var(--kd-font-body,system-ui,sans-serif);line-height:1.6}
body a{color:var(--kd-color-link,#216f66)}
body :focus-visible{outline:3px solid var(--kd-color-clay,#ac7a59);outline-offset:3px}
body h1,body h2,body h3{color:var(--kd-color-primary,#163d3a);line-height:1.25}
body h1,body h2{font-family:var(--kd-font-heading,Georgia,serif)}
body .family-page,body .family-content,body .family-main{color:var(--kd-color-text,#243b37)}
body .family-content,body main{max-width:var(--kd-container,1120px);margin-left:auto;margin-right:auto}
body .family-card,body .album-card,body .event-card,body .post-card,body .topic-card,body .category-card,body .forum-card,body .updates-card{background:var(--kd-color-surface,#fffefa);border:1px solid var(--kd-color-border,#dae1db);border-radius:var(--kd-radius,18px);box-shadow:var(--kd-shadow,0 16px 50px rgba(30,62,50,.075))}
body .family-nav{background:var(--kd-color-primary,#163d3a);border-radius:var(--kd-radius-small,10px);padding:.55rem .75rem;display:flex;flex-wrap:wrap;gap:.3rem .6rem}
body .family-nav a{color:#f9fbf6!important;text-decoration:none;padding:.5rem .75rem;border-radius:8px;font-weight:650}
body .family-nav a:hover,body .family-nav a:focus-visible{background:rgba(255,255,255,.16)}
body button:not(.icon-button):not([class*="close"]),body input[type=submit],body .button,body a.button{background:var(--kd-color-primary,#163d3a);color:#fff;border:1px solid var(--kd-color-primary,#163d3a);border-radius:999px;padding:.55rem 1.05rem;font:600 .95rem var(--kd-font-body,system-ui,sans-serif);cursor:pointer}
body button:not(.icon-button):not([class*="close"]):hover,body input[type=submit]:hover{background:var(--kd-color-primary-hover,#23564e)}
body input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]),body textarea,body select{border:1px solid var(--kd-color-border,#dae1db);border-radius:var(--kd-radius-small,10px);background:#fff;color:var(--kd-color-text,#243b37);font:inherit;padding:.5rem .7rem;max-width:100%}
body hr{border:0;border-top:1px solid var(--kd-color-border,#dae1db)}
body .muted,body .meta,body .hint{color:var(--kd-color-muted,#677873)}
@media(max-width:700px){body .family-nav{border-radius:0}body .family-nav a{min-height:40px;display:inline-flex;align-items:center}body .family-content{padding-left:1rem;padding-right:1rem}}
@media(prefers-reduced-motion:reduce){body *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* END_KENNETHDOMKE_FAMILY_DESIGN_V1 */

/* KD_FAMILY_HEADER_REFINEMENT_V11
   Family Home: default green navigation, inverse hover/focus.
   The title gets a pale backing for legible deep-forest lettering
   against the green header. No layout or functional hooks changed.
*/
body .family-nav a,
body .family-nav a:link,
body .family-nav a:visited {
  background-color: #175043 !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.28);
  text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
body .family-nav a:hover,
body .family-nav a:focus-visible {
  background-color: #fffefa !important;
  color: #175043 !important;
  border-color: #fffefa;
}
body .family-nav a:focus-visible {
  outline: 3px solid #dbb98b;
  outline-offset: 2px;
}
/* Heading style deliberately scoped to the Family Home banner. */
body .family-header h1,
body .family-hero h1,
body .family-banner h1,
body > header h1,
body:has(.family-nav) header h1 {
  color: #143b2f !important;
  background-color: #e5eee3;
  display: inline-block;
  padding: .15em .48em;
  border-radius: .35em;
  text-shadow: none;
}
/* END_KD_FAMILY_HEADER_REFINEMENT_V11 */


/* Family Home manual link */
.family-home-title-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.family-home-title-row a{font-weight:600}


/* CSP-safe styles previously blocked as Family Home inline attributes. */
.family-account-card{margin-top:24px}
.family-home-footer{text-align:center;padding:24px}

/* Family manual, readable mobile-friendly presentation */
.manual-page{background:#eff3ef;color:#263a30}
.manual-wrap{max-width:1060px;margin:0 auto;padding:24px 18px 56px}
.manual-back,.manual-footer a{display:inline-block;padding:8px 0;color:#245a46}
.manual-hero{padding:26px 28px;background:#e3ede3;border-radius:16px;margin:12px 0 20px}
.manual-hero h1{margin:.1em 0 .25em;font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.2}
.manual-hero p{margin:.4em 0;color:#354e42}
.manual-eyebrow{font-weight:700;font-size:.83rem;letter-spacing:.07em;text-transform:uppercase}
.manual-jump{padding:22px 24px;border-radius:15px;background:white;margin-bottom:22px;border:1px solid #dbe4db}
.manual-jump h2{margin:0 0 15px;font-size:1.25rem}
.manual-jump-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.manual-jump-grid a{display:block;padding:9px 12px;background:#f1f6f0;border-radius:8px;text-decoration:none;color:#244e3c;font-weight:500}
.manual-jump-grid a:hover,.manual-jump-grid a:focus-visible{background:#dfebde;text-decoration:underline}
.manual-nav-number{font-weight:700}
.manual-content{padding:28px 36px;background:white;border:1px solid #dbe4db;border-radius:15px;line-height:1.72;font-size:1rem;overflow-wrap:anywhere}
.manual-content h1{font-size:1.8rem;margin:.25em 0}
.manual-content h2{font-size:1.45rem;line-height:1.35;margin:2.1em 0 .7em;padding-top:12px;border-top:1px solid #e4ebe4;scroll-margin-top:18px}
.manual-content h3{font-size:1.16rem;margin:1.5em 0 .6em}
.manual-content p{margin:0 0 1em}
.manual-content ul,.manual-content ol{padding-left:1.6em;margin:.5em 0 1.25em}
.manual-content li{margin:.35em 0}
.manual-content strong{font-weight:700}
.manual-content a{color:#1e634b;text-decoration:underline}
.manual-content hr{border:0;border-top:1px solid #d9e3d9;margin:1.8em 0}
.manual-content blockquote{border-left:4px solid #9cbaab;padding-left:16px;margin:1em 0}
.manual-content pre{overflow-x:auto;white-space:pre-wrap;background:#f5f7f5;padding:14px;border-radius:8px}
.manual-footer{display:flex;justify-content:space-between;gap:16px;margin-top:20px}
@media(max-width:680px){.manual-wrap{padding:12px 10px 40px}.manual-hero,.manual-content,.manual-jump{padding:18px}.manual-jump-grid{grid-template-columns:1fr}.manual-content{font-size:1rem}.manual-content h2{font-size:1.3rem}}