/*
Theme Name: Escaperoom Houten
Theme URI: https://escaperoomhouten.nl
Author: Bas Nijdam
Author URI: https://escaperoomhouten.nl
Description: A lightweight block theme tailored for Escaperoom Houten, built for WordPress 6.8.3 with full site editing support.
Requires at least: 6.8
Tested up to: 6.8.3
Requires PHP: 7.4
Version: 1.0.0
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: escaperoom-houten-theme
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, editor-style, wide-blocks
*/

:root {
  --wp--preset--color--black: #000000;
  --wp--preset--color--white: #ffffff;
  --wp--preset--color--gray: #808080;
  --wp--preset--color--light-gray: #ededed;
  --wp--preset--color--dark-gray: #404040;
  --wp--preset--color--primary: #841245;
  --wp--preset--color--secondary: #00521c;
  --wp--preset--color--accent: #841245;
  --wp--preset--color--background: #00521c;
  --lions-blue: #0033a0;
  --lions-houten-blue: #0b7cb8;

  --wp--preset--font-size--x-small: 8px;
  --wp--preset--font-size--small: 12px;
  --wp--preset--font-size--medium: 16px;
  --wp--preset--font-size--large: 36px;
  --wp--preset--font-size--x-large: 48px;

  --wp--preset--spacing--xx-small: 1px;
  --wp--preset--spacing--x-small: 2px;
  --wp--preset--spacing--small: 8px;
  --wp--preset--spacing--medium: 16px;
  --wp--preset--spacing--large: 32px;
  --wp--preset--spacing--x-large: 64px;

  --wp--custom--spacing-1: 4px;
  --wp--custom--spacing-2: 20px;

  --font-family-lions: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  --font-family-clear: "Clear Sans", Arial, sans-serif;
  --font-family-serif: "IBM Plex Serif", Georgia, "Times New Roman", Times, serif;

  --wp-resize--breakpoint--small: 480px;
  --wp-resize--breakpoint--medium: 768px;
  --wp-resize--breakpoint--large: 960px;
  --wp-resize--breakpoint--x-large: 1200px;
}

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
body {
  margin: 0;
  background: var(--wp--preset--color--gray);
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}

main,
header,
footer {
  display: block;
  max-width: 1200px;
  margin-inline: auto;
  background: var(--wp--preset--color--light-gray);
  background-image: url("assets/images/background-scatter.jpg");
  background-repeat: repeat;
  background-size: auto;
}

main {
  padding-inline: 0;

  .page-title {
    text-align: center;
    font-variant: small-caps;
    font-size: calc(var(--wp--preset--font-size--medium) * 1.4);
    padding-inline: var(--wp--preset--spacing--large);
  }

  p {
    font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
  }
}

@media (max-width: 600px) {
  .page-title {
    font-size: calc(var(--wp--preset--font-size--medium) * 1.1) !important;
    padding-inline: var(--wp--preset--spacing--medium);
  }
}

header {
  padding-block-end: var(--wp--preset--spacing--medium);

  /* Use flexbox to enable reordering on mobile */
  > .alignfull {
    display: flex;
    flex-direction: column;
  }

  .header-navigation {
    order: 1; /* Navigation first on mobile */
  }

  .header-image {
    order: 2; /* Image second on mobile */
    text-align: center;
    margin-bottom: var(--wp--preset--spacing--medium);
    padding-inline: var(--wp--preset--spacing--small);
  }

  .header-content {
    order: 3; /* Content third */
    text-align: center;
    border-radius: 1rem;
    background-color: var(--wp--preset--color--secondary);
    padding-block: var(--wp--preset--spacing--small);
    padding-inline: var(--wp--preset--spacing--small);
    line-height: 1.2;
    color: var(--wp--preset--color--white);
    margin-block: 0;
    margin-inline: 3rem;

    h2 {
      margin: 0;
      padding: 0;
      font-family: var(--font-family-serif);
      font-weight: 400;
    }
  }

  .header-navigation {
    margin-block-start: 0;
    margin-block-end: 0 !important;

    .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
      color: var(--wp--preset--color--secondary);
      font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
      margin: 0 var(--wp--preset--spacing--medium);
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;

      &:hover {
        color: var(--wp--preset--color--primary);
      }

      /* Active/current page in navigation */
      &[aria-current="page"],
      &[aria-current="true"] {
        color: var(--wp--preset--color--primary);
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 6px;
      }
    }
  }
}

