/* Twheelo Ride Premium White — minimalist “premium commerce” system. */

:root{
  /* Map to WP presets with fallbacks (so admin screens look fine too). */
  --tw-bg: var(--wp--preset--color--paper, #ffffff);
  --tw-surface: var(--wp--preset--color--paper, #ffffff);
  --tw-surface-2: var(--wp--preset--color--fog, #f8fafc);
  --tw-surface-3: var(--wp--preset--color--cloud, #f1f5f9);

  --tw-text: var(--wp--preset--color--ink, #0b1220);
  --tw-muted: var(--wp--preset--color--mist, #64748b);

  --tw-accent: var(--wp--preset--color--cyan, #0ea5e9);
  --tw-ice: var(--wp--preset--color--ice, #e0f2fe);
  --tw-highlight: var(--wp--preset--color--mint, #a7f3d0);

  --tw-border: rgba(15, 23, 42, 0.10);
  --tw-border-strong: rgba(15, 23, 42, 0.16);

  --tw-radius: 20px;
  --tw-radius-sm: 14px;

  --tw-shadow: 0 18px 46px rgba(2, 6, 23, 0.08);
  --tw-shadow-soft: 0 1px 0 rgba(2, 6, 23, 0.04);
}

html, body{
  background: var(--tw-bg);
  color: var(--tw-text);
}

.wp-site-blocks{min-height:100vh;}

::selection{
  background: rgba(14, 165, 233, 0.18);
  color: var(--tw-text);
}

.tw-container{max-width:1120px;margin:0 auto;padding:0 18px;}

/* Topbar: clean glass on white */
.tw-topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(170%) blur(12px);
  -webkit-backdrop-filter:saturate(170%) blur(12px);
  background:rgba(255,255,255,0.74);
  border-bottom:1px solid var(--tw-border);
  box-shadow: 0 1px 0 rgba(2,6,23,0.04);
}
.tw-nav a{color:inherit}

/* Small “system” pills */
.tw-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--tw-border);
  background: rgba(248,250,252,0.90);
  color: rgba(11,18,32,0.62);
  font-size:.9rem;
}

/* Cards: premium surface + hairline border + soft lift */
.tw-card{
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  box-shadow: var(--tw-shadow-soft);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.tw-card.pad{padding:18px;}
.tw-card:hover{
  border-color: var(--tw-border-strong);
  box-shadow: var(--tw-shadow);
  transform: translateY(-1px);
}

/* Accent badge (cool, not loud) */
.tw-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  background: rgba(14,165,233,0.10);
  border: 1px solid rgba(14,165,233,0.18);
  color: var(--tw-accent);
  font-weight: 800;
  font-size: .85rem;
}

/* Muted text helper */
.tw-muted{color: rgba(11,18,32,0.62);}

/* Kicker label */
.tw-kicker{
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:.78rem;
  color: rgba(11,18,32,0.50);
}

/* Simple responsive grids */
.tw-grid{display:grid;gap:16px;}
@media (min-width: 840px){
  .tw-grid.cols-3{grid-template-columns: repeat(3, 1fr);}
  .tw-grid.cols-2{grid-template-columns: repeat(2, 1fr);}
}

/* Comparison / picks table */
.tw-picks-table{width:100%;border-collapse:separate;border-spacing:0 10px;}
.tw-picks-table td, .tw-picks-table th{padding:12px 14px;vertical-align:top;}
.tw-picks-table tr{
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
}
.tw-picks-table thead th{
  color: rgba(11,18,32,0.70);
  font-size: .9rem;
}
.tw-picks-table tr td:first-child, .tw-picks-table tr th:first-child{border-top-left-radius:var(--tw-radius-sm);border-bottom-left-radius:var(--tw-radius-sm);}
.tw-picks-table tr td:last-child, .tw-picks-table tr th:last-child{border-top-right-radius:var(--tw-radius-sm);border-bottom-right-radius:var(--tw-radius-sm);}

/* CTA button helper used in shortcode HTML bits */
.tw-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;font-weight:900;
  background: var(--tw-accent);
  color: #ffffff;
  border: 1px solid rgba(14,165,233,0.22);
  transition: transform .14s ease, filter .14s ease, background .14s ease;
}
.tw-cta.secondary{
  background: transparent;
  color: var(--tw-accent);
  border: 1px solid rgba(14,165,233,0.32);
}
.tw-cta:hover{transform:translateY(-1px); filter:brightness(0.98);}

/* Sticky mobile CTA bar */
.tw-sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(255,255,255,0.88);
  border-top:1px solid var(--tw-border);
  box-shadow: 0 -10px 28px rgba(2,6,23,0.06);
  padding:10px 14px;
  display:none;
}
.tw-sticky-cta .tw-inner{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  max-width:1120px;margin:0 auto;
}
.tw-sticky-cta .tw-title{
  font-weight:900;font-size:.95rem;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  max-width:55vw;color: var(--tw-text);
}
@media (max-width: 840px){
  .tw-sticky-cta{display:block;}
}

/* FAQ blocks */
.tw-faq details{
  border:1px solid var(--tw-border);
  border-radius:var(--tw-radius-sm);
  padding:12px 14px;
  background: var(--tw-surface);
}
.tw-faq details+details{margin-top:10px;}
.tw-faq summary{cursor:pointer;font-weight:900;color: var(--tw-text);}

/* Footer */
.tw-footer{
  border-top:1px solid var(--tw-border);
  padding:30px 0;
  color: rgba(11,18,32,0.62);
}

/* Hero spacing */
.tw-hero{padding:28px 0 10px 0;}
.tw-hero h1{margin:6px 0 10px 0;}
.tw-hero p{margin:0;max-width:62ch;color: rgba(11,18,32,0.62);}

/* Inputs (newsletter pattern) */
.tw-input{
  width:100%;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid var(--tw-border);
  background: #ffffff;
  color: var(--tw-text);
  outline:none;
}
.tw-input::placeholder{color: rgba(11,18,32,0.40);}
.tw-input:focus{
  border-color: rgba(14,165,233,0.55);
  box-shadow: 0 0 0 3px rgba(14,165,233,0.16);
}

.tw-newsletter{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.tw-newsletter button{cursor:pointer;}

/* WP default link hover: subtle underline appears */
a:hover{
  text-decoration: underline;
  text-decoration-color: rgba(14,165,233,0.55);
  text-underline-offset: 4px;
}

/* Images: softly rounded */
.wp-block-image img{border-radius:16px;}


/* WooCommerce (optional): match premium white system */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product{
  background: var(--tw-surface);
  border: 1px solid var(--tw-border);
  border-radius: var(--tw-radius);
  padding: 14px;
  box-shadow: var(--tw-shadow-soft);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover{
  border-color: var(--tw-border-strong);
  box-shadow: var(--tw-shadow);
  transform: translateY(-1px);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border-radius: 999px;
  border: 1px solid var(--tw-border);
  background: var(--tw-surface-2);
  margin: 0 8px 0 0;
}
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button{
  border-radius: 999px;
  background: var(--tw-accent);
  color: #ffffff;
  border: 1px solid rgba(14,165,233,0.22);
  font-weight: 900;
  padding: 10px 14px;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover{
  filter: brightness(0.98);
}


/* Twheelo: Post title hero override */

.wp-block-post-title{
  font-size: clamp(3rem, 4vw, 5rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em;
  font-weight: 800 !important;
  margin: 0 0 18px !important;
}

@media (max-width: 600px){
  .wp-block-post-title{
    font-size: clamp(2.2rem, 6vw, 3.2rem) !important;
    line-height: 1.1 !important;
  }
}

/* Fix double bullets caused by custom-list adding its own dot + browser list marker */
.custom-list ul,
.custom-list ol{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.custom-list li{
  position: relative;
  padding-left: 18px; /* space for the custom dot */
}

/* Extra safety: kill any remaining marker in modern browsers */
.custom-list li::marker{
  content: "";
}
/* Responsive YouTube embeds for Twheelo */
.video-embed{
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 18px;
  overflow: hidden;
  margin: 1.2em 0;
}

/* Your CSS-module wrapper div should fill the box */
.video-embed > div{
  position: absolute;
  inset: 0;
}

/* Make iframe fill the container */
.video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16 / 9){
  .video-embed{ height: 0; padding-top: 56.25%; }
  .video-embed > div{ position: absolute; inset: 0; }
}