/* ==========================================================================
   PA Reskin v1 - main-site token alignment
   Source: docs/blog-site-tokens.md (handoff from www.pa.com.au).

   Loaded last, after pa-tokens.css and pa-blog.css, and only from the reskin
   layouts (Views/Shared/_Layout.cshtml, _SearchLayout.cshtml). The legacy
   layouts under Views/Legacy never reference it, so "ReskinV1": false is
   unaffected.

   The theme attribute stays on <html> (existing reskin convention). The
   unqualified [data-pa-theme] selectors below match it there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --pa-purple:        #522A80;
  --pa-deep-purple:   #291540;
  --pa-royal:         #814D99;
  --pa-orange:        #EC6607;
  --pa-orange-shade:  #B84300;
  --pa-amber:         #FFAA00;
  --pa-arnica:        #E69900;
  --pa-neon:          #7FF0FF;
  --pa-turquoise:     #06B7DB;
  --pa-coral:         #FC9256;
  --pa-aqua:          #E7BFFF;

  /* Pale tints */
  --pa-orchid:        #F9F1FB;
  --pa-linen:         #FEEEE6;
  --pa-pearl:         #FDFAEA;
  --pa-lemon:         #FFECA6;
  --pa-onahau:        #CDF7FD;

  /* Neutrals */
  --pa-grey:          #333333;
  --pa-grey-600:      #6B6B6B;
  --pa-grey-300:      #D9D9D9;
  --pa-grey-200:      #EFEFEF;
  --pa-grey-100:      #F7F7F7;
  --pa-off-white:     #FCFCFC;

  /* Dark-mode surfaces */
  --pa-surface-page-dark: #1D1130;
  --pa-surface-tint-dark: #32204F;
  --pa-surface-card-dark: #331A4F;
  --pa-purple-tint-dark:  #3D2A5E;
  --pa-hairline-dark:     #3A2758;
  --pa-accent-interactive:        #C9A8EF;
  --pa-accent-interactive-strong: #E2D0F7;

  /* Semantic */
  --surface-page:    #FFFFFF;
  --surface-card:    #FFFFFF;
  --surface-tint:    var(--pa-orchid);
  --text-heading:    var(--pa-grey);
  --text-body:       var(--pa-grey);
  --text-muted:      var(--pa-grey-600);
  --text-on-dark:    var(--pa-off-white);
  --text-link:       var(--pa-orange);
  --text-quote:      var(--pa-royal);
  --border-hairline: var(--pa-grey-200);
  --field-border:    var(--pa-grey-300);
  --field-focus:     var(--pa-royal);
  --field-error:     var(--pa-orange-shade);
  --focus-ring:      var(--pa-purple);

  /* Map the handoff names onto the aliases pa-blog.css already consumes */
  --border-subtle:   var(--border-hairline);
  --btn-primary-bg:        var(--pa-purple);
  --btn-primary-bg-hover:  #45236B;
  --btn-primary-bg-active: #381D57;

  /* Typography */
  --font-base: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-sans: var(--font-base);
  --font-display: var(--font-base);
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-hero: 90px;        --lh-hero: 95px;
  --fs-h1: 40px;          --lh-h1: 1.2;
  --fs-section-h2: clamp(30px, 3.6vw, 44px); --lh-section-h2: 1.15;
  --fs-h2: 28px;          --lh-h2: 1.2;
  --fs-h3: 24px;          --lh-h3: 1.2;
  --fs-h4: 24px;          --lh-h4: 1.2;
  --fs-subheading: 20px;  --lh-subheading: 1.2;
  --fs-body: 16px;        --lh-body: 26px;
  --fs-small: 12px;       --lh-small: 17px;
  --fs-quote: 28px;       --lh-quote: 35px;

  /* Shape / motion / elevation */
  --radius-pill: 999px;
  --radius-panel: 30px;
  --shadow-raised: 0 8px 28px rgba(41, 20, 64, 0.14);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-pa-theme="dark"] {
  --surface-page:    var(--pa-surface-page-dark);
  --surface-card:    var(--pa-surface-card-dark);
  --surface-tint:    var(--pa-surface-tint-dark);
  --text-heading:    var(--pa-off-white);
  --text-body:       var(--pa-off-white);
  --text-muted:      rgba(252, 252, 252, 0.55);
  --border-hairline: var(--pa-hairline-dark);
  --border-subtle:   var(--border-hairline);
  --field-border:    rgba(252, 252, 252, 0.28);
  --field-focus:     var(--pa-off-white);
  --field-error:     var(--pa-coral);
  --focus-ring:      var(--pa-off-white);

  --btn-primary-bg-hover:  #6B3AA6;
  --btn-primary-bg-active: #7B48B8;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
}

