/*
Theme Name: ReelNote
Description: Movie review theme with trending list, category menu, ratings, official trailer and Where to Watch. Upload your own logo from Appearance > Customize > Site Identity.
Version: 1.0
Requires at least: 5.8
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: reelnote
*/

:root{--bg:#f6f8fb;--card:#fff;--ink:#111;--muted:#555;--line:#cfdcea;--accent:#0a6191;--bar:#04689b;--good:#0a6b3b;--chip:#d5e3f2;--title:#0a6b3b;--visited:#a50fa5}
*{box-sizing:border-box}
body{margin:0;min-width:320px;overflow-x:hidden;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
html{-webkit-text-size-adjust:100%}
.wrap{width:100%;max-width:none;margin:0}
header{background:#dce6f2;border-bottom:1px dashed #5a7fa5;text-align:center;padding:14px 12px}
.logo{font:800 clamp(1.7rem,4vw,2.8rem)/1 Georgia,"Times New Roman",serif;letter-spacing:-.5px}
.logo b{color:#c8102e}
.tag{color:var(--muted);font-size:.85rem;margin-top:4px}
.search{background:var(--bar);padding:10px;display:flex;justify-content:center;gap:6px;width:100%}
.search input{flex:1 1 auto;min-width:0;max-width:560px;padding:9px 12px;border:1px solid #999;border-radius:2px;font-size:1rem}
.search button{flex:0 0 auto;min-height:42px;padding:9px 14px;border:1px solid #999;border-radius:3px;background:#f0f0f0;color:#000;font-size:1rem;cursor:pointer}
.notice{background:#fdf3d0;color:#b00010;font-weight:700;padding:10px 14px;text-align:center;font-size:.95rem;border-block:1px solid #e6c46a}
h2.sec{margin:0;padding:10px 14px;background:var(--chip);color:var(--accent);border-block:1px solid var(--line);font-size:1.05rem;text-align:center}
.list{list-style:none;margin:0;padding:0;background:var(--card)}
.item{display:flex;gap:clamp(10px,1.5vw,18px);padding:clamp(8px,1.2vw,14px) clamp(10px,1.8vw,24px);border-bottom:1px solid var(--line);align-items:center}
.item:hover{background:var(--bg)}
.poster{flex:0 0 clamp(54px,8vw,96px);height:clamp(78px,11.5vw,138px);border-radius:6px;display:flex;align-items:flex-end;padding:5px;color:#fff;font:700 .68rem/1.1 Georgia,serif;overflow:hidden}
.info{min-width:0;flex:1}
.title{overflow-wrap:anywhere;font-weight:700;font-size:clamp(.95rem,.6rem + 1vw,1.35rem);line-height:1.3;color:var(--title)}
.item:visited .title{color:var(--visited)}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:5px;align-items:center;font-size:.82rem;color:var(--muted)}
.chip{background:var(--title);border-radius:99px;padding:2px 10px;font-weight:700;color:#fff}
.rate{font-weight:800;color:var(--good)}
.ott{border:1px solid var(--line);border-radius:4px;padding:0 6px}
.cats{background:var(--card)}
.cats a{display:block;min-height:44px;padding:12px clamp(12px,1.8vw,24px);border-bottom:1px solid var(--line);font-weight:700;color:var(--accent)}
.cats a:hover,.cats a.on{background:var(--bg)}
.pager{display:flex;justify-content:center;gap:8px;padding:16px;background:var(--card)}
.pager button{min-height:44px;padding:8px 22px;border:1px solid #222;background:#333;color:#fff;border-radius:6px;font-weight:700;cursor:pointer}
.pager button:disabled{opacity:.4;cursor:default}
.about{background:var(--card);padding:16px clamp(12px,1.8vw,24px);color:var(--muted);font-size:.92rem}
.about p{margin:0 0 .7em;max-width:70ch}
footer{background:var(--chip);color:#111;border-top:1px solid var(--line);text-align:center;padding:18px 12px;font-size:.88rem}
.fnav ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:10px}
.fnav a{background:#fff;border:1px solid var(--accent);color:var(--accent);border-radius:2px;padding:5px 12px}
.fnav li:nth-child(2) a{border-color:var(--good);color:var(--good)}
.fnav li:nth-child(4) a,.fnav li:nth-child(5) a{border-color:#d62828;color:#d62828}
.empty{padding:22px;text-align:center;color:var(--muted);background:var(--card)}
/* single review page layout (hidden until a title is opened) */
.review{display:none;background:var(--card);padding:clamp(12px,2vw,28px)}
.review h1{margin:.2em 0;font:800 1.5rem/1.25 Georgia,serif}
.review .hero{display:flex;gap:14px;flex-wrap:wrap}
.review .poster{flex:0 0 clamp(120px,18vw,200px);height:clamp(170px,26vw,290px);font-size:.9rem}
.review dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.92rem}
.review dt{color:var(--muted)}.review dd{margin:0}
.review h3{margin:1.2em 0 .3em}
.back{display:inline-block;margin-bottom:8px;color:var(--accent);font-weight:700;cursor:pointer;background:none;border:0;padding:0;font-size:1rem}
.trailer{aspect-ratio:16/9;background:var(--bg);border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);text-align:center;padding:10px}
.watch{display:flex;flex-wrap:wrap;gap:8px}
.watch a{border:1px solid var(--line);border-radius:6px;padding:10px 16px;font-weight:700;min-height:44px}
.hero>div:last-child{flex:1 1 260px;min-width:0}
.trailer{max-width:900px}
.review p{max-width:80ch}
footer{padding:18px clamp(10px,2vw,24px) calc(18px + env(safe-area-inset-bottom))}
@media(max-width:600px){.notice{font-size:.85rem;padding:8px 10px}.meta{gap:5px;font-size:.78rem}.chip{padding:2px 9px}.review .hero{flex-direction:column;align-items:flex-start}.review dl{grid-template-columns:auto 1fr;width:100%}.pager button{flex:1}}
@media(max-width:360px){.poster{flex-basis:48px;height:70px;font-size:.6rem}.search button{padding:9px 10px}}
@media(min-width:1400px){body{font-size:17px}}
@media(hover:none){.item:hover{background:inherit}}
/* post spacing like reference: separate rows with a thin gap */
.list{background:#f4f6f0;padding:5px 0 0}
.list li{margin:0 0 5px}
.list li.empty{margin:0}
.item{background:#fff;border-bottom:3px solid #e3e7df;padding:7px clamp(8px,1.2vw,12px);align-items:center;gap:clamp(10px,1.4vw,16px)}
.item:hover{background:#fff}
.poster{flex:0 0 clamp(58px,6vw,76px);height:clamp(66px,6.6vw,82px);border-radius:3px;border:1px solid #cfd6cc;padding:3px;font-size:.62rem}
.title{line-height:1.25;margin:0}
.meta{margin-top:3px;gap:6px}
.chip{padding:1px 9px;font-size:.8rem;line-height:1.35}
.title{font-family:Verdana,Geneva,"DejaVu Sans",system-ui,sans-serif;font-size:clamp(.85rem,.72rem + .5vw,1.1rem);line-height:1.3}
.chip{font-size:.74rem}

.site-header .custom-logo-link{display:inline-block;line-height:0}
.custom-logo{display:block;margin:0 auto;max-width:min(100%,460px);max-height:90px;width:auto;height:auto}
.logo{display:inline-block;color:inherit}
.poster{padding:0;overflow:hidden;background:linear-gradient(160deg,#134e6b,#0a2a3a)}
.poster img{width:100%;height:100%;object-fit:cover;display:block;margin:0}
.poster span{padding:4px;align-self:flex-end}
.pager a,.pager span{display:inline-block;min-height:44px;line-height:28px;padding:8px 22px;border:1px solid #222;background:#333;color:#fff;border-radius:6px;font-weight:700}
.pager span.off{opacity:.4}
.review{display:block}
.review img{max-width:100%;height:auto}
.review .hero .poster{background:none}
.entry-content{max-width:80ch}
.entry-content h2,.entry-content h3{margin:1.2em 0 .4em}
.entry-content iframe{max-width:100%}
.screen-reader-text{position:absolute;left:-9999px}
.alignleft{float:left;margin:0 1em 1em 0}.alignright{float:right;margin:0 0 1em 1em}.aligncenter{display:block;margin:0 auto}
.review .poster img{border-radius:3px}
.fnav a{display:inline-block}
.fnav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.trailer-embed{position:relative;max-width:900px;aspect-ratio:16/9}
.trailer-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.review h1{overflow-wrap:anywhere}

/* ---- single review page fixes: full width + poster not cropped ---- */
.review{width:100%;max-width:none;box-sizing:border-box}
.review .hero{display:flex;flex-wrap:nowrap;gap:clamp(14px,2.5vw,32px);align-items:flex-start;width:100%}
.review .hero .poster{display:block;flex:0 0 clamp(150px,22vw,300px);width:clamp(150px,22vw,300px);height:auto;padding:0;border:0;background:none;overflow:visible}
.review .hero .poster img{display:block;width:100%;height:auto;object-fit:contain;border-radius:6px}
.review .hero .poster span{display:flex;align-items:flex-end;min-height:220px;padding:10px;border-radius:6px;color:#fff;background:linear-gradient(160deg,#134e6b,#0a2a3a)}
.review .hero>div:last-child{flex:1 1 0;min-width:0}
.review dl{width:100%}
.review p,.entry-content,.trailer-embed,.trailer{max-width:none}
.entry-content img,.entry-content figure,.entry-content iframe,.entry-content table,.entry-content video{max-width:100%}
.entry-content img{height:auto}
@media(max-width:600px){
 .review .hero{flex-direction:column;align-items:center}
 .review .hero .poster{flex:0 0 auto;width:min(70%,260px)}
 .review .hero>div:last-child{flex:none;width:100%}
}