/*
Theme Name: Inspect Stable Coins
Theme URI: https://inspectstablecoins.com
Author: Weblish
Author URI: https://weblish.io
Description: Inspect Stable Coins - A modern WordPress theme for stablecoin education, evaluation frameworks, and consulting. Features blog listings, contact forms, and clean animations.
Version: 1774871819
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: navis
Tags: blog, one-column, custom-menu, featured-images, theme-options, education, consulting

Inspect Stable Coins WordPress Theme - Converted from Webflow template for Weblish.
*/

/* ==========================================================================
   View All Posts Button - Center Alignment
   ========================================================================== */

.navis-view-all-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 2rem;
}

.navis-view-all-wrap .button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

/* ==========================================================================
   Hamburger Menu - Mobile Navigation
   ========================================================================== */

.navis-nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 0 0 0 1rem;
  background: transparent;
  border: none;
}

.navis-nav-toggle .nav-button_component {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  border-radius: 4px;
}

.navis-nav-toggle .nav-button_line {
  width: 70%;
  height: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.navis-nav-toggle.navis-toggle-active .nav-button_line.is-first {
  transform: translateY(350%) rotate(45deg);
}

.navis-nav-toggle.navis-toggle-active .nav-button_line.is-second {
  opacity: 0;
}

.navis-nav-toggle.navis-toggle-active .nav-button_line.is-third {
  transform: translateY(-350%) rotate(-45deg);
}

@media screen and (max-width: 991px) {
  .navis-nav-toggle {
    display: flex !important;
    order: 2;
  }

  .w-nav[data-collapse='medium'] .nav_mobile.w-nav-menu {
    display: none !important;
  }

  .w-nav[data-collapse='medium'] .nav_mobile.w-nav-menu.navis-menu-open {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    background-color: transparent !important;
    padding: 0 1.5rem !important;
  }

  .nav_mobile.w-nav-menu.navis-menu-open .navbar_list {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .nav_mobile.w-nav-menu.navis-menu-open .nav_links {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* ==========================================================================
   Logo Sizing
   ========================================================================== */

.navbar_logo {
  max-height: 90px;
  width: auto !important;
  height: auto;
  object-fit: contain;
}

.footer_img {
  max-height: 90px;
  width: auto !important;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ==========================================================================
   Logo + Title Branding
   ========================================================================== */

.navbar_logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar_logo-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: inherit;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.footer_logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer_logo-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: inherit;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

@media screen and (max-width: 479px) {
  .navbar_logo-title,
  .footer_logo-title {
    font-size: 0.875rem;
  }
}

/* ==========================================================================
   Blog Default Image (when no featured image)
   ========================================================================== */

.blog-default-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
  background-color: var(--bg-color--bg-secondary, #f6f7f9);
  border-radius: inherit;
}

.blog-default-image__logo {
  max-width: 50%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.4;
}

/* ==========================================================================
   About Page Styles
   ========================================================================== */

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.about-value-card {
  padding: 2rem;
  border-radius: 0.75rem;
  background-color: var(--bg-color--bg-secondary, #f6f7f9);
  transition: transform 0.3s ease;
}

.about-value-card:hover {
  transform: translateY(-4px);
}

.about-value-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

@media screen and (max-width: 991px) {
  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Services Page Styles
   ========================================================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2rem;
}

.service-card {
  padding: 2rem;
  border-radius: 0.75rem;
  background-color: var(--bg-color--bg-secondary, #f6f7f9);
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.service-card:hover {
  border-color: var(--brand--blue, #0161fe);
  transform: translateY(-4px);
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: block;
}

.services-cta-section {
  text-align: center;
  padding: 3rem 2rem;
  margin-top: 3rem;
  border-radius: 0.75rem;
  background-color: var(--bg-color--bg-tertiary, #232323);
  color: var(--brand--white, #fff);
}

.services-cta-section .heading-style-h2 {
  color: var(--brand--white, #fff);
}

.services-cta-section .text-base {
  color: rgba(255, 255, 255, 0.8);
  max-width: 600px;
  margin: 0 auto 1.5rem;
}

@media screen and (max-width: 991px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 479px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Pain Points / Challenges Section
   ========================================================================== */

.challenges-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.challenge-card {
  display: flex;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background-color: var(--bg-color--bg-secondary, #f6f7f9);
}

.challenge-number {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--brand--blue, #0161fe);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

@media screen and (max-width: 767px) {
  .challenges-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Utility Pages (404, etc.)
   ========================================================================== */

.navis-utility-page {
  text-align: center;
  padding: 4rem 2rem;
}

.navis-utility-image {
  max-width: 300px;
  margin: 0 auto 2rem;
}