/* Keep the hand cursor over labels and icons as well as the control itself. */
html body :is(a[href], button, summary, [role="button"], input[type="button"], input[type="submit"], input[type="reset"]) {
  cursor: pointer;
}
html body :is(a[href], button, summary, [role="button"]) :is(span, i, em, strong, svg, path) {
  cursor: inherit;
}
html body :is(button, summary, [role="button"], .btn, .global-cta) {
  -webkit-user-select: none;
  user-select: none;
}
html body :is(button, input[type="button"], input[type="submit"], input[type="reset"]):disabled {
  cursor: not-allowed;
}

/* Keyboard focus indicator (WCAG 2.4.7 / 2.4.11). css/style-india.css strips outlines from a, button and input with !important,
   so this rule needs !important too. It only matches :focus-visible, so mouse clicks look exactly as before.
   Two-tone (red band + white outer ring) so it reads on white, red (#ff0000 hero) and maroon (#470000) sections alike. */
:is(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px #ff0000 !important;
}

/* =====================================================================================================================
   .global-cta  -  the one button of the whole site (text + circular arrow).
   Markup (links and buttons alike):   <a class="global-cta" href="...">Text <span><i class="fas fa-arrow-right"></i></span></a>
   The circle is the <span> that holds the arrow icon, so no second class is needed.

   Colours come from three custom properties that inherit from the surrounding section or card, so the same class reads
   correctly on every background (no script, no per-button classes):
       --gc-text    label colour            --gc-circle   circle fill            --gc-arrow   arrow colour
   Light surfaces (the default, white and pink tones, white cards): burgundy text, red circle, white arrow.
   Dark burgundy surfaces (tone "b" sections, the closing card): white text, red circle, white arrow.
   A white card inside a dark section switches back to the light set (list below).
   Nothing moves on hover or focus: no translate, scale or size change, only a short colour transition.
   ===================================================================================================================== */
