/* ================================
   AWPM Service Tiles (Gutenberg)
   + Font Awesome v6 Icons
   ================================
   Required structure on the page (e.g. homepage):
   - An outer wrapper MUST have class: awpm-service-row
     (In Gutenberg: use a Group block, then in Block settings
      > Advanced > Additional CSS class(es) add: awpm-service-row)
   - Inside it: one Columns block (6 columns), each column
     containing a tile div with classes: awpm-tile awpm-tile-1
     (through awpm-tile-6), plus awpm-fa-icon and a Button block
     for the whole-tile link.
   This file is enqueued in Init.php as digipress-awpm-blocks.
   ================================ */

/* Full-width blue band: allow band to extend (theme has overflow: hidden on .site-wrap) */
.site-wrap {
  overflow-x: visible !important;
}

/* Full-bleed band: match block with or without wrapper; fallback to block class only */
.entry-content .awpm-service-tiles-band,
.entry-content > .awpm-service-tiles-band,
.entry-content > .wp-block-digerati-service-tiles.awpm-service-tiles-band,
.site-main .awpm-service-tiles-band,
.wp-block-digerati-service-tiles.awpm-service-tiles-band,
.entry-content .wp-block-digerati-service-tiles,
.site-main .wp-block-digerati-service-tiles {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background: #2b5696 !important;
  box-sizing: border-box;
}