[data-pa-theme="dark"] main { background-color: var(--surface-page); }

blockquote {
  color: var(--text-quote);
  font-size: var(--fs-quote);
  line-height: var(--lh-quote);
}

.rt-content a,
article p > a,
article li > a {
  color: var(--text-link);
  font-weight: var(--fw-bold);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Section surfaces (Light / Balanced / Bold)
   -------------------------------------------------------------------------- */
.surface--light    { background: var(--pa-orchid);       color: var(--pa-grey); }
.surface--balanced { background: var(--pa-purple);       color: var(--pa-off-white); }
.surface--bold     { background: var(--pa-deep-purple);  color: var(--pa-off-white); }
[data-pa-theme="dark"] .surface--light { background: var(--pa-surface-tint-dark); color: var(--pa-off-white); }

.surface--light h2, .surface--light h3, .surface--light p,
.surface--balanced h2, .surface--balanced h3, .surface--balanced p,
.surface--bold h2, .surface--bold h3, .surface--bold p { color: inherit; }

.surface--balanced :focus-visible,
.surface--bold :focus-visible { outline-color: var(--pa-off-white); }

.surface--light,
.surface--balanced,
.surface--bold { padding-block: clamp(40px, 6vw, 88px); }

/* --------------------------------------------------------------------------
   4. Buttons (pills)
   -------------------------------------------------------------------------- */
.pa-btn {
  min-height: 44px;
  padding: 0.625rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: 16px;
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  transition: background-color .15s, border-color .15s, color .15s;
}
.pa-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.pa-btn--primary {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-bg);
  color: var(--pa-off-white);
}
.pa-btn--primary:hover,
.pa-btn--primary:focus {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
  color: var(--pa-off-white);
}
.pa-btn--primary:active {
  background: var(--btn-primary-bg-active);
  border-color: var(--btn-primary-bg-active);
}

.pa-btn--outline {
  background: transparent;
  border-color: var(--pa-purple);
  color: var(--pa-purple);
}
.pa-btn--outline:hover,
.pa-btn--outline:focus {
  background: var(--pa-purple);
  border-color: var(--pa-purple);
  color: var(--pa-off-white);
}
.pa-btn--outline:active { background: #422267; border-color: #422267; }

.pa-btn--inverse {
  background: var(--pa-off-white);
  border-color: var(--pa-off-white);
  color: var(--pa-purple);
}
.pa-btn--inverse:hover,
.pa-btn--inverse:focus { background: #ECECEC; border-color: #ECECEC; color: var(--pa-purple); }
.pa-btn--inverse:active { background: #DCDCDC; border-color: #DCDCDC; }

.pa-btn--ghost {
  background: transparent;
  border-color: rgba(252, 252, 252, .7);
  color: var(--pa-off-white);
}
.pa-btn--ghost:hover,
.pa-btn--ghost:focus { background: rgba(252, 252, 252, .12); border-color: var(--pa-off-white); color: var(--pa-off-white); }
.pa-btn--ghost:active { background: rgba(252, 252, 252, .2); }

.pa-btn--accent {
  background: var(--accent-bg, var(--pa-orange));
  border-color: var(--accent-bg, var(--pa-orange));
  color: var(--accent-fg, var(--pa-off-white));
}
.pa-btn--accent:hover,
.pa-btn--accent:focus { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .08); color: var(--accent-fg, var(--pa-off-white)); }
.pa-btn--accent:active { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .14); }
.pa-btn--accent:focus-visible { outline-color: var(--accent-ring, var(--pa-off-white)); }

/* Accent context, set on the container */
.surface--light    { --accent-bg: var(--pa-purple); --accent-fg: var(--pa-off-white); --accent-ring: var(--pa-purple); }
.accent--on-orange { --accent-bg: var(--pa-deep-purple); --accent-fg: var(--pa-off-white); --accent-ring: var(--pa-off-white); }
.accent--amber     { --accent-bg: var(--pa-amber); --accent-fg: var(--pa-deep-purple); --accent-ring: var(--pa-off-white); }

/* Dark-mode overrides */
[data-pa-theme="dark"] .pa-btn--outline {
  border-color: rgba(252, 252, 252, .45);
  color: var(--pa-off-white);
}
[data-pa-theme="dark"] .pa-btn--outline:hover,
[data-pa-theme="dark"] .pa-btn--outline:focus { background: rgba(252, 252, 252, .12); border-color: var(--pa-off-white); }
[data-pa-theme="dark"] .pa-btn--outline:active { background: rgba(252, 252, 252, .2); }
[data-pa-theme="dark"] .pa-btn:not(.pa-btn--accent):focus-visible { outline-color: var(--pa-off-white); }

.pa-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.5vw, 20px);
}
.pa-btn-row--center { justify-content: center; }
.pa-btn-row--right  { justify-content: flex-end; }

