/*
Theme Name: Clickbusiness.Info
Text Domain: cdt-templates
*/

/* WordPress additions on top of assets/css/style.css (the design). */

/* Listing visuals: website screenshot / own image, else business-name initials */
.l-row__img, .sl-browser__shot { position: relative; }
.sl-browser__shot { min-height: 340px; background: var(--white); }
.sl-browser__shot img { display: block; }
.ph-initials { display: none; }
.is-empty > .ph-initials {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  color: var(--yellow); font: 700 clamp(2.4rem, 6vw, 4rem)/1 var(--font-head); letter-spacing: .04em;
}

/* GMB highlight / attribute icons (PNG shown through a mask so it takes the accent color) */
.ico { display: inline-block; width: 22px; height: 22px; flex: none; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.feat-grid .ico, .feat-grid svg { width: 22px; height: 22px; max-width: 22px; max-height: 22px; flex: none; object-fit: contain; color: var(--yellow); }
.hl-item .ico, .hl-item svg { display: block; margin: 0 auto 10px; }
.amen li .ico, .amen li svg { margin: 0; }
.kv b svg { width: 18px; height: 18px; vertical-align: -3px; margin-right: 8px; color: var(--yellow); }
.fact__ico { display: block; color: var(--yellow); margin-bottom: 10px; }
.fact__ico svg { width: 22px; height: 22px; }

/* Listing page */
.sl-hero h1 a { color: inherit; }
.sl-hero h1 a:hover { color: var(--yellow); }
.cb-about a { color: var(--yellow); text-decoration: underline; text-underline-offset: 3px; }

/* Single post: the banner keeps the design's heading look; the article title is the page's h1 */
.banner .banner__title { display: block; font-family: var(--font-head); font-weight: 700; color: var(--white); line-height: 1.15; font-size: clamp(36px, 5vw, 62px); text-transform: uppercase; margin: 0 0 14px; }
.social-row svg { width: 16px; height: 16px; fill: currentColor; }
.post-navigation .nav-links { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 30px; }
.post-navigation .nav-next { margin-left: auto; text-align: right; }

/* Pagination (paginate_links in the design's .pager) */
.pagination { flex-wrap: wrap; }
.pagination .page-numbers { text-decoration: none; }
.pagination .page-numbers.dots { border-color: transparent; }
.pagination .page-numbers.current { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }

/* Search bar: the design CSS only ships its mobile and 404 overrides */
.searchbar { display: grid; align-items: center; gap: 0; max-width: 760px; margin-top: 28px; padding: 8px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); }
.searchbar label { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 18px; }
.searchbar label i { color: var(--yellow); flex: none; }
.searchbar input, .searchbar select { flex: 1; width: 100%; min-width: 0; padding: 14px 0; background: transparent; border: 0; outline: none; color: var(--white); font: 15px var(--font-body); }
.searchbar input::placeholder { color: var(--muted); }
.searchbar select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 22px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23fdb515' stroke-width='1.8'/%3E%3C/svg%3E") right center no-repeat; }
.searchbar select option { background: var(--ink-2); color: var(--white); }
.searchbar .btn { white-space: nowrap; }
@media (min-width: 641px) {
  .searchbar { grid-template-columns: 1.4fr 1fr auto; border-radius: 999px; }
  .searchbar label + label { border-left: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .searchbar[style] { grid-template-columns: 1fr !important; }
}

/* Clip reveals: an element clipped to zero width never reports as intersecting, so play the reveal on load */
.reveal[data-anim="clip"] { animation: cb-clip 1.2s var(--ease) .3s both; }
@keyframes cb-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal[data-anim="clip"] { animation: none; clip-path: none; }
}

/* Forms */
.form__note--error { color: #ff7a7a; }
.toolbar form { margin: 0; }
.cb-btn-block { width: 100%; max-width: 280px; justify-content: center; }

/* Sitemap columns keep their own height */
.sitemap-grid { align-items: start; }