/**
 * Theme color utility classes.
 *
 * Loaded directly by Drupal (not compiled by Vite) so they are available
 * immediately without an npm build step. These classes reference the
 * --theme-color-* CSS custom properties injected at runtime by
 * inclind_tweaks_page_attachments(), which reads the active Appearance →
 * Theme Settings → Color Palette values.
 *
 * When a build IS run, these same rules also appear in dist/assets/theme.css
 * (generated from theme/style.css). Duplication is intentional — this file
 * ensures the classes are always present even in development without a build.
 */

/* ── Text color utilities ─────────────────────────────────────────────── */
.text-theme-primary   { color: var(--theme-color-primary); }
.text-theme-secondary { color: var(--theme-color-secondary); }
.text-theme-accent    { color: var(--theme-color-accent); }
.text-theme-light     { color: var(--theme-color-light); }
.text-theme-dark      { color: var(--theme-color-dark); }
.text-theme-neutral   { color: var(--theme-color-neutral); }
.text-theme-white     { color: var(--theme-color-white); }
.text-theme-black     { color: var(--theme-color-black); }

/* ── Background color utilities ───────────────────────────────────────── */
.bg-theme-primary   { background-color: var(--theme-color-primary); }
.bg-theme-secondary { background-color: var(--theme-color-secondary); }
.bg-theme-accent    { background-color: var(--theme-color-accent); }
.bg-theme-light     { background-color: var(--theme-color-light); }
.bg-theme-dark      { background-color: var(--theme-color-dark); }
.bg-theme-neutral   { background-color: var(--theme-color-neutral); }
.bg-theme-white     { background-color: var(--theme-color-white); }
.bg-theme-black     { background-color: var(--theme-color-black); }

/* ── Button color utilities ───────────────────────────────────────────── */
/* Includes hover/active states. Tailwind cannot generate these for         */
/* CSS-variable-based class names at build time.                            */

.btn-theme-primary {
  background-color: var(--theme-color-primary);
  color: var(--theme-color-white);
}
.btn-theme-primary:hover  { filter: brightness(0.88); }
.btn-theme-primary:active {
  filter: brightness(0.78);
  outline: 2px solid var(--theme-color-primary);
  outline-offset: 2px;
}

.btn-theme-accent {
  background-color: var(--theme-color-accent);
  color: var(--theme-color-white);
}
.btn-theme-accent:hover  { filter: brightness(0.88); }
.btn-theme-accent:active {
  filter: brightness(0.78);
  outline: 2px solid var(--theme-color-accent);
  outline-offset: 2px;
}

.btn-theme-white {
  background-color: var(--theme-color-white);
  color: var(--theme-color-secondary);
  border: 1px solid var(--theme-color-accent);
}
.btn-theme-white:hover  { background-color: var(--theme-color-light); }
.btn-theme-white:active {
  outline: 2px solid var(--theme-color-accent);
  outline-offset: 2px;
}

/* ── Views Infinite Scroll ("Load More") grid fix ─────────────────────── */
/* VIS inserts .views-infinite-scroll-content-wrapper between .view-content  */
/* and the rows. In a .view-card-grid that wrapper would become the sole     */
/* grid item and collapse the layout to one column. `display: contents`      */
/* dissolves the wrapper so rows stay direct grid items of .view-content.    */
/* Served raw (no build needed); also authored in theme/style.css.           */
.view-card-grid .view-content .views-infinite-scroll-content-wrapper {
  display: contents;
}

/* ── Case Study Tiles staggered grid ──────────────────────────────────── */
/* Applied via the `view-tiles-stagger` css_class on the Clients view.        */
/* Client block_teaser rows render inclind:case-study-tile (.case-study-tile)  */
/* as fixed 390x475 tiles in a 2-column grid whose right column is offset       */
/* downward for the interlocking, staggered look. Served raw (no build step).  */

/* Base (mobile): single centered column. */
.view-tiles-stagger .view-content {
  display: grid;
  grid-template-columns: minmax(0, 390px);
  justify-content: center;
  gap: 2.5rem;
  align-items: start;
}
/* VIS inserts .views-infinite-scroll-content-wrapper between .view-content    */
/* and the rows; dissolve it so rows stay direct grid items.                    */
.view-tiles-stagger .view-content .views-infinite-scroll-content-wrapper {
  display: contents;
}

/* Sector dropdown — restyle the exposed filter to match the design (dark,     */
/* compact, custom chevron). Higher-specificity selectors beat the theme's     */
/* white .form-select utilities without needing !important.                    */
.view-tiles-stagger .views-exposed-form { margin: 0; }
.view-tiles-stagger .views-exposed-form label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.view-tiles-stagger .views-exposed-form .form-actions {
  display: none; /* form auto-submits on change (js/clients-filter.js) */
}
.view-tiles-stagger .views-exposed-form select.form-select,
.view-tiles-stagger .views-exposed-form select {
  width: auto;
  min-width: 210px;
  color: #e5e7eb;
  background-color: #2a3342;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 0.7rem 2.75rem 0.7rem 1rem;
  font-size: 0.95rem;
  line-height: 1.25;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cbd5e1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  box-shadow: none;
  cursor: pointer;
}
.view-tiles-stagger .views-exposed-form select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.45);
}

@media (min-width: 900px) {
  .view-tiles-stagger {
    position: relative;
    --tiles-block: calc(390px * 2 + 3.5rem); /* two columns + column-gap */
  }
  /* Left-align the two 390px columns; empty space falls on the right, where    */
  /* the dropdown sits.                                                          */
  .view-tiles-stagger .view-content {
    grid-template-columns: repeat(2, 390px);
    justify-content: start;
    column-gap: 3.5rem;
    row-gap: 3.5rem;
    padding-bottom: 9rem; /* reserve the staggered column's 9rem overhang */
  }
  /* Push the right-hand column down; negative bottom margin keeps the rows      */
  /* interlocked so the offset stays constant down the column.                   */
  .view-tiles-stagger .views-row:nth-child(even) {
    margin-top: 9rem;
    margin-bottom: -9rem;
  }
  /* Dropdown: top-right of the container, aligned with the top of the first     */
  /* tile (grid starts at the top because the form is out of flow).              */
  .view-tiles-stagger > form.views-exposed-form {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    z-index: 5;
  }
  /* Load More: centered under the tile block, not the full-width container.     */
  .view-tiles-stagger > .pager {
    width: var(--tiles-block);
    max-width: 100%;
    margin-left: 0;
    margin-right: auto;
    margin-top: 3rem;
  }
}

/* ── Canvas editor preview ──────────────────────────────────────────────── */
/* Paint the preview iframe's body with the site's dark ground instead of     */
/* browser white, so dark full-bleed sections aren't framed in white while    */
/* editing. Body class is added by inclind_preprocess_html().                 */
/* Uses the runtime palette variable (Appearance → Theme Settings → Color     */
/* Palette, default #2A3342) so a rebrand carries through here too.           */
body.canvas-editor-preview {
  background-color: var(--theme-color-secondary, #2a3342);
}