/* Woz.lol theme styles. Order: tokens, dark surfaces, header and menu, content defaults, images, forms and buttons, product grid, home, footer. Per-page CSS boxes only hold what is unique to one page. */

/* 1. Tokens */
:root {
  color-scheme: dark;
  --woz-bg: #26272b;
  --woz-surface: #2f3035;
  --woz-bg-deep: #1d1e21;
  --woz-raised: #3a3b42;
  --woz-line: #4a4c55;
  --woz-text: #d6d7dc;
  --woz-muted: #a0a2ab;
  --woz-head: #f1f2f4;
  --woz-accent: #b8ff9c;
  --woz-accent-hover: #e3ffd6;
  --woz-on-accent: #15170f;
  --woz-spring-in: linear(0, 0.09, 0.329, 0.652, 0.992, 1.287, 1.489, 1.578, 1.552, 1.432, 1.253, 1.054, 0.873, 0.74, 0.671, 0.669, 0.726, 0.824, 0.939, 1.049, 1.135, 1.185, 1.196, 1.17, 1.119, 1.053, 0.987, 0.933, 0.898, 0.886, 0.895, 0.922, 0.959, 0.998, 1.032, 1.056, 1.066, 1.063, 1.05, 1.03, 1.007, 0.986, 0.971, 0.962, 0.962, 0.968, 0.979, 0.993, 1.005, 1.015, 1.021, 1.022, 1.02, 1.014, 1.006, 0.999, 1);
  --woz-spring-out: linear(0, 0.046, 0.171, 0.35, 0.558, 0.772, 0.973, 1.143, 1.273, 1.358, 1.397, 1.393, 1.355, 1.292, 1.212, 1.126, 1.043, 0.969, 0.91, 0.869, 0.846, 0.84, 0.85, 0.872, 0.902, 0.935, 0.969, 1.001, 1.027, 1.047, 1.059, 1.064, 1.062, 1.055, 1.045, 1.032, 1.018, 1.005, 0.993, 0.984, 0.978, 0.975, 0.975, 0.977, 0.98, 0.985, 0.991, 0.996, 1.001, 1.005, 1.008, 1.01, 1.01, 1.01, 1.009, 1.007, 1);
  --woz-epic-gradient:
    radial-gradient(ellipse 60% 75% at 8% 12%, rgba(184, 255, 156, 0.62), transparent 62%),
    radial-gradient(ellipse 55% 70% at 94% 14%, rgba(140, 84, 255, 0.95), transparent 64%),
    radial-gradient(ellipse 75% 85% at 80% 100%, rgba(255, 64, 150, 0.85), transparent 68%),
    radial-gradient(ellipse 52% 65% at 14% 94%, rgba(0, 200, 255, 0.85), transparent 66%),
    radial-gradient(ellipse 40% 45% at 50% 50%, rgba(255, 190, 80, 0.28), transparent 70%),
    conic-gradient(from 215deg at 52% 58%, #2a1a52, #0e3a4f, #3d1860, #0c2d40, #2a1a52),
    linear-gradient(165deg, #0a0b14 0%, #1a1030 55%, #06121a 100%);
}

/* 2. Dark surfaces */
html,
html body,
html body.custom-background {
  background-color: var(--woz-bg);
  background-image: none;
  color: var(--woz-text);
}

html body #page,
html body #page .header-wrapper,
html body #page :is(.content, .page-content) {
  background: var(--woz-bg);
}

.post-content-single {
  background: var(--woz-surface);
  border-radius: 4px;
}

.header-separator svg path,
.header-separator .svg-white-bg {
  fill: var(--woz-bg);
}

html body #page :is(.content, .page-content) :is(p, li, dd, dt, td, th, label, figcaption, cite, .wp-caption-text),
body .post-header span {
  color: var(--woz-text);
}

html body #page :is(.content, .page-content) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--woz-head);
}

html body #page :is(.content, .page-content) a:not(.wp-block-button__link):not(.maxbutton):not(.button) {
  color: var(--woz-accent);
}

