1<#assign icons = { 

2  'ns-vision': '<svg viewBox="0 0 256 256" fill="currentColor" class="h-6 w-6 shrink-0" aria-hidden="true" focusable="false"><path d="M237.2,151.87v0a47.1,47.1,0,0,0-2.35-5.45L193.26,51.8a7.82,7.82,0,0,0-1.66-2.44,32,32,0,0,0-45.26,0A8,8,0,0,0,144,55V80H112V55a8,8,0,0,0-2.34-5.66,32,32,0,0,0-45.26,0,7.82,7.82,0,0,0-1.66,2.44L21.15,146.4a47.1,47.1,0,0,0-2.35,5.45v0A48,48,0,1,0,112,168V96h32v72a48,48,0,1,0,93.2-16.13ZM76.71,59.75a16,16,0,0,1,19.29-1v73.51a47.9,47.9,0,0,0-46.79-9.92ZM64,200a32,32,0,1,1,32-32A32,32,0,0,1,64,200ZM160,58.74a16,16,0,0,1,19.29,1l27.5,62.58A47.9,47.9,0,0,0,160,132.25ZM192,200a32,32,0,1,1,32-32A32,32,0,0,1,192,200Z"/></svg>', 

3  'ns-objectives': '<svg viewBox="0 0 256 256" fill="currentColor" class="h-6 w-6 shrink-0" aria-hidden="true" focusable="false"><path d="M221.87,83.16A104.1,104.1,0,1,1,195.67,49l22.67-22.68a8,8,0,0,1,11.32,11.32l-96,96a8,8,0,0,1-11.32-11.32l27.72-27.72a40,40,0,1,0,17.87,31.09,8,8,0,1,1,16-.9,56,56,0,1,1-22.38-41.65L184.3,60.39a87.88,87.88,0,1,0,23.13,29.67,8,8,0,0,1,14.44-6.9Z"/></svg>', 

4  'ns-policies': '<svg viewBox="0 0 256 256" fill="currentColor" class="h-6 w-6 shrink-0" aria-hidden="true" focusable="false"><path d="M243.32,116.69l-16-16a16,16,0,0,0-20.84-1.53L156.84,49.52a16,16,0,0,0-1.52-20.84l-16-16a16,16,0,0,0-22.63,0l-64,64a16,16,0,0,0,0,22.63l16,16a16,16,0,0,0,20.83,1.52L96.69,124,31.31,189.38A25,25,0,0,0,66.63,224.7L132,159.32l7.17,7.16a16,16,0,0,0,1.52,20.84l16,16a16,16,0,0,0,22.63,0l64-64A16,16,0,0,0,243.32,116.69ZM80,104,64,88l64-64,16,16ZM55.32,213.38a9,9,0,0,1-12.69,0,9,9,0,0,1,0-12.68L108,135.32,120.69,148ZM101,105.66,145.66,61,195,110.34,150.35,155ZM168,192l-16-16,4-4h0l56-56h0l4-4,16,16Z"/></svg>', 

5  'ns-programs': '<svg viewBox="0 0 256 256" fill="currentColor" class="h-6 w-6 shrink-0" aria-hidden="true" focusable="false"><path d="M223.85,47.12a16,16,0,0,0-15-15c-12.58-.75-44.73.4-71.41,27.07L132.69,64H74.36A15.91,15.91,0,0,0,63,68.68L28.7,103a16,16,0,0,0,9.07,27.16l38.47,5.37,44.21,44.21,5.37,38.49a15.94,15.94,0,0,0,10.78,12.92,16.11,16.11,0,0,0,5.1.83A15.91,15.91,0,0,0,153,227.3L187.32,193A15.91,15.91,0,0,0,192,181.64V123.31l4.77-4.77C223.45,91.86,224.6,59.71,223.85,47.12ZM74.36,80h42.33L77.16,119.52,40,114.34Zm74.41-9.45a76.65,76.65,0,0,1,59.11-22.47,76.46,76.46,0,0,1-22.42,59.16L128,164.68,91.32,128ZM176,181.64,141.67,216l-5.19-37.17L176,139.31Zm-74.16,9.5C97.34,201,82.29,224,40,224a8,8,0,0,1-8-8c0-42.29,23-57.34,32.86-61.85a8,8,0,0,1,6.64,14.56c-6.43,2.93-20.62,12.36-23.12,38.91,26.55-2.5,36-16.69,38.91-23.12a8,8,0,1,1,14.56,6.64Z"/></svg>', 

6  'ns-progress': '<svg viewBox="0 0 256 256" fill="currentColor" class="h-6 w-6 shrink-0" aria-hidden="true" focusable="false"><path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z"/></svg>', 

