@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Quicksand",  sans-serif;
  --nav-font: "Open Sans",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #314862; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #13447f; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #065cc2; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #065cc2;  /* The default color of the main navmenu links */
  --nav-hover-color: #065cc2; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #11427d; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #065cc2; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #acc4e0; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ffffff; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f7faff;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #065cc2;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --accent-color: #afcdf1;
  --surface-color: #2973cc;
  --contrast-color: #ffffff;
}



/* Typewriter caret */
.typewriter {
  position: relative;
  white-space: nowrap;
}

/* Blinking cursor */
.typewriter::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 4px;
  vertical-align: -2px;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.typed {
    color: #065cc2 ;
}

/*.cards-wrapper {*/
/*  display: flex;*/
/*  justify-content: center;*/
/*}*/

.cards-wrapper {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.cards-wrapper .card {
  flex: 1;
}
/* Stops long-press selecting images while swiping */
.carousel img { user-select: none; -webkit-user-drag: none; }


@media (max-width: 767.98px) {
  /* Center the single mobile card */
  .carousel-item .card {
    margin: 0 auto;
  }
}






.card img {
  max-width: 100%;
  max-height: 100%;
}
.card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
  border-radius: 0;
}
.carousel-inner {
  padding: 1em;
}
.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 5vh;
  height: 5vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}
@media (min-width: 768px) {
  .card img {
    height: 11em;
  }
}
body{
    /*background: url("../img/bg/abstract-bg-1.webp") no-repeat center center;*/
    /*background: url("../img/bg/abstract-bg-1.webp") no-repeat;*/
    background: url("../img/wt10things-bg-tile.svg")
}

.floating-elements img {
  position: absolute;
  /* …top/left per item… */
  animation: float 6s ease-in-out infinite alternate;
}

.hero .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.hero-title  {
  color: var(--accent-color);
  position: relative;
    font-size: clamp(1.6rem, 2.2vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

.hero .hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 30px;
}

@media (max-width: 991px) {
  .hero .hero-image {
    min-height: auto;
    padding: 40px 30px;
  }
}

.hero .image-container {
  position: relative;
  max-width: 500px;
  width: 100%;
}

.hero .hero-main-image {
  border-radius: 20px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
  position: relative;
  z-index: 2;
}

.hero .image-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  right: -20px;
  bottom: -20px;
  background: linear-gradient(45deg, var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 30%));
  border-radius: 20px;
  z-index: 1;
}

.hero .floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
}

.hero .floating-card {
  position: absolute;
  background-color: var(--surface-color);
  padding: 15px 20px;
  border-radius: 15px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  animation: float 6s ease-in-out infinite;

}

@media (max-width: 768px) {
  .hero .floating-card {
    padding: 10px 15px;
    font-size: 0.9rem;
  }
}

.hero .floating-card i {
  font-size: 1.5rem;
  color: var(--accent-color);

}

@media (max-width: 768px) {
  .hero .floating-card i {
    font-size: 1.2rem;
  }
}

.hero .floating-card span {
  font-weight: 600;
  color: var(--default-color);
}

.hero .floating-card.card-1 {
  top: 10%;
  left: -10%;
  animation-delay: 0s;
}

@media (max-width: 768px) {
  .hero .floating-card.card-1 {
    top: 5%;
    left: -5%;
  }
}

.hero .floating-card.card-2 {
  top: 60%;
  right: -15%;
  animation-delay: 2s;
}

@media (max-width: 768px) {
  .hero .floating-card.card-2 {
    top: 70%;
    right: -10%;
  }
}

.hero .floating-card.card-3 {
  bottom: 15%;
  left: -5%;
  animation-delay: 4s;
}

@media (max-width: 768px) {
  .hero .floating-card.card-3 {
    bottom: 10%;
    left: 0%;
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

#search_bar::placeholder {
  color: #aaa;
  font-style: italic;
  opacity: 1; /* Firefox fix */
}

@media (min-width: 768px) {
  form.row.g-2 {
    gap: 0.5rem;
  }
  #search_bar {
    max-width: 800px;
  }
}

.navbar{
    background-color: var(--nav-color);
}

.logo{
    height: 80px;
    width: 80px;
}

a {
    color: var(--bs-link-color);
    text-decoration: none;
}

/* Don’t let columns wrap on md+ */
@media (min-width: 768px) {
  .row-no-wrap { flex-wrap: nowrap; }
}

/* Allow flex items to actually shrink inside columns (prevents overflow) */
.row > [class^="col-"],
.row > [class*=" col-"] {
  min-width: 0;
}

