/*!
Theme Name: PM Space
Theme URI: https://thepm.space/
Author: IanMP
Author URI: https://profiles.wordpress.org/ianmp/
Description: Custom standalone theme for PM Space. No parent theme required.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: pmspace-theme
*/

/* ==========================================================================
   1. RESET & BOX MODEL
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Prevent images from overflowing their container and being stretched by
   flex/grid parents that would otherwise force height: 100% on them.
   Applies on the front-end; the block editor has its own equivalent reset. */
img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================================
   2. COLOUR TOKENS  (defaults — overridden at runtime by Customizer inline CSS)
   ========================================================================== */

:root {
    /* ── 9-colour brand palette
       These mirror Kadence's --global-palette* so existing blocks keep working.
       Customizer outputs overrides to these vars; semantic vars derive from them. */
    --global-palette1: #B7472A;  /* Terracotta — primary brand */
    --global-palette2: #FFB416;  /* Yellow — secondary */
    --global-palette3: #2C5980;  /* Dark Blue — accent */
    --global-palette4: #2D3748;  /* Near-black — body text / headings */
    --global-palette5: #4A5568;  /* Dark Gray */
    --global-palette6: #718096;  /* Medium Gray */
    --global-palette7: #EDF2F7;  /* Pale Gray — subtle backgrounds */
    --global-palette8: rgba(237,242,247,0.8);  /* Blue Shade — shaded backgrounds (80% of #EDF2F7) */
    --global-palette9: #FFFFFF;  /* White */

    /* ── Semantic theme vars — derive from palette above ── */
    --pmspace-brand:        var(--global-palette1);
    --pmspace-body-text:    var(--global-palette4);
    --pmspace-body-bg:      var(--global-palette9);
    --pmspace-link:         var(--global-palette1);
    --pmspace-link-hover:   var(--global-palette2);
    --pmspace-heading:      var(--global-palette3);
    --pmspace-header-bg:    var(--global-palette9);
    --pmspace-header-text:  var(--global-palette4);
    --pmspace-footer-bg:    #54595f;
    --pmspace-footer-text:  var(--global-palette9);

    /* ── Layout ── */
    --pmspace-content-width: 1180px;
    --pmspace-sidebar-width: 300px;
    --pmspace-logo-height:   75px;

    /* ── Kadence Blocks layout integration ──
       Kadence's per-block CSS uses these vars to set column max-width and
       horizontal padding.  Without them, blocks fall back to 1180px width
       and 0px edge padding (wrong on our custom theme). */
    --global-content-width:        var(--pmspace-content-width);
    --global-content-edge-padding: 24px;
}

/* ==========================================================================
   2b. BLOCK EDITOR COMPATIBILITY
   ========================================================================== */

/*
 * Alignment utility classes — generated by WordPress via global styles, but
 * declared here too so theme specificity never accidentally overrides them.
 * Kadence Blocks, core blocks, and the Post Title block all rely on these.
 */
.has-text-align-left   { text-align: left;   }
.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right;  }

/* Core block alignment helpers */
.alignleft  { float: left;  margin-right: 1.5em; margin-bottom: 0.5em; }
.alignright { float: right; margin-left: 1.5em;  margin-bottom: 0.5em; }
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
 * Responsive embeds (iframes, videos) — required by add_theme_support('responsive-embeds').
 * Kadence embed blocks rely on this to maintain aspect-ratio on resize.
 */
.wp-block-embed__wrapper {
    position: relative;
}

/* ==========================================================================
   2c. VANILLA TYPEWRITER (home-page heading)
   ========================================================================== */

/*
 * Paragraph wrapper: Pathway Gothic One, 76 px desktop, responsive below.
 * The static "THE SPACE TO " text inherits this colour (palette3 = Dark Blue).
 */
.pmspace-typed-heading {
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: clamp( 2.75rem, 6vw, 4.75rem ); /* 4.75rem ≈ 76px */
    text-transform: uppercase;
    text-align: center;
    color: var(--global-palette3); /* Dark Blue — static text */
    line-height: 1.1;
    margin: 0;
}

/* Animated span — colour for the cycling words */
.pmspace-typed {
    color: var(--global-palette2); /* Yellow */
}

/* Blinking cursor painted via pseudo-element; colour is Yellow (palette2) */
.pmspace-typed::after {
    content: '|';
    color: var(--global-palette2); /* Yellow */
    animation: pmspace-blink 0.7s step-end infinite;
    margin-left: 2px;
}

@keyframes pmspace-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ==========================================================================
   3. SITE LAYOUT
   ========================================================================== */

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--pmspace-body-bg);
}

/* Outer page wrapper — id="page" retained for landing-page JS fade-in */
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Site header ── */
#masthead {
    width: 100%;
    background-color: var(--pmspace-header-bg); /* #FFFFFF */
    border-bottom: 3px solid var(--global-palette2); /* Yellow accent line */
    position: sticky;
    top: 0;
    z-index: 200;
    transition: background-color 0.35s ease;
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--pmspace-content-width);
    margin: 0 auto;
    padding: 0.2em 24px;
    gap: 16px;
}

