/*
Theme Name: Julie Art Dreams 2026
Description: Julie Art Dreams' original look (castle masthead, taupe menu, teal pattern, yellow footer), rebuilt to work on phones. Reads photos straight from NextGEN Gallery, so photos are still added and removed in NextGEN as before.
Version: 1.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: julieartdreams-2026
*/
/* Layout: the original Julie Art Dreams theme (900px white page on teal pattern, castle masthead, taupe nav, left gallery sidebar, yellow footer), rebuilt to work on phones. Single light look by design, matching the original. */
:root{
  --pattern:#9fc8c2; --page:#ffffff; --rose:#aa6979; --rose-link:#ab697a; --body-text:#888888;
  --taupe:#bca48c; --taupe-dark:#a98f77; --current:#d1bcac; --footer:#fff697; --footer-line:#b99b81;
  --frame:#a9a9a9; --album-line:#cccccc; --sage:#b9dcd6; --sage-line:#8fbfb7; --mat:#eef7f5; --panel:#d6ece8; --link-on-panel:#93526a;
  --serif:Georgia,Times,"Times New Roman",serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--pattern) url(images/bg-pattern.jpg);color:var(--rose);font-family:var(--serif);font-size:16px;line-height:1.4}
a{color:var(--rose)}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
h1{font-size:22px;margin:0 0 12px;color:var(--rose);font-weight:bold;text-wrap:balance}
h2{font-size:19px;margin:0 0 8px;color:var(--rose)}
p{margin:0 0 14px}

#wrapper{max-width:900px;margin-inline:auto;background:var(--page);box-shadow:0 0 0 1px rgb(0 0 0/.04)}