:root { --gc-size: 40px; --gc-text: #470000; --gc-text-hover: #ff0000; --gc-circle: #ff0000; --gc-circle-hover: #470000; --gc-arrow: #fff; }

/* dark burgundy surfaces */
html body :is(section[data-ss="b"], section.final-card > .container):not(#_) { --gc-text: #fff; --gc-text-hover: #fde4e4; --gc-circle: #ff0000; --gc-circle-hover: #cc0000; --gc-arrow: #fff; }
/* light surfaces and white / pink cards that sit inside dark sections */
html body :is(section[data-ss="w"], section[data-ss="p"]):not(#_) { --gc-text: #470000; --gc-text-hover: #ff0000; --gc-circle: #ff0000; --gc-circle-hover: #470000; --gc-arrow: #fff; }

/* structure (low specificity, so a page can still place the button with its own margin / width) */
.global-cta { display: inline-flex; align-items: center; justify-content: flex-start; gap: 12px; width: fit-content; max-width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; box-sizing: border-box; }
.global-cta[hidden] { display: none; }

/* look */
html body .global-cta.global-cta:not(#_):not(#_) { min-height: var(--gc-size); border-radius: 999px; background: none; box-shadow: none; color: var(--gc-text); font-family: inherit; font-size: 16px; font-weight: 800; line-height: 1.2; text-align: left; text-decoration: none; white-space: normal; transform: none; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
html body .global-cta.global-cta:not(#_):not(#_):is(:hover, :focus, :focus-visible, :active) { background: none; box-shadow: none; color: var(--gc-text-hover); text-decoration: none; transform: none; }
/* the circle: the span that holds the arrow icon, fixed size, always round, arrow centred with flexbox */
html body .global-cta.global-cta:not(#_):not(#_) > span:has(> :is(i, svg)) { display: flex; align-items: center; justify-content: center; flex: 0 0 var(--gc-size); width: var(--gc-size); height: var(--gc-size); margin: 0; padding: 0; box-sizing: border-box; border-radius: 50%; background: var(--gc-circle); color: var(--gc-arrow); font-size: 14px; line-height: 0; transform: none; transition: background-color .2s ease, color .2s ease; }
html body .global-cta.global-cta:not(#_):not(#_) > span:has(> :is(i, svg)) > :is(i, svg) { display: block; margin: 0; padding: 0; color: inherit; line-height: 1; transform: none; }
html body .global-cta.global-cta:not(#_):not(#_):is(:hover, :focus, :focus-visible, :active) > span:has(> :is(i, svg)) { background: var(--gc-circle-hover); color: var(--gc-arrow); transform: none; }
html body button.global-cta.global-cta:not(#_):not(#_):disabled { opacity: .7; cursor: not-allowed; }
@media (max-width: 575px) { :root { --gc-size: 36px; } html body .global-cta.global-cta:not(#_):not(#_) { font-size: 15px; gap: 10px; } }
@media (prefers-reduced-motion: reduce) { html body .global-cta.global-cta:not(#_):not(#_), html body .global-cta.global-cta:not(#_):not(#_) > span:has(> :is(i, svg)) { transition: none; } }

/* Hero bands (the red and maroon heroes of every template) keep the original pill pair: first button filled, second outlined,
   both with a white circle and a red arrow. Same class, only the surrounding hero changes the look. */
html body :is(.banner-04, .abx-hero, .ctp-hero, .gqp-hero, .inx-hero, .csp-hero, .svp-hero, .inp-hero, .sv2-hero, .sv3-hero, .sp-hero, .hb-hero, .lf-hero, .s2-hero, .s3-hero, .wcat-hero, .wcat-v-banner, .sl3-hero, .sol-hero, .solh-hero, .ind-hero, .wd-page .hero, .dt-hero) .global-cta.global-cta:not(#_):not(#_):not(#_) { --gc-size: 28px; --gc-circle: #fff; --gc-circle-hover: #fff; --gc-arrow: #ff0000; gap: 10px; min-height: 40px; padding: 0 4px 0 15px; border: 2px solid #fff; background: transparent; color: #fff; line-height: 1; white-space: nowrap; }
html body :is(.banner-04, .abx-hero, .ctp-hero, .gqp-hero, .inx-hero, .csp-hero, .svp-hero, .inp-hero, .sv2-hero, .sv3-hero, .sp-hero, .hb-hero, .lf-hero, .s2-hero, .s3-hero, .wcat-hero, .wcat-v-banner, .sl3-hero, .sol-hero, .solh-hero, .ind-hero, .wd-page .hero, .dt-hero) .global-cta.global-cta:not(#_):not(#_):not(#_):is(:hover, :focus-visible) { border-color: #470000; background: #470000; color: #fff; --gc-circle-hover: #fff; --gc-arrow: #470000; }
html body :is(.banner-04, .abx-hero, .ctp-hero, .gqp-hero, .inx-hero, .csp-hero, .svp-hero, .inp-hero, .sv2-hero, .sv3-hero, .sp-hero, .hb-hero, .lf-hero, .s2-hero, .s3-hero, .wcat-hero, .wcat-v-banner, .sl3-hero, .sol-hero, .solh-hero, .ind-hero, .wd-page .hero, .dt-hero) .global-cta.global-cta:not(#_):not(#_):not(#_):first-child { border-color: #470000; background: #470000; }
html body :is(.banner-04, .abx-hero, .ctp-hero, .gqp-hero, .inx-hero, .csp-hero, .svp-hero, .inp-hero, .sv2-hero, .sv3-hero, .sp-hero, .hb-hero, .lf-hero, .s2-hero, .s3-hero, .wcat-hero, .wcat-v-banner, .sl3-hero, .sol-hero, .solh-hero, .ind-hero, .wd-page .hero, .dt-hero) .global-cta.global-cta:not(#_):not(#_):not(#_):first-child:is(:hover, :focus-visible) { border-color: #fff; background: #fff; color: #470000; --gc-circle-hover: #470000; --gc-arrow: #fff; }
/* maroon / navy hero bands: a maroon fill would vanish, so the first button is solid red there */
html body :is(.sv3-hero, .s2-hero, .s3-hero, .hb-hero, .lf-hero, .sp-hero, .sl3-hero, .sol-hero, .solh-hero, .ind-hero, .wd-page .hero, .dt-hero) .global-cta.global-cta:not(#_):not(#_):not(#_):first-child { border-color: #ff0000; background: #ff0000; }
html body :is(.sv3-hero, .s2-hero, .s3-hero, .hb-hero, .lf-hero, .sp-hero, .sl3-hero, .sol-hero, .solh-hero, .ind-hero, .wd-page .hero, .dt-hero) .global-cta.global-cta:not(#_):not(#_):not(#_):first-child:is(:hover, :focus-visible) { --gc-circle-hover: #ff0000; --gc-arrow: #fff; }
@media (max-width: 575px) { html body :is(.banner-04, .abx-hero, .ctp-hero, .gqp-hero, .inx-hero, .csp-hero, .svp-hero, .inp-hero, .sv2-hero, .sv3-hero, .sp-hero, .hb-hero, .lf-hero, .s2-hero, .s3-hero, .wcat-hero, .wcat-v-banner, .sl3-hero, .sol-hero, .solh-hero, .ind-hero, .wd-page .hero, .dt-hero) .global-cta.global-cta:not(#_):not(#_):not(#_) { --gc-size: 30px; min-height: 44px; padding: 0 5px 0 16px; font-size: 14px; white-space: normal; } }

/* a card that is itself the link (home "Read Article" cards): the label is a span, so the card's hover / focus drives it */
html body :is(a, article, li):is(:hover, :focus-visible) > .global-cta.global-cta:is(span):not(#_):not(#_), html body :is(a, article, li):is(:hover, :focus-visible) > :is(span, div) > .global-cta.global-cta:is(span):not(#_):not(#_) { color: var(--gc-text-hover); }
html body :is(a, article, li):is(:hover, :focus-visible) > .global-cta.global-cta:is(span):not(#_):not(#_) > span:has(> :is(i, svg)), html body :is(a, article, li):is(:hover, :focus-visible) > :is(span, div) > .global-cta.global-cta:is(span):not(#_):not(#_) > span:has(> :is(i, svg)) { background: var(--gc-circle-hover); }