/* AIQ theme: what WordPress adds on top of the design's CSS (aiq.css, tpl.css stay as the design ships them).
   Gravity Forms mapping and editor content classes come with Stages 3 and 4. */

/* Logged-in editors: keep the fixed header and the menu overlay below the admin bar.
   Under 601px the admin bar scrolls away, so the header keeps its own top there. */
.admin-bar .nav,.admin-bar .menu{top:var(--wp-admin--admin-bar--height,32px)}
@media (max-width:600px){.admin-bar .nav,.admin-bar .menu{top:0}}

/* While the menu overlay is open, aiq.js makes the cookie banner inert, but it still covers the overlay's footer
   (Contact us, Search, Pause motion) on phones. Hide it until the menu closes. Inherited from the static build. */
.menu-open .cookie{visibility:hidden}

/* Homepage: the cookie banner has the templates' layout (Muneer, 20 Oct: the same as the HTML site). The homepage
   doesn't load tpl.css, so its button row takes the design's .actions rule from there. */
.home .cookie .actions{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center}

/* Footer newsletter: the error line goes under the field, styled like the form errors (.field-row .msg). The design
   appends it inside .news-row, where it was unstyled and squeezed the field. */
.news-row{flex-wrap:wrap}
.news-row .msg{order:3;flex:1 0 100%;padding-bottom:.5rem;font-family:var(--mono);font-weight:300;font-size:.8rem;letter-spacing:.03em;color:var(--graphite)}
.news-row .msg::before{content:"";display:inline-block;width:10px;height:1px;background:var(--coral);vertical-align:middle;margin-right:.5rem}

/* Homepage with Genesis off: AI Lab shares the closing line of Who we are, as it shares Genesis's (home.css). */
@media (min-width:900px){.story.tail{padding-bottom:0}.story.tail + .ailab{padding-top:0}}

/* Forms: the anti-spam field is off-screen for people (and hidden from screen readers in the markup). */
.aiq-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Film dialogs: the Vimeo player wp.js adds fills the player box at 16:9. */
.vbox[data-vimeo],.vbox[data-file]{display:block;min-height:0}
.vbox iframe,.vbox video{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;object-fit:contain}

/* Product Features with four frames: the design defines three (tpl.css fixes the desktop mosaic at 5fr/4fr/3fr, so a
   fourth wrapped under the first and left an empty block). Four take two unequal rows, 7/5 then 5/7, a diagonal step. */
@media (min-width:900px){
.fluid.mos2.f4[data-fluid]{grid-template-columns:repeat(12,minmax(0,1fr))!important;grid-template-rows:auto auto!important}
.fluid.mos2.f4>.fw:nth-child(1){grid-column:1/8!important}.fluid.mos2.f4>.fw:nth-child(2){grid-column:8/13!important}
.fluid.mos2.f4>.fw:nth-child(3){grid-column:1/6!important}.fluid.mos2.f4>.fw:nth-child(4){grid-column:6/13!important}}

/* Article bodies (the block editor): light weights only (p.27–28). Live's releases bold the datelines and the speakers,
   and italicise some lines: emphasis is Graphite on the ink-2 body instead, never a heavier or slanted face. */
.prose strong,.prose b{font-weight:inherit;color:var(--graphite)}
.prose em,.prose i{font-style:normal}

/* Case study spotlight with more than one product: each product takes its own row under the kicker (tpl.css lays
   .spot-f out for one: kicker | label | line | link). */
@media (min-width:900px){.spot-f > .label-img{grid-column:2}.spot-f > .h-m{grid-column:3}.spot-f > .tlink{grid-column:4}}

/* Long running text (the legal pages): a paragraph that is only a bold line is a subhead (the light mono label style),
   since bold itself is off. */
.prose p>strong:only-child{display:block;margin-top:1.5em;font-family:var(--mono);font-weight:300;font-size:.72rem;line-height:1;letter-spacing:.01em;text-transform:uppercase}

/* Legal contents: on short screens the sticky list scrolls inside itself, so its last rows stay reachable. */
@media (min-width:900px){.toc .rows{max-height:calc(100svh - var(--nav-h) - 4rem);overflow-y:auto}}

/* Contact Form 7 in the design's form markup (its own stylesheet is off). Fields keep .field-row; CF7 wraps each
   control in a span, the errors are the design's graphite line with the coral dash, and the response is one line in ink. */