.site-branding {
    flex-shrink: 0;
}

/* Constrain logo height; transition lets it shrink smoothly when scrolled */
.custom-logo {
    max-height: var(--pmspace-logo-height, 75px);
    width: auto;
    display: block;
    transition: max-height 0.35s ease;
}

/* ── Scrolled state — JS adds .scrolled to #masthead after 80 px ── */
#masthead.scrolled {
    background-color: rgba(255, 255, 255, 0.8);
}

#masthead.scrolled .custom-logo {
    max-height: calc(var(--pmspace-logo-height) * 0.6); /* 60% ≈ 45 px */
}

/* ── PM Space Standard Buttons ───────────────────────────────────────────────
 * Four variants: primary / secondary × 16 px standard / 12 px small.
 * Colours: --pmspace-btn-* CSS vars (Customizer → Buttons).
 * Radius:  --pmspace-btn-radius (Customizer → Buttons, default 8px).
 * Icons:   <span class="pm-icons pm-icons-xxx" aria-hidden="true"></span>
 *          inside the element — flex layout centres and gaps it automatically.
 * Per-button variation: target the element's unique ID in the plugin stylesheet.
 *
 * SPECIFICITY NOTE
 * Appearance rules use doubled selectors (.pms-btn-primary.pms-btn-primary)
 * giving specificity 0,2,0.  Any single modifier class has 0,1,0, so it can
 * override LAYOUT properties (margin, display, width) freely but can NEVER
 * accidentally override colours, shadows, or :hover states.  To intentionally
 * override appearance use an ID selector (#my-btn) or add a doubled class.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Shared layout base — single-class (0,1,0) so it can be overridden */
.pms-btn-primary,
.pms-btn-secondary,
.pms-btn-primary-sm,
.pms-btn-secondary-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.2;
    border-radius: var(--pmspace-btn-radius, 8px);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Disabled state — single-class is fine, disabling is additive */
