/*
Theme Name: PickyTic
Description: Theme for PickyTic
Author: PickyTic
*/

  /* Ensure main content stays readable on top of the background */
  .container-small, .step-block, .card {
    /* background-color: rgba(255,255,255,0.95); */
  }

    .feature-icon {
      font-size: 2.5rem;
      color: #4facfe;
      margin-bottom: 15px;
    }

    .step-map {
        position: relative;
        width: 100%;
        max-width: 1000px;
        margin: 20px auto;
    }

        .step-map img {
            width: 100%;
        }

    .click-area {
        position: absolute;
        cursor: pointer;
    }
    /* Define approximate areas for each step (adjust for your image as needed) */
    .step1 {
        top: 6%;
        left: 1%;
        width: 25%;
        height: 30%;
    }

    .step2 {
        top: 6%;
        left: 37%;
        width: 25%;
        height: 30%;
    }

    .step3 {
        top: 6%;
        left: 74%;
        width: 25%;
        height: 30%;
    }

    .step4 {
        top: 63%;
        left: 74%;
        width: 25%;
        height: 30%;
    }

    .step5 {
        top: 63%;
        left: 37%;
        width: 25%;
        height: 30%;
    }

    .step6 {
        top: 63%;
        left: 1%;
        width: 25%;
        height: 30%;
    }
    /*
    .click-area:hover {
        outline: 2px dashed rgba(0,0,255,0.4);
    }
    */

    .step-block {
      background: white;
      border-radius: 15px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
      padding: 30px;
      margin-bottom: 40px;
    }
    .step-icon {
      font-size: 2rem;
      color: #0d6efd;
    }
    .step-title {
      font-size: 1.25rem;
      font-weight: bold;
    }

    .carousel-inner img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
    }

    .carousel-indicators {
        margin-top: 10px;
    }

    .carousel-indicators [data-bs-target] {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #0d6efd;
        opacity: 0.4;
        margin: 0 5px;
    }

    .carousel-indicators .active {
        opacity: 1;
    }

    .offer-card {
        border-color: lightgrey;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    }

  /* Hero-specific background */
  .homeHero {
    position: relative;
    background-image: url('/wp-content/themes/pickytic/images/bg/bg-hero-image1.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* use scroll for hero to avoid issues on mobile when page background is fixed */
    background-attachment: scroll;
    overflow: hidden;
  }

  /* subtle overlay to keep text readable; reduce opacity if you prefer less dimming */
  .homeHero::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
  }

  @media (min-width: 1200px) {
    .hero-header-container {
        padding-top: 0; 
    }
  }

      .section-kicker{
      display:inline-flex;align-items:center;gap:.45rem;
      padding:.35rem .7rem;
      border-radius:999px;
      background: rgba(25,167,184,.10);
      border:1px solid rgba(25,167,184,.18);
      color: var(--brand);
      font-size:.9rem;
      font-weight:600;
    }

    .cardx {
      background: rgba(255, 255, 255, .84);
      border: 1px solid var(--stroke);
      border-radius: 18px;
      box-shadow: var(--shadow);
    }
    .soft-card {
      background: #fff;
      border: 1px solid rgba(11, 27, 36, .08);
      border-radius: 16px;
      box-shadow: 0 12px 28px rgba(11, 27, 36, .07);
    }
    .badge-soft {
      background: rgba(25, 167, 184, .12);
      border: 1px solid rgba(25, 167, 184, .22);
      color: var(--brand);
    }

    .timeline{
      border-left:2px dashed rgba(25,167,184,.35);
      margin-left:1rem;
      padding-left:1.5rem;
    }
    .timeline .step{
      position:relative;
      padding:1rem 0;
    }
    .timeline .step:before{
      content:"";
      position:absolute;
      left:-2.05rem; top:1.35rem;
      width:14px;height:14px;border-radius:50%;
      background: #19a7b8;
      box-shadow:0 0 0 6px rgba(25,167,184,.12);
    }

      /* Shared card styling */
      .highlight-card {
        background-image: url('/wp-content/themes/pickytic/images/bg/bg-image4.webp');
        background-repeat: no-repeat;
        -moz-background-size: cover;
        -o-background-size: cover;
        /* optional fallback background color */
        background-color: #f8fafc;

        height: 100px;
        width: 175px;
        border-radius: 12px;
        padding: 24px;
        box-shadow: 0 6px 20px rgba(8, 37, 70, 0.06);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center; /* center content vertically */
        margin: 0 auto;
      }
      .highlight-card img {
        width: 90px;
        height: 90px;
        object-fit: contain;
        margin-bottom: 16px;
      }
      .highlight-title { 
        font-size: 1rem !important;
        font-weight: 700; 
        margin-bottom: 8px; 
      }
      .highlight-desc { color: #6c757d; font-size: 0.95rem; }

      /* Ensure grid columns center the cards vertically */
      #highlightsResponsive .row > .col-auto {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .carousel-item {
        display: none;
        min-height: 150px;
      }
      /* Center carousel items and give them enough height to vertically center the card */
      #platformHighlightsCarouselMobile .carousel-item .active {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 200px;
      }

      /* Slight adjustments for very small screens */
      @media (max-width: 360px) {
        .highlight-card { width: 220px; padding: 18px; height: auto; }
      }

      .shadow-box {
          height: 100px;
          width: 150px;
          background: #b4f5ff;          /* light blue background */
          font-size: 20px;
          font-weight: bold;
          text-align: center;
          border-radius: 2px;

          display: flex;
          align-items: center;
          align-content: center;
          justify-content: center;

          /* 3D shadow effect */
          box-shadow: 10px 10px 0px #8ac2cc;
          
          /* Optional border */
          border: 3px solid white;

          /* Optional to make it look more like a block */
          display: inline-block;
      }

/* Reduce / remove the space between the menu item and the dropdown */
.navbar-nav .dropdown-menu {
    margin-top: 0;          /* override any positive margin */
    top: 100%;              /* ensure it starts right under the parent */
}

article.blog-card img.card-img-top.v.wp-post-image {
    height: 250px;
    object-fit: cover;
}