/*
 * Open Out site-wide layout: header, footer. Tokens (colours, type, widths, buttons)
 * live in theme.json. The menu collapses below 1024px, as on the live site.
 */

/* Header: white bar with a pink rule. The wrapper in the page templates only keeps it in
   view while scrolling; everything else is on the part's own root group, so the Site Editor
   shows the part as the site does */

.openout-header {
  position: sticky;
  inset-block-start: var(--wp-admin--admin-bar--height, 0);
  z-index: 100;
}

.openout-header__inner {
  border-block-end: 1px solid var(--wp--preset--color--pink);
  background: var(--wp--preset--color--white);
  padding-block: 0.4rem;
  padding-inline: 1rem;

  & .openout-header__bar {
    gap: 1rem;
  }

  & .openout-header__logo {
    flex-shrink: 0;
    margin: 0;

    & img {
      display: block;
      block-size: 45px;
      inline-size: auto;
    }
  }

  & .openout-header__book .wp-block-button__link {
    padding-block: 0.4em;
    padding-inline: 0.8em;
    font-size: var(--wp--preset--font-size--small);
    white-space: nowrap;
  }

}

/* Desktop and mobile bars: the site shows one per width, the Site Editor shows both (its
   canvas body is .editor-styles-wrapper), the mobile one at phone width below the other */

/* Only one bar shows on the site, so neither takes the block gap; the editor adds its own */
.openout-header__inner .openout-header__bar {
  margin-block: 0;
}

@media (max-width: 1023px) {
  body:not(.editor-styles-wrapper) .openout-header__desktop {
    display: none;
  }
}

@media (min-width: 1024px) {
  body:not(.editor-styles-wrapper) .openout-header__mobile {
    display: none;
  }
}

.editor-styles-wrapper .openout-header__inner .openout-header__mobile {
  max-inline-size: 390px;
  margin-block-start: 2rem;
  outline: 1px dashed var(--wp--preset--color--pink-soft);
}

/* Labels over the two bars, in the Site Editor only */
.editor-styles-wrapper .openout-header__inner :is(.openout-header__desktop, .openout-header__mobile) {
  position: relative;

  &::before {
    position: absolute;
    inset-block-end: 100%;
    inset-inline-start: 0;
    color: var(--wp--preset--color--ink);
    font-size: 12px;
    white-space: nowrap;
  }
}

.editor-styles-wrapper .openout-header__inner .openout-header__desktop::before {
  content: "Desktop header (1024px and wider)";
}

.editor-styles-wrapper .openout-header__inner .openout-header__mobile::before {
  content: "Mobile header (narrower than 1024px)";
}

/* Mobile bar: burger, logo beside it, Book pushed to the end */
.openout-header__mobile {
  gap: 0.75rem;
}

.openout-header__mobile .openout-header__book {
  margin-inline-start: auto;
}

/* Main menu: pink pills, the current page filled pink, submenus open on hover */

.openout-header__nav {
  flex: 1;
  font-size: clamp(15px, 1.4vw, 18px);

  & .wp-block-navigation__container {
    gap: 0.25rem;
  }

  & .wp-block-navigation-item__content {
    padding-block: 0.2em;
    padding-inline: 0.45em;
    border: 1px solid transparent;
    border-radius: 4px;
  }

  & .wp-block-navigation-item__content:hover,
  & .wp-block-navigation-item__content:focus-visible {
    border-color: var(--wp--preset--color--pink);
    background: var(--wp--preset--color--pink-light);
  }

  & .current-menu-item > .wp-block-navigation-item__content,
  & .current-menu-ancestor > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--pink);
    color: var(--wp--preset--color--white);
  }

  & .wp-block-navigation__submenu-container {
    border: 1px solid var(--wp--preset--color--pink);
    border-radius: 4px;
    padding: 0.25rem;
    background: var(--wp--preset--color--white);
  }
}

/* Footer: pink band, three columns (hours, contact and news, sitemap) */

.openout-footer__inner {
  background: var(--wp--preset--color--pink);
  color: var(--wp--preset--color--white);
  padding-block: 2rem 1rem;
  padding-inline: 1rem;

  & a,
  & a:hover {
    color: inherit;
  }

  & h2 {
    margin-block: 1rem 0.5rem;
    font-size: var(--wp--preset--font-size--large);
    text-transform: uppercase;
  }

  & p {
    margin-block: 0;
  }

  & .openout-footer__columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 2rem;
  }

  & .openout-footer__contact {
    text-align: center;
  }

  & .openout-footer__sitemap {
    text-align: end;

    & ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }

  & .openout-footer__news {
    margin: 0;
    padding: 0;

    & li {
      margin: 0;
    }

    & .wp-block-latest-posts__post-date {
      display: inline;
      margin-inline-start: 0.5em;
      font-size: var(--wp--preset--font-size--small);
      color: inherit;
    }
  }

  & .openout-footer__social {
    gap: 0.6rem;
  }

  & .openout-footer__copyright {
    margin-block-start: 2rem;
    text-align: center;
  }
}

