/* =============================================================
   subscribe.css — Page-specific styles for subscribe.html
   Companion to assets/css/veloryn.css
   ============================================================= */


/* -----------------------------------------------------------------
   FONT FACE
   ----------------------------------------------------------------- */

@font-face {
  font-family: 'Grava Roman';
  src: local('Grava Roman'), url('../fonts/Grava%20Roman.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* -----------------------------------------------------------------
   BASE
   ----------------------------------------------------------------- */

body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* -----------------------------------------------------------------
   UTILITIES
   ----------------------------------------------------------------- */

.border-subtle {
  border-color: rgba(255, 255, 255, 0.08);
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}


/* -----------------------------------------------------------------
   NAVIGATION
   ----------------------------------------------------------------- */

.subscribe-nav {
  background-color: #101522;
}

.nav-logo-link {
  position: relative;
  top: -1px;
}

.nav-brand-name {
  font-family: 'Grava Roman', serif;
}

.nav-links-desktop {
  position: relative;
  top: -1px;
}

.nav-link:hover {
  color: #1E5FFF !important;
}

.nav-link:focus-visible,
.btn-get-started:focus-visible,
#mobile-menu-btn:focus-visible {
  outline: 2px solid rgba(30, 95, 255, 0.65);
  outline-offset: 3px;
  border-radius: 8px;
}


/* -----------------------------------------------------------------
   GET STARTED BUTTON
   ----------------------------------------------------------------- */

.btn-get-started {
  background-color: #1E5FFF;
  color: #F5F7FF;
  border-radius: 5px;
  transition: background-color 0.25s ease-out, transform 0.25s ease-out;
}

.btn-get-started:hover {
  background-color: #4AA3FF !important;
  transform: scale(1.02);
}

/* Desktop variant needs the top offset and taller padding */
.btn-get-started--desktop {
  position: relative;
  top: -1px;
  padding-top: calc(0.5rem + 2px);
  padding-bottom: calc(0.5rem + 2px);
}

/* Shared button border-radius (mirrors home.css standard) */
.btn-radius {
  border-radius: 5px;
}


/* -----------------------------------------------------------------
   MOBILE MENU
   ----------------------------------------------------------------- */

#mobile-menu-btn {
  gap: 6px;
}

.hamburger-line {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cbd5e1;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#mobile-menu-btn.open .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#mobile-menu-btn.open .hamburger-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
#mobile-menu-btn.open .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

#mobile-menu {
  background-color: #101522;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.3s ease;
}

#mobile-menu.open {
  max-height: 1000px;
  opacity: 1;
}


/* -----------------------------------------------------------------
   SECTION 1 — HERO
   ----------------------------------------------------------------- */

.hero-section {
  background-image: url('../images/hero/subscribe-1280.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 1280px) {
  .hero-section {
    background-image: url('../images/hero/subscribe-1920.webp');
  }
}

@media (min-width: 1920px) {
  .hero-section {
    background-image: url('../images/hero/subscribe-2560.webp');
  }
}

/* Shift hero content up by ~10% of the visible gap */
.hero-section > div {
  transform: translateY(-3vh);
}


/* -----------------------------------------------------------------
   SECTION 2 — EDITORIAL IMAGE
   ----------------------------------------------------------------- */

.newsletter-editorial-image {
  background-image: url('../images/subscribe/newsletter.jpg');
}


/* -----------------------------------------------------------------
   SECTION 4 — BUILT FOR YOU CARDS
   ----------------------------------------------------------------- */
/* -----------------------------------------------------------------
   TEXT STROKE — FULL PAGE RESET
   .text-hero-text, .text-hero-subtext, .hero-headline, .hero-sub,
   .about-hero-heading, .about-hero-subtext
   This page uses no stroke effect anywhere, so every one of those
   selectors is zeroed here. subscribe.css loads after veloryn.css
   so !important guarantees the override wins.
   ----------------------------------------------------------------- */

*,
*::before,
*::after,
.text-hero-text,
.text-hero-subtext,
.hero-headline,
.hero-sub,
.about-hero-heading,
.about-hero-subtext,
.section-built-for-you,
.section-built-for-you * {
}


/* -----------------------------------------------------------------
   FORM VALIDATION ERRORS
   ----------------------------------------------------------------- */

.contact-field-error,
span.contact-field-error,
[data-error-for] {
  display: none;
  font-size: 0.7rem;
  color: #FF6B6B !important;
  margin-top: 6px;
  line-height: 1.4;
  text-align: left;
}

/* Red border on invalid fields */
.contact-field-invalid {
  border-color: #FF6B6B !important;
}

.contact-field-invalid:focus {
  --tw-ring-color: rgba(255, 107, 107, 0.4);
  border-color: #FF6B6B !important;
}


/* -----------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------- */

.subscribe-footer {
  background-color: #101522;
}

.footer-brand {
  flex-shrink: 0;
  max-width: 300px;
}

.footer-logo {
  height: 48px;
  object-fit: contain;
  object-position: left;
}

/* Footer navigation column min-widths */
.footer-nav-col--xl  { min-width: 120px; }
.footer-nav-col--lg  { min-width: 110px; }
.footer-nav-col--md  { min-width: 100px; }
.footer-nav-col--sm  { min-width: 90px; }


/* -----------------------------------------------------------------
   REDUCED MOTION
   ----------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn-get-started,
  .hamburger-line,
  #mobile-menu {
    transition: none !important;
  }
}


.contact-field-invalid,
input.contact-field-invalid,
textarea.contact-field-invalid,
select.contact-field-invalid {
  border-color: #FF6B6B !important;
}

.contact-field-invalid:focus,
input.contact-field-invalid:focus,
textarea.contact-field-invalid:focus,
select.contact-field-invalid:focus {
  --tw-ring-color: rgba(255, 107, 107, 0.4);
  border-color: #FF6B6B !important;
}