/**
 * Pagelayer integration styles.
 *
 * Three concerns:
 *
 *  1. Transition-conflict kill
 *     Pagelayer injects `transition: all 0.3s` (via .pagelayer-cont and its
 *     row/column holders) which overrides every Tailwind transition utility
 *     and breaks the Swiss design's precise hover states. We surgically
 *     suppress it then re-declare only the Tailwind classes that need it.
 *
 *  2. Swiss grid preservation
 *     Pagelayer wraps content in `.pagelayer-row`, `.pagelayer-col` etc. with
 *     their own max-width and gutter system. We ensure these wrappers coexist
 *     cleanly with our 4-col grid, border rules, and full-bleed sections.
 *
 *  3. Custom widget styles
 *     Visual styles for the seven [neue_*] shortcode widgets that are not
 *     covered by compiled theme.css utilities (loading states, editor
 *     highlights, empty-state messaging).
 *
 * @package NeueAgency
 * @since   1.0.0
 */

/* ── Design tokens ────────────────────────────────────────────────────────── */
:root {
  --neue-pl-brand: var(--neue-brand, #FFAA00);
  --neue-pl-ink:   #000;
  --neue-pl-paper: #fff;
  --neue-pl-muted: #737373;
  --neue-pl-mist:  #F5F5F5;
  --neue-pl-rule:  2px solid #000;
}


/* ════════════════════════════════════════════════════════════════════════════
   1. TRANSITION-CONFLICT KILL
   ════════════════════════════════════════════════════════════════════════════ */

/*
 * Pagelayer Pro sets:
 *   .pagelayer-cont *, .pagelayer-row *, .pagelayer-col * { transition: all 0.3s; }
 *
 * This single override suppresses it everywhere inside Pagelayer wrappers so
 * Tailwind's transition-* utilities (which set transition-property explicitly)
 * are not clobbered.
 *
 * The `!important` is deliberate and necessary — Pagelayer uses it too.
 */
.pagelayer-cont *,
.pagelayer-cont *::before,
.pagelayer-cont *::after,
.pagelayer-row-holder *,
.pagelayer-row-holder *::before,
.pagelayer-row-holder *::after,
.pagelayer-col-holder *,
.pagelayer-col-holder *::before,
.pagelayer-col-holder *::after {
  transition-property: none !important;
  transition-duration: 0ms !important;
}

/*
 * Re-declare Tailwind's transition utilities AFTER the kill so they win
 * the specificity battle. Only the properties actually used in the theme
 * are listed here — duration and easing follow the Tailwind defaults.
 */
.pagelayer-cont .transition-colors,
.pagelayer-row-holder .transition-colors,
.pagelayer-col-holder .transition-colors {
  transition-property: color, background-color, border-color,
    text-decoration-color, fill, stroke !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.pagelayer-cont .transition-all,
.pagelayer-row-holder .transition-all,
.pagelayer-col-holder .transition-all {
  transition-property: all !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
.pagelayer-cont .transition-opacity,
.pagelayer-row-holder .transition-opacity,
.pagelayer-col-holder .transition-opacity {
  transition-property: opacity !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}
/* Duration modifiers */
.pagelayer-cont .duration-300,
.pagelayer-row-holder .duration-300 { transition-duration: 300ms !important; }
.pagelayer-cont .duration-700,
.pagelayer-row-holder .duration-700 { transition-duration: 700ms !important; }

/*
 * Pagelayer editor backend: the builder UI itself needs full transitions for
 * drag/drop feedback. Scope the kill to the front-end only.
 */
body.pagelayer-builder .pagelayer-cont *,
body.pagelayer-builder .pagelayer-row-holder *,
body.pagelayer-builder .pagelayer-col-holder * {
  transition-property: all !important;
  transition-duration: 0.3s !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   2. SWISS GRID PRESERVATION
   ════════════════════════════════════════════════════════════════════════════ */

/*
 * Pagelayer row default has `max-width: 1200px` and its own padding.
 * We honour the theme's 1400px content width when the theme's own wrapper
 * is in effect, and allow Pagelayer rows inside the max-w-[1400px] container
 * to span the full inner width.
 */
.neue-full-width .pagelayer-row,
.is-canvas .pagelayer-row {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/*
 * Pagelayer adds `overflow: hidden` to sections by default which clips our
 * sticky mega menu panel. Reset for the page-level container.
 */
.is-pl-page > .pagelayer-cont {
  overflow: visible;
}

/*
 * When a Pagelayer row is set to "full width" it uses negative margins to
 * break out of its container. Inside our centred `<main>` this produces a
 * horizontal scrollbar. Clip at body level only when a canvas template is
 * active.
 */
body.is-canvas { overflow-x: clip; }

/*
 * Pagelayer col padding collides with our px-8 (2rem) section padding when
 * the Swiss layout and builder layout are used together. Zero the default
 * column padding inside Neue Agency's own widget wrappers so the Swiss
 * padding values take over.
 */
.neue-widget .pagelayer-col {
  padding-left: 0;
  padding-right: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   3. CUSTOM WIDGET STYLES
   ════════════════════════════════════════════════════════════════════════════ */

/* Common base — all widgets respect the 1400px container rhythm */
.neue-widget {
  position: relative;
  box-sizing: border-box;
}

/* ── Hero widget ──────────────────────────────────────────────────────────── */

.neue-widget-hero {
  border-top: var(--neue-pl-rule);
}

/* ── Project grid widget ──────────────────────────────────────────────────── */

.neue-widget-project-grid {
  border-left: var(--neue-pl-rule);
  border-right: var(--neue-pl-rule);
}

/* ── Case study list widget ───────────────────────────────────────────────── */

.neue-widget-cs-list {
  /* border-t and border-b already in render output */
}
.neue-widget-cs-header {
  border-top: var(--neue-pl-rule);
}

/* ── Testimonial widget ───────────────────────────────────────────────────── */

.neue-widget-testimonial blockquote {
  margin: 0;
}

/* ── Metrics band widget ──────────────────────────────────────────────────── */

.neue-widget-metrics {
  /* border lines output inline; no extra styles needed */
}

/* ── Team grid widget ─────────────────────────────────────────────────────── */

.neue-widget-team-grid {
  border-left: var(--neue-pl-rule);
  border-right: var(--neue-pl-rule);
}
.neue-widget-team-grid article {
  min-height: 320px;
}

/* ── CTA band widget ──────────────────────────────────────────────────────── */

.neue-widget-cta a svg {
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════════════════════
   4. EDITOR — VISUAL AFFORDANCES (builder-only)
   ════════════════════════════════════════════════════════════════════════════ */

/*
 * In the Pagelayer backend editor, add a subtle amber outline to custom
 * Neue Agency widgets so editors can distinguish them from stock Pagelayer
 * widgets when selecting / repositioning.
 */
body.pagelayer-builder .neue-widget {
  outline: 2px dashed color-mix(in srgb, var(--neue-pl-brand) 40%, transparent);
  outline-offset: -2px;
}
body.pagelayer-builder .neue-widget:hover,
body.pagelayer-builder .neue-widget.pagelayer-selected {
  outline: 2px solid var(--neue-pl-brand);
}

/* Empty-state placeholder in editor when no content found */
body.pagelayer-builder .neue-widget-project-grid:empty::after,
body.pagelayer-builder .neue-widget-cs-list:empty::after,
body.pagelayer-builder .neue-widget-team-grid:empty::after {
  content: attr(data-pl-widget-name) ' — No content yet';
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--neue-pl-muted);
  border: 2px dashed var(--neue-pl-muted);
  padding: 2rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   5. FULL-WIDTH + CANVAS TEMPLATE RESETS
   ════════════════════════════════════════════════════════════════════════════ */

/*
 * page-full-width.php — `.is-full-width`
 * Removes the horizontal padding constraint so Pagelayer full-bleed rows
 * actually go full-bleed within the <main> element.
 */
body.is-full-width #main {
  padding-left: 0;
  padding-right: 0;
  max-width: 100%;
  width: 100%;
}

/*
 * page-canvas.php — `.is-canvas`
 * The canvas page bypasses get_header/get_footer so <main> is the root
 * layout element. No padding constraints at all.
 */
body.is-canvas #canvas-main {
  padding: 0;
  margin: 0;
  max-width: none;
  width: 100%;
}

/*
 * Inside a canvas page, Pagelayer rows may request a max-width wider than
 * our default 1400px — let them.
 */
body.is-canvas .pagelayer-row {
  max-width: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   6. PREFERS-REDUCED-MOTION
   ════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  /* Ensure even the re-declared Tailwind transitions are disabled */
  .pagelayer-cont .transition-colors,
  .pagelayer-cont .transition-all,
  .pagelayer-cont .transition-opacity,
  .pagelayer-row-holder .transition-colors,
  .pagelayer-row-holder .transition-all {
    transition-duration: 0ms !important;
  }
}