/*
Theme Name: PETRONAQ Astra Child
Description: Controlled PETRONAQ vNext institutional design system for Astra.
Author: PETRONAQ
Template: astra
Version: 1.0.0
Text Domain: petronaq-astra-child
*/

:root {
  --pnq-navy: #071A33;
  --pnq-blue: #2F6B9A;
  --pnq-brass: #B6904E;
  --pnq-gunmetal: #2B2F36;
  --pnq-steel: #A7B0B8;
  --pnq-silver: #E6EAEE;
  --pnq-white: #FFFFFF;
  --pnq-ink: #17212B;
  --pnq-muted: #5D6874;
  --pnq-surface: #F5F7F8;
  --pnq-surface-dark: #0B203B;
  --pnq-border: rgba(7,26,51,.16);
  --pnq-border-dark: rgba(230,234,238,.22);

  --pnq-font-sans: Inter, "Helvetica Neue", Arial, sans-serif;
  --pnq-font-display: Inter, "Helvetica Neue", Arial, sans-serif;
  --pnq-text-xs: clamp(.75rem,.72rem + .08vw,.8125rem);
  --pnq-text-sm: clamp(.875rem,.84rem + .10vw,.9375rem);
  --pnq-text-md: clamp(1rem,.96rem + .12vw,1.0625rem);
  --pnq-text-lg: clamp(1.125rem,1.04rem + .25vw,1.25rem);
  --pnq-h4: clamp(1.25rem,1.12rem + .35vw,1.5rem);
  --pnq-h3: clamp(1.5rem,1.25rem + .75vw,2rem);
  --pnq-h2: clamp(2rem,1.45rem + 1.65vw,3rem);
  --pnq-h1: clamp(2.75rem,1.7rem + 3.1vw,5rem);
  --pnq-leading-tight: 1.04;
  --pnq-leading-heading: 1.15;
  --pnq-leading-body: 1.65;

  --pnq-space-1: .375rem;
  --pnq-space-2: .625rem;
  --pnq-space-3: 1rem;
  --pnq-space-4: 1.5rem;
  --pnq-space-5: 2rem;
  --pnq-space-6: 3rem;
  --pnq-space-7: 4.5rem;
  --pnq-space-8: 6rem;
  --pnq-section: clamp(4.5rem,8vw,8rem);
  --pnq-gutter: clamp(1.25rem,3vw,3rem);
  --pnq-content: 76rem;
  --pnq-reading: 46rem;
  --pnq-wide: 90rem;
  --pnq-radius: 2px;
  --pnq-radius-soft: 6px;
  --pnq-rule: 1px solid var(--pnq-border);
  --pnq-shadow: 0 18px 48px rgba(7,26,51,.10);
  --pnq-transition: 180ms ease;
}

/* Scoped foundation. Apply .pnq-shell to vNext page roots so the live legacy site is unaffected. */
.pnq-shell {
  color: var(--pnq-ink);
  font-family: var(--pnq-font-sans);
  font-size: var(--pnq-text-md);
  line-height: var(--pnq-leading-body);
  background: var(--pnq-white);
  text-rendering: optimizeLegibility;
}

.pnq-shell *, .pnq-shell *::before, .pnq-shell *::after { box-sizing: border-box; }
.pnq-shell :where(img,svg,video,canvas,iframe) { max-width: 100%; height: auto; }
.pnq-shell :where(p,li) { max-width: 72ch; }
.pnq-shell :where(h1,h2,h3,h4) { margin: 0; color: var(--pnq-navy); font-family: var(--pnq-font-display); font-weight: 650; letter-spacing: -.025em; text-wrap: balance; }
.pnq-shell h1 { font-size: var(--pnq-h1); line-height: var(--pnq-leading-tight); }
.pnq-shell h2 { font-size: var(--pnq-h2); line-height: var(--pnq-leading-heading); }
.pnq-shell h3 { font-size: var(--pnq-h3); line-height: var(--pnq-leading-heading); }
.pnq-shell h4 { font-size: var(--pnq-h4); line-height: 1.25; }
.pnq-shell a { text-underline-offset: .18em; }
.pnq-shell :focus-visible { outline: 2px solid var(--pnq-brass); outline-offset: 3px; }