.pms-btn-primary:disabled,   .pms-btn-primary[disabled],
.pms-btn-secondary:disabled, .pms-btn-secondary[disabled],
.pms-btn-primary-sm:disabled,   .pms-btn-primary-sm[disabled],
.pms-btn-secondary-sm:disabled, .pms-btn-secondary-sm[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Appearance rules at doubled specificity (0,2,0) ──────────────────────── */

/* Primary — 16 px */
.pms-btn-primary.pms-btn-primary {
    font-size: 16px;
    padding: 8px 18px;
    background-color: var(--pmspace-btn-primary-bg, #B7472A);
    color: var(--pmspace-btn-primary-text, #FFFFFF);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.pms-btn-primary.pms-btn-primary:hover,
.pms-btn-primary.pms-btn-primary:focus-visible {
    background-color: var(--pmspace-btn-primary-hover-bg, #FFB416);
    color: var(--pmspace-btn-primary-hover-text, #2C5980);
    box-shadow: none;
    text-decoration: none;
}

/* Secondary — 16 px */
.pms-btn-secondary.pms-btn-secondary {
    font-size: 16px;
    padding: 8px 18px;
    background-color: var(--pmspace-btn-secondary-bg, #2C5980);
    color: var(--pmspace-btn-secondary-text, #ffffff);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
}
.pms-btn-secondary.pms-btn-secondary:hover,
.pms-btn-secondary.pms-btn-secondary:focus-visible {
    background-color: var(--pmspace-btn-secondary-hover-bg, #EDF2F7);
    color: var(--pmspace-btn-secondary-hover-text, #2C5980);
    box-shadow: none;
    text-decoration: none;
}

/* Primary small — 14 px */
.pms-btn-primary-sm.pms-btn-primary-sm {
    font-size: 14px;
    padding: 8px 12px;
    background-color: var(--pmspace-btn-primary-bg, #B7472A);
    color: var(--pmspace-btn-primary-text, #ffffff);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
	border-radius:3px;
}
.pms-btn-primary-sm.pms-btn-primary-sm:hover,
.pms-btn-primary-sm.pms-btn-primary-sm:focus-visible {
    background-color: var(--pmspace-btn-primary-hover-bg, #FFB416);
    color: var(--pmspace-btn-primary-hover-text, #2C5980);
    box-shadow: none;
    text-decoration: none;
}

/* Secondary small — 14 px */
.pms-btn-secondary-sm.pms-btn-secondary-sm {
    font-size: 14px;
    padding: 8px 12px;
    background-color: var(--pmspace-btn-secondary-bg, #2C5980);
    color: var(--pmspace-btn-secondary-text, #ffffff);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
	border-radius:3px;
}
.pms-btn-secondary-sm.pms-btn-secondary-sm:hover,
.pms-btn-secondary-sm.pms-btn-secondary-sm:focus-visible {
    background-color: var(--pmspace-btn-secondary-hover-bg, #EDF2F7);
    color: var(--pmspace-btn-secondary-hover-text, #2C5980);
    box-shadow: none;
    text-decoration: none;
}

/* START WP button compatibility with primary button */
.wp-block-button .wp-block-button__link {
    @apply-to: .pmspace-btn-primary;
}

/*	Map outline WP Buttons to PM Primary buttons */
.wp-block-button .wp-block-button__link {
    background: var(--pmspace-btn-primary-bg, #B7472A);
    color: var(--pmspace-btn-primary-text, #ffffff);
    padding: 8px 18px;
    border-radius: var(--pmspace-btn-radius, 8px);
    font-weight: var(--pms-btn-weight);
    text-decoration: none;
    display: inline-flex;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
}

/*	Map outline WP Buttons to PM Secondary buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
    background: var(--pmspace-btn-secondary-bg, #2C5980);
    color: var(--pmspace-btn-secondary-text, #ffffff);
    padding: 8px 16px;
    border-radius: var(--pmspace-btn-radius, 8px);
    font-weight: var(--pms-btn-weight);
    text-decoration: none;
    display: inline-flex;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
}

/* Hover */
.wp-block-button .wp-block-button__link:hover {
    background: var(--pmspace-btn-primary-hover-bg);
    color: var(--pmspace-btn-primary-hover-text);
    box-shadow: none;
}
/* END WP button compatibility */

/* Legacy .button alias — primary appearance, kept for backward compatibility */
.button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    padding: 8px 18px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: var(--pmspace-btn-radius, 8px);
    background-color: var(--pmspace-btn-primary-bg, #B7472A);
    color: var(--pmspace-btn-primary-text, #ffffff);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.button:hover {
    background-color: var(--pmspace-btn-primary-hover-bg, #FFB416);
    color: var(--pmspace-btn-primary-hover-text, #2C5980);
    box-shadow: none;
    text-decoration: none;
}

/* 'Restricted Access' notice HOVER */
.pm-locked-notice:hover {
	border-color: var(--global-palette2)!important;
	background-color: var(--global-palette9)!important;
	transition: background-color 0.2s ease, color 0.2s ease!important;
}

/* ── Scroll-to-top button (fixed, bottom-right) ── */
/* Icon is a stroke-only outlined square — no background fill or circle */
.pmspace-scroll-top {
    position: fixed;
    bottom: 72px;
    right: 14px;
    z-index: 500;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--global-palette1);
    font-size: 2.0em;
    line-height: 1;
    /* Slides below viewport by default; JS adds .visible to reveal it */
    transform: translateY(calc(100% + 48px));
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease, color 0.2s ease;
}

.pmspace-scroll-top.visible {
    transform: translateY(0);
    opacity: 1;
}

.pmspace-scroll-top:hover,
.pmspace-scroll-top:focus-visible {
    color: var(--global-palette2); /* Yellow on hover */
    outline: none;
	transform: scale(1.08);
}

/* Overlay nav: body scroll lock when mobile drawer is open */
body.pms-menu-open {
    overflow: hidden;
    touch-action: none;
}

/* Overlay nav: close button and backdrop — hidden on desktop */
#pms-nav-close,
#pms-nav-backdrop {
    display: none;
}

/* Hamburger button — visible only on mobile */
#menu-toggle {
    display: none;
    background: var(--global-palette3);
    border: 1px solid var(--pmspace-header-text);
    color: var(--global-palette9);
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 4px;
    line-height: 1;
    flex-shrink: 0;
}

#menu-toggle .toggle-bar {
    display: block;
    width: 24px;
    height: 4px;
    background: currentColor;
    margin: 4px 0;
    transition: transform 0.2s, opacity 0.2s;
}

/* ── Content area: main + optional sidebar ── */
#content.site-content {
    display: flex;
    flex-direction: row;
    flex: 1;
    width: 100%;
    /* No global max-width here: each layout variant controls its own width.
       Kadence blocks output per-block CSS using --global-content-width. */
}

/* Main content column */
#primary.site-main {
    flex: 1;
    min-width: 0; /* prevents flex blowout */
}

/* Sidebar layout: constrain the content+sidebar area to a max width.
   Course/lesson pages use this — content and sidebar sit side-by-side. */
#content.site-content.has-sidebar {
    max-width: var(--pmspace-content-width);
    margin: 0 auto;
    padding: 24px;
    gap: 32px;
}

/* Sidebar column */
#secondary.widget-area {
    width: var(--pmspace-sidebar-width, 300px);
    flex-shrink: 0;
}

/* Course template — wider sidebar to accommodate course detail widgets */
.pms-course-layout #secondary.widget-area {
    width: 350px;
}

/* Full-width layout (no sidebar): Kadence Row Layout blocks fill the viewport.
   The blocks' inner .kt-row-column-wrap use max-width via --global-content-width. */
#content.site-content.no-sidebar {
    padding: 0;
    margin: 0;
}

#content.site-content.no-sidebar #primary {
    width: 100%;
}

/* Page/post title in no-sidebar pages: constrain to content width with padding.
   Kadence-block content inside .entry-content is NOT constrained here —
   each block manages its own max-width via --global-content-width. */
.no-sidebar .entry-header {
    max-width: var(--pmspace-content-width);
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 24px 0;
    box-sizing: border-box;
}

/* ── Site footer ── */
#colophon {
    width: 100%;
    margin-top: auto;
    background-color: var(--pmspace-footer-bg);
    color: var(--pmspace-footer-text);
}

/* Footer inner: constrained content area */
.pms-footer-inner {
    max-width: var(--pmspace-content-width, 1180px);
    margin: 0 auto;
    padding: 12px 12px 12px;
    box-sizing: border-box;
}

/* ── Footer Row 1: 4-column grid (50 % + 20 % + 20 % + 20 %) ── */
.pms-footer-row-1 {
    display: grid;
    grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr));
    gap: 16px 32px;
    align-items: start;
}

/* Brand column */
.pms-footer-logo {
    display: block;
	margin: auto;
    width: 150px;
    height: 105px;
    object-fit: contain;
}

.pms-footer-tagline {
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 16px;
    color: var(--pmspace-footer-text);
    margin: 10px 0 0;
}

/* Column headings */
.pms-footer-heading {
    font-family: 'Pathway Gothic One', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--pmspace-footer-text);
    margin: 0 0 4px;
}

/* Navigation lists */
.pms-footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pms-footer-links li {
    margin-bottom: 2px;
}

.pms-footer-links a {
    color: var(--pmspace-footer-text);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}

.pms-footer-links a:hover,
.pms-footer-links a:focus {
    color: var(--global-palette2);
    text-decoration: underline;
}

/* ── Divider line between rows ── */
.pms-footer-divider {
    border: none;
    border-top: 2px solid var(--global-palette2);
    margin: 12px 0;
    width: 100%;
}

/* ── Footer Row 2: 2-column grid (60 % + 40 %) ── */
.pms-footer-row-2 {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 16px;
    align-items: center;
}

/* Copyright notices */
.pms-footer-col-copyright p {
    font-size: 10px;
    color: var(--global-palette7);
    margin: 0 0 3px;
    line-height: 1.5;
}

.pms-footer-col-copyright p:last-child {
    margin-bottom: 0;
}

/* Trust icons */
.pms-footer-col-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.pms-footer-col-icons .pm-icons {
    font-size: 24px;
    color: var(--global-palette9);
    line-height: 1;
    display: block;
}

/* ==========================================================================
   4. ENTRY HERO — Page title banner ("Post Title layout: Above Content")
   Matches Kadence's section.entry-hero structure and measured styles.
   Background image on #page shows through when .has-page-bg-image is active.
   ========================================================================== */

/* Page background image — applied to #page (our .site wrapper) when set.
   Transparent body ensures the image is visible through the page wrapper. */
.has-page-bg-image body,
.has-page-bg-image {
    background-color: transparent;
}

#page {
    background-color: var(--pmspace-body-bg); /* white by default */
    min-height: 100vh;
}

.has-page-bg-image #page {
    background-color: transparent;
    background-image: var(--pmspace-bg-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Hero banner */
.entry-hero {
    width: 100%;
}

.entry-hero-container-inner {
    background-color: var(--global-palette7); /* Pale Gray — solid default */
    position: relative;
}

/* When page has a background image the hero is transparent so image shows */
.has-page-bg-image .entry-hero-container-inner {
    background-color: transparent;
}

.hero-section-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* rgba overlay can darken the bg image if needed — transparent by default */
    background: transparent;
}

.hero-container {
    max-width: var(--pmspace-content-width);
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

/* Entry header inside hero: vertically centred, min 100 px tall */
.entry-hero .entry-header {
    display: flex;
    align-items: center;
    min-height: 100px;
    padding: 0;
}

/* Title text inside hero: Dark Blue (palette3), large.
   width:100% is essential — without it the h1 is sized to its content as a
   flex item, so text-align:center (has-text-align-center) has no visual
   effect even though the class is present (issue #2). */
.entry-hero .entry-title {
    width: 100%;
    text-align: center;
    color: var(--global-palette3);
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* ==========================================================================
   5. NAVIGATION
   ========================================================================== */

/* Nav sits to the right inside the header flex row */
.main-navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.main-navigation ul {
/*    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 14px; */
    display: flex;
    line-height: 1.8;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.main-navigation ul li {
    position: relative;
}

.main-navigation ul li a {
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 14px;
    display: flex;
    align-items: center;
	margin: 2px;
	gap: 4px;
    padding: 8px 12px;
    text-decoration: none;
    white-space: nowrap;
    color: var(--global-palette3);
    background-color: transparent;
	border-radius:2px;

}

.main-navigation ul li a:hover {
    color: var(--global-palette3);
    background-color: var(--global-palette2);
}

/* Current/active page — top-level items and their ancestors */
.main-navigation ul > li.current-menu-item > a,
.main-navigation ul > li.current-menu-ancestor > a,
.main-navigation ul > li.current-page-ancestor > a {
    background-color: var(--global-palette1);
    color: var(--global-palette9);
}

/* ── Dropdown ── */
.main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    flex-direction: column;
    background: var(--global-palette3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
}

/*
 * Transparent bridge between parent link and dropdown.
 * Prevents the hover state from breaking when the cursor
 * moves diagonally from the nav item into the submenu.
 */
.main-navigation ul li::after {
    content: '';
    display: block;
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    height: 6px;
}

.main-navigation ul ul li {
    width: 100%;
}

.main-navigation ul ul li a {
    margin: 0;
    padding: 8px 12px;
    color: var(--global-palette9);
    border-bottom: 1px solid var(--global-palette9);
}

.main-navigation ul ul li:last-child > a {
    border-bottom: none;
}

.main-navigation ul ul li a:hover {
    color: var(--global-palette3);
    background-color: var(--global-palette2);
}

/* Active sub-menu item */
.main-navigation ul ul li.current-menu-item > a {
    background-color: var(--global-palette1);
    color: var(--global-palette9);
}

/* Triangle indicators for items that have a sub-menu.
 * ▼ (down) on top-level; ► (right) on submenu items.
 * margin-left:auto pushes the chevron to the right edge of the flex <a>.  */
.main-navigation ul > li.menu-item-has-children > a::after {
    content: '▼';
    margin-left: auto;
    padding-left: 6px;
    font-size: 0.6em;
    line-height: 1;
}

.main-navigation ul ul li.menu-item-has-children > a::after {
    content: '►';
    margin-left: auto;
    padding-left: 6px;
    font-size: 0.6em;
    line-height: 1;
}

/*
 * Third-level dropdowns: fly out to the RIGHT of the level-2 parent item.
 * Override top/left set by the base ul ul rule above.
 */
.main-navigation ul ul ul {
    top: 0;
    left: 100%;
    margin-left: -1px; /* 1px overlap prevents gap when moving cursor right */
    border-top: none;
}

/*
 * Level-2 items have their sub-menu to the RIGHT, not below.
 * Override the downward hover bridge with a rightward one.
 */
.main-navigation ul ul li::after {
    top: 0;
    bottom: 0;
    left: auto;
    right: -6px;
    width: 6px;
    height: auto;
}

/* Show on CSS hover (desktop) or when JS sets .is-open */
.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul,
.main-navigation ul li.is-open > ul {
    display: flex;
}

/* Sub-menu toggle button (injected by navigation.js) — desktop: hidden */
.sub-menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 12px;
    color: inherit;
    flex-shrink: 0;
}

/* ── Menu item icons (pm-icons prepended to link label) ── */
.main-navigation .menu-item-icon {
    margin-right: 0.15em;
    vertical-align: -0.1em;
    font-size: 1.4em;
    font-style: normal;
}

.main-navigation ul ul .menu-item-icon {
    font-size: 1.4em;
    vertical-align: -0.05em;
}

/* Firefox vertical-align fix for menu icons */
@supports (-moz-appearance: none) {
    .main-navigation .menu-item-icon {
        vertical-align: sub;
    }
}

/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

body {
    font-family: 'Inter', Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--pmspace-body-text);
}

/* PMS HEADING SCALE
 * ┌─────────────────────────────────────────┬───────────────────────────────┬──────────────────────┐
 * │ Usage                                   │ Default (h element)           │ CSS class override   │
 * ├─────────────────────────────────────────┼───────────────────────────────┼──────────────────────┤
 * │ Page / section title                    │ h1  24–36px                   │ —                    │
 * │ Sub-section heading                     │ h2  20–28px                   │ —                    │
 * │ Content / card heading                  │ h3  18–22px                   │ —                    │
 * │ h4–h6                                   │ browser default (em-relative) │ —                    │
 * │ Hero / splash title                     │ —                             │ .pms-heading-hero    │
 * │ Prominent section / feature heading     │ —                             │ .pms-heading-xl      │
 * │ Small / supporting heading              │ —                             │ .pms-heading-sm      │
 * └─────────────────────────────────────────┴───────────────────────────────┴──────────────────────┘
 * Add exception classes in the block's "Additional CSS class(es)" field.
 * Exception classes use !important so they override block-level inline font-size values. */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', Helvetica, sans-serif;
    line-height: 1.3;
    margin-top: 0;
    color: var(--pmspace-heading);
}

h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); }      /* 24px → 36px */
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }     /* 20px → 28px */
h3 { font-size: clamp(1.125rem, 2.5vw, 1.375rem); } /* 18px → 22px */

/* Exception heading classes — !important overrides block inline styles */
.pms-heading-hero { font-size: clamp(2.25rem, 6vw, 4rem) !important; }    /* 36px → 64px */
.pms-heading-xl   { font-size: clamp(1.75rem, 4vw, 2.75rem) !important; } /* 28px → 44px */
.pms-heading-sm   { font-size: clamp(0.875rem, 2vw, 1rem) !important; }   /* 14px → 16px */

a {
    color: var(--pmspace-link);
}

a:hover {
    color: var(--pmspace-link-hover);
}

/* homepage strapline */
.pms-strapline {
	text-shadow: 1px 1px 2px #646a6f;
}

/* ==========================================================================
   6. COMPONENTS
   ========================================================================== */

/* Logout toast — appears on active page after logout */
.fe-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--pmspace-brand);
    color: #fff;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-size: 18px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}
.fe-toast.show { opacity: 1; }
.fe-toast.hide  { opacity: 0; }

/* Footer links */
.site-footer .wp-block-list a:link {
    text-decoration: none;
    color: var(--pmspace-footer-text);
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {

    /* ── Layout ── */
    #content.site-content.has-sidebar {
        padding: 16px;
        gap: 24px;
    }

    .pms-course-layout #secondary.widget-area {
        width: 280px;
    }

    /* ── Footer ── */
    .pms-footer-row-1 {
        gap: 12px 20px;
    }
}

@media (max-width: 768px) {

    /* ── Header ── */
    .site-header-inner {
        flex-wrap: wrap;
        padding: 0.4em 16px;
    }

    #menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 8px;
    }

    /* Nav: full-screen overlay drawer — slides in from the left */
    #site-navigation {
        position: fixed;
        top: 0;
        left: 0;
        width: min(320px, 88vw);
        height: 100vh;
        height: 100dvh;
        background: var(--pmspace-body-bg);
        z-index: 10000;
        overflow-y: auto;
        padding: 56px 0 24px;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
        display: block;
    }

    #site-navigation.is-open {
        transform: translateX(0);
    }

    /* Backdrop: dims the page behind the open drawer */
    #pms-nav-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 9999;
        cursor: pointer;
    }

    #pms-nav-backdrop.is-visible {
        display: block;
    }

    /* ✕ close button pinned to top-right of the drawer */
    #pms-nav-close {
        display: block;
        position: absolute;
        top: 12px;
        right: 12px;
        background: none;
        border: none;
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        color: var(--pmspace-body-text);
        padding: 4px 8px;
        border-radius: 4px;
    }

    #pms-nav-close:hover {
        color: var(--global-palette2);
        background: rgba(0, 0, 0, 0.05);
    }

    .main-navigation {
        width: 100%;
        justify-content: flex-start;
    }

    .main-navigation ul {
        flex-direction: column;
        align-items: stretch;   /* overrides desktop center; fills full drawer width */
        gap: 0;
        width: 100%;
    }

    .main-navigation ul li {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }

    .main-navigation ul li a {
        flex: 1;
        padding: 12px 16px;
        text-align: left;
        color: var(--pmspace-body-text);
    }

    /* Active item: keep brand highlight but ensure readable contrast */
    .main-navigation ul > li.current-menu-item > a,
    .main-navigation ul > li.current-menu-ancestor > a,
    .main-navigation ul > li.current-page-ancestor > a {
        background-color: var(--pmspace-brand);
        color: var(--global-palette9);
    }

    /* Show sub-menu toggle buttons on mobile */
    .sub-menu-toggle {
        display: flex;
        align-items: center;
        padding: 12px;
        color: var(--pmspace-body-text);
    }

    /* Rotate arrow to ▲ when the sub-menu is open */
    .sub-menu-toggle[aria-expanded="true"] span {
        display: inline-block;
        transform: rotate(180deg);
    }

    /* Hide the CSS ▼/► triangles — the injected toggle button replaces them */
    .main-navigation ul li.menu-item-has-children > a::after {
        display: none;
    }

    /* Submenus: static/inline on mobile, tinted to show hierarchy */
    .main-navigation ul ul {
        display: none;
        position: static;
        width: 100%;
        box-shadow: none;
        border-top: none;
        border-left: 3px solid var(--pmspace-brand);
        background: rgba(44, 89, 128, 0.07); /* subtle palette3 tint */
        padding: 0;
    }

    /* Level 2 links: indented, body text colour (overrides desktop white) */
    .main-navigation ul ul li a {
        padding-left: 32px;
        color: var(--pmspace-body-text);
        background-color: transparent;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    /* Level 3 links: deeper indent, slightly stronger tint */
    .main-navigation ul ul ul {
        background: rgba(44, 89, 128, 0.12);
        border-left: 3px solid var(--global-palette2);
    }

    .main-navigation ul ul ul li a {
        padding-left: 48px;
    }

    /* On mobile, only JS .is-open opens sub-menus — disable hover AND focus-within */
    .main-navigation ul li:hover > ul,
    .main-navigation ul li:focus-within > ul {
        display: none;
    }

    .main-navigation ul li.is-open > ul {
        display: flex;
    }

    /* ── Content ── */
    #content.site-content {
        flex-direction: column;
        padding: 16px;
    }

    #secondary.widget-area {
        width: 100%;
    }

    /* ── Footer ── */
    .pms-footer-row-1 {
        grid-template-columns: 1fr 1fr;
        gap: 12px 16px;
    }

    .pms-footer-row-2 {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .pms-footer-col-icons {
        justify-content: center;
    }
}