/* --------------------------------------------------------------------------
   Rich text: editor-applied colours in dark mode.
   The RTE stores colour as inline style (e.g. <h5 style="color:#f7a611">,
   Word paste <span style="color:#333333">) or as the .rt-text-* formats.
   Inline style beats the theme tokens, so dark text vanishes on the dark page.
   Remap known values to theme tokens; !important is the only way to win over
   an inline style. Scoped to .rt-content so nothing else is affected.
   -------------------------------------------------------------------------- */

/* Dark / near-black / brand-purple text -> normal body text in dark mode */
[data-pa-theme="dark"] .rt-content [style*="color: #333" i],
[data-pa-theme="dark"] .rt-content [style*="color:#333" i],
[data-pa-theme="dark"] .rt-content [style*="color: #000" i],
[data-pa-theme="dark"] .rt-content [style*="color:#000" i],
[data-pa-theme="dark"] .rt-content [style*="color: black" i],
[data-pa-theme="dark"] .rt-content [style*="color:black" i],
[data-pa-theme="dark"] .rt-content [style*="color: rgb(0, 0, 0)" i],
[data-pa-theme="dark"] .rt-content [style*="color: #212529" i],
[data-pa-theme="dark"] .rt-content [style*="color: #51215c" i],
[data-pa-theme="dark"] .rt-content [style*="color:#51215c" i],
[data-pa-theme="dark"] .rt-content [style*="color: #522a80" i],
[data-pa-theme="dark"] .rt-content [style*="color:#522a80" i],
[data-pa-theme="dark"] .rt-content [style*="color: #291540" i],
[data-pa-theme="dark"] .rt-content .rt-text-purple {
  color: var(--text-body) !important;
}

/* Headings keep the heading colour unless the editor picked an accent */
[data-pa-theme="dark"] .rt-content :is(h1, h2, h3, h4, h5, h6):is(
  [style*="color: #333" i], [style*="color:#333" i],
  [style*="color: #000" i], [style*="color:#000" i],
  [style*="color: #51215c" i], [style*="color: #522a80" i]) {
  color: var(--text-heading) !important;
}

/* Header icon buttons (search, theme, menu) in dark mode: amber glyph on a
   muted purple tile, per the main site's dark header. */
[data-pa-theme="dark"] .pa-iconbtn {
  background: var(--pa-purple-tint-dark);
  border-color: transparent;
  color: var(--pa-amber);
}
[data-pa-theme="dark"] .pa-iconbtn:hover,
[data-pa-theme="dark"] .pa-iconbtn:focus {
  background: var(--pa-purple);
  color: var(--pa-amber);
}

/* --------------------------------------------------------------------------
   5. Chips (tags / categories). .pa-tag is the existing tag pill.
   -------------------------------------------------------------------------- */
.chips,
.pa-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; padding: 0; list-style: none; }

.chip,
.pa-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--pa-orchid);
  color: var(--pa-purple);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.chip--more { background: transparent; border: 1px solid var(--pa-orchid); cursor: default; }

a.chip:hover, a.chip:focus-visible,
a.pa-tag:hover, a.pa-tag:focus-visible { background: var(--pa-purple); color: var(--pa-off-white); text-decoration: none; }
a.chip:focus-visible,
a.pa-tag:focus-visible { outline: 2px solid var(--pa-purple); outline-offset: 2px; }

[data-pa-theme="dark"] .chip,
[data-pa-theme="dark"] .pa-tag { background: var(--pa-surface-card-dark); color: rgba(252, 252, 252, .82); }
[data-pa-theme="dark"] .chip--more { background: transparent; border-color: rgba(201, 168, 239, .4); color: rgba(252, 252, 252, .55); }
[data-pa-theme="dark"] a.chip:hover, [data-pa-theme="dark"] a.chip:focus-visible,
[data-pa-theme="dark"] a.pa-tag:hover, [data-pa-theme="dark"] a.pa-tag:focus-visible { background: var(--pa-purple); color: var(--pa-off-white); }
[data-pa-theme="dark"] a.pa-tag:focus-visible { outline-color: var(--pa-off-white); }