/* Mobile navigation button styles - only apply below 600px */
@media (max-width: 599px) {
  header .header-navigation {
    .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container-open {
      padding-block: var(--wp--preset--spacing--medium);
      padding-inline: var(--wp--preset--spacing--small);
      width: 100%;
      display: flex;
      justify-content: center;

      /* Style the SVG icon for better visibility */
      svg {
        width: 32px; /* Make it larger (default is 24px) */
        height: 32px;
      }

      /* Color the SVG rectangles (the hamburger lines) */
      svg rect {
        fill: var(--wp--preset--color--secondary); /* Use your secondary color */
        height: 2.5px; /* Make lines thicker for better visibility */
      }

      /* Optional: Add hover effect */
      &:hover svg rect {
        fill: var(--wp--preset--color--primary);
      }
    }
  }
}

@media (min-width: 960px) {
  header {
    padding-inline: calc(var(--wp--preset--spacing--x-large) * 2);
  }
}

@media (max-width: 959px) {
  p {
    padding-inline: var(--wp--preset--spacing--medium);
  }

  .wpforms-form {
    padding-inline: 2rem !important;
  }

  .header-content {
    font-size: calc(var(--wp--preset--font-size--x-small) * 1.2);
  }
}

@media (min-width: 600px) {
  header {
    padding-block-start: var(--wp--preset--spacing--large);

    /* Restore normal order on larger screens */
    .header-image {
      order: 1; /* Image first on desktop */
    }

    .header-content {
      order: 2; /* Content second */
    }

    .header-navigation {
      order: 3; /* Navigation last on desktop */
      margin-block-start: var(--wp--preset--spacing--large);
    }
  }
}

footer {
  padding-top: 24px;
  padding-bottom: 24px;

  .footer-content {
    .footer-text {
      display: flex;
      justify-content: space-evenly;
      align-items: top;
      gap: var(--wp--preset--spacing--medium);
      font-size: calc(var(--wp--preset--font-size--medium) * 1);
      padding-inline: var(--wp--preset--spacing--large);

      p {
        display: block;
        margin: 0;
        width: 50%;
        font-size: calc(var(--wp--preset--font-size--medium) * 1.1);
        span {
          color: var(--wp--preset--color--primary);
        }
      }
    }

    .footer-logos {
      display: flex;
      justify-content: space-around;
      align-items: center;
      gap: var(--wp--preset--spacing--x-large);
      flex-wrap: wrap;

      > div {
        width: 20%;
      }

      .escaperoom-logo {
        transform: rotate(-10deg);
      }
    }
  }
}

/* Responsive footer - tablet: text on top, logos side by side */
@media (min-width: 768px) and (max-width: 900px) {
  footer {
    padding-inline: var(--wp--preset--spacing--small);

    .footer-content {
      .footer-logos {
        max-width: 90%;
      }
    }
  }
}

/* Responsive footer - mobile: text on top, then stack logos vertically */
@media (min-width: 500px) and (max-width: 767px) {
  footer {
    padding-inline: var(--wp--preset--spacing--small);

    .footer-content {
      .footer-logos {
        gap: var(--wp--preset--spacing--medium);

        > div {
          width: 40%;
        }
      }
    }
  }
}

@media (max-width: 499px) {
  footer {
    padding-inline: var(--wp--preset--spacing--small);

    .footer-content {
      .footer-text {
        flex-direction: column;
        align-items: center;

        p {
          width: 100%;
          text-align: center;
          margin-bottom: var(--wp--preset--spacing--medium);
        }
      }

      .footer-logos {
        flex-direction: column;
        gap: var(--wp--preset--spacing--medium);

        > div {
          width: 40%;
        }
      }
    }
  }
}