html body #page :is(.content, .page-content) a:not(.wp-block-button__link):not(.maxbutton):not(.button):hover,
html body #page :is(.content, .page-content) a:not(.wp-block-button__link):not(.maxbutton):not(.button):focus {
  color: var(--woz-accent-hover);
}

html body #page :is(.content, .page-content) :is(code, pre, kbd, samp) {
  background: var(--woz-raised);
  color: var(--woz-text);
  border-color: var(--woz-line);
}

html body #page :is(.content, .page-content) blockquote {
  border-color: var(--woz-line);
  color: var(--woz-muted);
}

html body #page :is(.content, .page-content) :is(hr, .wp-block-separator) {
  border-color: var(--woz-line);
  background-color: var(--woz-line);
  color: var(--woz-line);
}

html body #page :is(.content, .page-content) :is(table, th, td) {
  border-color: var(--woz-line);
}

html body #page :is(.content, .page-content) .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background: var(--woz-surface);
}

/* 3. Header and menu */
/* !important because the theme script sets background-image: none inline on .header */
.header {
  background-image:
    linear-gradient(rgba(38, 39, 43, 0.88), rgba(38, 39, 43, 0.88)),
    var(--woz-header, none) !important;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* A page sets --woz-header (an image url) and --woz-backstretch: none to use its own header image */
.header .backstretch {
  display: var(--woz-backstretch, block) !important;
}

/* Posts keep the taller header the card overlaps, pages get a compact header that clears the menu */
/* Low specificity on purpose, a page can override these with a plain .header rule */
:where(body.single-post) .header {
  padding: 10px 0 30px;
}

:where(body.page:not(.home)) .header {
  padding: 60px 0 20px;
}

:where(body.page:not(.home)) .inner-header-description {
  padding: 0;
}

#drop_mainmenu > li > a {
  border: 2px solid var(--woz-accent);
  padding: 5px 10px;
  border-radius: 90px;
  margin: 5px 0;
  background-color: rgba(21, 22, 25, 0.6);
  color: var(--woz-head);
}

/* The selected page keeps the pill look and its bottom edge opens, like wozled.com */
#drop_mainmenu > li.current-menu-item > a,
#drop_mainmenu > li.current_page_item > a {
  background-color: rgba(21, 22, 25, 0.6);
  color: var(--woz-head);
  border-bottom: 2px solid transparent;
}

/* Hover inverts any pill, including the selected one */
#drop_mainmenu > li > a:hover,
#drop_mainmenu > li.current-menu-item > a:hover,
#drop_mainmenu > li.current_page_item > a:hover {
  background-color: var(--woz-accent);
  color: var(--woz-on-accent);
  border-bottom-color: var(--woz-accent);
}

@media only screen and (min-width: 783px) {
  .header-top {
    width: 100%;
    padding: 12px 30px;
    box-sizing: border-box;
  }

  .header-top .navigation-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
  }

  .header-top .logo_col {
    flex: 0 0 200px;
    max-width: 200px;
    width: 200px;
    box-sizing: border-box;
  }

  .header-top .text-logo {
    display: block;
    max-width: 200px;
    white-space: nowrap;
  }

  .header-top .main_menu_col {
    flex: 1 1 auto;
    width: calc(100% - 200px);
    box-sizing: border-box;
  }

  .header-top #drop_mainmenu {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .header-top #drop_mainmenu > li > a {
    white-space: nowrap;
  }
}

/* 4. Content defaults */
.post-header .fa-user,
.post-header a[rel="author"],
.post-header .fa-comment-o,
.post-header .fa-comment-o + *,
.post-header .fa-folder-o,
.post-header a[rel~="category"],
.blog-separator,
#page > div.footer > div > div > div > div.footer-column-colored > p,
.entry-author {
  display: none !important;
}

li {
  text-align: left;
}

:where(.post-content-inner, .page-content) h2 {
  margin: 40px 0 10px;
}

:where(.post-content-inner, .page-content) h2:first-child {
  margin-top: 0;
}

:where(.post-content-inner, .page-content) h3 {
  font-size: 1.2em;
}

/* Normal numbered lists, without affecting gallery and lightbox controls */
:where(.post-content-inner, .page-content) :where(ol:not(.indicator)) {
  font: inherit;
  margin: 30px 0 10px 0;
  padding: 0 0 0 40px;
}

