/* Final mobile-first image/UI layer for Morant Family Reunion */

.hero-logo { transform-origin: center; min-height: auto !important; display: grid; place-items: center; overflow: visible !important; }
.editable-logo-area { width: min(760px, 96vw); min-height: 560px !important; border: 1px solid rgba(255,255,255,.22); border-radius: 22px; background: radial-gradient(circle at center, rgba(255,255,255,.08), rgba(0,0,0,.22) 42%, rgba(0,0,0,.60)); padding: 26px; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.35); }
.official-reunion-logo { display: block !important; width: min(720px, 92vw) !important; height: auto !important; max-height: 520px !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; filter: drop-shadow(0 24px 34px rgba(0,0,0,.75)); }
.hidden-logo { display: none; }
.logo-upload-card { display: none !important; }
.logo-file-input { display: none !important; }
.logo-tools { display: none !important; }
.logo-ready .hidden-logo { display: block; }

.branch-panel { display: none; }
.branch-panel.is-open { display: block; }

/* Public privacy gate */
.member-logged-out #explore,
.member-logged-out .lower-dashboard,
.member-logged-out #registration,
.member-logged-out #branchPanel,
.member-logged-out #search,
.member-logged-out #add-family,
.member-logged-out #heritage,
.member-logged-out #gallery,
.member-logged-out #stories,
.member-logged-out #migration,
.member-logged-out #photoUploadCenter,
.member-logged-out #ancestryFanSection { display: none !important; }
.member-logged-out .quick-actions a[href="#explore"],
.member-logged-out .quick-actions a[href="#migration"] { display: none !important; }
.member-logged-out #roots .welcome-copy p,
.member-logged-out #roots .about-card p { max-width: 62ch; }
.member-logged-out .root-photos .profile-photo-upload,
.member-logged-out .root-photos .photo-remove,
.member-logged-out .root-photos .add-photo { display: none !important; }
.member-logged-out .root-photos .photo-card { min-height: 210px !important; padding: 24px 18px !important; }
.member-logged-out .root-photos .heart { font-size: 36px; color: #7d1c17; }
.member-logged-out #roots .about-card a[href="#stories"] { display: none !important; }

.root-portrait, .blank-root-photo { width: 132px; height: 132px; border-radius: 50%; display: block; margin: 0 auto 12px; object-fit: cover; object-position: 50% 18%; border: 3px solid #f1c979; box-shadow: 0 12px 26px rgba(0,0,0,.18); background: #18130f; color: #e8d9bd; }
.blank-root-photo { display: grid; place-items: center; font: 800 42px Georgia, serif; }

/* Image slots */
.profile-photo-upload { width: 118px; height: 118px; border: 2px dashed rgba(70,48,28,.45); border-radius: 50%; overflow: hidden; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 50% 35%, #fffaf0, #ead9bd); color: #2f2418; margin: 8px auto 12px; position: relative; box-shadow: inset 0 0 0 6px rgba(255,255,255,.55), 0 12px 24px rgba(0,0,0,.12); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.profile-photo-upload:hover { transform: translateY(-1px); border-color: rgba(151,28,22,.65); box-shadow: inset 0 0 0 6px rgba(255,255,255,.55), 0 16px 30px rgba(0,0,0,.16); }
.profile-photo-upload input { display: none; }
.profile-photo-upload img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: none; }
.profile-photo-upload span { font: 800 10px/1.25 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 10px; opacity: .82; }
.profile-photo-upload span::before { content: ""; width: 34px; height: 34px; border-radius: 50%; display: block; margin: 0 auto 7px; background: linear-gradient(#6b4b2d 0 0) center 9px/16px 3px no-repeat, linear-gradient(#6b4b2d 0 0) center 9px/3px 16px no-repeat, rgba(107,75,45,.12); }
.profile-photo-upload.has-photo { border-style: solid; border-color: #f1c979; background: #111; }
.profile-photo-upload.has-photo img { display: block; }
.profile-photo-upload.has-photo span { display: none; }
.photo-remove { background: transparent; border: 1px solid currentColor; border-radius: 999px; padding: 6px 10px; text-transform: uppercase; font: 800 10px Arial, sans-serif; margin: 0 auto 8px; display: block; opacity: .72; }
.photo-remove:hover { opacity: 1; }

/* Root image area */
.root-photos { align-items: center; }
.root-photos .photo-card { min-height: 260px; padding: 18px 14px; display: grid; place-items: center; align-content: center; gap: 8px; border-radius: 18px; background: linear-gradient(180deg, #fff7e9, #ead6b8); box-shadow: 0 18px 36px rgba(0,0,0,.12); }
.root-photos .photo-card .profile-photo-upload { width: 164px; height: 164px; margin: 0 auto 8px; }
.root-photos .photo-card strong { font-family: Georgia, serif; text-align: center; line-height: 1.1; }
.photo-card .add-photo { display: none; }

/* Branch and profile cards */
.branch-card { overflow: hidden; }
.branch-card h3:after { display: none !important; }
.branch-card .profile-photo-upload { width: 132px; height: 132px; margin-top: 24px; }
.generation-card li { list-style: none; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fffaf0; }
.generation-card li .profile-photo-upload { width: 86px; height: 86px; margin-left: 0; margin-right: 0; }
.generation-card h5 { margin: 16px 0 6px; text-transform: uppercase; }
.directory-item { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.directory-item strong, .directory-item span { grid-column: 2; }
.directory-item .profile-photo-block { grid-row: 1 / span 2; }
.directory-item .profile-photo-upload { width: 74px; height: 74px; margin: 0; }
.directory-item .photo-remove { display: none; }

/* Lightweight tree / future fan image section */
.fan-section { display: none !important; }
.fan-header { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 22px; }
.fan-header h2 { font-size: clamp(30px, 4vw, 54px); margin: 0 0 8px; font-family: Georgia, serif; }
.fan-header p { max-width: 760px; line-height: 1.55; }
.fan-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.fan-actions button { background: #17120b; color: #f1c979; border: 1px solid rgba(241,201,121,.55); border-radius: 999px; padding: 10px 16px; text-transform: uppercase; font-weight: 800; }
.fan-layout { display: grid; grid-template-columns: minmax(320px, 1.35fr) minmax(260px,.65fr) minmax(260px,.65fr); gap: 18px; align-items: stretch; }
.fan-chart { min-height: 420px; border: 1px solid rgba(214,167,78,.35); border-radius: 18px; background: radial-gradient(circle at 50% 88%, rgba(214,167,78,.16), transparent 22%), #070707; position: relative; overflow: auto; display: grid; place-items: center; }
.fan-detail, .heritage-hints { border: 1px solid rgba(214,167,78,.35); border-radius: 16px; background: linear-gradient(135deg, rgba(214,167,78,.08), rgba(255,255,255,.03)); padding: 22px; }
.fan-detail h3, .heritage-hints h3 { font-family: Georgia, serif; color: #f1c979; margin-top: 0; }
.fan-years { color: #f1c979; font-size: 20px; }
.heritage-hints.is-hidden { display: none; }
.crest-hint { margin: 18px 0; border: 1px solid rgba(241,201,121,.5); border-radius: 14px; padding: 18px; display: grid; place-items: center; text-align: center; background: radial-gradient(circle, rgba(241,201,121,.12), transparent 70%); }
.crest-hint span { font-size: 64px; line-height: 1; color: #f1c979; }
.crest-hint strong { font-size: 22px; text-transform: uppercase; letter-spacing: 1px; }

.calendar-btn { margin-top: 10px; border: 0; cursor: pointer; }
.notification-tools { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 12px; }
.notification-tools strong { margin-right: auto; }
.notification-tools button { background: #f7efe3; color: #111; border: 0; border-radius: 6px; padding: 11px 14px; text-transform: uppercase; font-weight: 800; }
.admin-note { font: 12px/1.4 Arial, sans-serif; opacity: .85; margin: 8px 0 0; }
.admin-only { display: none !important; }
.admin-mode .admin-only { display: initial !important; }
.admin-mode .notification-tools { display: flex !important; }
.child-entry-card { margin-top: 24px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff8ed; text-align: left; }
.child-entry-card h3 { margin-top: 0; text-transform: uppercase; }
.child-entry-card form { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; }
.child-entry-card textarea, .child-entry-card button { grid-column: 1 / -1; }
.child-entry-card button { background: #050505; color: #fff; border: 0; border-radius: 6px; padding: 13px; text-transform: uppercase; font-weight: 800; }
.login-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); display: grid; place-items: center; padding: 18px; }
.login-modal[hidden] { display: none !important; }
.login-box { width: min(440px, 94vw); background: #fff8ed; color: #111; border-radius: 16px; padding: 24px; box-shadow: 0 30px 90px rgba(0,0,0,.45); position: relative; }
.login-box h2 { margin: 0 0 8px; }
.login-note { font: 13px/1.45 Arial, sans-serif; opacity: .78; }
.login-box form { display: grid; gap: 12px; margin: 14px 0; }
.login-box label { display: grid; gap: 5px; font-weight: 800; }
.login-box input, .login-box select { padding: 12px; border: 1px solid #c9bca5; border-radius: 8px; }
.login-box button { padding: 12px 14px; border: 0; border-radius: 8px; background: #050505; color: #fff; font-weight: 900; text-transform: uppercase; }
.login-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50% !important; padding: 0 !important; }
#logoutButton { background: #7d1c17; width: 100%; margin: 4px 0 12px; }

@media (max-width: 900px) { .fan-layout { grid-template-columns: 1fr; } .fan-chart { min-height: 360px; } }
@media (max-width: 760px) { .topbar { position: sticky; top: 0; } .hero-mockup { grid-template-columns: 1fr; text-align: center; padding: 28px 18px 26px; gap: 18px; } .hero-left { text-align: center; margin: 0 auto; order: 1; } .hero-logo { order: 2; } .editable-logo-area { width: 100%; min-height: 430px !important; padding: 14px; } .official-reunion-logo { width: min(610px, 96vw) !important; max-height: 390px !important; margin: 0 auto !important; } .hero-main-btn { max-width: 360px; margin: 0 auto; } .quick-actions { grid-template-columns: 1fr; } .root-photos .photo-card .profile-photo-upload { width: 132px; height: 132px; } .fan-section { padding: 28px 14px; } .fan-header { display: block; } }
@media (max-width: 390px) { .quick-actions { grid-template-columns: 1fr; } .profile-photo-upload { width: 104px; height: 104px; } .editable-logo-area { min-height: 390px !important; } .official-reunion-logo { max-height: 350px !important; } }