@font-face{font-family:"Montserrat";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/montserrat/montserrat-300.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/montserrat/montserrat-400.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/montserrat/montserrat-500.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/montserrat/montserrat-600.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/montserrat/montserrat-700.woff2") format("woff2");}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/montserrat/montserrat-800.woff2") format("woff2");}

/* ==========================================================================
   IGNITE desktop.css  (tablet.css and phone.css only override what changes)
   01 Base  02 Starry background  03 Header + sliding menu  04 White card
   05 Titles, buttons, media  06 Footer  07 Forms  08 Blog grids
   Sizes copied from the Duda site: card 1200px, content padding 40px,
   titles 28px/700, buttons 18px/700 and 42px tall, body text weight 300.
   ========================================================================== */

/* 01. BASE */
:root { --ig-card:1200px; --ig-pad:40px; --ig-line:#bfbfbf; }
body, button, input, select, textarea, .nav > li > a, .button, h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", Arial, sans-serif !important;
}
body { font-weight: 300; line-height: 1.6; color: #000; }
strong, b { font-weight: 700; }
h1, h2, h3, h4, h5, h6 { color: #000; margin-bottom: .4em; font-weight: 700; }
section + br { display: none !important; }

/* 02. STARRY NIGHT BACKGROUND
   A fixed layer instead of background-attachment: fixed, which phones ignore.
   100lvh keeps it full height when the phone address bar hides or shows.
   Body and wrapper stay transparent so the stars show through the header. */
html { background: #000 !important; }
body, #wrapper { background: transparent !important; }
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  background: #000 url("/wp-content/uploads/2026/10/ignite-starry-night-sky-background.jpg") center bottom / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}
#main, #content, .page-wrapper, .page-right-sidebar { background: transparent !important; padding: 0 !important; }

/* 03. HEADER: see-through at the top, solid black once you scroll (like Duda) */
#header .header-wrapper, #header .header-main, #header .header-bg-color, #header .header-bg-container, .header-bg-color {
  background: transparent !important; box-shadow: none; border: 0;
}
#header.header.has-sticky.sticky-jump .header-wrapper.stuck .header-main,
.header-wrapper.stuck .header-bg-color, .header-wrapper.stuck .header-main { background: #000 !important; }
#header .header-inner { max-width: var(--ig-card); padding: 0; }
/* The last menu item's drop-down lines up with the right edge of the content column. */
#header .header-nav-main > li:last-child > .nav-dropdown { left: auto !important; right: 0 !important; margin-left: 0; }
#header .header-main { height: 111px; }
#header #masthead .flex-col { align-items: center; }
#header #logo { width: 500px; max-width: 62%; margin: 0; }
#header #logo img { max-height: none; width: 100%; height: auto; mix-blend-mode: screen; }
.stuck #logo { width: 300px; }

/* Sliding menu pill. The script (js/nav-pill.js) moves .rxw-slider-bg under the hovered item. */
.header-main .header-nav-main.nav {
  position: relative; display: flex; align-items: center;
  --pill-height: 44px; --pill-radius: 8px;
}
.header-main .header-nav-main.nav > .rxw-slider-bg {
  position: absolute; top: 50%; left: 0;
  transform: translate3d(0,-50%,0);
  height: var(--pill-height); width: 0;
  background: rgba(255,255,255,.16);
  border-radius: var(--pill-radius);
  opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.25,.8,.25,1), top .3s cubic-bezier(.25,.8,.25,1), width .4s cubic-bezier(.25,.8,.25,1), opacity .2s;
  z-index: 0;
}
.header-main .header-nav-main.nav > li { margin: 0 !important; }
.header-main .header-nav-main.nav > li > a {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--pill-height); padding: 0 16px; border-radius: 8px;
  color: #fff !important; font-size: 17.6px; font-weight: 600; letter-spacing: .2px;
  text-decoration: none; text-transform: uppercase;
}
.header-wrapper.stuck .header-main .nav > li > a { line-height: 1; }
/* no vertical divider lines between menu items */
.header-main .nav-divided > li + li > a::after, .header-main .nav > li > a::before, .header-main .nav > li > a::after,
.nav-divided > li + li > a:after { content: none !important; display: none !important; }
.nav-dropdown { background: #000; border: 0; border-radius: 8px; padding: 6px 0; min-width: 270px; }
.nav-dropdown li a { color: #fff !important; font-size: 13px; font-weight: 600; letter-spacing: .2px; padding: 9px 18px; }
.nav-dropdown li a:hover { background: rgba(255,255,255,.14); }

/* 04. WHITE CARD
   Each page: a transparent top section (ig-top), then three sections that stack
   into one card: torn paper edge, white content, torn paper edge. */
.ig-top, .ig-card { padding-left: 0; padding-right: 0; background: transparent; }
.ig-top .col, .ig-card .col, .ig-top .col-inner { padding-left: 0; padding-right: 0; }
.ig-top .row, .ig-card .row { max-width: var(--ig-card); }
.ig-card .col-inner { background: #fff; padding: 0 var(--ig-pad); }
.ig-card .ig-rip, .ig-card .ig-rip .img-inner { margin: 0; line-height: 0; }
.ig-card .col-inner:has(.ig-rip) { padding: 0; background: transparent; }
.ig-rip img { display: block; width: 100%; height: auto; }
.ig-card .col-inner:has(.ig-rip-bottom) { margin-top: -1px; }
.ig-top .img, .ig-top .img-inner { margin-bottom: 0; }
.ig-top .img + .img { margin-top: 20px; }

/* 05. TITLES, BUTTONS, MEDIA */
.section-title-center b { background: var(--ig-line); height: 3px; opacity: 1; }
.section-title-center span { color: #000; font-weight: 700; margin: 0 16px; text-transform: uppercase; }
.ig-card .section-title-container { font-size: 28px; }
.ig-card .section-title { font-size: 100%; line-height: 34px; margin: 0; }
.ig-btn, a.ig-btn.button {
  background: #000 !important; color: #fff !important; border-radius: 4px !important;
  margin-top: 14px; margin-bottom: 6px; padding: 0 20px; font-size: 18px; font-weight: 700;
  letter-spacing: 0; text-transform: uppercase; line-height: 42px; min-height: 42px; box-shadow: none;
}
.ig-btn:hover { background: #2f2f2f !important; }
.ig-card .col-inner .text-center, .ig-merch .col-inner { text-align: center; }
.ig-merch a.ig-btn.button { margin-top: 18px; }
.ig-card .img { margin-bottom: 0; }
.ig-store-logo { margin-top: 8px; }
.ig-credit { margin: 10px 0 20px; }
.ig-card .post-title, .ig-card .box-text a { font-weight: 700; color: #000; }
.ig-card .box-blog-post .post-title { font-size: 18px; margin: 10px 0 0; line-height: 1.5; }
.ig-card .box-blog-post .box-text { padding: 12px 0 24px; }
.ig-card .box-image img { border-radius: 4px; }
.ig-card .ux-video, .ig-card .video { margin: 12px 0 20px; }
.ig-card h3 { font-size: 1em; font-weight: 700; margin: 0 0 4px; }
.ig-card a { color: #000; }
.ig-card .col-inner > *:last-child { margin-bottom: 0; }

/* 06. FOOTER */
.ig-footer, #footer, #footer .footer-2, #footer .footer-1 { background: #000 !important; }
.ig-footer .section-title-container { margin: 0 0 10px; }
.ig-footer .section-title-main { display: block; border-bottom: 2px solid #fff; padding-bottom: 6px; font-size: 18px; color: #fff; text-transform: uppercase; }
.ig-footer .section-title b { display: none; }
.ig-footer .section-title span, .ig-footer, .ig-footer p, .ig-footer a { color: #fff; font-weight: 300; }
.ig-footer a { text-decoration: none; letter-spacing: .04em; }
.ig-footer a:hover { opacity: .7; }
.absolute-footer { background: #2d2d2d; color: #fff; font-size: 15px; font-weight: 300; }
.absolute-footer a, .absolute-footer .copyright-footer { color: #fff; }
.absolute-footer .container { max-width: var(--ig-card); }

/* 07. FORMS */

/* 08. BLOG GRIDS (news + videos): full-width images, no divider under titles */
.ig-card .box-blog-post .box-image { width: 100% !important; max-width: 100% !important; margin: 0; }
.ig-card .box-blog-post .is-divider { display: none; }

/* 09. FIXES FROM SIDE-BY-SIDE CHECK WITH DUDA */
/* Flatsome gives .section-content z-index 1, which blocks the "screen" blend from seeing the stars behind it. */
.ig-top .section-content, .ig-top.section, .ig-card .section-content { z-index: auto !important; }
#header .header-bottom, #header .header-bottom-nav { display: none !important; }
#header #logo, #header .logo { padding: 0; line-height: 0; }
#header #logo img { height: auto !important; }

/* 10. SPACING COPIED FROM DUDA (measured at 1700px wide) */
.ig-top + .ig-card .ig-rip { margin-top: 0; }
/* every video is locked to 16:9 on all devices */
.video.video-fit { padding-top: 56.25% !important; height: 0 !important; }
.video.video-fit p { margin: 0; }
.ig-card .video.video-fit { margin: 0 0 12px; }
.ig-btn, a.ig-btn.button { margin-top: 14px; margin-bottom: 0; line-height: 42px; min-height: 42px; }
.ig-merch a.ig-btn.button { margin-top: 18px; }

/* 11. LOGO, VIDEO, GRIDS, MERCH (measured on Duda) */
#header #logo img { padding: 0 !important; }
.ig-card .video.video-fit { height: 0 !important; }
/* news + video grids: 3 columns, 360px images, 20px gaps */
.ig-card .row.large-columns-3 { margin-left: -10px; margin-right: -10px; }
.ig-card .row.large-columns-3 > .col.post-item { padding: 0 10px; }
.ig-card .box-blog-post .box-text { padding: 30px 0 24px; }
/* merch: 4 columns, 263px shirts, button 35px under the shirt, store logo 15px under the button */
.ig-merch { margin: 30px 0 0; }
.ig-merch > .col { padding: 0 8.5px; }
/* top and bottom only: the button's own Button position setting does the centering, also in UX Builder */
.ig-merch a.ig-btn.button { margin-top: 35px; margin-bottom: 0; }
.ig-store-logo { margin-top: 15px; }

/* only the outer column of a card carries the 40px padding; nested columns, grids and merch tiles do not */
.ig-card .col-inner .col-inner, .ig-card .col-inner .box, .ig-card .row .row .col-inner { padding-left: 0; padding-right: 0; }

/* text sits right under the image on news cards; videos get a little more room */
.ig-card .box-blog-post .box-text { padding: 0 0 24px; }
.ig-card .box-blog-post .post-title { margin-top: 12px; }
.ig-merch { margin-top: 42px; }
.ig-merch > .col { padding: 0 11px; }

/* footer sizes copied from Duda: headings 18px/700, links 16px/300, copyright 15px/300 */
.ig-footer .section-title-main, .ig-footer .section-title { font-size: 18px; line-height: 22px; }
.ig-footer p, .ig-footer .text { font-size: 16px; line-height: 1.6; }
.absolute-footer .container { padding-left: 0; padding-right: 0; }

/* sticky header: solid black bar, logo shrinks (Duda: about 330px wide, bar about 72px) */
#header .header-wrapper.stuck #logo { width: 330px; }
#header .header-wrapper.stuck .header-main { height: 72px; }
#header .header-wrapper.stuck .header-inner { height: 72px; }

/* footer logo and headings */
.ig-footer .img { width: 282px !important; max-width: 100%; }
.ig-footer .section-title-main, .ig-footer .section-title span, .ig-footer .section-title { font-weight: 700 !important; font-size: 18px; text-transform: uppercase; }

/* store logos under the merch buttons, sized like Duda */
/* .img, not the custom class: UX Builder's image preview drops custom classes */
.ig-merch .img { margin-left: auto; margin-right: auto; }
.ig-merch > .col:nth-child(1) .ig-store-logo { width: 148px; }
.ig-merch > .col:nth-child(2) .ig-store-logo { width: 125px; }
.ig-merch > .col:nth-child(3) .ig-store-logo { width: 166px; }
.ig-merch > .col:nth-child(4) .ig-store-logo { width: 156px; }

/* 07. BLOG (single post, archives, search) */
.ig-blog { padding-bottom: 0; }
.ig-blog-inner { padding: 0 var(--ig-pad) 16px !important; background: #fff; }
.ig-blog .ig-rip { display: block; width: 100%; height: auto; margin: 0; }
.ig-post-body { max-width: 820px; margin: 0 auto; }
.ig-post-image { margin: 0 0 24px; text-align: center; }
.ig-post-image img { display: block; width: auto; max-width: 100%; height: auto; margin: 0 auto; border-radius: 4px; }
.ig-post-text { font-size: 16px; line-height: 1.75; font-weight: 400; color: #000; }
.ig-post-text h2, .ig-post-text h3 { margin: 1.6em 0 .5em; font-size: 1.25em; text-transform: uppercase; }
.ig-post-text a { text-decoration: underline; }
.ig-post-text img { max-width: 100%; height: auto; }
.ig-center { text-align: center; }
.ig-search { max-width: 520px; margin: 0 auto 24px; }
.ig-search form { margin: 0; }
.ig-blog .page-numbers, .ig-blog .nav-links { display: flex; justify-content: center; gap: 8px; margin: 12px 0 24px; padding: 0; list-style: none; }
.ig-blog .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; border-radius: 4px; background: #000; color: #fff !important; align-items: center; justify-content: center; font-weight: 700; }
.ig-blog .page-numbers.current { background: #2f2f2f; }
.ig-blog .nav-links .page-numbers { margin: 0; }
.ig-blog .badge.post-date, .ig-blog .post-date { display: none !important; }

/* 08. VIDEO GRID (media page) */
.ig-vid-title { margin-top: 12px; font-size: 18px; font-weight: 700; line-height: 1.3; color: #000; }
.ig-card .rxw-vpop { margin: 0; }

/* Rows inside the white column line up with the page edges (same width as the title lines and the rest of the page). */
.ig-card .row.ig-flush { margin-left: 0; margin-right: 0; max-width: 100%; width: 100%; }

/* Pasted embed codes: WordPress wraps the <script> line in a <p>, which adds an invisible gap above the widget */
.col-inner > p:has(> script):not(:has(> :not(script, br))) { display: none; }

/* Footer headings (Navigate, Connect, Follow Us): the gray dotted line under them, same look as Punk Rock Bowling.
   Dots stretch to fit the column evenly, so the line always runs its full width, edge to edge. */
.foothead {
    padding-bottom: 4px; margin-bottom: 2px; border: 0;
    background: radial-gradient(circle at 4px 2px, #434343 2px, transparent 2.4px) 0 100% / 8px 4px round no-repeat;
    background-repeat: round no-repeat;
}

/* Contact form: same look as the Punk Rock Bowling form (label inside the box, rounded fields, full-width button); the button is black to match Ignite. */
/* ===== Contact Form 7 - Inset Label Style ===== */
/* Scoped exclusively to .the-contact-form to prevent site-wide conflicts */

.the-contact-form {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
  box-sizing: border-box;
}

.the-contact-form * {
  box-sizing: inherit;
}

/* Wrapper for inputs */
.the-contact-form .form-floating {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
}

/* Strip out CF7's auto-formatting quirks */
.the-contact-form .form-floating p {
  margin: 0 !important;
}
.the-contact-form .form-floating br {
  display: none !important;
}

/* Inset Label Styling */
.the-contact-form .form-floating label {
  position: absolute;
  top: 12px;
  left: 20px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #000000;
  pointer-events: none; /* Important: allows clicking the input through the label */
  z-index: 2;
}

/* Input & Textarea Styling */
.the-contact-form input[type="text"],
.the-contact-form input[type="email"],
.the-contact-form input[type="tel"],
.the-contact-form textarea {
  display: block;
  width: 100%;
  padding: 32px 20px 12px 20px; /* Top padding pushes typed text below the absolute label */
  font-size: 20px;
  font-weight: 500;
  font-family: 'Montserrat', sans-serif;
  color: #686868;
  background-color: #fff;
  border: 1px solid #c3c3c3;
  border-radius: 12px;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

/* Fixed height for single-line inputs */
.the-contact-form input[type="text"],
.the-contact-form input[type="email"],
.the-contact-form input[type="tel"] {
  height: 76px;
}

/* Textarea height adjustment */
.the-contact-form textarea {
  height: auto;
  min-height: 160px;
  resize: vertical;
}

/* Focus States (Light Blue Ring) */
.the-contact-form input[type="text"]:focus,
.the-contact-form input[type="email"]:focus,
.the-contact-form input[type="tel"]:focus,
.the-contact-form textarea:focus {
  border-color: #bcdffb;
  box-shadow: 0 0 0 3px rgba(30,167,253,.10);
  outline: none;
}

/* Submit Button */
.the-contact-form .wpcf7-submit {
  display: block;
  width: 100%;
  height: 64px;
  background-color: #000000; 
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  margin-top: 10px;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.the-contact-form .wpcf7-submit:hover {
  filter: brightness(0.95);
}
.the-contact-form .wpcf7-submit:active {
  transform: translateY(1px);
}

/* Success/Error Message Box */
.the-contact-form .wpcf7-response-output {
  border: 2px solid #627D47 !important;
  border-radius: 12px !important;
  background-color: #f9fff9 !important;
  color: #333 !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  margin: 20px 0 20px 0 !important;
  padding: 20px !important;
  text-align: center;
}

/* Validation Errors styling */
.the-contact-form .wpcf7-not-valid-tip {
  font-size: 13px;
  font-weight: 500;
  color: #cc0000;
  margin-top: 6px;
  display: block;
}