:where(.page-content) {
  margin-top: 0;
  padding-top: 0;
}

:where(.wp-block-separator) {
  margin: 10px auto;
}

:where(.post-content-inner, .page-content) :where(iframe:not(.instagram-media)) {
  width: 100%;
  height: 30em;
}

/* Featured image gets room before the text that follows it */
.post-content-inner > img.wp-post-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 1.25em;
}

/* The featured image is a screenshot of the Instagram post, so skip it when the post embeds that post */
.post-content-inner:has(.instagram-media) > img.wp-post-image {
  display: none;
}

/* 5. Images */
:where(.content, .page-content) img {
  max-width: 100%;
  height: auto;
}

:where(.content, .page-content) img.alignleft,
:where(.content, .page-content) .wp-block-image.alignleft {
  margin: 0 1.5em 1em 0;
}

:where(.content, .page-content) img.alignright,
:where(.content, .page-content) .wp-block-image.alignright {
  margin: 0 0 1em 1.5em;
}

html body #page :is(.content, .page-content) .wp-block-image figcaption {
  margin-top: 0.5em;
  color: var(--woz-muted);
}

/* Standalone unaligned images can sit side by side, images inside WordPress galleries are excluded */
:where(.wp-block-image:not(.wp-block-gallery .wp-block-image):not(.aligncenter):not(.alignleft):not(.alignright):not(:has(> .aligncenter, > .alignleft, > .alignright))) {
  display: inline-block;
  width: auto;
  margin-right: 10px;
  vertical-align: middle;
}

/* Centered standalone image, alignment on outer block */
:where(.wp-block-image.aligncenter:not(.wp-block-gallery .wp-block-image)) {
  display: table;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Centered standalone image, alignment on inner figure */
:where(.wp-block-image:not(.wp-block-gallery .wp-block-image):has(> .aligncenter)) {
  display: block;
  width: 100%;
}

:where(.wp-block-image:not(.wp-block-gallery .wp-block-image) > .aligncenter) {
  display: table;
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Opt in for images with a white background, the white takes the surface color */
.woz-knockout,
.woz-knockout img {
  mix-blend-mode: darken;
}

/* 6. Forms and buttons */
.nav-previous a,
.nav-next a {
  background-color: var(--woz-raised);
}

html body #page :is(.content, .page-content) :is(input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], textarea, select),
.header-top input[type="search"] {
  background-color: var(--woz-raised);
  color: var(--woz-text);
  border: 1px solid var(--woz-line);
  border-radius: 4px;
}

html body #page :is(.content, .page-content) :is(input, textarea, select):focus {
  border-color: var(--woz-accent);
  box-shadow: 0 0 0 2px rgba(184, 255, 156, 0.25);
  outline: none;
}

html body #page :is(.content, .page-content) :is(input, textarea)::placeholder {
  color: var(--woz-muted);
}

.wpcf7 {
  max-width: 600px;
  margin: 20px 0;
  text-align: left;
}

.wpcf7 form p {
  margin-bottom: 14px;
}

.wpcf7 label {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}

.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.wpcf7 :is(input[type="text"], input[type="email"], textarea) {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 18px;
  padding: 12px 16px;
  height: auto;
}

.wpcf7 textarea {
  min-height: 120px;
  resize: vertical;
}

.wpcf7 input[type="submit"],
.tnp input[type="submit"],
.tnp-submit {
  display: inline-block;
  width: auto;
  padding: 12px 30px;
  background-color: var(--woz-accent);
  color: var(--woz-on-accent);
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  -webkit-appearance: none;
}

.wpcf7 input[type="submit"]:hover,
.tnp input[type="submit"]:hover,
.tnp-submit:hover {
  background-color: var(--woz-accent-hover);
  color: var(--woz-on-accent);
}

/* Page buttons (FoxWizard, Arduinoboy) match the Contact Send button, !important because the editor writes colors and radius inline */
html body #page :is(.content, .page-content) .wp-block-button__link {
  display: inline-block;
  width: auto;
  padding: 12px 30px;
  background-color: var(--woz-accent) !important;
  color: var(--woz-on-accent) !important;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 4px !important;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