/* Middle-column wrapper */
.awpm-service-row {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

/* Equal height + no gaps */
.awpm-service-row .wp-block-columns {
  gap: 0 !important;
  margin: 0 !important;
  align-items: stretch !important;
}

.awpm-service-row .wp-block-column {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
}

/* Tile: icon above text (vertical), tiles in a horizontal row.
   flex-start so the white circle always starts at the same distance from the top. */
.awpm-tile {
  width: 100%;
  box-sizing: border-box;
  padding: 28px 16px;
  min-height: 190px;
  text-align: center;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.awpm-tile h5 {
  margin: 12px 0 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
  color: #fff;
}

/* Backgrounds */
.awpm-tile-1 { background: #2b5696; }
.awpm-tile-2 { background: #2f5ea4; }
.awpm-tile-3 { background: #3668af; }
.awpm-tile-4 { background: #3f73ba; }
.awpm-tile-5 { background: #4a80c6; }
.awpm-tile-6 { background: #5a8fd2; }

/* Hover */
.awpm-tile:hover { filter: brightness(1.06); }

/* Font Awesome icon circle: icon centered inside the circle */
.awpm-fa-icon {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px auto;
}

.awpm-fa-icon i {
  font-size: 30px;
  line-height: 1;
  color: #111;
}

/* Whole-tile link overlay using the Button block */
.awpm-tile .wp-block-buttons,
.awpm-tile .wp-block-button {
  margin: 0 !important;
}

.awpm-tile .wp-block-button__link {
  position: absolute;
  inset: 0;
  opacity: 0;        /* invisible but clickable */
  z-index: 3;
  padding: 0 !important;
  border: 0 !important;
}

/* Make sure clicks go to the overlay */
.awpm-tile .awpm-fa-icon,
.awpm-tile h5 {
  position: relative;
  z-index: 2;
  pointer-events: none;
}

/* Service Tiles block: custom grid (ACF block, not Gutenberg columns) */
.awpm-service-row .awpm-service-tiles__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  align-items: stretch;
}

.awpm-service-row .awpm-service-tiles__grid .awpm-tile {
  min-width: 0;
}

/* Whole-tile link overlay (ACF Service Tiles block) */
.awpm-tile .awpm-tile__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 0;
  border: 0;
}

/* Editor-only: keep the buttons from visually messing up layout */
.editor-styles-wrapper .awpm-tile .wp-block-buttons {
  display: none !important;
}

@media (max-width: 640px) {
  .awpm-tile { min-height: 170px; }

  .awpm-service-row .awpm-service-tiles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 641px) and (max-width: 980px) {
  .awpm-service-row .awpm-service-tiles__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ================================
   Homepage: hide hero title (keep featured image), hide first-block overlay text, remove gap
   Uses .awpm-front-page (added by theme when is_front_page()) and .home.
   ================================ */
.awpm-front-page .page-hero__title,
.home .page-hero__title {
  display: none !important;
}
.awpm-front-page .entry-content > *:first-child h1,
.awpm-front-page .entry-content > *:first-child h2,
.awpm-front-page .entry-content > *:first-child h3,
.awpm-front-page .entry-content > *:first-child p,
.home .entry-content > *:first-child h1,
.home .entry-content > *:first-child h2,
.home .entry-content > *:first-child h3,
.home .entry-content > *:first-child p,
.awpm-front-page .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container > *,
.awpm-front-page .entry-content > .wp-block-group:first-child .wp-block-group__inner-container > *,
.home .entry-content > .wp-block-cover:first-child .wp-block-cover__inner-container > *,
.home .entry-content > .wp-block-group:first-child .wp-block-group__inner-container > * {
  display: none !important;
}
.awpm-front-page .entry-content > *:first-child,
.home .entry-content > *:first-child {
  margin-bottom: 0 !important;
}
.awpm-front-page .entry-content > *:first-child + *,
.home .entry-content > *:first-child + * {
  margin-top: 0 !important;
}

/* Intro spacing (below tiles) */
.awpm-intro { padding: 48px 18px 24px; max-width: 980px; margin: 0 auto; }
.awpm-intro .wp-block-separator { max-width: 520px; margin: 16px auto 24px; }

/* ================================
   Hero: constrain content to same max-width as header (inline with logo)
   ================================ */
.page-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.page-hero__inner {
  max-width: var(--wp--style--global--content-size, 1240px) !important;
  width: 100% !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--wp--custom--spacing--root-padding, 1rem) !important;
  padding-right: var(--wp--custom--spacing--root-padding, 1rem) !important;
  box-sizing: border-box !important;
}

/* ================================
   Page template: Sidebar (page-split)
   ================================ */

.page-split {
  display: grid;
  gap: var(--wp--custom--spacing--root-padding, 1rem);
  max-width: var(--wp--style--global--content-size, 1240px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--custom--spacing--root-padding, 1rem);
  padding-right: var(--wp--custom--spacing--root-padding, 1rem);
}

@media (min-width: 782px) {
  .page-split {
    grid-template-columns: 2fr 1fr;
    gap: var(--wp--preset--spacing--50, 1.5rem);
  }

  .page-split .page-split__left {
    min-width: 0;
  }

  .page-split .page-split__right {
    min-width: 0;
  }

  .page-split.is-reverse .page-split__left {
    order: 2;
  }

  .page-split.is-reverse .page-split__right {
    order: 1;
  }
}

@media (max-width: 781px) {
  .page-split.is-reverse .page-split__right {
    order: 1;
  }

  .page-split.is-reverse .page-split__left {
    order: 2;
  }
}

/* ================================
   Content page: 2-column layout
   ================================ */

.awpm-content-with-sidebar {
  max-width: var(--wp--style--global--content-size, 1240px);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--wp--custom--spacing--root-padding, 1rem);
  padding-right: var(--wp--custom--spacing--root-padding, 1rem);
}

.awpm-content-with-sidebar .wp-block-columns {
  align-items: flex-start;
}

.awpm-content-with-sidebar .wp-block-column {
  padding: 0;
}

/* Sibling Pages block (Services sidebar list) */
.awpm-sibling-pages__title {
  margin: 0 0 0.5em;
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.awpm-sibling-pages__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.awpm-sibling-pages__list li {
  margin: 0;
  padding: 0.5em 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.awpm-sibling-pages__list li:last-child {
  border-bottom: none;
}

.awpm-sibling-pages__list a {
  text-decoration: none;
}

.awpm-sibling-pages__list a:hover {
  text-decoration: none;
}

.awpm-sibling-pages__list .current_page_item a {
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.awpm-sibling-pages__list .current_page_item a:hover {
  text-decoration: none;
}

@media (max-width: 781px) {
  .awpm-content-with-sidebar .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ================================
   Sidebar Gravity Form (General Enquiries)
   ================================ */

.awpm-sidebar-form {
  margin-top: 1.75rem;
}

.awpm-sidebar-form__heading {
  margin: 0 0 0.75rem;
  font-size: 0.9375em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--wp--preset--color--primary);
  opacity: 0.85;
}

.awpm-sidebar-form .gform_wrapper {
  --gf-form-gap-y: 1.25rem;
}

.awpm-sidebar-form .gfield {
  margin-bottom: 1.25rem;
}

.awpm-sidebar-form .gfield:last-child {
  margin-bottom: 0;
}

.awpm-sidebar-form .gfield_label,
.awpm-sidebar-form .gform-field-label {
  color: #666;
  font-size: 0.9rem;
  font-weight: 500;
}

.awpm-sidebar-form .gfield_required {
  font-size: 0;
  color: #999;
}

.awpm-sidebar-form .gfield_required::after {
  content: '*';
  font-size: 0.75rem;
  color: #999;
  font-weight: normal;
}

.awpm-sidebar-form input[type="text"],
.awpm-sidebar-form input[type="email"],
.awpm-sidebar-form input[type="tel"] {
  width: 100%;
  max-width: 100%;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  height: auto;
  min-height: 38px;
  border-width: 1px;
  border-color: #ccc;
}

.awpm-sidebar-form textarea {
  width: 100%;
  max-width: 280px;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  min-height: 100px;
  border-width: 1px;
  border-color: #ccc;
}

.awpm-sidebar-form input[type="submit"] {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

/* Header dropdown: dark blue text on white so links are visible */
@media (min-width: 782px) {
  .site-header .nav-header .sub-menu .menu-link {
    color: #1e3a5f !important;
    background: transparent;
  }
  .site-header .nav-header .sub-menu .menu-link:hover {
    color: #1e3a5f !important;
    opacity: 0.85;
  }
}