/* ==========================================================================
   8. BREADCRUMBS
   ========================================================================== */

/* Wrapper */
.pm-breadcrumb {
    font-size: 12px;
    /* margin: 4px 0; */
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* gap: 2px; */
}

/* Links */
.pm-breadcrumb-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

/* Active links (home, parents) */
.pm-breadcrumb-link.pm-breadcrumb-home,
.pm-breadcrumb-link.pm-breadcrumb-parent {
    color: var(--pmspace-link); /* matches your theme palette */
}

/* Hover effect */
.pm-breadcrumb-link:hover {
    color: var(--pmspace-link-hover);
}

/* Current page */
.pm-breadcrumb-current {
    font-weight: 400;
    color: inherit;
}

/* Icons */
.pm-breadcrumb-icon {
    font-size: 8px;      /* match text size */
    line-height: 0.8;
    display: inline-block;
    vertical-align: middle;
    color: currentColor;  /* inherits surrounding text colour */
}

.pms-access-denied {
	height:100%;
	padding-top:18px;
	background-color:rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center; /* still useful for multi-line text */
}

/*	==========================================================================
	9. PM ICON box
	========================================================================== */

.pm-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    font-size: 48px;	 /* controls everything */
    background-color: var(--global-palette1);
	border: 3px inherit;
    border-radius: 10px;
    color: var(--global-palette9);
	/* box-shadow: 1px 1px 2px 1px #95a5a6; */
	box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.3);
    text-decoration: none;
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
	z-index: 10;
}
.pm-icon-box:hover { transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease; }


