/* jhadu-style.css - SMALL custom layer on top of W3.CSS (layout/colors come from w3 classes) */
:root{--label:#8a5a00}
body{font-family:'DM Sans',sans-serif;background:#fffdf8;color:#1a237e;line-height:1.6}   /* milky white page, deep-blue text */
h1,h2,h3{font-family:'DM Serif Display',serif;font-weight:600}
h1,h2{color:#5b2be0}   /* vibrant violet */
h3{color:#e0245e}      /* vibrant pink-red */
.w3-content{max-width:1200px}
.jh-grad{background:linear-gradient(100deg,#ff6b1a,#ff4d7e);color:#fff}
.jh-soft{background:linear-gradient(135deg,#fff4cc,#ffe3d1 60%,#ffdbe7)}
.jh-min{min-width:130px}

/* section ribbons (delete data-section="..." to remove) */
[data-section]{position:relative}
[data-section]::before{content:attr(data-section);position:absolute;top:0;left:0;z-index:5;background:#2ab7ff;color:#fff;font:700 .72rem/1 'DM Sans',sans-serif;letter-spacing:.04em;padding:5px 10px;border-radius:0 0 8px 0;text-transform:uppercase}

/* empty TEXT slot shows its label */
.t:empty::before{content:attr(data-slot);display:block;width:fit-content;max-width:100%;font:600 .82rem/1.3 'DM Sans',sans-serif;color:var(--label);background:#fff1c2;border:1px dashed #ffb800;border-radius:5px;padding:4px 10px}
.w3-center.t:empty::before{margin:0 auto}
.t + .t{margin-top:8px}
.w3-button:empty::before,nav a:empty::before,.menu-link:empty::before{content:attr(data-slot);font-size:.78rem;font-weight:700}
footer.on-dark a{display:block;margin-bottom:8px;text-decoration:none}
footer.on-dark a:empty::before{content:attr(data-slot);display:block;width:fit-content;font:600 .8rem/1.3 'DM Sans',sans-serif;color:var(--label);background:#fff1c2;border:1px dashed #ffb800;border-radius:5px;padding:4px 10px}

/* empty IMAGE slot shows icon + label; add <img> inside and the box is replaced by the picture */
.ph-img{width:100%;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#fff7dc;border:2px dashed #ffb800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:10px;text-align:center}
.ph-img:empty::before{content:"";width:40px;height:40px;opacity:.6;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6b1a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M21 16l-5-5-8 9'/%3E%3C/svg%3E") center/contain no-repeat}
.ph-img:empty::after{content:attr(data-slot);font:600 .8rem/1.3 'DM Sans',sans-serif;color:var(--label)}
.ph-img img{width:100%;height:100%;object-fit:contain}   /* whole picture always visible */
.ph-img:has(img){border:0;background:#fffdf8;padding:0}
.ph-img.sq:has(img){padding:10px}   /* breathing room so top and bottom of tall photos are never touching the edge */
.ph-img.logo:has(img){border-radius:50%;width:72px;height:72px;overflow:hidden;box-shadow:0 0 0 2px #f1e6cf}
.ph-img.sq{aspect-ratio:1/1}
.ph-img.wide{aspect-ratio:16/9}
.ph-img.wide2{aspect-ratio:2/1}
.ph-img.tall{aspect-ratio:3/4}
.ph-img.banner{aspect-ratio:21/8}
.ph-img.logo{width:64px;height:64px;aspect-ratio:1/1;border-radius:10px;padding:4px;gap:2px;display:inline-flex;vertical-align:middle}
.ph-img.logo:empty::before{width:20px;height:20px}
.ph-img.logo:empty::after{font-size:.55rem}
.ph-img.icon{width:76px;height:76px;aspect-ratio:1/1;border-radius:50%;padding:4px;gap:2px;margin:0 auto}
.ph-img.icon:empty::before{width:22px;height:22px}
.ph-img.icon:empty::after{font-size:.58rem}

/* hero image: show the WHOLE picture (no cropping) */
.jh-hero .ph-img{aspect-ratio:auto;background:transparent;border:0;overflow:visible;padding:0}
.jh-hero .ph-img:empty{aspect-ratio:16/9;background:#fff7dc;border:2px dashed #ffb800;overflow:hidden;padding:10px}
.jh-hero .ph-img img{height:auto;object-fit:contain;border-radius:14px}

.jh-top{padding-top:30px!important}
header .w3-bar-item{display:inline-block;vertical-align:middle}

/* ===== EVERYTHING milky white; text in vibrant contrast colors ===== */
.w3-white,.w3-pale-yellow,.w3-indigo,.jh-grad,.jh-soft{background:#fffdf8!important;color:#1a237e!important}
[data-section]{border-top:1px solid #f1e6cf}
.w3-card,.w3-card-4{background:#fffdf8!important;border:1px solid #f1e6cf}
.w3-text-orange{color:#d9480f!important}
.w3-text-green{color:#0a7d4f!important;font-weight:700}
header a[data-slot^="Menu"]{color:#5b2be0;font-weight:600}
footer.on-dark a{color:#0b6fd6}
.w3-ul li{border-bottom-color:#f1e6cf!important}