/*
Theme Name: Video Soup
Version: 0.1.25
Description: Explicit module and tile layouts. Basic single posts with a related-post sidebar.
Author: f2x
License: GNU General Public License v2 or later
Text Domain: video-soup
*/
*{box-sizing:border-box}body{margin:0;background:#8c9cb5;color:#161616;font-family:Arial,sans-serif}a{color:inherit}a:hover{color:#174e85}img{max-width:100%;height:auto}.site-header{max-width:1155px;margin:20px auto;display:flex;gap:30px;align-items:center;padding:15px;background:#ddd;border-radius:14px}.brand{font-size:28px;font-weight:bold;text-decoration:none}nav ul{display:flex;flex-wrap:wrap;gap:20px;list-style:none;padding:0;margin:0}.index{max-width:1155px;margin:20px auto}.module{height:550px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:10px;padding:15px;margin-bottom:0;background:#00b6b8;border-radius:0}.tile{min-width:0;min-height:0;overflow:hidden;background:#ccc;border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:4px}.thumb{display:block;background:#111;overflow:hidden;border-radius:9px;aspect-ratio:26/15;flex-shrink:0}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.placeholder{display:grid;place-items:center;height:100%;color:#ddd;font-size:40px}.tile-copy{min-width:0;min-height:0;display:flex;flex-direction:column;flex:1}.tile time{font-size:12px;text-align:right}.tile h2{font-size:16px;line-height:1.1;margin:3px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.tile h2 a{text-decoration:none}.excerpt{font-size:12px;line-height:1.1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.channel{margin-top:auto;padding-top:3px;font-size:13px;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}.tile.wide{flex-direction:row;gap:10px}.wide .thumb{width:49%;height:100%;aspect-ratio:auto}.wide .excerpt{-webkit-line-clamp:6}.single-layout{max-width:1155px;margin:20px auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px}.single-layout article.single-post,.sidebar,.page-content{background:#ddd;border-radius:14px;padding:20px;min-width:0}.single-layout article.single-post h1{margin-top:0}.post-meta{font-size:14px}.post-content{overflow-wrap:anywhere}.post-content iframe{max-width:100%;aspect-ratio:16/9;height:auto}.sidebar{background:#9c7363}.sidebar h2{font-size:20px;margin-top:0}.sidebar article{margin-bottom:20px}.sidebar h3{font-size:16px;margin:8px 0}.page-content{max-width:1155px;margin:20px auto}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:white;padding:10px;z-index:10}.pagination{padding:15px}.alignright{float:right;margin:0 0 15px 15px}.alignleft{float:left;margin:0 15px 15px 0}
.red .slot-1{grid-column:1/span 2;grid-row:1/span 2;}
.red .slot-2{grid-column:1/span 2;grid-row:3/span 2;}
.red .slot-3{grid-column:1/span 2;grid-row:5/span 2;}
.red .slot-4{grid-column:3/span 2;grid-row:1/span 2;}
.red .slot-5{grid-column:3/span 2;grid-row:3/span 2;}
.red .slot-6{grid-column:3/span 2;grid-row:5/span 2;}
.orange .slot-1{grid-column:1/span 1;grid-row:1/span 3;}
.orange .slot-2{grid-column:1/span 1;grid-row:4/span 3;}
.orange .slot-3{grid-column:2/span 1;grid-row:1/span 3;}
.orange .slot-4{grid-column:2/span 1;grid-row:4/span 3;}
.orange .slot-5{grid-column:3/span 1;grid-row:1/span 3;}
.orange .slot-6{grid-column:3/span 1;grid-row:4/span 3;}
.orange .slot-7{grid-column:4/span 1;grid-row:1/span 3;}
.orange .slot-8{grid-column:4/span 1;grid-row:4/span 3;}
.yellow .slot-1{grid-column:1/span 1;grid-row:1/span 3;}
.yellow .slot-2{grid-column:1/span 1;grid-row:4/span 3;}
.yellow .slot-3{grid-column:2/span 1;grid-row:1/span 3;}
.yellow .slot-4{grid-column:2/span 1;grid-row:4/span 3;}
.yellow .slot-5{grid-column:3/span 2;grid-row:1/span 2;}
.yellow .slot-6{grid-column:3/span 2;grid-row:3/span 2;}
.yellow .slot-7{grid-column:3/span 2;grid-row:5/span 2;}
.green .slot-1{grid-column:1/span 2;grid-row:1/span 2;}
.green .slot-2{grid-column:1/span 2;grid-row:3/span 2;}
.green .slot-3{grid-column:1/span 2;grid-row:5/span 2;}
.green .slot-4{grid-column:3/span 1;grid-row:1/span 3;}
.green .slot-5{grid-column:3/span 1;grid-row:4/span 3;}
.green .slot-6{grid-column:4/span 1;grid-row:1/span 3;}
.green .slot-7{grid-column:4/span 1;grid-row:4/span 3;}
.blue .slot-1{grid-column:1/span 1;grid-row:1/span 3;}
.blue .slot-2{grid-column:1/span 1;grid-row:4/span 3;}
.blue .slot-3{grid-column:4/span 1;grid-row:1/span 3;}
.blue .slot-4{grid-column:4/span 1;grid-row:4/span 3;}
.blue .slot-5{grid-column:2/span 2;grid-row:1/span 2;}
.blue .slot-6{grid-column:2/span 2;grid-row:3/span 2;}
.blue .slot-7{grid-column:2/span 2;grid-row:5/span 2;}
@media(max-width:1000px){.site-header,.index,.single-layout,.page-content{margin:15px}.module{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:80px}.single-layout{grid-template-columns:minmax(0,1fr) 260px}}
@media(max-width:1000px){
.red .slot-1{grid-column:1/span 2;grid-row:1/span 2;}
.red .slot-2{grid-column:1/span 2;grid-row:3/span 2;}
.red .slot-3{grid-column:1/span 2;grid-row:5/span 2;}
.red .slot-4{grid-column:1/span 2;grid-row:7/span 2;}
.red .slot-5{grid-column:1/span 2;grid-row:9/span 2;}
.red .slot-6{grid-column:1/span 2;grid-row:11/span 2;}
.orange .slot-1{grid-column:1/span 1;grid-row:1/span 3;}
.orange .slot-2{grid-column:1/span 1;grid-row:4/span 3;}
.orange .slot-3{grid-column:2/span 1;grid-row:1/span 3;}
.orange .slot-4{grid-column:2/span 1;grid-row:4/span 3;}
.orange .slot-5{grid-column:1/span 1;grid-row:7/span 3;}
.orange .slot-6{grid-column:1/span 1;grid-row:10/span 3;}
.orange .slot-7{grid-column:2/span 1;grid-row:7/span 3;}
.orange .slot-8{grid-column:2/span 1;grid-row:10/span 3;}
.yellow .slot-1{grid-column:1/span 1;grid-row:1/span 3;}
.yellow .slot-2{grid-column:1/span 1;grid-row:4/span 3;}
.yellow .slot-3{grid-column:2/span 1;grid-row:1/span 3;}
.yellow .slot-4{grid-column:2/span 1;grid-row:4/span 3;}
.yellow .slot-5{grid-column:1/span 2;grid-row:7/span 2;}
.yellow .slot-6{grid-column:1/span 2;grid-row:9/span 2;}
.yellow .slot-7{grid-column:1/span 2;grid-row:11/span 2;}
.green .slot-1{grid-column:1/span 2;grid-row:1/span 2;}
.green .slot-2{grid-column:1/span 2;grid-row:3/span 2;}
.green .slot-3{grid-column:1/span 2;grid-row:5/span 2;}
.green .slot-4{grid-column:1/span 1;grid-row:7/span 3;}
.green .slot-5{grid-column:1/span 1;grid-row:10/span 3;}
.green .slot-6{grid-column:2/span 1;grid-row:7/span 3;}
.green .slot-7{grid-column:2/span 1;grid-row:10/span 3;}
.blue .slot-1{grid-column:1/span 1;grid-row:1/span 3;}
.blue .slot-2{grid-column:1/span 1;grid-row:4/span 3;}
.blue .slot-3{grid-column:2/span 1;grid-row:1/span 3;}
.blue .slot-4{grid-column:2/span 1;grid-row:4/span 3;}
.blue .slot-5{grid-column:1/span 2;grid-row:7/span 2;}
.blue .slot-6{grid-column:1/span 2;grid-row:9/span 2;}
.blue .slot-7{grid-column:1/span 2;grid-row:11/span 2;}
}
@media(max-width:520px){
.site-header,.index,.single-layout,.page-content{margin:8px}
.module{padding:8px;gap:8px;grid-auto-rows:clamp(56px,16vw,80px)}
.tile{padding:6px;gap:4px;border-radius:10px}
.tile h2{font-size:13px;line-height:1.15}
.tile time{font-size:10px}
.excerpt{font-size:11px;line-height:1.2;-webkit-line-clamp:2}
.channel{font-size:11px}
.tile.wide{flex-direction:row;gap:7px}
.wide .thumb{width:46%;height:100%;aspect-ratio:auto}
.wide .excerpt{-webkit-line-clamp:3}
.single-layout{display:block}.sidebar{margin-top:16px}
.site-header{display:block}.brand{display:block;margin-bottom:12px}
}

/* Adjacent modules share the same spacing as internal tile gutters. */
.module{padding-top:10px;padding-bottom:0}
@media(max-width:520px){.module{padding-top:8px;padding-bottom:0}}

/* Protect title and category; description yields when space is tight. */
.tile-copy{overflow:hidden}
.tile time,.tile h2,.tile .channel{flex-shrink:0}
.tile .excerpt{flex:0 1 auto;min-height:0;overflow:hidden}
.tile .channel{margin-top:auto}

.return-to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:1000;width:46px;height:46px;border:0;border-radius:50%;background:#243b57;color:#fff;font-size:28px;cursor:pointer;box-shadow:0 2px 8px #0005}
.return-to-top[hidden]{display:none}
.return-to-top:hover{background:#162b44}
.return-to-top:focus-visible{outline:3px solid white;outline-offset:3px}

.category-directory{max-width:1155px;margin:20px auto;color:#684b3d;font-size:14px}
.directory-intro,.directory-section{background:#d7c6a5;padding:18px;border-radius:16px;margin-bottom:16px;scroll-margin-top:20px}
.directory-intro h1{font-size:24px;color:#161616;margin:0 0 10px}
.directory-section h2{font-size:21px;margin:0 0 10px}
.category-directory a{text-decoration:none}.category-directory a:hover{text-decoration:underline}
.directory-description{font-size:13px;line-height:1.5;max-width:650px;color:#626975}
.directory-description p{margin:0 0 12px}
#directory-search{width:100%;max-width:330px;border:1px solid #bbb;border-radius:7px;background:white;padding:9px 12px;font:inherit}
.directory-shortcuts{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.directory-shortcuts a{background:#e8ddd0;padding:6px 10px;border-radius:20px;font-size:12px}
.directory-columns{columns:3;column-gap:18px}
.directory-branch{break-inside:avoid;background:#fffdf8;border-radius:12px;padding:12px;margin:0 0 14px;box-shadow:0 3px 8px #0001}
.directory-branch h3{font-size:15px;margin:0 0 7px}
.directory-branch ul{list-style:none;margin:0;padding:0}
.directory-branch li{padding:4px 0;line-height:1.3}
.directory-branch li ul{padding-left:14px;margin-top:3px}
.category-directory [hidden]{display:none!important}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:1000px){.category-directory{margin:15px}.directory-columns{columns:2}}
@media(max-width:600px){.category-directory{margin:8px}.directory-columns{columns:1}.directory-intro,.directory-section{padding:14px}}

/* Shared palette, configured under Customize > Video Soup. */
body{background:var(--vs-background,#8c9cb5)}
.module,.single-layout article.single-post,.page-content,.directory-intro,.directory-section,.site-header{background:var(--vs-content,#00b6b8)}
.tile,.directory-branch{background:var(--vs-tile,#ccc)}
.sidebar{background:var(--vs-accent,#9c7363)}
.category-directory{color:#161616}
.directory-description{color:inherit}
.directory-shortcuts a{background:var(--vs-tile,#ccc)}

.return-to-top{padding:10px;line-height:0}.return-to-top svg{display:block;width:26px;height:26px}

/* Native sans-serif fonts only: no web-font downloads. */
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans","Liberation Sans",Arial,sans-serif}
button,input,select,textarea{font-family:inherit}
.single-layout{padding:18px;background:var(--vs-content,#00b6b8);border-radius:16px;align-items:start}
.single-main{min-width:0}
.single-layout article.single-post{background:var(--vs-tile,#ccc);padding:22px;box-shadow:0 2px 8px #0002}
.single-layout article.single-post h1{font-size:20pt;line-height:1.2;margin:0 0 12px;overflow-wrap:anywhere}
.post-meta{font-size:14px;line-height:1.6;margin-bottom:18px}
.post-breadcrumb{display:inline;margin-left:10px}
.breadcrumb-separator{padding:0 3px}
.post-content{line-height:1.5;max-width:100%}
.post-content::after{content:"";display:block;clear:both}
@media(max-width:600px){.single-layout{padding:10px}.single-layout article.single-post{padding:16px}.post-breadcrumb{display:block;margin:4px 0 0}}

/* Header navigation, logo and search. */
.site-header{position:relative;z-index:20;gap:20px;flex-wrap:wrap}
.site-branding{flex:0 1 auto;min-width:0}.site-branding .brand{display:block;margin:0}
.custom-logo-link{display:block}.custom-logo{display:block;max-width:280px;max-height:80px;width:auto;height:auto}
.header-controls{display:flex;align-items:center;gap:20px;margin-left:auto;flex-wrap:wrap}
.primary-menu ul{display:flex;gap:0;list-style:none;padding:0;margin:0}
.primary-menu li{position:relative;display:flex;align-items:center}
.primary-menu a{display:block;padding:10px 12px;text-decoration:none}
.primary-menu .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:230px;max-width:calc(100vw - 40px);background:var(--vs-tile,#ccc);border-radius:8px;box-shadow:0 4px 12px #0003;padding:5px;z-index:30}
.primary-menu .sub-menu li{display:flex;flex-wrap:wrap}
.primary-menu .sub-menu a{flex:1;overflow-wrap:anywhere}
.primary-menu .sub-menu .sub-menu{top:0;left:100%}
.primary-menu li.submenu-open>.sub-menu{display:block}
.submenu-toggle{border:0;background:transparent;padding:10px 8px;color:inherit;cursor:pointer;font-size:16px}
@media(hover:hover){.primary-menu li:hover>.sub-menu{display:block}}
.header-search{display:flex;gap:0;max-width:100%;margin:0}
.header-search input{min-width:0;width:160px;border:1px solid #aaa;border-radius:6px 0 0 6px;padding:8px;font:inherit;background:var(--vs-tile,#ccc)}
.header-search button{border:0;border-radius:0 6px 6px 0;background:var(--vs-accent,#9c7363);color:#161616;padding:8px 12px;cursor:pointer}
.menu-toggle{display:none;border:0;background:transparent;font-size:28px;line-height:1;padding:6px;color:inherit;cursor:pointer}
.site-header button:focus-visible,.site-header a:focus-visible,.header-search input:focus-visible{outline:2px solid currentColor;outline-offset:2px}
@media(max-width:900px){
.site-header{display:flex;gap:10px;align-items:center}
.menu-toggle{display:block;flex:0 0 auto}
.site-branding{flex:1}.site-branding .brand{font-size:24px}.custom-logo{max-width:100%;max-height:65px}
.header-controls{display:none;width:100%;margin:0}
.menu-open .header-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.primary-menu ul{display:block}.primary-menu li{flex-wrap:wrap}.primary-menu a{flex:1}
.primary-menu .sub-menu,.primary-menu .sub-menu .sub-menu{position:static;min-width:0;max-width:none;width:100%;box-shadow:none;margin-left:12px;border-left:2px solid var(--vs-accent,#9c7363);border-radius:0}
.primary-menu li:hover>.sub-menu{display:none}
.primary-menu li.submenu-open>.sub-menu{display:block}
.header-search input{width:auto;flex:1}
}

/* YouTube videos fill the article's inner width, inside its existing padding. */
.single-layout article.single-post .post-content iframe[src*="youtube.com/embed/"],
.single-layout article.single-post .post-content iframe[src*="youtube-nocookie.com/embed/"]{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/9;margin:12px auto 20px;border:0}

.single-layout article.single-post .post-content iframe[src*="youtube.com/embed/"],
.single-layout article.single-post .post-content iframe[src*="youtube-nocookie.com/embed/"]{margin-bottom:0}
.youtube-watch-link{text-align:right;margin:4px 0 20px;font-size:13px;line-height:1.5}
.youtube-watch-link a{text-decoration:none}.youtube-watch-link a:hover{text-decoration:underline}

.post-description{position:relative;line-height:1.5;overflow-wrap:anywhere}
.post-description.is-collapsed{overflow:hidden}
.post-description.is-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.5em;max-height:100%;background:linear-gradient(to bottom,transparent,var(--vs-tile,#ccc));pointer-events:none}
.description-more{display:block;margin:8px auto 0;padding:4px 10px;border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;text-decoration:underline}
.description-more[hidden]{display:none}
.description-more:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* Finish the page with padding below only its final content module. */
.index > .module:last-of-type{padding-bottom:15px}
@media(min-width:1001px){.index > .module:last-of-type{height:565px}}
@media(max-width:520px){.index > .module:last-of-type{padding-bottom:8px}}

/* Round only the outside ends of the continuous module stack. */
.index > .module:first-of-type{border-top-left-radius:14px;border-top-right-radius:14px}
.index > .module:last-of-type{border-bottom-left-radius:14px;border-bottom-right-radius:14px}

/* Balanced directory columns and split subject panels. */
.directory-columns{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.directory-column{min-width:0}
.directory-measure{position:absolute;left:-10000px;top:0;visibility:hidden;pointer-events:none}
@media(max-width:1000px){.directory-columns{columns:auto;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.directory-columns{columns:auto;grid-template-columns:minmax(0,1fr)}}

.category-archive-heading{margin:0 0 18px;padding:0 15px}
.category-archive-heading h1{font-size:20pt;font-weight:700;line-height:1.2;margin:0 0 10px;overflow-wrap:anywhere}
.category-archive-description{font-size:16px;font-weight:400;line-height:1.5;overflow-wrap:anywhere}
.category-archive-description p{margin:0 0 10px}
@media(max-width:520px){.category-archive-heading{padding:0 8px}}