.pm-icon-box .pm-icons {
    font-size: 1em;	/* matches icon box */
    line-height: 1;
    display: block;
}


.pm-icon-box.pm-icon-small {
    width: 2.0em;
    height: 2.0em;
	font-size:32px;
}
.pm-icon-box.pm-icon-alt.pm-icon-small {
    width: 2.0em;
    height: 2.0em;
	font-size:32px;
    background-color: var(--global-palette3);
}

/*	==========================================================================
	10. PRICING TABLE AND KNOWLEDGE BASE
	========================================================================== */

.pms-pricing-card, .pms-kb-card, .ps-toolkit-card {
    position: relative;
	border-radius: 25px;
    opacity: 0;
    transform: translateY(40px);
    animation: pmCardFloat 0.6s ease-out forwards;
	/* transition: box-shadow 0.4s ease;
	box-shadow: 1px 1px 10px 1px #a3a7ab; */
    transform: translateY(40px);
}
/* Stagger timing for 3 pricing / kb cards */
.pms-pricing-card.card-1.in-view, .pms-kb-card.card-pma, .ps-toolkit-card.card-1 { animation-delay: 0.0s; }
.pms-pricing-card.card-2.in-view, .pms-kb-card.card-pmo, .ps-toolkit-card.card-2 { animation-delay: 0.4s; }
.pms-pricing-card.card-3.in-view, .pms-kb-card.card-pmc, .ps-toolkit-card.card-3 { animation-delay: 0.8s; }
.ps-toolkit-card.card-4 { animation-delay: 1.2s; }
.ps-toolkit-card.card-5 { animation-delay: 1.6s; }