html body #page :is(.content, .page-content) .wp-block-button__link:hover,
html body #page :is(.content, .page-content) .wp-block-button__link:focus {
  background-color: var(--woz-accent-hover) !important;
  color: var(--woz-on-accent) !important;
}

/* A row of buttons gets the same space above and below next to the separator lines */
.wp-block-buttons {
  margin-top: 15px;
  margin-bottom: 15px;
}

.wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px;
  border-radius: 4px;
  font-size: 14px;
  text-align: left;
}

/* 7. Cards and panels the theme, companion plugin and other plugins paint white */
html body :is(.wp-caption, .featured-item-row, .row_345, .sidebar .widget, .post-comments, .about-four-boxes-textcol, .about-text-grid-rightgridtextcol, .contact-formcol, .features-coloured-icon-boxes-featurecol, .features-image-cards-cardrow, .features-small-icon-cards-featinnerrow, .features-small-image-cards-featinnerrow, .portfolio-cards-projectcard, .team-colors-membercard, .team-colors-memberinfo, .team-colors-membericons, .team-large-square-membercard, .team-large-square-memberinfo, .testimonials-boxed-itemcard, form.password-form, fieldset) {
  background-color: var(--woz-surface);
  border-color: var(--woz-line);
}

html body #page .foogallery :is(.fg-item, .fg-item-inner) {
  background-color: var(--woz-surface);
  border-color: var(--woz-line);
}

html body :is(.ps-form-headline, .ps-form-instructions-wrap, form.password-form label) {
  color: var(--woz-text);
}

html body #page :is(.content, .page-content) tbody {
  background-color: transparent;
}

/* Fixed menu bar that appears on scroll, and the mobile menu */
html body .header-top.fixto-fixed,
html body .header-top.coloured-nav {
  background-color: rgba(29, 30, 33, 0.96);
}

html body div#fm2_drop_mainmenu_jq_menu_back div.menu-container ul li {
  background-color: var(--woz-surface);
}

/* Page number links */
html body :is(.post-list a.next-page-link, a.page-numbers, .prev-navigation a, .next-navigation a) {
  background-color: var(--woz-raised);
  color: var(--woz-accent);
}

/* Sections and blocks the page editor paints white or light gray with an inline style */
html body #page :is(.content, .page-content) :is([style*="background-color: #ffffff"], [style*="background-color:#ffffff"], [style*="background-color: #fff;"], [style*="background-color:#fff;"], [style*="background-color: rgb(255, 255, 255)"], [style*="background-color:rgb(255,255,255)"], [style*="background-color: white"], [style*="background-color:white"]) {
  background-color: var(--woz-bg) !important;
}

html body #page :is(.content, .page-content) :is([style*="background-color: #f6f6f6"], [style*="background-color:#f6f6f6"], [style*="background-color: #f5f5f5"], [style*="background-color: #fafafa"]) {
  background-color: var(--woz-bg-deep) !important;
}

/* 8. Product grid. The home row and the Products page projection of it share the theme's own layout, with the round icons overlapping the top of each card, this section only adds the dark colors and room for the circles. */
.features-overlapped-icons-section {
  background-color: var(--woz-bg);
}

.features-overlapped-icons-featinnerrow {
  background: var(--woz-surface);
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

html body #page :is(.content, .page-content) .features-overlapped-icons-featinnerrow :is(h3, h4) a {
  color: var(--woz-head) !important;
}

html body #page :is(.content, .page-content) .features-overlapped-icons-featinnerrow :is(h3, h4) a:hover,
html body #page :is(.content, .page-content) .features-overlapped-icons-featinnerrow :is(h3, h4) a:focus {
  color: var(--woz-accent) !important;
}

.features-overlapped-icons-featuresrow div div div {
  margin-top: -100px;
}

.features-overlapped-icons-featuresrow div div {
  padding: 5px;
}

/* Other pages have no header for the row to overlap, so the circles get room above it */
body:not(.home) .features-overlapped-icons-section {
  padding-top: 110px;
}