7  'ns-partnerships': '<svg viewBox="0 0 256 256" fill="currentColor" class="h-6 w-6 shrink-0" aria-hidden="true" focusable="false"><path d="M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l55.07-55.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41ZM41.53,64,62,74.22,36.43,125.27,16,115.06Zm116,119.13L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm62-57.87-25.52-51L214.47,64,240,115.06Zm-87.75,92.67a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z"/></svg>' 

8}> 

9<#assign GID = 215701> 

10<#assign ercs = ["ns-vision","ns-objectives","ns-policies","ns-programs","ns-progress","ns-partnerships"]> 

11<#assign jas = serviceLocator.findService("com.liferay.journal.service.JournalArticleLocalService")> 

12<section aria-labelledby="strategy-tabs-heading" class="container mx-auto px-4 py-12 sm:px-6"> 

13  <h2 id="strategy-tabs-heading" class="sr-only">National Sports Strategy 2031 sections</h2> 

14  <#-- ACTIVE-TAB colour → Figma (node 2864:20023 = primary-600 #92722a gold on primary-50 #f9f7ed). 

15       The AEGOV `.aegov-tab.tab-pills .tab-link` rule (specificity 0,2,0) sets 

16       `--tab-link-active-fg: primary-900` + `--tab-link-active-bg: primary-100` DIRECTLY on the 

17       button, so the `[--tab-link-active-*]` tokens on THIS container are inert (a declaration on 

18       the closer element wins). The override therefore lives on the BUTTON as the `!important` BANG 

19       variants `[--tab-link-active-fg:var(--color-primary-600)]! [--tab-link-active-bg:var(--color-primary-50)]!` 

20       (same proven mechanism as the inactive `[--tab-link-fg:…]!` below) — an !important custom-property 

21       decl beats the non-important AEGOV one regardless of specificity. `.tab-active` consumes them 

22       (`color:var(--tab-link-active-fg)`; `background:var(--tab-link-active-bg)`), so the gold tracks 

23       the JS tab toggle. Both bang strings are @source-safelisted in input.css (the FTL is not under 

24       any @source glob). §6 NOTE: primary-600 #92722a on primary-50 = 4.19:1 — below the 4.5:1 AA bar 

25       for this 16px label (passes AA-Large 3:1 only). This is an EXPLICIT, informed user choice 

26       (2026-07-01) to match Figma pixel-exact, overriding the prior AA-passing primary-900/primary-100 

27       (8.34:1). The container tokens below are kept as the inactive/hover scope. --> 

28  <#-- Tablist accessible name is localized so AR screen-reader users don't hear English (4.1.2). --> 

29  <#assign tablistLabel = (locale.getLanguage() == "ar")?then("أقسام الاستراتيجية", "Strategy sections")> 

30  <#-- Inactive tab label/icon colour (§4a/§4d/§8-B = aeblack-600 #4b4f58): 

31       the AEGOV pills rule `.tab-pills .tab-link` (specificity 0,2,0) re-sets `--tab-link-fg` to 

32       aeblack-800 DIRECTLY on the button, so a plain single-class `[--tab-link-fg:…]` (0,1,0) — whether 

33       on this container OR on the button — LOSES on specificity (verified: computed `--tab-link-fg` 

34       stayed aeblack-800). Fix = put the IMPORTANT bang variant `[--tab-link-fg:…]!` on the button: 

35       it emits `--tab-link-fg:var(--color-aeblack-600)!important`, and an `!important` custom-property 

36       declaration beats the non-important `.tab-pills .tab-link` one regardless of specificity. It 

37       leaves the ACTIVE tab GOLD untouched, because `.tab-active` sets `color` directly via 

38       `--tab-link-active-fg` (NOT via `--tab-link-fg`). Label span + `fill=currentColor` icon both 

39       inherit the button colour → gray when inactive, gold when active, tracking the JS `.tab-active` 

40       toggle dynamically. §7-clean: AEGOV token utility, no custom CSS. Safelisted in input.css 

41       (the bang variant must be JIT-compiled; the FTL is not under any @source glob). --> 

42  <div class="aegov-tab tab-pills flex flex-col gap-6 lg:flex-row [--tab-link-active-bg:var(--color-primary-50)] [--tab-link-active-fg:var(--color-primary-600)]"> 

43    <ul class="tab-items flex flex-col shrink-0 gap-2 lg:w-72" role="tablist" aria-label="${tablistLabel}" aria-orientation="vertical" data-tabs-toggle="#nss-content"> 