/* masthead + nav (original artwork) */
.masthead a{display:block}
.masthead img{display:block;width:100%;height:auto;aspect-ratio:900/216}
header.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
.bar{height:44px;background:var(--taupe) url(images/bg-nav.gif) repeat-x;display:flex;align-items:stretch;position:relative}
nav.main{display:flex;align-items:stretch}
nav.main>a,nav.main>.dd>.ddlink{display:flex;align-items:center;height:44px;padding:0 30px;margin-right:3px;background:url(images/nav-sep.gif) no-repeat 100% 0;border:0;border-radius:0;
  font-family:var(--serif);font-size:22px;color:#fff;text-decoration:none;text-shadow:1px 0 1px rgb(0 0 0/.7);cursor:pointer;line-height:1}
nav.main>a:hover,nav.main>.dd>.ddlink:hover,nav.main [aria-current="page"]{background-color:rgb(255 255 255/.16)}
.caret{font-size:12px;margin-left:6px}
.dd{position:relative;display:flex}
.ddmenu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;width:min(560px,94vw);background:#fff;border:1px solid var(--current);border-top:4px solid var(--footer-line);box-shadow:0 12px 30px rgb(60 40 30/.18);padding:10px 0;columns:3 150px;column-gap:0}
.ddmenu a{display:block;padding:4px 18px;font-size:17px;color:var(--rose-link);text-decoration:none;text-transform:lowercase;break-inside:avoid}
.ddmenu a:hover{background:var(--current);color:#fff;text-shadow:1px 0 1px rgb(0 0 0/.3)}
.ddmenu .all{column-span:all;border-top:1px solid #eee;margin-top:6px;padding-top:8px;font-weight:bold;text-transform:none}
.burger{display:none;background:none;border:0;padding:0 20px;font-family:var(--serif);font-size:21px;color:#fff;text-shadow:1px 0 1px rgb(0 0 0/.7);cursor:pointer}

/* main area */
#main{padding:18px;background:var(--sage)}
#main>*{background:#fff;border:1px solid var(--sage-line);padding-block:26px}
#main>.cols{background:var(--panel)}
.cols #sidebar ul a{color:var(--link-on-panel)}
.cols #sidebar ul a:hover{background:rgb(255 255 255/.45)}
.cols #content{color:#5f6f6b}
.cols #content h1{color:#93526a}
.cols .gmeta small,.cols .gnav a{color:#5f6f6b}
.cols{display:grid;grid-template-columns:175px minmax(0,1fr);column-gap:0}
#content{padding:0 25px;color:var(--body-text);min-width:0}
.cols #content{padding:0 25px 0 0}
#content h1{color:var(--rose)}
.lead{font-size:18px;color:#7d6d71}

/* sidebar gallery list (original styling) */
#sidebar{margin-top:2px}
.search{padding:0 12px 14px 25px}
.search input{width:100%;font:inherit;font-size:14px;padding:5px 7px;border:1px solid var(--album-line);color:#555;background:#fff}
#sidebar ul{list-style:none;margin:0;padding:0}
#sidebar ul a{display:block;padding:4px 0 4px 25px;font-size:20px;color:var(--rose-link);text-decoration:none;text-transform:lowercase}
#sidebar ul a:hover{background:#f3ece6}
#sidebar ul .current-gallery a{background:var(--current);color:#fff;text-shadow:1px 0 1px rgb(0 0 0/.3)}

/* home carousel */
.home{text-align:center}
.carousel{max-width:800px;margin:0 auto}
.carousel .frame{position:relative;aspect-ratio:4/3;max-height:600px;background:#fff;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.slide.on{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:contain;display:block}
.cnav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid var(--current);background:rgb(255 255 255/.9);color:var(--rose);font-family:var(--serif);font-size:22px;cursor:pointer;line-height:1}
.cnav.prev{left:8px}.cnav.next{right:8px}
.cbar{display:flex;justify-content:center;align-items:center;gap:7px;margin:12px 0 4px;flex-wrap:wrap}
.dot{width:10px;height:10px;border-radius:50%;border:1px solid var(--footer-line);padding:0;background:#fff;cursor:pointer}
.dot[aria-current="true"]{background:var(--rose);border-color:var(--rose)}
.pause{margin-left:8px;border:1px solid var(--current);background:#fff;color:var(--rose);font-family:var(--serif);font-size:13px;padding:2px 10px;cursor:pointer}
.ccap{color:var(--body-text);font-style:italic;font-size:15px;min-height:1.4em}
.welcome{max-width:620px;margin:24px auto 0;color:#7d6d71;font-size:17px}
.btn{display:inline-block;font-family:var(--serif);font-size:17px;text-decoration:none;color:#fff;background:var(--taupe) url(images/bg-nav.gif) repeat-x;background-size:auto 100%;padding:9px 20px;text-shadow:1px 0 1px rgb(0 0 0/.6);border:0;cursor:pointer}
.btn:hover{filter:brightness(1.06)}
.btn.alt{background:#fff;color:var(--rose);border:1px solid var(--current);text-shadow:none}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* album overview (portfolio) */
.albums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.album{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--sage-line);padding:5px 5px 7px;background:#fff;text-align:center}
.album:hover{border-color:var(--footer-line)}
.album .thumb{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;max-width:100%;background:var(--mat)}
.album b{display:block;color:#93526a;font-size:15px;margin:6px 2px 0;line-height:1.2}
.album span{display:block;color:#7a8a86;font-size:12px;margin:2px 2px 0}

/* gallery thumbnails (NextGEN look) */
.gmeta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.gmeta small{color:var(--body-text);font-size:14px}
.thumbs{columns:3 170px;column-gap:12px}
.tn{display:block;break-inside:avoid;margin:0 0 12px;padding:6px 6px 5px;border:1px solid var(--sage-line);background:#fff;cursor:zoom-in;text-decoration:none}
.tn:hover{background:var(--mat);border-color:#6fa79e}
.tn img{display:block;width:100%;height:auto;max-width:100%;background:#fff}
.tn span{display:block;font-size:13px;color:#7d6d71;padding:5px 2px 0;line-height:1.3}
.tn span em{display:block;font-style:normal;color:#8a9a93;font-size:12px}
.gnav{display:flex;justify-content:space-between;gap:10px;margin-top:22px;font-size:16px}
.gnav a{text-decoration:none}
.note{font-size:13px;color:#999;font-style:italic}

/* lightbox (light_square feel) */
.lb{position:fixed;inset:0;z-index:50;background:rgb(36 62 58/.9);display:grid;place-items:center;padding:16px}
.lb-box{background:#e3ece6;border:1px solid #c4d6cc;padding:14px 14px 12px;max-width:min(980px,100%);max-height:100%;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 40px rgb(0 0 0/.4)}
.lb-box img{display:block;border:1px solid #c4d6cc;background:#f3f7f4;max-width:100%;max-height:calc(100vh - 170px);object-fit:contain;margin:0 auto}
.lb-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.lb-title{color:#8a4f61;font-size:16px}
.lb-count{color:#5f7069;font-size:13px}
.lb-ctrl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.lb-ctrl button{font-family:var(--serif);font-size:14px;border:1px solid #b3c9bd;background:#f3f7f4;color:#8a4f61;padding:4px 10px;cursor:pointer}
.lb-ask{font-size:14px;color:#8a4f61}
.lb-ctrl button:hover{background:#fff}

/* inner pages */
.page-text{max-width:650px}
.contactline{margin:6px 0}
.contactline b{user-select:all;color:var(--rose)}
.page-text form{display:grid;gap:12px;margin-top:20px;border-top:1px solid #eee;padding-top:18px}
label{display:grid;gap:4px;color:var(--rose);font-size:15px}
.page-text input,.page-text select,.page-text textarea{font:inherit;font-size:15px;padding:7px 8px;border:1px solid var(--album-line);color:#555;background:#fff;width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sent{background:var(--footer);border:1px solid var(--footer-line);padding:10px 12px;color:#6d5a4a}

/* footer (original) */
#footer{background:var(--footer);border-top:4px solid var(--footer-line);padding:20px 35px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
#footer .footer-text{margin-top:15px;max-width:100%;height:auto}
#footer .info{margin:0;text-align:right;color:var(--rose);font-size:15px}
#footer .info a{color:var(--rose);text-decoration:none}
#footer .info a:hover{text-decoration:underline}

@media (max-width:760px){
  .burger{display:block}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:var(--taupe-dark);flex-direction:column;padding:4px 0 10px;max-height:78vh;overflow:auto}
  nav.main.open{display:flex}
  nav.main>a,nav.main>.dd>.ddlink{width:100%;background-image:none;font-size:20px;padding:0 20px;margin:0}
  .dd{flex-direction:column}
  .ddmenu{position:static;width:100%;box-shadow:none;border:0;columns:2 120px;padding:4px 0 8px;background:#f8f3ee}
  .cols{grid-template-columns:minmax(0,1fr)}
  #sidebar{min-width:0}
  .cols #content{padding:0 16px}
  #content{padding:0 16px}
  #sidebar{margin:0 0 18px}
  .search{padding:0 16px 10px}
  #sidebar ul{display:flex;overflow-x:auto;gap:4px;padding:0 16px 4px;scrollbar-width:thin}
  #sidebar ul a{white-space:nowrap;padding:4px 10px;font-size:17px;border:1px solid #eee}
  .albums{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .thumbs{columns:2 120px;column-gap:8px}
  #main{padding:8px}
  #footer{padding:18px 16px}
  #footer .info{text-align:left}
  .row2{grid-template-columns:1fr}
  .cnav{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* WordPress additions */
.ddbtn{display:flex;align-items:center;height:44px;padding:0 12px 0 0;margin:0 3px 0 -24px;border:0;background:url(images/nav-sep.gif) no-repeat 100% 0;color:#fff;font-size:13px;text-shadow:1px 0 1px rgb(0 0 0/.7);cursor:pointer}
nav.main>.dd>.ddlink{background-image:none;padding-right:28px;margin-right:0}
.subhead{font-size:19px;color:#93526a;margin:0 0 10px}
.page-text img{max-width:100%;height:auto}
.screen-reader-text{position:absolute;left:-9999px}
.album .thumb:is(span){display:block}
@media (max-width:760px){
  .ddbtn{position:absolute;right:8px;top:0;margin:0;background:none;font-size:18px;padding:0 12px}
  .dd{position:relative}
  nav.main>.dd>.ddlink{padding-right:56px}
}
.cols.solo{grid-template-columns:minmax(0,1fr)}
.cols.solo #content{padding:0 22px}
.album b{margin:7px 2px 1px}
@media (max-width:760px){.cols.solo #content{padding:0 12px}}
.manage-link{font-size:14px;background:#fff697;border:1px solid #b99b81;color:#6d5a4a;padding:3px 10px;text-decoration:none}