.event-info {
  max-width: 1200px;
  margin-inline: auto;
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--white);
  padding-block: var(--wp--preset--spacing--large);

  .table-header-image {
    text-align: center;
    padding-inline: var(--wp--preset--spacing--x-large);
  }

  .event-info-table {
    padding-inline: var(--wp--preset--spacing--large);
  }
  h2 {
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--medium);
    font-family: var(--font-family-clear);
    font-variant: small-caps;
  }

  h3 {
    font-family: var(--font-family-serif);
    font-weight: 100;
    font-size: calc(var(--wp--preset--font-size--medium) * 1.4);
  }

  p {
    margin-top: 0;
    line-height: 1.6;
    font-family: var(--font-family-serif);
    font-weight: 400;

    font-size: calc(var(--wp--preset--font-size--medium) * 1.2);

    &.dash {
      span {
        margin-inline: 2px;
      }
    }

    &.stars {
      margin: 0;
      padding: 0;
      color: var(--wp--preset--color--gray);
      font-weight: bold;

      span {
        position: relative;
        &::before {
          content: "★";
          position: absolute;
          left: 0;
          width: 100%;
          overflow: hidden;
          color: var(--wp--preset--color--white);
        }
      }

      .half {
        position: relative;
        &::before {
          content: "★";
          position: absolute;
          left: 0;
          width: 50%;
          overflow: hidden;
          color: var(--wp--preset--color--white);
        }
      }
    }
  }

  .wp-block-columns {
    margin: 0;
  }

  .wp-block-columns:nth-child(1) {
    position: relative; /* anchor the ::after */
  }

  .wp-block-columns:nth-child(1)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px; /* dot thickness */
    /* Dot color and spacing */
    background-image: radial-gradient(circle, var(--wp--preset--color--white) 1px, transparent 1px);
    background-size: 12px 2px; /* <— increase first value to space dots out more (e.g., 16px, 20px) */
    background-repeat: repeat-x;
  }

  .wp-block-columns:nth-child(1) .wp-block-column:not(:last-child),
  .wp-block-columns:nth-child(2) .wp-block-column:not(:last-child) {
    position: relative;
  }
  .wp-block-columns:nth-child(1) .wp-block-column:not(:last-child)::after,
  .wp-block-columns:nth-child(2) .wp-block-column:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px; /* dot thickness */
    background-image: radial-gradient(circle, var(--wp--preset--color--white) 1px, transparent 1px);
    background-size: 2px 12px; /* <— increase second value to space dots out more */
    background-repeat: repeat-y;
    transform: translateX(1px); /* micro-align if needed */
  }

  .wp-block-column {
    text-align: center;
    padding-block: var(--wp--preset--spacing--medium);
  }

  .event-info-cta {
    background-image: url("assets/images/divider-splat.svg");
    background-position: center center;
    background-size: 150% auto;
    background-repeat: no-repeat;
    /* optional spacing so the graphic has room to show */
    padding-block-start: 2.5rem;
    padding-block-end: 1.7rem;
    color: var(--wp--preset--color--white);
    text-align: center;

    p {
      margin: 0;
      font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
      font-weight: bold;
    }
  }
}