44      <#list ercs as erc> 

45        <#assign a = jas.getLatestArticleByExternalReferenceCode(GID, erc)!> 

46        <#if a??> 

47          <#assign title = a.getTitle(locale)!erc> 

48          <li role="presentation"> 

49            <#-- TAB BORDER → Figma (node I2864:44997;2864:19837/…19842 = `border` = 1px #e1e3e5 grey). 

50                 The AEGOV `.aegov-tab.tab-pills .tab-link` rule (specificity 0,3,0) hard-sets 

51                 `border-width:2px`, giving a heavier edge than Figma's 1px (reads like a shadow/outline). 

52                 The plain `border` utility overrides it because aegov_css_postprocess hardens `.border` to 

53                 `border-width:1px!important` (an !important decl beats the non-important 2px rule regardless 

54                 of specificity — verified live: 2px→1px, colour unchanged). Colour stays via the more 

55                 specific `border-aeblack-100!`. §7-clean AEGOV utility, already compiled → NO theme rebuild. --> 

56            <button type="button" class="tab-link ${(erc_index==0)?string('tab-active ','')}[--tab-link-fg:var(--color-aeblack-600)]! [--tab-link-active-fg:var(--color-primary-600)]! [--tab-link-active-bg:var(--color-primary-50)]! flex! w-full! flex-nowrap! items-center! justify-start! gap-3 rounded-lg border border-aeblack-100! px-4 py-3! text-start" id="nss-tab-${erc}" role="tab" aria-controls="nss-panel-${erc}" aria-selected="${(erc_index==0)?string('true','false')}" data-tabs-target="#nss-panel-${erc}"> 

57              ${icons[erc]} 

58              <span>${title}</span> 

59            </button> 

60          </li> 

61        </#if> 

62      </#list> 

63    </ul> 

64    <#-- Figma 2853:69786 / 2878:116878 "Background+Shadow": 0.5px primary-500 (#b68a35) hairline + 

65         16px radius, and NO box-shadow (the layer is *named* "Background+Shadow" but the Figma node 

66         carries no drop-shadow — verified EN web + AR + mobile). The former `shadow-md` was removed to 

67         match Figma (user 2026-07-07: "remove shadow ... in figma it doesn't have"). Border/radius are 

68         already Figma-aligned (0.5px primary-500, rounded-2xl=16px) — untouched. `text-lg` sets the panel 

69         BASE type to 18px so unstyled body content — the numbered/check list <li> items, which carry no 

70         explicit size and were inheriting the 14px page base — renders at the Figma 18px; headings/ 

71         paragraphs keep their own explicit sizes. §7-clean AEGOV token utilities. border-[0.5px] is 

72         JIT-safelisted in input.css (the FTL is not under any @source glob). --> 

73    <div id="nss-content" class="min-w-0 flex-1 rounded-2xl border-[0.5px] border-primary-500 bg-whitely-50 p-6 sm:p-8 text-lg"> 

74      <#list ercs as erc> 

75        <#assign a = jas.getLatestArticleByExternalReferenceCode(GID, erc)!> 

76        <#if a??> 

77          <#assign title = a.getTitle(locale)!erc> 

78          <#-- The article stores one <dynamic-content language-id="xx_YY"> per locale; the bare 

79               //dynamic-content XPath grabs the FIRST node (ar_SA) regardless of locale, so EN 

80               leaked Arabic. Select the node whose language-id matches the CURRENT locale, then 

81               fall back to the article default, then to ANY node. --> 

82          <#assign langId = locale.toString()> 

83          <#assign descEl = "//dynamic-element[@name='description']/dynamic-content"> 

84          <#assign node = a.getDocument().selectSingleNode(descEl + "[@language-id='" + langId + "']")!> 

85          <#if !node??> 

86            <#assign node = a.getDocument().selectSingleNode(descEl + "[@language-id='" + a.getDefaultLanguageId() + "']")!> 

87          </#if> 

88          <#if !node??> 

89            <#assign node = a.getDocument().selectSingleNode(descEl)!> 

90          </#if> 

91          <#assign desc = ""> 

92          <#if node??><#assign desc = node.getText()!""></#if> 

93          <div id="nss-panel-${erc}" role="tabpanel" aria-labelledby="nss-tab-${erc}" tabindex="0" class="${(erc_index==0)?string('','hidden')}"> 

94            <h2 class="text-5xl lg:text-h1 leading-[1.1] font-bold text-aeblack-800">${title}</h2> 

95            ${desc} 

96          </div> 

97        </#if> 

98      </#list> 

99    </div> 

100  </div> 

101</section>