/* Star Directory: additions for the dynamic WordPress theme. */

/* Sticky header below the WordPress admin bar */
.admin-bar .header{top:32px}
@media (max-width:782px){.admin-bar .header{top:46px}}
@media (max-width:600px){.admin-bar .header{top:0}}

/* Website screenshots fill their boxes */
.sd-shot img{object-fit:cover!important;object-position:top center;padding:0!important}
.listing-thumb.sd-shot{display:block}
.listing-thumb.sd-shot img,.listing-thumb.sd-shot>a{display:block;width:100%;height:100%}
.proj .ph.sd-shot img{width:100%;height:100%;max-width:none;max-height:none}
.sl2-cover.sd-shot img{position:relative}
.sd-initials{display:grid;place-items:center;width:100%;height:100%;min-height:120px;background:var(--grad);color:#111;font-family:var(--ff-display);font-weight:700;font-size:clamp(36px,5vw,64px);letter-spacing:.04em}
.sd-initials--cover{min-height:100%;font-size:clamp(60px,9vw,120px)}
.sl2-cover .sd-initials{position:absolute;inset:0}

/* Listing logo tile shows initials */
.sd-logo{display:grid;place-items:center}
.sd-logo span{font-family:var(--ff-display);font-weight:700;font-size:clamp(40px,4vw,60px);color:#141414}

/* Brand marquee: screenshots */
.brand-item.sd-brand{padding:0;overflow:hidden;height:110px;width:180px}
.brand-item.sd-brand img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:top center}
.brand-item.sd-brand .sd-initials{min-height:0;font-size:28px}

/* Category photos in pills and lists (never icons) */
.cat-pill .sd-pill-img{width:42px;height:42px;border-radius:12px;object-fit:cover;flex-shrink:0;transition:.35s}
.cat-pill:hover .sd-pill-img{transform:rotate(-8deg)}
.sd-cat-letter{display:inline-grid;place-items:center;background:var(--grad);color:#111;font-weight:700;border-radius:12px;flex-shrink:0}
.cat-pill .sd-cat-letter{width:42px;height:42px}
.sd-cat-cover{position:absolute;inset:0;z-index:-2;font-size:80px;border-radius:0}
.listing-cat .sd-mini-img{width:22px;height:22px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:4px}
.listing-cat .sd-cat-letter{width:22px;height:22px;font-size:11px;border-radius:6px;vertical-align:middle}
.sd-thumb-list li a{align-items:center}
.sd-li-name{display:flex;align-items:center;gap:10px}
.sd-li-img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex-shrink:0}
.sd-thumb-list .sd-cat-letter{width:30px;height:30px;font-size:13px;border-radius:8px}

/* Home accordion: listing links */
.ox-acc .acc-inner ul a:hover{color:var(--orange)}

/* Recently listed stack cards */
.sd-stack-card{display:block;transition:transform .4s var(--ease)}
.sd-stack-card:hover{transform:translateY(-6px)}
.sd-stack-card .sd-stack-cat{font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;max-width:55%;text-align:right}
.testi .who .av{width:52px;height:52px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;font-family:var(--ff-display);color:#111;flex-shrink:0}

/* Website preview on the listing page */
.sd-preview{display:block;aspect-ratio:16/9;background:#fff}
.sd-preview .play{pointer-events:none}

/* Photo bento with fewer than five photos */
.sl2-bento.sd-bento-1{grid-template-columns:1fr;grid-template-rows:380px}
.sl2-bento.sd-bento-1 .g1{grid-column:auto;grid-row:auto}
.sl2-bento.sd-bento-2{grid-template-columns:1fr 1fr;grid-template-rows:320px}
.sl2-bento.sd-bento-2 .g1{grid-column:auto;grid-row:auto}
.sl2-bento.sd-bento-3{grid-template-columns:2fr 1fr}
.sl2-bento.sd-bento-3 .g1{grid-column:auto;grid-row:span 2}
.sl2-bento.sd-bento-4{grid-template-columns:2fr 1fr 1fr}
.sl2-bento.sd-bento-4 .g1{grid-column:auto;grid-row:span 2}
.sl2-bento.sd-bento-4 .g4{grid-column:span 2}
@media (max-width:700px){.sl2-bento[class*="sd-bento-"]{grid-template-columns:1fr 1fr;grid-template-rows:auto}.sl2-bento[class*="sd-bento-"] .g1{grid-column:span 2;grid-row:auto}.sl2-bento.sd-bento-4 .g4{grid-column:auto}}

/* Post and page content */
.sd-content h2{font-size:30px;margin:36px 0 14px}
.sd-content h3{font-size:22px;margin:26px 0 10px}
.sd-content p{margin-bottom:18px}
.sd-content a{color:var(--orange)}
.sd-content img{max-width:100%;height:auto;border-radius:18px}
.sd-content ol{padding-left:22px;margin:0 0 20px;color:#cfcdd4}
.article-hero img{width:100%;height:auto}

/* Post FAQ: + / − accordion, one open at a time */
.sd-post-faq{margin:40px 0}
.sd-post-faq h2{margin-bottom:18px}
.sd-post-faq .faq-q{cursor:pointer}
.sd-post-faq .faq-item.open .faq-q i{transform:none}
.sd-post-faq .faq-a p{color:#cfcdd4}

/* Pagination from paginate_links() */
.pagination span.page-numbers{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line)}
.pagination span.page-numbers.active{background:var(--orange);border-color:var(--orange);color:#111}
.pagination .dots{border:none!important;color:var(--muted)}

/* Hidden category select in the hero keeps the design's look */
.hero-search select{max-width:100%}
.sl2-rv{grid-template-columns:minmax(0,320px)!important}