@media (max-width: 899px) {
  .openout-footer__inner .openout-footer__columns {
    grid-template-columns: 1fr;
  }

  .openout-footer__inner .openout-footer__columns > * {
    text-align: center;
  }

  .openout-footer__inner .openout-footer__social {
    justify-content: center;
  }
}

/* Page: brick wall behind white boxes */

body {
  background: url(../images/brickwall@2x.png);
}

.openout-main {
  padding-block: 1.5rem 3rem;
  padding-inline: 1rem;
}

.is-style-box {
  background: var(--wp--preset--color--white);
  padding-block: 1em;
  padding-inline: 1.5em;
}

.openout-post-list .wp-block-post-template {
  display: grid;
  gap: 1rem;
}

.openout-post-list .wp-block-query-pagination {
  margin-block-start: 1.5rem;
}

/* Brushstroke: white paint behind a title, date or link, sized to its text */

.is-style-brushstroke,
.openout-post__tags,
.c-accordion__title {
  inline-size: fit-content;
  background: url(../images/brushstroke-7.svg) no-repeat center / 100% 95%;
  padding-block: 10px;
  padding-inline: 40px;
}

h1.is-style-brushstroke,
.wp-block-post-title.is-style-brushstroke,
.wp-block-query-title.is-style-brushstroke,
.openout-post__tags {
  background-image: url(../images/brushstroke-6.svg);
}

.wp-block-post-date.is-style-brushstroke {
  padding-block: 5px;
  padding-inline: 20px;
}

.openout-title .is-style-brushstroke {
  margin-block: 0 1rem;
}

.has-text-align-center.is-style-brushstroke,
.openout-post__tags {
  margin-inline: auto;
}

/* FAQ accordion (accordion-blocks plugin) titles */
.c-accordion__title {
  margin-block: 1.5em 0.5em;
  margin-inline: auto;
  padding-inline: 80px 120px;
}

/* Tables: compact cells, row highlights used by the Pricing page; narrow screens scroll sideways */

.wp-block-table {
  overflow-x: auto;

  & td,
  & th {
    padding-block: 0.25rem;
    padding-inline: 0.5rem;
    border: 1px solid var(--wp--preset--color--ink);
  }

  /* Core breaks words in aligned tables, splitting prices like £20 */
  &:is(.aligncenter, .alignleft, .alignright) :is(td, th) {
    word-break: normal;
  }

  &.second-row-highlight-table tr:nth-child(2) {
    background-color: #ffdc00;
  }

  &.pricing-table tr:nth-child(3),
  &.pricing-info-table tr:nth-child(3) {
    background-color: #fbc5ef;
  }
}

/* Team grid (openout/team): white cards; services, booking and days sit at the foot */

.openout-team {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: 1rem;
}

