/* ============================================
   ASPIRE FIBER — CrowdFiber theme styling
   Matches aspirefiber.com design language
   ============================================ */

/* --- Fonts: Montserrat for everything --- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');

body, button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6,
.button, .input, .select, .label, .textarea {
  font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* --- Brand color overrides (Aspire navy + magenta) --- */
:root {
  --aspire-navy: #112F5B;
  --aspire-navy-deep: #0B2244;
  --aspire-magenta: #CE358A;
  --aspire-magenta-hover: #B22A75;
  --aspire-sky: #3D9BE9;
  --aspire-text: #1F1F1F;
  --aspire-muted: #8F8F8F;
  --aspire-bg: #FEFEFE;
  --aspire-border: #E2E2E2;
}

/* Body baseline */
body {
  color: var(--aspire-text);
  background-color: var(--aspire-bg);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* --- Headings: bold Montserrat like aspirefiber.com --- */
h1, h2, h3, h4, h5, h6,
.title, .subtitle {
  font-family: 'Montserrat', sans-serif;
  color: var(--aspire-navy);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h1, .title.is-1 { font-size: 3rem; font-weight: 900; }
h2, .title.is-2 { font-size: 2.25rem; font-weight: 800; }
h3, .title.is-3 { font-size: 1.75rem; font-weight: 700; }
h5            { font-size: 1.15rem; font-weight: 500; color: var(--aspire-text); line-height: 1.5; }

/* Hero headline override — match the big bold aspirefiber.com look */
#hero-section h1 {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--aspire-navy);
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  #hero-section h1 { font-size: 2.25rem; }
}

.has-text-primary {
  color: var(--aspire-navy) !important;
}

/* --- Buttons: magenta primary, navy secondary --- */
.button.is-primary,
.address_search_button {
  background-color: var(--aspire-magenta) !important;
  border-color: var(--aspire-magenta) !important;
  color: #ffffff !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 0.75em 1.75em;
  height: auto;
  border-radius: 4px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.button.is-primary:hover,
.address_search_button:hover {
  background-color: var(--aspire-magenta-hover) !important;
  border-color: var(--aspire-magenta-hover) !important;
  transform: translateY(-1px);
}

.button.is-primary:focus,
.address_search_button:focus {
  box-shadow: 0 0 0 3px rgba(206, 53, 138, 0.25) !important;
}

/* --- Inputs: clean, soft, larger --- */
.input, .select select, .textarea {
  border: 1px solid var(--aspire-border);
  border-radius: 4px;
  height: 2.75em;
  font-size: 1rem;
  color: var(--aspire-text);
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input:focus, .select select:focus, .textarea:focus {
  border-color: var(--aspire-magenta);
  box-shadow: 0 0 0 3px rgba(206, 53, 138, 0.15);
}

.input::placeholder { color: var(--aspire-muted); }

/* --- Navbar: clean white, navy text, more breathing room --- */
.navbar.is-fixed-top {
  background-color: #ffffff;
  border-bottom: 1px solid var(--aspire-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  min-height: 4.5rem;
}

.navbar-item, .navbar-link {
  color: var(--aspire-navy) !important;
  font-weight: 600;
  font-size: 0.95rem;
}

.navbar-item:hover, .navbar-link:hover {
  background-color: transparent !important;
  color: var(--aspire-magenta) !important;
}

#brand-header-image {
  max-height: 3.25rem;
}

/* --- Hero section: more vertical space, lighter background --- */
.hero.min-browser-height {
  background-color: #ffffff;
}

#hero-section .section.is-medium {
  padding-top: 5rem;
  padding-bottom: 3rem;
}

/* --- Address search bar: clean card-style container --- */
.address-search-fields {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(17, 47, 91, 0.08);
  border: 1px solid var(--aspire-border);
}

/* --- Footer & links --- */
a {
  color: var(--aspire-magenta);
  transition: color 0.15s ease;
}
a:hover {
  color: var(--aspire-magenta-hover);
}

/* --- Card / box styling --- */
.box {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(17, 47, 91, 0.06);
  border: 1px solid var(--aspire-border);
}

/* --- Tighten Bulma's default oversized spacing in some places --- */
.section {
  padding: 3rem 1.5rem;
}

/* --- Mobile polish --- */
@media (max-width: 768px) {
  .address-search-fields {
    padding: 1rem;
  }
  .navbar-menu {
    background-color: #ffffff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
  }
}
/* ============================================
   "Back to Aspire Fiber" button in nav
   ============================================ */
.navbar-item .back-to-site {
  font-size: 0.85rem;
  padding: 0.5em 1.25em;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-width: 1.5px;
}

@media (max-width: 768px) {
  .navbar-item .back-to-site {
    margin: 0.5rem 0;
    width: 100%;
    text-align: center;
  }
}
/* ============================================
   Hide hamburger menu on mobile
   (no nav items to expand into yet)
   ============================================ */
.navbar-burger {
  display: none !important;
}
/* ============================================
   SHOP PAGE — Product Card Styling
   Restyles ProductBundler cards (React-rendered).
   IMPORTANT: Does NOT touch .productprice — that's
   where the Add/Remove buttons live and they break
   when modified. Leave that area alone.
   ============================================ */

/* --- Section headers ("INTERNET", "ENHANCE YOUR INTERNET") --- */
.is-product-type-title-Internet,
[class*="is-product-type-title-"] {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: var(--aspire-navy) !important;
  margin-bottom: 1.25rem !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Hide ALL <hr> elements in product type containers and the surrounding cart area */
.product-type-container hr,
#react_cart hr,
.test-container hr {
  display: none !important;
}

/* --- The product card --- */
.productbox {
  background-color: #ffffff;
  border: 1px solid var(--aspire-border);
  border-radius: 8px;
  padding: 1.25rem 1rem !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 3px rgba(17, 47, 91, 0.04);
}

.productbox:hover {
  border-color: var(--aspire-magenta);
  box-shadow: 0 6px 16px rgba(17, 47, 91, 0.08);
  transform: translateY(-2px);
}

/* Selected card */
.selected-card .productbox {
  border-color: var(--aspire-magenta) !important;
  border-width: 2px !important;
  box-shadow: 0 4px 16px rgba(206, 53, 138, 0.15) !important;
}

/* --- HIDE the giant Aspire logo (the .text-center block) --- */
.productbox > .text-center,
.productbox .text-center img {
  display: none !important;
}

/* Keep Wi-Fi Extender image visible (real product photo) */
.productbox[class*="Extender"] > .text-center,
.productbox[class*="Extender"] .text-center img {
  display: block !important;
  max-width: 140px !important;
  margin: 0 auto 1rem auto !important;
}

/* --- Product title ("500 Mbps Fiber Internet") --- */
.productbox .producttitle {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  color: var(--aspire-navy) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  text-align: center !important;
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
}

/* --- Tagline + description container --- */
.productbox .cart-product-text {
  text-align: center !important;
  margin-bottom: 1rem !important;
}

/* Override the inline-styled tagline ("The Basics:", "High Standards:", etc.)
   It's wrapped in <strong> with inline color AND <span> with inline font-family.
   We need to beat both. */
.productbox .cart-product-text strong,
.productbox .cart-product-text strong * {
  color: var(--aspire-magenta) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
}

/* Description paragraph below the tagline */
.productbox .cart-product-text p {
  color: var(--aspire-text) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* --- DO NOT TOUCH .productprice ---
   That's where the Add/Remove button lives. Modifying it broke the
   button last time. Leave CrowdFiber's defaults alone here. */

/* --- Column spacing — tighten gaps between cards --- */
.row.container-fluid .columns.is-multiline > [class*="prod"] {
  padding: 0.5rem !important;
}

/* --- "Included In Every Plan" box — magenta checkmarks + cleaner styling --- */
.included-plan-box li::before {
  color: var(--aspire-magenta) !important;
}

.included-plan-box {
  background-color: #ffffff !important;
  border: 1px solid var(--aspire-border) !important;
}

.included-plan-box p.has-text-weight-semibold {
  color: var(--aspire-navy) !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  font-size: 0.95rem !important;
}

.included-plan-box li {
  font-family: 'Montserrat', sans-serif !important;
  color: var(--aspire-text) !important;
  font-weight: 500 !important;
}
/* ============================================
   Magenta checkmark before shop title
   ============================================ */
#product_type_checkboxes .content.is-theme-element h1::before {
  content: "✓ ";
  color: var(--aspire-magenta);
  font-weight: 900;
  margin-right: 0.25rem;
}