/* Buttons, forms, layout shells. */

/* Buttons. Primary is sapphire fill with a white label. Never two side by side. */
.opi-btn{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;gap:var(--space-2);background:var(--accent);color:var(--white);border:1px solid var(--accent);padding:var(--space-3) var(--space-6);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-body-sm);letter-spacing:var(--tracking-slight);cursor:pointer;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.opi-btn:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--white);text-decoration:none}
.opi-btn:active{background:var(--sapphire-700);border-color:var(--sapphire-700);transform:scale(.98)}
.opi-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.opi-btn--ink{background:var(--ink-900);border-color:var(--ink-900);color:var(--text-inverse)}
.opi-btn--ink:hover{background:var(--ink-800);border-color:var(--ink-800);color:var(--text-inverse)}
.opi-btn--secondary{background:transparent;border-color:var(--ink-900);color:var(--ink-900)}
.opi-btn--secondary:hover{background:var(--ink-900);color:var(--text-inverse)}
.opi-btn--ghost{background:transparent;border-color:transparent;color:var(--text-1);padding-inline:0}
.opi-btn--ghost:hover{background:transparent;color:var(--link-hover);text-decoration:underline}
.opi-ink .opi-btn--secondary{border-color:var(--border-ink);color:var(--text-inverse)}
.opi-ink .opi-btn--secondary:hover{background:var(--text-inverse);color:var(--ink-900)}
.wp-block-button__link,.wp-element-button{display:inline-block;background:var(--accent);color:var(--white);border:1px solid var(--accent);padding:var(--space-3) var(--space-6);font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-body-sm);line-height:1.2;letter-spacing:var(--tracking-slight);text-align:center}
.wp-block-button__link:hover,.wp-element-button:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--white)}

/* Badges */
.opi-badge{display:inline-block;font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;padding:var(--space-1) var(--space-2);border:1px solid var(--border-2);color:var(--text-2);background:var(--surface-card)}
.opi-badge--sapphire{border-color:var(--accent);color:var(--accent-strong);background:var(--accent-soft)}
.opi-badge--ink{border-color:var(--ink-900);background:var(--ink-900);color:var(--text-inverse)}

/* Forms. Label above, helper below, never placeholder as label. */
.opi-form-wrap{background:var(--surface-card);border:1px solid var(--border-1);box-shadow:var(--shadow-1);padding:var(--space-8);margin:var(--space-16) 0;scroll-margin-top:var(--space-16)}
.opi-form-wrap h2{font-size:var(--text-h3);margin:0 0 var(--space-2)}
.opi-form-intro{color:var(--text-2);font-size:var(--text-body-sm);margin:0 0 var(--space-6)}
.opi-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-5)}
@media(max-width:640px){.opi-grid{grid-template-columns:1fr}.opi-form-wrap{padding:var(--space-5)}}
.opi-form p{margin:0}
.opi-form label{display:block;font-size:var(--text-caption);font-weight:var(--weight-semibold);color:var(--text-2);letter-spacing:var(--tracking-slight);margin-bottom:var(--space-2)}
.opi-form label span{color:var(--accent-strong)}
.opi-form input[type=text],.opi-form input[type=email],.opi-form input[type=tel],.opi-form select,.opi-form textarea{width:100%;padding:var(--space-3) var(--space-4);border:1px solid var(--border-2);background:var(--white);color:var(--text-1);font-family:var(--font-body);font-size:var(--text-body-sm);transition:border-color var(--dur-fast) var(--ease-out)}
.opi-form input:hover,.opi-form select:hover,.opi-form textarea:hover{border-color:var(--gray-400)}
.opi-form input:focus,.opi-form select:focus,.opi-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus-ring)}
.opi-full{margin-top:var(--space-4) !important}
.opi-actions{margin-top:var(--space-6) !important;display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.opi-form-note{font-size:var(--text-caption);color:var(--text-3)}
.opi-form-status{margin-top:var(--space-4) !important;font-size:var(--text-body-sm)}
.opi-form-status.is-error{color:var(--error)}
.opi-form-status.is-ok{color:var(--success);font-weight:var(--weight-semibold)}
.opi-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Consultation panel, ink with one sapphire button. */
.opi-cta{padding:var(--space-12) var(--space-10);margin:var(--space-16) 0}
.opi-cta h2{font-size:var(--text-h2);margin:0 0 var(--space-4)}
.opi-cta p{color:var(--text-inverse-2);font-size:var(--text-body-sm);margin:0 0 var(--space-6);padding-right:min(34%,420px)}
@media(max-width:640px){.opi-cta{padding:var(--space-8) var(--space-5)}}

/* Long-form prose */
.opi-prose h2,.entry-content h2{font-size:var(--text-h2);margin:var(--space-16) 0 var(--space-4)}
.opi-prose h3,.entry-content h3{font-size:var(--text-h3);margin:var(--space-10) 0 var(--space-3)}
.entry-content p,.opi-prose p{margin:0 0 var(--space-5);color:var(--text-2)}
.entry-content strong,.opi-prose strong{color:var(--text-1);font-weight:var(--weight-semibold)}
.entry-content ul,.entry-content ol,.opi-prose ul,.opi-prose ol{margin:0 0 var(--space-6);padding-left:var(--space-6);color:var(--text-2)}
.entry-content li,.opi-prose li{margin-bottom:var(--space-2)}
.entry-content a:not(.wp-element-button):not(.opi-btn),.opi-prose a:not(.wp-element-button):not(.opi-btn){color:var(--link);text-decoration:underline;text-decoration-color:var(--gray-300);text-decoration-thickness:1px}
.entry-content a:not(.wp-element-button):not(.opi-btn):hover,.opi-prose a:not(.wp-element-button):not(.opi-btn):hover{color:var(--link-hover);text-decoration-color:var(--accent)}
img{max-width:100%;height:auto}
.wp-block-image img,.wp-post-image{border-radius:0}

/* Sticky ink header */
.opi-header{position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-ink)}
.opi-wordmark{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.0625rem;letter-spacing:var(--tracking-display);margin:0;white-space:nowrap}
.opi-wordmark a,.opi-wordmark a:hover{text-decoration:none}
.opi-wordmark .wm-1{color:var(--text-inverse)}
.opi-wordmark .wm-2{color:var(--sapphire-400)}
.opi-header .wp-block-navigation a{color:var(--text-inverse-2);font-size:var(--text-body-sm);font-weight:var(--weight-medium);letter-spacing:var(--tracking-slight)}
.opi-header .wp-block-navigation a:hover{color:var(--text-inverse);text-decoration:none}
.opi-header .wp-block-navigation .current-menu-item a{color:var(--text-inverse)}