/* The theme squeezes the row to 80% of its container, on other pages that sits inside the page container already, so let the row use the full width like on Home */
body:not(.home) .features-overlapped-icons-section .gridContainer {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* 8b. Round icons above the product cards. The theme's hover rule changed the circle's margin, so the circle slid out from under the cursor, hover ended, it snapped back and started again, a fast jitter. Now the hover is held by a still area where the circle rests and only transform moves the circle, a slow damped spring: it is pushed down, bounces back with smaller and smaller rebounds and ends up pressed under the cursor, on leaving it springs back up. */
.features-large-icons-featcol {
  position: relative;
}

.features-large-icons-featcol::before {
  content: "";
  position: absolute;
  top: -45px;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  border-radius: 50%;
}

html body .features-icon-container,
html body .features-icon-container:hover {
  width: 100px;
  height: 100px;
  min-height: 0;
  padding: 5px;
  margin: -100px 0 27px;
  background-color: #03a9f4;
  transition: transform 1.6s var(--woz-spring-out), background-color 0.2s linear;
}

/* The photo and text stay above the circle like before, so the circle sinks behind the photo when it is pressed. The circle and this wrapper are both children of the card. */
html body .features-overlapped-icons-featinnerrow > [data-type="column"] {
  position: relative;
  z-index: 1;
}

html body .features-large-icons-featcol:hover .features-icon-container {
  transform: translateY(46px);
  transition: transform 3s var(--woz-spring-in), background-color 0.2s linear;
}

@media (prefers-reduced-motion: reduce) {
  html body .features-icon-container,
  html body .features-large-icons-featcol:hover .features-icon-container {
    transition: none;
    transform: none;
  }
}

/* 9. Home page */
body.home div:has(img):has(a[href*="/foxwizard/"]),
body.home div:has(img):has(a[href*="/arduinoboy_host_edition/"]),
body.home div:has(img):has(a[href*="/gbamidi2/"]),
body.home div:has(img):has(a[href*="/action-midi-multitool-performer/"]) {
  position: relative;
  cursor: pointer;
}

/* Home header, something cool shows at once: a complex gradient with the poster still over it, the slideshow video fades in above both.
   !important because the theme script sets background-image: none inline on the header. */
.header-homepage {
  background-color: #12101c;
  background-image: url("../images/woz-header-poster.jpg"), var(--woz-epic-gradient) !important;
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.woz-header-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -999997;
  overflow: hidden;
  pointer-events: none;
}

.woz-header-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.woz-header-video video.is-on {
  opacity: 1;
}

/* Latest posts on Home: four cards across on desktop, the plugin's cp4cols class means 3 across and forces its width with !important */
@media only screen and (min-width: 1024px) {
  #latest-posts .blog-postcol {
    width: 25% !important;
    max-width: 25% !important;
    flex-basis: 25% !important;
  }

  #latest-posts .blog-postcol:nth-of-type(3n+1) {
    clear: none;
  }

  #latest-posts .blog-postcol:nth-of-type(4n+1) {
    clear: left;
  }
}

/* Header buttons with a color picked in the Customizer (Header > Header Buttons) brighten on hover */
.header-buttons-wrapper a.button[style]:hover {
  filter: brightness(1.12);
}

/* 10. Generated policy pages (Terms of Service), their pasted styles force white backgrounds and black text */
html body .entry-content,
body :is([data-custom-class="body"], [data-custom-class="body"] *) {
  background-color: transparent !important;
}

body :is([data-custom-class="title"], [data-custom-class="heading_1"], [data-custom-class="heading_2"]),
body :is([data-custom-class="title"], [data-custom-class="heading_1"], [data-custom-class="heading_2"]) * {
  color: var(--woz-head) !important;
}

body :is([data-custom-class="subtitle"], [data-custom-class="body_text"]),
body :is([data-custom-class="subtitle"], [data-custom-class="body_text"]) * {
  color: var(--woz-text) !important;
}

body [data-custom-class="link"],
body [data-custom-class="link"] * {
  color: var(--woz-accent) !important;
}

/* 11. Footer */
.footer {
  background-color: var(--woz-bg-deep);
}

.footer-logo:before {
  content: "©2027 ";
}

@keyframes fadeBlink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}