/* Carousel cards: keep them from forcing the column wider */
.cards-wrapper {
  display: flex;
  gap: 1rem;
  flex-wrap: nowrap;              /* stay on one row on desktop */
}
.cards-wrapper .card {
  flex: 1 1 0;                    /* allow shrinking */
  min-width: 0;                   /* critical for flex overflow */
}

/* Stack cards vertically on small screens */
@media (max-width: 767.98px) {
  .cards-wrapper { flex-direction: column; }
}

/* Make columns same height visually if desired */
.hero-image,
.col-12.col-md-8 { display: flex; }
.hero-image > .hero,
.col-12.col-md-8 > div { width: 100%; }

/* Large desktop gaps above/below the search bar */
@media (min-width: 992px) { /* lg and up */
  .search-band {
    /* tune these to taste */
    padding-top: clamp(20px, 5vh, 100px);
    padding-bottom: clamp(32px, 8vh, 100px);
  }
}

/* Optional: keep smaller but tidy spacing on mobile/tablet */
@media (max-width: 991.98px) {
  .search-band { padding: 1rem 0 1.25rem; }
}

/* center the whole form and limit width so it looks balanced */
.search-form {
  max-width: min(900px, 90vw);
  margin: 0 auto;
}

/* make the label text bigger and nicely weighted */
.hero-title {
  font-size: clamp(1.5rem, 2.2vw, 2rem); /* ~fs-2 to slightly larger on big screens */
  font-weight: 700;
  line-height: 1.1;
}

/* slightly larger input text on desktop beyond .form-control-lg */
@media (min-width: 992px) {
  .search-form .form-control {
    font-size: 1.125rem; /* ~18px */
  }
}

@media (max-width: 767.98px) {
  .search-form .col-md-auto:first-child { order: -1; width: 100%; }
}

/* Center the block and cap its width (apply to wrapper, not .row) */
.search-form-wrap {
  max-width: min(900px, 90vw);
  margin: 0 auto;
}

/* Background subtly matches your clean hero */
.wt10-tags {
  background: linear-gradient(180deg, rgba(240,246,255,0.25), rgba(255,255,255,0.9));
}

/* Cloud layout */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
}

/* Tag pills sized by weight (count) */
.tag-pill {
  --scale: calc( (var(--w) - var(--min)) / (max(1, var(--max) - var(--min))) );
  font-size: clamp(.85rem, calc(.9rem + .9rem * var(--scale)), 2rem);
  padding: calc(.35rem + .25rem * var(--scale)) calc(.7rem + .35rem * var(--scale));
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: transform .1s ease, box-shadow .1s ease, border-color .1s ease;
  color: inherit;
}
.tag-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,0.12);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.tag-pill .count {
  font-size: .75em;
  color: #6c757d;
}

/* Make sure long tags wrap gracefully on tiny screens */
@media (max-width: 575.98px) {
  .tag-pill { word-break: break-word; }
}

/* =========================
   Award ribbons
   ========================= */

.image-wrap {
  position: relative;
  overflow: hidden;
}

.ribbon {
  position: absolute;
  top: 10px;
  left: -10px;
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  z-index: 5;
}

.ribbon.best-overall {
  background: #198754; /* green */
}

.ribbon.best-value {
  background: #0d6efd; /* blue */
}

.ribbon.best-buy {
  background: #ffc107; /* yellow */
  color: #000;
}

.ribbon.upgrade-pick {
  background: #212529; /* dark */
}

.ribbon.budget-pick {
  background: #6c757d; /* grey */
}


/* =========================
   Score badge overlay
   ========================= */

.score-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #0d6efd; /* default blue */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  z-index: 6;
}

.score-badge .score {
  font-size: 1.25rem;
}

.score-badge .outof {
  font-size: 0.6rem;
  opacity: 0.85;
}

/* Optional: color by score */
.score-high { background: #198754; }   /* 9.0+ green */
.score-mid  { background: #0d6efd; }   /* 7.0–8.9 blue */
.score-low  { background: #ffc107; color:#000; } /* <7 yellow */



/* =========================
   Sticky Top Picks bar
   ========================= */

.top-picks-sticky {
  position: sticky;
  top: 12px;
  z-index: 20;
}

/* Slightly reduce padding on very small screens */
@media (max-width: 576px) {
  .top-picks-sticky .card-body {
    padding: 0.5rem !important;
  }
}

html {
  scroll-behavior: smooth;
}


/* Why ranked #1 link */
a[data-bs-toggle="collapse"] {
  cursor: pointer;
}

a[data-bs-toggle="collapse"]:after {
  content: " ▾";
  font-size: 0.9em;
}

a[data-bs-toggle="collapse"][aria-expanded="true"]:after {
  content: " ▴";
}