.openout-team__member {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  background: var(--wp--preset--color--white);
  text-align: center;

  & .openout-team__name {
    margin-block: 0.25em 0.5em;
    font-size: var(--wp--preset--font-size--large);

    & a {
      color: var(--wp--preset--color--ink);
    }
  }

  & .openout-team__picture img {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  & .openout-team__info {
    margin-block-start: auto;
    padding-block-start: 0.5em;
  }

  & .openout-booking {
    margin-block: 0.5em;
  }
}

@container (min-width: 22rem) {
  .openout-team__member .openout-team__name {
    font-size: var(--wp--preset--font-size--x-large);
  }
}

/* Services: a coloured square per service, in the order of the ACF choices */

.services-short-list {
  margin-block: 0.5em;
  padding: 0;
  list-style: none;

  & .services {
    margin-block-end: 0.5em;
  }

  & .services::before {
    content: "";
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: 0.25em;
    vertical-align: -0.1em;
    background-color: #0074d9;
  }

  & .service-0::before { background-color: #39cccc; }
  & .service-1::before { background-color: #b10dc9; }
  & .service-2::before { background-color: #f012be; }
  & .service-3::before { background-color: #85144b; }
  & .service-4::before { background-color: #ff851b; }
  & .service-5::before { background-color: #ffdc00; }
  & .service-6::before { background-color: #3d9970; }
  & .service-7::before { background-color: #2ecc40; }
  & .service-8::before { background-color: #01ff70; }
  & .service-9::before { background-color: #001f3f; }
}

.services-list {
  max-inline-size: 40em;
  margin-inline: auto;
}

/* Days strip: green top half for mornings, bottom half for afternoons */

.times {
  --worked: color-mix(in srgb, var(--wp--preset--color--green) 55%, white);
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 4px;
  background: #d3d3d3;

  & span {
    min-inline-size: 1.5em;
    padding: 1px;
    font-weight: 700;
    text-align: center;
  }

  & .full {
    background: var(--worked);
  }

  & .morn {
    background: linear-gradient(to bottom, var(--worked) 50%, transparent 50%);
  }

  & .afte {
    background: linear-gradient(to bottom, transparent 50%, var(--worked) 50%);
  }
}

/* Member page: up to three white boxes side by side; empty ones are hidden */

.openout-member {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  & > * {
    flex: 1 1 300px;
    margin: 0;
  }

  & > :not(:has(> *)) {
    display: none;
  }

  & figure {
    margin: 0 0 1em;

    & img {
      display: block;
      max-inline-size: 100%;
      block-size: auto;
      margin-inline: auto;
    }
  }
}

.openout-member__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.5rem;

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }
}

/* Sections pages (converted Stack + Grid): banner, white boxes and grid rows of boxes */

.openout-banner {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 1rem;
  border-radius: 8px;
  background-color: var(--wp--preset--color--pink-soft);
  background-position: center;
  background-size: cover;
  text-align: center;

  & .openout-banner__logo {
    inline-size: min(280px, 60%);
    block-size: auto;
  }

  & .openout-banner__slogan {
    margin: 0;
    color: var(--wp--preset--color--cream);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
  }

  & .wp-block-button__link {
    border-color: var(--wp--preset--color--white);
  }
}

.openout-grid {
  gap: 1rem;
}

/* Shop (Merchandise page and its child pages): a grid of product cards, and product pages
   with the photos beside the price and description */

.openout-shop-grid {
  gap: 2rem 1.5rem;
  margin-block-start: 1.5rem;
}

.openout-product-card {
  gap: 0.5rem;

  & .wp-block-image {
    margin: 0;
  }

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }

  & h2,
  & p {
    margin: 0;
  }
}

.openout-product .wp-block-gallery {
  margin-block-start: 0.5rem;
}

/* Content written for the old theme: class names staff typed into pages */

/* Services pages: rows of small cards (photo, linked title, short text, booking button) */
.wp-block-group.service-container {
  max-inline-size: none;
}

.wp-block-group.service-block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  align-items: stretch;
  gap: 1rem;
  inline-size: 100%;

  & > .wp-block-group {
    justify-content: flex-start;
    gap: 0.25em;
    margin: 0;
    padding: 0.5rem;
    border: 1px solid #ccc;
    background: var(--wp--preset--color--white);
  }

  & figure {
    margin: 0;
  }

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  & h2 {
    min-block-size: 3.6em;
    margin-block: 0.5rem;
    font-size: 18px;
  }

  & p {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
  }

  & .wp-block-buttons {
    margin-block-start: auto;
  }

  & .wp-block-button__link {
    padding-block: 2px;
    padding-inline: 10px;
    font-size: 1em;
  }
}

/* Bootstrap buttons (About, Visit, Support): the theme's pink button */
.btn-primary {
  display: inline-block;
  padding-block: 0.4em;
  padding-inline: 0.9em;
  border: 1px solid var(--wp--preset--color--pink);
  border-radius: 4px;
  background: var(--wp--preset--color--pink);
  color: var(--wp--preset--color--white);
  font-weight: 700;
  text-align: center;

  &:hover,
  &:focus {
    background: var(--wp--preset--color--white);
    color: var(--wp--preset--color--pink);
  }
}

.btn-lg {
  padding-block: 10px;
  padding-inline: 16px;
  border-radius: 6px;
  font-size: 18px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-block: 0.5rem;

  & br {
    display: none;
  }
}

/* The film on Home, Pricing and its post */
.documentary {
  max-inline-size: 800px;
  margin-inline: auto;

  & video {
    display: block;
    inline-size: 100%;
  }
}

/* Two columns of text (10th birthday page) */
@media (min-width: 768px) {
  .two-cols {
    columns: 2;
    column-gap: 2rem;
  }
}

/* Navigation overlay (parts/navigation-overlay.html): the Main menu as full-width rows, easy
   to tap. The class is on the Navigation block, so the editor shows it as the site does */

.openout-overlay {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  background: var(--wp--preset--color--white);
  gap: 0.5rem;
  padding-block: 0.5rem 1.5rem;
  padding-inline: 1rem;

  & .openout-overlay__close {
    align-self: flex-end;
  }
}

.openout-overlay-menu {
  inline-size: 100%;
  font-size: var(--wp--preset--font-size--medium);

  & .wp-block-navigation__container {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    inline-size: 100%;
  }

  & .wp-block-navigation-item {
    flex-direction: column;
    align-items: stretch;
    inline-size: 100%;
    border-block-end: 1px solid var(--wp--preset--color--pink-light);
  }

  & .wp-block-navigation-item__content {
    display: block;
    inline-size: 100%;
    padding-block: 0.75rem;
    padding-inline: 0.5rem;
  }

  & .current-menu-item > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--pink);
    color: var(--wp--preset--color--white);
  }

  /* Submenus listed open under their parent, indented, in place of hover dropdowns */
  &.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    position: static;
    visibility: visible;
    opacity: 1;
    inline-size: auto;
    block-size: auto;
    min-inline-size: 0;
    overflow: visible;
    border: 0;
    padding: 0 0 0 1rem;
    background: transparent;
    box-shadow: none;
  }

  & .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
    border-block-end: 0;
  }
}