/* Responsive styles for event-info table */
@media (max-width: 599px) {
  .event-info {
    .table-header-image {
      padding-inline: var(--wp--preset--spacing--small);
    }

    .event-info-table {
      padding-inline: var(--wp--preset--spacing--small);
    }

    /* Stack columns vertically on mobile */
    .wp-block-columns {
      flex-direction: column !important;
    }

    .wp-block-column {
      width: 100% !important;
      margin: 0 !important;
      padding-block: var(--wp--preset--spacing--small);
    }

    /* Remove vertical dotted dividers on mobile */
    .wp-block-columns:nth-child(1) .wp-block-column:not(:last-child)::after,
    .wp-block-columns:nth-child(2) .wp-block-column:not(:last-child)::after {
      display: none;
    }

    /* Add horizontal dotted dividers between stacked items */
    .wp-block-column:not(:last-child) {
      position: relative;
      padding-bottom: var(--wp--preset--spacing--medium);
    }

    .wp-block-column:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background-image: radial-gradient(
        circle,
        var(--wp--preset--color--white) 1px,
        transparent 1px
      );
      background-size: 12px 2px;
      background-repeat: repeat-x;
    }

    /* Remove horizontal divider after first row on mobile */
    .wp-block-columns:nth-child(1)::after {
      display: none;
    }

    h3 {
      font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
      margin-bottom: var(--wp--preset--spacing--x-small);
    }

    p {
      font-size: var(--wp--preset--font-size--medium);
    }

    .event-info-cta {
      background-size: 400% auto;
      padding-inline: var(--wp--preset--spacing--medium);

      p {
        font-size: var(--wp--preset--font-size--medium);
      }
    }
  }
}

@media (min-width: 600px) and (max-width: 900px) {
  .event-info {
    .table-header-image {
      padding-inline: var(--wp--preset--spacing--medium);
    }

    .event-info-table {
      padding-inline: var(--wp--preset--spacing--medium);
    }

    /* 2 columns on tablet - force wrap and sizing */
    .wp-block-columns {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 0 !important;
    }

    .wp-block-column {
      width: 50% !important;
      flex-basis: 50% !important;
      flex-grow: 0 !important;
      flex-shrink: 0 !important;
      max-width: 50% !important;
      min-width: 50% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Adjust dotted dividers for 2-column layout */
    /* Show vertical divider only on odd columns (left column of each pair) */
    .wp-block-columns .wp-block-column:nth-child(odd)::after {
      display: block !important;
    }

    /* Hide vertical divider on even columns (right column of each pair) */
    .wp-block-columns .wp-block-column:nth-child(even)::after {
      display: none !important;
    }

    h3 {
      font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
      margin-bottom: var(--wp--preset--spacing--x-small);
    }

    p {
      font-size: var(--wp--preset--font-size--medium);
      line-height: 1.4;
    }
    .event-info-cta {
      background-position: center center;
      background-size: 400% auto;
    }
  }
}

:where(.wp-site-blocks) > * {
  margin-block: 0;
}

/* Custom styles for template backgrounds and content areas */
.wp-block-cover.has-parallax {
  background-attachment: fixed;
}

.wp-block-group.has-background-background-color {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
}

/* Ensure content is readable against any background */
.wp-block-cover .wp-block-group.has-background {
  background-color: var(--wp--preset--color--background) !important;
}

/* Template-specific styles */
.wp-block-cover {
  min-height: 100vh;
  padding: 0;
}

.wp-block-cover .wp-block-group.has-background {
  border-radius: 8px;
  margin-top: var(--wp--preset--spacing--50);
  margin-bottom: var(--wp--preset--spacing--50);
  padding: var(--wp--preset--spacing--50);
}

div.wpforms-container-full input[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active),
.wp-core-ui div.wpforms-container-full input[type="submit"]:not(:hover):not(:active),
.wp-core-ui div.wpforms-container-full button[type="submit"]:not(:hover):not(:active),
.wp-core-ui div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) {
  background-color: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-family: var(--font-family-clear);
  font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
  padding: var(--wp--preset--spacing--small) var(--wp--preset--spacing--medium);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.content-404 {
  text-align: center;
  padding: var(--wp--preset--spacing--large);
  font-family: var(--font-family-serif);

  h1 {
    font-size: var(--wp--preset--font-size--x-large);
    margin-bottom: var(--wp--preset--spacing--medium);
  }

  p {
    font-size: calc(var(--wp--preset--font-size--medium) * 1.2);
    margin-bottom: var(--wp--preset--spacing--medium);
  }

  a.wp-block-button__link {
    background: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);

    &:hover {
      background: var(--wp--preset--color--secondary);
      color: var(--wp--preset--color--white);
    }
  }
}

.wp-block-query {
  padding-inline: var(--wp--preset--spacing--x-large);
}