@keyframes pmCardFloat {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pressed state — card hover triggers badge shadow */
.pms-pricing-card:hover .pm-popular-badge {
    transform: translateX(-50%) translateY(2px) scale(0.9);	/* Squash'em slightly! */
	box-shadow: 1px 1px 10px 1px #a3a7ab;
    transition: box-shadow 0.4s ease;
}

/* Float-in badge */
/* Positioning relative to the pricing card */
.pm-popular-badge {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%) translateX(-40px);
    display: inline-block;

    background: #d35400;
    color: #fff;
    padding: 8px 18px;
    font-weight: 900;
    font-size: 1.2rem;
	font-style:italic;
    letter-spacing: 0.5px;
	box-shadow: none;
    transition: box-shadow 0.4s ease;

    border-top-left-radius: 18px;
    border-bottom-right-radius: 18px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;

    opacity: 0;
    /* animation: pmBadgeSlide 0.35s ease-out 0.6s forwards; */
}

/* Badge animates only when parent card is in view */
.pms-pricing-card.in-view .pm-popular-badge {
    animation: pmBadgeSlide 0.35s ease-out forwards;
    animation-delay: 0.8s; /* after card float */
}

/* Stagger the two badges */
.card-2.in-view .pm-popular-badge { animation-delay: 1.0s; }
.card-3.in-view .pm-popular-badge { animation-delay: 1.6s; }

