/*
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. */

/* Both logos share readable dimensions; scrolling never changes their size. */
.paalam{--paalam-logo-height:3rem}
.paalam .paalam-header-brand{flex:0 0 auto;min-width:max-content}
.paalam .paalam-header-logo,
.paalam .paalam-footer-logo{display:block;width:auto;height:var(--paalam-logo-height);max-width:none;flex:none;object-fit:contain}
@media(min-width:1280px){
 .paalam{--paalam-logo-height:3.5rem}
}

/* 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 {
  color: var(--ink, #0f2350);
  background-color: var(--lime, #b8db6e);
  border-radius: 9999px;
  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}
}

/* Fit result cards to their column so labels and values have room to breathe. */
.paalam-archive-results{container-type:inline-size}
.paalam-archive-metrics{grid-template-columns:minmax(0,1fr)}
.paalam-archive-metrics>*{min-width:0;overflow-wrap:normal;word-break:normal;hyphens:none}
.paalam-archive-metrics>li>div:first-child{flex-wrap:wrap}
.paalam-archive-metrics>li>div:nth-child(2){white-space:nowrap}
@container(min-width:26rem){.paalam-archive-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(min-width:52rem){.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:1279px){
 [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}

/* Let the calendar fill its card; pad only the heading and fallback link. */
.paalam-booking{overflow:hidden;min-width:0;padding:0;display:flex;flex-direction:column;gap:0}
.paalam-booking-intro{padding:24px 24px 0;min-width:0}
.paalam-calendly-frame{display:block;box-sizing:border-box;width:100%;height:var(--paalam-booking-height,650px);border:1px solid var(--border,#e5e7eb);border-radius:12px;background:#fff}
.paalam-booking-fallback{padding:12px 24px 20px;margin:0;overflow-wrap:anywhere}
@media(max-width:480px){.paalam-booking-intro{padding:16px 16px 0}.paalam-booking-fallback{padding:12px 16px 16px}.paalam-calendly-frame{height:var(--paalam-booking-height,780px);border-radius:8px}}

/* Let primary site containers fill wide displays with proportional side gutters. */
@media (min-width: 1440px) {
 .paalam .max-w-\[1240px\],
 .paalam .max-w-\[1280px\] { max-width: min(90%, 128rem); }
}
.paalam-founder-photo{display:block;width:96px;height:96px;object-fit:cover}

@media (min-width: 1600px) {
 .paalam .max-w-\[1440px\] { max-width: min(90%, 128rem); }
}

/* Center the ICO notice between copyright and footer links on wide screens. */
.paalam-footer-bottom{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:1rem}
.paalam-footer-bottom>*{min-width:0}
.paalam-footer-ico{text-align:center}
@media(min-width:1280px){
 .paalam-footer-bottom{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
 .paalam-footer-links{justify-content:flex-end}
}

/* Scale type and rem-based spacing together on large displays, retaining browser zoom. */
html{font-size:clamp(1rem,calc(.55rem + .5vw),2rem)}
.paalam{--text-sm:.9375rem;--text-xs:.8125rem;overflow-wrap:anywhere}
.paalam .grid>*,.paalam .flex>*{min-width:0}
.paalam .paalam-rich-text{max-width:75ch;overflow-wrap:anywhere}
.paalam .max-w-\[880px\]{max-width:55rem}
.paalam .max-w-\[900px\]{max-width:56.25rem}
.paalam .max-w-\[980px\]{max-width:61.25rem}
.paalam-founder-photo{width:6rem;height:6rem}
[data-nav-toggle]{min-width:48px;min-height:48px;flex-shrink:0;align-items:center;justify-content:center;background:#0f2350;color:#fff;border-color:#0f2350}
[data-nav-toggle] svg{display:block;width:30px;height:30px;stroke-width:2.4;stroke-linecap:round;margin:auto}
[data-nav-toggle][aria-expanded="true"]{background:var(--lime,#b8db6e);color:var(--ink,#0f2350);border-color:transparent}
[data-nav-toggle]:focus-visible{outline:3px solid #0f2350;outline-offset:3px}
/* Opaque surfaces keep navigation readable over both photos and light sections. */
[data-nav] .paalam-header-bar,
[data-nav].is-scrolled .paalam-header-bar{background:#fff;border-color:#dce1e8;box-shadow:0 2px 10px rgba(15,35,80,.08);backdrop-filter:none;-webkit-backdrop-filter:none}
[data-nav-panel]{background:#fff;border-color:#dce1e8}
[data-nav-panel]{max-height:calc(100dvh - 6rem);overflow-y:auto}
[data-nav-panel] nav a{white-space:normal;min-height:44px}
.paalam :is(input,select,textarea){max-width:100%;font-size:1rem}

/* Give narrow phones room for headings, cards, founder details and action labels. */
@media(max-width:479px){
 .paalam h1{font-size:clamp(1.875rem,9vw,2.25rem);overflow-wrap:anywhere}
 .paalam main :is(.p-8,.p-10,.p-12){padding:1.25rem}
 .paalam main :is(.px-8,.px-10,.px-12,.px-14){padding-inline:1.25rem}
 .paalam main .inline-flex{max-width:100%;white-space:normal}
 .paalam main a.inline-flex{text-align:center;justify-content:center}
 .paalam-founder-photo{width:4.5rem;height:4.5rem}
 .paalam-footer-columns{column-gap:1.25rem}
}

/* Images follow their available width without stretching or overflowing. */
.paalam img{max-width:100%}
.paalam main img.w-full:not(.object-cover),
.paalam .paalam-rich-text img{height:auto}
.paalam main img.object-cover[class*="aspect-"]{height:auto}
/* Replace fixed-height service and story photographs with proportional crops. */
.paalam main img.h-\[240px\]{height:auto;aspect-ratio:4 / 3;object-fit:cover}
.paalam.page-template-about main img.h-\[240px\]{aspect-ratio:16 / 9}
.paalam main img.max-h-\[560px\]{height:auto;max-height:35rem;aspect-ratio:16 / 9;object-fit:cover}
.paalam main img[fetchpriority="high"]{height:auto}
.paalam header img,.paalam footer img{object-fit:contain}
.paalam .paalam-founder-photo{aspect-ratio:1;object-fit:cover}

/* Policy layout follows the PDF's left edge and hanging list indentation. */
.paalam-privacy{padding-inline:clamp(1.25rem,3vw,2.5rem);text-align:left}
.paalam-privacy .paalam-rich-text{max-width:none;line-height:1.7}
.paalam-privacy .paalam-rich-text :is(ul,ol){padding-inline-start:1.5em;margin-block:1em}
.paalam-privacy .paalam-rich-text li{padding-inline-start:.25em}
.paalam-privacy .paalam-rich-text li+li{margin-top:.5em}
.paalam-privacy .paalam-rich-text h3{font-size:1.125em;margin-top:1.5em}

/* Calendly owns the widget height after its content loads and changes steps. */
.paalam-calendly-widget{width:100%;min-width:0;border-radius:12px;background:#fff}
.paalam-calendly-widget iframe{display:block;width:100%;max-width:100%;border:0}

/* Origin section: wide paragraphs beneath the heading and landscape photograph. */
.paalam .paalam-about-origin-copy .paalam-rich-text{max-width:none}
@media(min-width:1024px){
 .paalam.page-template-about .paalam-about-origin img.h-\[240px\]{aspect-ratio:12 / 5}
}

/* Compact UI elements keep their shape while adjacent text takes the remaining space. */
.paalam-faq-toggle>div>h3{flex:1}
.paalam-faq-toggle>div>span{flex:none;display:inline-flex;align-items:center;justify-content:center;width:1rem;height:1rem;margin-inline:.25rem}
.paalam-industry-chips{grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr))}
.paalam-demo-metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
.paalam-demo-metrics>div{overflow-wrap:normal}
@media(max-width:479px){
 .paalam-demo-metrics{grid-template-columns:minmax(0,1fr)}
 .paalam-demo-metrics>div{display:flex;align-items:center;justify-content:space-between;gap:1rem}
 .paalam-demo-metrics>div>div:last-child{margin-top:0;white-space:nowrap}
 .paalam-audit-cta h2{font-size:clamp(1.75rem,8vw,2.25rem)}
 #story-list h2{font-size:clamp(1.5rem,7.5vw,1.875rem)}
}

/* Accent copy on light panels needs the same readable green as story metrics. */
.paalam main .text-teal{color:var(--lime-ink,#4a6a18)}
.paalam main .paalam-hover-button.text-teal:hover{color:var(--lime,#b8db6e)}
.paalam main .bg-ink .text-teal{color:var(--lime,#b8db6e)}
.paalam [data-demo-stages]>div{min-width:8.25rem;flex:1 1 8.25rem}
.paalam [data-demo-stage]{min-width:0;flex:1 1 auto}
@media(max-width:639px){.paalam [data-demo-stages]>div{min-width:0}}

/* Pricing labels and service actions align without competing with their copy. */
.paalam-plan-heading{display:grid;gap:.75rem}
.paalam-plan-heading>div:last-child{line-height:1.25;min-height:2.5em}
.paalam-service-card{display:flex;flex-direction:column}
.paalam-service-card>ul{margin-bottom:1.75rem}
.paalam-service-card>a{align-self:flex-start;margin-top:auto}
@media(min-width:768px){.paalam-featured-insight{grid-template-columns:minmax(0,1fr) auto}}

/* Arrow icons share the label's colour and stay centred even when labels wrap. */
.paalam .paalam-action-arrow{display:block;width:1.125em;height:1.125em;flex:none;align-self:center}
.paalam .paalam-arrow-slot{display:inline-flex;align-items:center;justify-content:center;align-self:center;flex:none;line-height:1}
.paalam .paalam-arrow-label{display:inline-flex;align-items:center;gap:.5em;vertical-align:middle;max-width:100%}
.paalam .paalam-arrow-label>span{min-width:0}

/* Compact service listings can place their decorative action icon before the copy. */
.paalam-button-icon-before{order:-1;margin-inline-start:0}

/* Tint the entire footer logo and tagline lime green. */
.paalam-footer-logo{filter:brightness(0) saturate(100%) invert(84%) sepia(33%) saturate(584%) hue-rotate(35deg) brightness(96%) contrast(88%)}
/* Full-width at the top; a compact floating header after scrolling. */
[data-nav]{--paalam-header-width:min(100%,1240px);padding:0;transition:padding .25s ease}
[data-nav] .paalam-header-bar{width:100%;max-width:100%;border-radius:0;padding:16px max(1.5rem,calc((100% - 1240px)/2 + 1.5rem));gap:16px;transition:width .25s ease,padding .25s ease,border-radius .25s ease,box-shadow .25s ease}
[data-nav]:not(.is-scrolled) .paalam-header-bar{border-color:transparent;box-shadow:none}
[data-nav].is-scrolled{padding:12px 0 0}
[data-nav].is-scrolled .paalam-header-bar{width:var(--paalam-header-width);padding:10px 1.5rem;border-radius:16px}
/* Use the same wide-screen width and inner gutters as the page containers. */
@media(min-width:1440px){
 [data-nav]{--paalam-header-width:min(90%,128rem)}
 [data-nav]:not(.is-scrolled) .paalam-header-bar{padding-inline:calc((100% - min(90%,128rem))/2 + 1.5rem)}
}
/* Keep navigation and its call to action intact as root type scales on wide screens. */
[data-nav] .paalam-header-bar>nav,
[data-nav] .paalam-header-bar>div{flex-shrink:0}
[data-nav] .paalam-header-bar>div>a{white-space:nowrap}
[data-nav] .paalam-header-brand{padding-left:0}
[data-nav].is-scrolled .paalam-header-bar{box-shadow:0 4px 18px rgba(15,35,80,.14)}
@media(max-width:1279px){
 [data-nav].is-scrolled{padding:8px 12px 0}
 [data-nav] .paalam-header-bar{padding:12px 24px;gap:12px}
 [data-nav].is-scrolled .paalam-header-bar{padding:8px 12px;border-radius:12px}
 [data-nav-toggle]{display:inline-flex;width:44px;height:44px;min-width:44px;min-height:44px;padding:7px;margin:0;border-radius:8px;background:transparent;color:#0f2350;border-color:transparent}
 [data-nav-toggle] svg{width:28px;height:28px;flex-shrink:0;stroke-width:2.2}
 [data-nav-toggle]:focus-visible{background:var(--lime-soft,#f1f7dc);color:var(--lime-ink,#4a6a18);border-color:transparent}
 [data-nav-toggle]:active,[data-nav-toggle][aria-expanded="true"]{background:var(--lime,#b8db6e);color:var(--ink,#0f2350);border-color:transparent}
}
/* Touch taps must not leave a sticky hover highlight after the menu closes. */
@media(max-width:1279px) and (hover:hover) and (pointer:fine){
 [data-nav-toggle]:hover:not([aria-expanded="true"]){background:var(--lime-soft,#f1f7dc);color:var(--lime-ink,#4a6a18);border-color:transparent}
}
@media(prefers-reduced-motion:reduce){[data-nav],[data-nav] .paalam-header-bar,[data-nav] .paalam-header-logo{transition:none}}

/* The expanded menu has a clear close control without changing button size. */
[data-nav-toggle] .paalam-menu-close{display:none}
[data-nav-toggle][aria-expanded="true"] .paalam-menu-lines{display:none}
[data-nav-toggle][aria-expanded="true"] .paalam-menu-close{display:block}