/*
Theme Name: Paalam
Theme URI: https://paalam.co.uk
Author: Paalam Consultancy Ltd
Description: Paalam Consultancy marketing theme — technology solutions, managed teams and client success stories. Content is editable from the WordPress admin (Success Stories, Services, Pages and Theme Content settings).
Version: 2.1.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: paalam
Tags: business, portfolio, one-column, custom-logo, custom-menu, featured-images
*/

/* Compiled utilities live in assets/css/app.css; theme refinements follow. */

/* Twelve-column gaps in the supplied service layouts exceed narrow screens. */
@media (max-width: 767px) {
  .single-service .grid.grid-cols-12 { column-gap: 0; }
  .single-service .grid.grid-cols-12 > * { min-width: 0; }
}

/* Story repeaters fill balanced rows: six cards form 3 + 3, five form 3 + 2. */
.paalam-balanced-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.paalam-balanced-grid > * { grid-column: span 12; min-width: 0; }
@media (min-width: 640px) {
  .paalam-balanced-grid > * { grid-column: span var(--story-tablet-span, 6); }
}
@media (min-width: 1024px) {
  .paalam-balanced-grid > * { grid-column: span var(--story-span, 4); }
}

/* Active navigation stays distinct on desktop and mobile, including story detail pages. */
[data-nav] nav a.paalam-nav-active,
[data-nav] nav a.paalam-nav-active:hover,
[data-nav] nav a.paalam-nav-active:focus-visible {
  background: var(--lime, #b8db6e);
  font-weight: 700;
}

/* Match the card and button feedback used across the service pages. */
.paalam-hover-card {
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.paalam-hover-button {
  transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.paalam-faq-toggle { transition: color 200ms ease; }
@media (hover: hover) {
  .paalam-hover-card:hover {
    transform: translateY(-4px);
    border-color: var(--ink, #0f2350);
    box-shadow: 0 20px 50px -25px rgba(15, 35, 80, .3);
  }
  .paalam-hover-button:hover {
    transform: translateY(-2px);
    background-color: var(--ink, #0f2350);
    border-color: var(--ink, #0f2350);
    color: var(--lime, #b8db6e);
  }
  .paalam-faq-toggle:hover { color: var(--lime-ink, #50721d); }
}
.paalam-hover-card:focus-within {
  border-color: var(--ink, #0f2350);
  box-shadow: 0 20px 50px -25px rgba(15, 35, 80, .3);
}
.paalam-hover-button:focus-visible,
.paalam-faq-toggle:focus-visible {
  outline: 2px solid var(--ink, #0f2350);
  outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .paalam-hover-card,
  .paalam-hover-button,
  .paalam-faq-toggle { transition: none; }
  .paalam-hover-card:hover,
  .paalam-hover-button:hover { transform: none; }
}

/* Calendar previews share the same subtle feedback on both booking panels. */
.paalam-calendar-slot {
  transition: transform 250ms ease, border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.paalam-calendar-slot:hover {
  transform: translateY(-3px);
  border-color: var(--lime-ink, #50721d);
  background-color: rgba(184, 219, 110, .2);
  box-shadow: 0 8px 20px -12px rgba(15, 35, 80, .3);
}
@media (prefers-reduced-motion: reduce) {
  .paalam-calendar-slot { transition: none; }
  .paalam-calendar-slot:hover { transform: none; }
}

/* Formatted page content keeps the surrounding section's font and colour. */
.paalam-rich-text > :first-child{margin-top:0}
.paalam-rich-text > :last-child{margin-bottom:0}
.paalam-rich-text p{margin:0 0 1em}
.paalam-rich-text ul,.paalam-rich-text ol{margin:1em 0;padding-left:1.5em;list-style-position:outside}
.paalam-rich-text ul{list-style-type:disc}
.paalam-rich-text ol{list-style-type:decimal}
.paalam-rich-text li+li{margin-top:.35em}
.paalam-rich-text a{text-decoration:underline;text-underline-offset:3px}
.paalam-rich-text strong{font-weight:700}
.paalam-rich-text em{font-style:italic}
.paalam-rich-text h2,.paalam-rich-text h3,.paalam-rich-text h4{font-weight:700;line-height:1.3;margin:1.2em 0 .6em}
.paalam-rich-text h2{font-size:1.5em}.paalam-rich-text h3{font-size:1.25em}.paalam-rich-text h4{font-size:1.1em}
.paalam-rich-text blockquote{border-left:3px solid currentColor;padding-left:1em;margin:1em 0;font-style:italic}

/* Contextual navigation is hidden for menu and direct arrivals. */
[data-services-back][hidden]{display:none!important}

/* Twelve-column layouts need narrower gutters on phones: eleven desktop gaps
   can otherwise exceed the card width even when every item spans the full row. */
@media(max-width:639px){
 .grid-cols-12{column-gap:1rem}
 .grid-cols-12>*,.paalam-rich-text{min-width:0;overflow-wrap:break-word}
}

/* Workflow rehearsal: readable logs and stage feedback, including narrow screens. */
.paalam-demo-event{display:flex;gap:12px;padding:4px 0;overflow-wrap:anywhere}
.paalam-demo-event time{flex-shrink:0;opacity:.6}
.paalam-demo-event.is-complete{color:var(--lime-ink,#50721d)}
[data-demo-stage].is-running{border-color:var(--lime-ink,#50721d);background:rgba(184,219,110,.18)}
[data-demo-stage].is-running>div{color:var(--ink,#0f2350)}
@media(max-width:639px){
 [data-demo-stages]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-demo-stages]>:last-child{grid-column:1/-1}
 [data-demo-stage]{min-width:0;padding:10px;overflow-wrap:anywhere}
}

/* Archive highlights use the reference's compact row; full stories retain their own grid. */
.paalam-archive-metrics{grid-template-columns:minmax(0,1fr)}
.paalam-archive-metrics>*{min-width:0;overflow-wrap:break-word}
@media(min-width:640px){.paalam-archive-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.paalam-archive-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Keep tablet navigation compact instead of wrapping desktop links into three lines. */
[data-nav] nav a{white-space:nowrap}
[data-nav-panel][hidden]{display:none!important}
@media(min-width:768px) and (max-width:1023px){
 [data-nav]>div:first-child>nav,[data-nav]>div:first-child>div{display:none}
 [data-nav-toggle]{display:inline-flex}
 [data-nav-panel]:not([hidden]){display:block}
}

/* Workflow stages wrap as editors add rows; the final stage has no connector. */
[data-demo-stages]{flex-wrap:wrap}
[data-demo-stages]>div{min-width:110px}
[data-demo-stages]>div:last-child>div:last-child:not([data-demo-stage]){display:none}

.paalam-calendar-slot.is-highlighted{border-color:var(--teal,#b5d96c);background:rgba(181,217,108,.1);color:var(--fg,#12234f)}

/* Footer rows remain readable when editors add columns or long link labels. */
.paalam-footer-columns>div{min-width:0;overflow-wrap:anywhere}

/* Keep the booking heading, iframe and fallback aligned within one padded card. */
.paalam-booking{overflow:hidden;min-width:0;padding:24px;display:flex;flex-direction:column;gap:20px}
.paalam-booking-intro{padding:0;min-width:0}
.paalam-calendly-frame{display:block;box-sizing:border-box;width:100%;height:650px;border:1px solid var(--border,#e5e7eb);border-radius:12px;background:#fff}
.paalam-booking-fallback{padding:0;margin:0;overflow-wrap:anywhere}
@media(max-width:480px){.paalam-booking{padding:16px;gap:16px}.paalam-calendly-frame{height:780px;border-radius:8px}}