.pm-popular-badge.best-value {
    background: #27ae60; /* green */
}

/* Slide-in animation */
@keyframes pmBadgeSlide {
    from {
        opacity: 0;
        transform: translateX(-50%) translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateX(0);
    }
}
/* SHADOW settings for Pricing & KB cards */
.pms-pricing-card, .pms-kb-card, .ps-info-card { box-shadow:1px 1px 10px 1px #a3a7ab; transition: box-shadow 0.4s ease; }
/* HOVER SHADOW settings for Pricing & KB cards */
.pms-pricing-card:hover, .pms-kb-card:hover, .ps-info-card:hover {box-shadow:none; transition: box-shadow 0.4s ease; }

/* Specific behaviour for Practice Space icons */
.ps-toolkit-card:hover .pm-icon-box {
	background-color: #fff;
	border-width: 3px;
	box-shadow: 1px 1px 10px 1px #a3a7ab;
}

/*	==========================================================================
	11. PRACTICE SPACE CARDS
	========================================================================== */

/* default Practice Space colours override */
.pm-icon-box.ps-identify { background: #3c7bb1; border: 3px solid #3c7bb1; }	/* blue */
.pm-icon-box.ps-initiate { background: #fa8201; border: 3px solid #fa8201; }	/* orange */
.pm-icon-box.ps-plan { background: #538b31; border: 3px solid #538b31; }		/* green */
.pm-icon-box.ps-execute { background: #ffc716; border: 3px solid #ffc716; }		/* yellow */
.pm-icon-box.ps-wrapup { background: #d36111; border: 3px solid #d36111; }		/* terracotta */

/* HOVER colour replacements for Practice Space home-page */
.ps-toolkit-card:hover .pm-icon-box.ps-identify, .pm-icon-box.ps-identify:hover { color: #3c7bb1; background: #ffffff; }	/* blue */
.ps-toolkit-card:hover .pm-icon-box.ps-initiate, .pm-icon-box.ps-initiate:hover { color: #fa8201; background: #ffffff; }	/* orange */
.ps-toolkit-card:hover .pm-icon-box.ps-plan, .pm-icon-box.ps-plan:hover { color: #538b31; background: #ffffff; }			/* green */
.ps-toolkit-card:hover .pm-icon-box.ps-execute, .pm-icon-box.ps-execute:hover { color: #ffc716; background: #ffffff; }		/* yellow */
.ps-toolkit-card:hover .pm-icon-box.ps-wrapup, .pm-icon-box.ps-wrapup:hover { color: #d36111; background: #ffffff; }		/* terracotta */

/* Remove box-shadow for Practice Space home-page Icons */
.pm-icon-box.ps-toolkit-icons { box-shadow:none; }

/*  Flip colours on active . . . 
	. . . "Explore the Concept" Page */
.page-id-15672  .ps-identify { box-shadow: none; color: #3c7bb1;background: #ffffff; }
/*  . . .  "Gather Information" Page */
.page-id-15822 .ps-initiate { box-shadow: none; color: #fa8201; background: #ffffff; }
/*  . . .  "Plan the Output" Page */
.page-id-15832  .ps-plan { box-shadow: none; color: #538b31; background: #ffffff; }
/*  . . .  "Create the Output" Page */
.page-id-15848 .ps-execute { box-shadow: none; color: #ffc716; background: #ffffff; }
/*  . . .  "Deliver & Close" Page */
.page-id-15863 .ps-wrapup { box-shadow:none; color: #d36111; background: #ffffff; }


/* Practice Space process checklists */
.ps-checklist {
	box-shadow: 1px 1px 10px 1px #a3a7ab;
	background-color: var(--global-palette9);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ps-checklist:hover {
	box-shadow:none;
	background-color: var(--global-palette8);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.ps-checklist.pm-inline-icon {
	margin-right:12px;
}

/*	==========================================================================
	12. PMS FEATURES CARD
	========================================================================== */

.pms-features-card {
	width:265px;
    border-radius: 15px;
	background: var(--global-palette7)!important;
	box-shadow: 3px 3px 10px 3px var(--global-palette6);
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/*	change card appearance */
.pms-features-card:hover {
	box-shadow: none;
	background: var(--global-palette9)!important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/*	change icon colour */
.pms-features-card:hover .pms-features-icon {
	color:var(--global-palette1)!important;
	transition: color 0.2s ease;
}

/* ==========================================================================
   13. PM BLOCK ENHANCEMENTS
   ========================================================================== */

/* ── Clickable blocks ────────────────────────────────────────────────────── */

.pms-block-link {
    position: relative !important;
    cursor: pointer;
}

.pms-block-link__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
}

/* Keep interactive children above the overlay so they remain independently clickable. */
.pms-block-link .wp-block-buttons,
.pms-block-link .wp-block-button,
.pms-block-link a:not(.pms-block-link__overlay),
.pms-block-link button,
.pms-block-link input,
.pms-block-link select,
.pms-block-link textarea,
.pms-block-link label {
    position: relative;
    z-index: 2;
}

/* ── Device visibility ───────────────────────────────────────────────────── */

@media (min-width: 1025px) {
    .pms-hide-desktop { display: none !important; }
}

@media (min-width: 601px) and (max-width: 1024px) {
    .pms-hide-tablet { display: none !important; }
}

@media (max-width: 600px) {
    .pms-hide-mobile { display: none !important; }
}

/* ── Columns: reverse stacking order on mobile ───────────────────────────────────── */
/* Matches WP's own stacking breakpoint (781px). column-reverse overrides the
   default left-to-right stacking so the right column appears on top. */
@media (max-width: 781px) {
    .wp-block-columns.pms-reverse-stack:not(.is-not-stacked-on-mobile) {
        flex-direction: column-reverse;
    }
}

/* ── Paragraph: text-width background ───────────────────────────────────── */

/* display:table shrinks element to content width while keeping block-level flow. */
.pms-text-width-bg {
    display: table;
    max-width: 100%;
}

/* ── Text shadow (paragraph + heading) ──────────────────────────────────── */

.pms-text-shadow {
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.35);
}

/* ── Box shadow on background / border (paragraph + heading) ────────────── */

.pms-box-shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.20);
}