/* Ink footer */
.opi-footer{border-top:1px solid var(--border-ink)}
.opi-footer h2{font-family:var(--font-mono);font-size:var(--text-overline);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--sapphire-400);font-weight:var(--weight-medium);margin-bottom:var(--space-4)}
.opi-footer ul{list-style:none;margin:0;padding:0}
.opi-footer li{margin-bottom:var(--space-2)}
.opi-footer a{color:var(--text-inverse-2);font-size:var(--text-body-sm)}
.opi-footer a:hover{color:var(--text-inverse);text-decoration:none}
.opi-footer p{color:var(--text-inverse-2);font-size:var(--text-body-sm)}
.opi-footer .opi-legal{font-size:var(--text-caption);color:rgba(244,246,249,.44)}
.opi-footer .wp-block-separator{border-color:var(--border-ink);background:var(--border-ink);opacity:1;margin:var(--space-10) 0 var(--space-6)}

/* Hero and sections */
.opi-hero{padding:var(--space-16) 0 var(--space-16)}
.opi-hero h1{color:var(--text-inverse);margin:0 0 var(--space-5);padding-right:min(38%,460px)}
.opi-hero__lede{font-size:var(--text-body-lg);color:rgba(244,246,249,.88);padding-right:min(42%,520px);margin:0 0 var(--space-8);line-height:1.55}
@media(max-width:640px){.opi-hero{padding:var(--space-12) 0 var(--space-10)}}
.opi-section{padding:var(--space-16) 0}
.opi-card{background:var(--surface-card);border:1px solid var(--border-1);box-shadow:var(--shadow-1);padding:var(--space-6);transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.opi-card--hoverable:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.opi-card h3{font-size:var(--text-h4);margin:0 0 var(--space-2)}
.opi-card p{color:var(--text-2);font-size:var(--text-body-sm);margin:0}

/* opi-hide-empty-meta: the parent prints an author and category line that has no
   value on our custom post types. The trust block carries the byline instead. */
.single-guide .wp-block-post-author-name,.single-guide .taxonomy-category,
.single-project .wp-block-post-author-name,.single-project .taxonomy-category,
.single-glossary .wp-block-post-author-name,.single-glossary .taxonomy-category,
.single-report .wp-block-post-author-name,.single-report .taxonomy-category,
.single-community .wp-block-post-author-name,.single-community .taxonomy-category,
.single-developer .wp-block-post-author-name,.single-developer .taxonomy-category{display:none}

/* opi-screenshot-fixes */
/* Buttons are never underlined, including inside prose. */
.wp-block-button__link,.wp-element-button,.opi-btn,
.entry-content .wp-block-button__link,.entry-content .wp-element-button,.entry-content .opi-btn,
.opi-prose .wp-block-button__link,.opi-prose .opi-btn{text-decoration:none}
.wp-block-button__link:hover,.wp-element-button:hover,.opi-btn:hover,
.entry-content .wp-block-button__link:hover,.entry-content .opi-btn:hover{text-decoration:none}

/* Header gutter and a CTA sized to the slim bar. */
.opi-header .wp-block-buttons{margin:0}
.opi-header .wp-block-button__link{font-size:var(--text-body-sm);line-height:1.2;padding:10px var(--space-5);white-space:nowrap}
@media(max-width:900px){.opi-header .wp-block-buttons{display:none}}

/* The hero bloom sits low by design, so hold the section height in check. */
.opi-hero{min-height:auto}

/* opi-left-align-fix: constrained layouts force auto side margins with !important,
   so any max-width element has to opt out explicitly. */
.opi-section>h2{padding-right:min(30%,360px)}
.opi-section__lede{color:var(--text-2);padding-right:min(34%,420px);margin:0 0 var(--space-8)}

/* opi-btn-contrast: link colour rules were overriding the button label. */
.wp-block-button__link,.wp-block-button__link:link,.wp-block-button__link:visited,
.wp-element-button,.opi-ink .wp-block-button__link,.entry-content .wp-block-button__link,
.opi-hero .wp-block-button__link,.opi-prose .wp-block-button__link{color:var(--white) !important}
.wp-block-button__link:hover,.opi-ink .wp-block-button__link:hover,
.opi-hero .wp-block-button__link:hover{color:var(--white) !important}

   so the figure adds spacing and caption treatment only. */

/* Inside an article column the CTA has no room to reserve a right gutter. */
.entry-content .opi-cta p,.entry-content .opi-cta h2{padding-right:0}