.pnq-container { width: min(100% - (2 * var(--pnq-gutter)), var(--pnq-content)); margin-inline: auto; }
.pnq-container--wide { width: min(100% - (2 * var(--pnq-gutter)), var(--pnq-wide)); margin-inline: auto; }
.pnq-reading { width: min(100%, var(--pnq-reading)); }
.pnq-section { padding-block: var(--pnq-section); }
.pnq-section--compact { padding-block: clamp(3rem,5vw,5rem); }
.pnq-section--navy { color: var(--pnq-silver); background: var(--pnq-navy); }
.pnq-section--navy :where(h1,h2,h3,h4) { color: var(--pnq-white); }
.pnq-section--surface { background: var(--pnq-surface); }

.pnq-grid { display: grid; gap: clamp(1.5rem,3vw,3rem); }
.pnq-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pnq-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pnq-grid--4 { grid-template-columns: repeat(4,minmax(0,1fr)); }
.pnq-grid--sidebar { grid-template-columns: minmax(0,1.55fr) minmax(16rem,.65fr); }
.pnq-stack > * + * { margin-block-start: var(--pnq-space-4); }
.pnq-stack--tight > * + * { margin-block-start: var(--pnq-space-3); }

.pnq-eyebrow { margin: 0 0 var(--pnq-space-3); color: var(--pnq-blue); font-size: var(--pnq-text-xs); font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }
.pnq-section--navy .pnq-eyebrow { color: var(--pnq-brass); }
.pnq-lede { margin: var(--pnq-space-4) 0 0; max-width: 62ch; color: var(--pnq-muted); font-size: var(--pnq-text-lg); line-height: 1.55; }
.pnq-section--navy .pnq-lede { color: var(--pnq-silver); }
.pnq-rule { border-top: var(--pnq-rule); }

.pnq-card { padding: clamp(1.5rem,2.5vw,2.25rem); border: var(--pnq-rule); border-radius: var(--pnq-radius); background: var(--pnq-white); }
.pnq-card--quiet { background: var(--pnq-surface); }
.pnq-card__meta { color: var(--pnq-blue); font-size: var(--pnq-text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.pnq-card p:last-child { margin-bottom: 0; }

.pnq-button, .pnq-shell .wp-element-button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: .5rem; padding: .78rem 1.15rem; border: 1px solid var(--pnq-navy); border-radius: var(--pnq-radius); background: var(--pnq-navy); color: var(--pnq-white); font-size: var(--pnq-text-sm); font-weight: 650; line-height: 1.2; text-decoration: none; transition: background var(--pnq-transition),border-color var(--pnq-transition),color var(--pnq-transition),transform var(--pnq-transition); }
.pnq-button:hover, .pnq-shell .wp-element-button:hover { background: var(--pnq-blue); border-color: var(--pnq-blue); color: var(--pnq-white); }
.pnq-button--ghost { background: transparent; color: var(--pnq-navy); }
.pnq-section--navy .pnq-button--ghost { border-color: var(--pnq-steel); color: var(--pnq-white); }

.pnq-media-frame { overflow: hidden; border-radius: var(--pnq-radius); background: var(--pnq-surface); }
.pnq-media-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pnq-caption { margin-top: .65rem; color: var(--pnq-muted); font-size: var(--pnq-text-xs); line-height: 1.45; }

.pnq-division--engineering { --pnq-accent: var(--pnq-blue); }
.pnq-division--management { --pnq-accent: var(--pnq-brass); }
.pnq-division--learning { --pnq-accent: #587A87; }
.pnq-division--intelligence { --pnq-accent: #4F728F; }
.pnq-accent-rule { border-top: 3px solid var(--pnq-accent,var(--pnq-blue)); }

.pnq-kicker-row { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; padding-block: var(--pnq-space-3); border-block: var(--pnq-rule); color: var(--pnq-muted); font-size: var(--pnq-text-sm); }
.pnq-metric { padding-left: var(--pnq-space-3); border-left: 2px solid var(--pnq-brass); }
.pnq-metric strong { display: block; color: var(--pnq-navy); font-size: var(--pnq-h3); line-height: 1.05; }

@media (max-width: 900px) {
  .pnq-grid--4, .pnq-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pnq-grid--sidebar { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  :root { --pnq-gutter: 1.125rem; --pnq-section: 4rem; }
  .pnq-grid--4, .pnq-grid--3, .pnq-grid--2 { grid-template-columns: 1fr; }
  .pnq-card { padding: 1.35rem; }
  .pnq-shell :where(p,li) { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pnq-shell *, .pnq-shell *::before, .pnq-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}