.wpcf7 .screen-reader-response{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;margin:-1px;padding:0;border:0}
.wpcf7 .hidden-fields-container{display:none}
.wpcf7-form-control-wrap{display:block;position:relative;min-width:0}
.field-row .wpcf7-form-control-wrap > :is(input,select,textarea){display:block;width:100%;box-sizing:border-box}
.field-row .wpcf7-not-valid{border-bottom-color:var(--coral)}
.wpcf7-not-valid-tip{display:block;margin-top:.55rem;font-family:var(--mono);font-weight:300;font-size:.8rem;letter-spacing:.03em;color:var(--graphite)}
.wpcf7-not-valid-tip::before{content:"";display:inline-block;width:10px;height:1px;background:var(--coral);vertical-align:middle;margin-right:.5rem}
.wpcf7-response-output{grid-column:1 / -1;margin:0;font-family:var(--mono);font-weight:300;font-size:.9rem;letter-spacing:.03em;line-height:1.5;color:var(--graphite)}
.wpcf7-response-output:focus-visible{outline:1.5px solid var(--graphite);outline-offset:4px}
.wpcf7-response-output:empty{display:none}
.wpcf7-spinner{display:none}
.wpcf7-form.submitting [type=submit]{opacity:.55;pointer-events:none}
.news-row .wpcf7-form-control-wrap{flex:1}
.news-row .wpcf7-form-control-wrap > input{width:100%;box-sizing:border-box}
/* The newsletter keeps its one-line row: the error is the coral underline plus the response line under it. */
.news-f .wpcf7-not-valid-tip{display:none}
.news-row:has(.wpcf7-not-valid){border-bottom-color:var(--coral)}
.news-f .wpcf7-response-output{font-size:.8rem}

/* Phone fields (assets/js/phone.js): intl-tel-input's country picker in the design's field style. The flag and the
   dialling code sit in the field, on its underline; the list is an ivory panel on a hairline, no shadow, no radius,
   Graphite text in the mono face, and the design's focus outline. */
.field-row .iti{display:block;width:100%;--iti-border-color:rgba(39,45,45,.62);--iti-dialcode-color:var(--graphite);--iti-arrow-color:var(--graphite);--iti-dropdown-bg:var(--ivory);--iti-hover-color:rgba(39,45,45,.06);--iti-search-icon-color:var(--ink-2);--iti-arrow-padding:10px}
.field-row .iti input[type=tel]{width:100%}
.iti__selected-country{font-family:var(--mono);font-weight:300;font-size:1rem;letter-spacing:.03em;color:var(--graphite);min-height:44px}
.iti__selected-country:focus-visible{outline:1.5px solid var(--graphite);outline-offset:4px}
.iti .iti__selected-country-primary{padding-left:0;background:transparent}
.iti__selected-dial-code{margin-left:.5rem}
.iti .iti__dropdown-content{border-radius:0;box-shadow:none;margin-top:0;border:1px solid rgba(39,45,45,.62);background:var(--ivory);min-width:min(22rem,calc(100vw - 2rem))}
.field-row .iti__search-input,.iti--container .iti__search-input{font:inherit;font-family:var(--mono);font-weight:300;font-size:.9rem;letter-spacing:.03em;color:var(--graphite);background-color:transparent;border:0;border-bottom:1px solid rgba(39,45,45,.62);border-radius:0;padding:.7rem 2rem .7rem 2.25rem;min-height:44px;background-position:right .75rem center}
.iti__search-input:focus-visible{outline:1.5px solid var(--graphite);outline-offset:-2px}
.iti__country-list{border-top:0}
.iti__country{font-family:var(--mono);font-weight:300;font-size:.85rem;letter-spacing:.03em;color:var(--graphite);padding:.6rem .75rem;min-height:44px;gap:.6rem}
.iti__country .iti__flag,.iti__country .iti__country-name{margin:0}
.iti__flag{box-shadow:none}
.iti__country.iti__highlight{background:rgba(39,45,45,.06)}
.iti__dial-code{color:var(--ink-2)}

/* While the cookie banner shows, anything that takes focus scrolls clear of it (WCAG 2.4.11). On the homepage the banner
   sits over the hero's Pause motion and pill, as on the HTML site's templates; this keeps them reachable by keyboard. */
html:has(.cookie:not([hidden])){scroll-padding-bottom:7rem}

/* The phone picker on phones opens full screen: the design's ivory scrim, not the library's dark one. Its arrow is the
   design's thin outline chevron, and its small filled clear button is gone (Backspace and Esc clear the search). */
.iti--fullscreen-popup.iti--container{background-color:rgba(249,249,244,.85)}
.iti .iti__arrow{width:7px;height:7px;border:0;border-right:1px solid var(--graphite);border-bottom:1px solid var(--graphite);transform:rotate(45deg) translateY(-2px);margin-left:.4rem}
.iti .iti__arrow--up{transform:rotate(-135deg) translateY(-2px)}
.iti__search-clear{display:none}

/* Our videos (homepage), before AIQ sends the films: the title shows in the caption box without the play button, so it
   isn't clickable and mustn't look it (guardian, 21 Oct). */
span.vplay{cursor:default}