/* blog-home.css (paste into child-theme style or Tailwind input) */

/* import a clean geometric font similar to the screenshot */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');


:root{
  --neon: #7ff7ff;
  --accent-a: rgba(111,90,255,0.9);
  --bg-dark: #071020;
}

body, .main-content {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg-dark);
}

/* neon title */
.neon-title{
  color: #e6fbff;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.6),
    0 6px 18px rgba(25, 205, 255, 0.06),
    0 8px 30px rgba(111,90,255,0.08),
    0 0 30px rgba(111,90,255,0.12);
  letter-spacing: -0.02em;
}

/* subtle glass card look */
.blog-card {
  background: linear-gradient(180deg, rgba(11,18,32,0.55) 0%, rgba(7,9,25,0.85) 100%);
  border: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px) saturate(120%);
}

/* post hover lift */
.blog-card .card-link {
  display: block;
  height: 100%;
  transition: transform .35s cubic-bezier(.2,.9,.3,1), box-shadow .35s;
}
.blog-card:hover .card-link {
  transform: translateY(-8px);
  box-shadow: 0 24px 40px rgba(2,6,23,0.6);
}

/* small badge style */
.blog-card .badge {
  font-size: 11px;
  padding: .25rem .6rem;
  border-radius: 999px;
}

/* read more hover */
.read-more .inline-flex:hover {
  text-decoration: underline;
}

/* pagination styles (Tailwind will generate base styles, these fine-tune) */
.pagination .page-numbers {
  margin: 0 .35rem;
  padding: .45rem .65rem;
  border-radius: 8px;
  background: transparent;
  color: #cfeaf6;
  border: 1px solid rgba(255,255,255,0.03);
}
.pagination .page-numbers.current {
  background: linear-gradient(90deg,#2fd7ff33,#6f5aff33);
  color: white;
  border: none;
}

/* filter buttons appearance */
.filter-btn {
  color: #dff8ff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.03);
  transition: all .22s ease;
}
.filter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(11,18,32,0.6), inset 0 0 18px rgba(47,215,255,0.04);
}

/* small responsive fixes */
@media (min-width: 1024px){
  .card-title { font-size: 1.125rem; }
}

/* input placeholder */
.subscribe-form input::placeholder { color: rgba(255,255,255,0.35); }

/* make the badges a little glassy */
.blog-card .inline-block {
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.03);
}

/* small dot separator */
.card-footer .dot { opacity: .55; padding: 0 .35rem; }

/* make images darker at top to mimic gradient blend */
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px 12px 0 0;
  
  pointer-events: none;
}


/* Newsletter block helpers - add to child theme style.css */

/* neon heading similar to screenshot */
.neon-title {
  color: #e6fbff;
  text-shadow:
    0 2px 0 rgba(0,0,0,0.6),
    0 8px 26px rgba(47,215,255,0.06),
    0 10px 40px rgba(111,90,255,0.06);
  letter-spacing: -0.01em;
}

/* ensure rounded container uses soft glass feel */
.newsletter-wrap {
  backdrop-filter: blur(6px) saturate(120%);
}

/* input focus ring subtle */
#ss-email:focus {
  box-shadow: 0 6px 20px rgba(47,215,255,0.06), 0 0 0 6px rgba(47,215,255,0.03);
}

/* button subtle shadow */
#ss-submit {
  box-shadow: 0 10px 30px rgba(47,215,255,0.08);
}

/* responsive tweaks */
@media (min-width: 768px) {
  .newsletter-wrap { padding: 3.5rem; }
}




//stay updated section


/* For mobile-first design, adjust content for small screens */
.newsletter-wrap {
    padding: 2rem;  /* Reduce padding on mobile */
    background: linear-gradient(180deg, rgba(9,16,28,0.9), rgba(6,8,20,0.95));
    border: 1px solid rgba(255,255,255,0.03);
}

/* Apply different styles for larger screens */
@media (min-width: 640px) {
    .newsletter-wrap {
        padding: 2.5rem;  /* Slightly larger padding for medium screens */
    }
}

@media (min-width: 768px) {
    .newsletter-wrap {
        padding: 3rem 4rem;  /* Larger padding for tablets and up */
    }
}

/* Set max width for the form and text container */
@media (min-width: 640px) {
    .max-w-3xl {
        max-width: 100%;  /* Ensure it doesn't overflow on smaller screens */
    }

    .max-w-xl {
        max-width: 100%;  /* Ensure form is fully responsive */
    }
}

/* Ensure text size is responsive */
@media (max-width: 640px) {
    .neon-title {
        font-size: 2rem;  /* Slightly smaller heading on mobile */
    }

    .text-white/60 {
        font-size: 0.875rem;  /* Smaller text for descriptions */
    }

    .text-sm {
        font-size: 0.75rem;  /* Smaller text for message */
    }

    .w-full {
        width: 100%;  /* Ensure input takes full width on mobile */
    }

    .sm:flex-row {
        flex-direction: column;  /* Stack form elements vertically on mobile */
    }

    .sm\:flex-1 {
        flex: 1 1 100%;  /* Allow email input to take full width on mobile */
    }

    #ss-submit {
        width: 100%;  /* Button takes full width on mobile */
        margin-top: 1rem;  /* Add space between input and button */
    }
}

/* For larger screens */
@media (min-width: 768px) {
    .neon-title {
        font-size: 3rem;  /* Bigger title on larger screens */
    }

    .text-white/60 {
        font-size: 1rem;  /* Bigger text for description */
    }

    #ss-submit {
        width: auto;  /* Button returns to normal size on larger screens */
        margin-top: 0;  /* Remove extra margin */
    }

    .sm\:flex-row {
        flex-direction: row;  /* Keep input and button in a row on larger screens */
    }
}