/* Live site CSS fixes - extracted from zeroheight.com */

/* ============================================
   RTL (Right-to-Left) SUPPORT FOR ARABIC TEXT
   ============================================ */

/* Auto-detect Arabic text direction using Unicode-bidi */
/* Arabic Unicode range: \u0600-\u06FF, \u0750-\u077F, \u08A0-\u08FF */

/* Tables with horizontal-align-right are typically Arabic content */
/* RTL layout: text on right, image on left */
.zheditor-table.horizontal-align-right,
table.horizontal-align-right,
.table-wrapper.horizontal-align-right table,
.tableWrapper .zheditor-table.horizontal-align-right {
    direction: rtl;
    text-align: right;
    table-layout: auto;
    width: 100%;
}

.zheditor-table.horizontal-align-right td,
.zheditor-table.horizontal-align-right th,
table.horizontal-align-right td,
table.horizontal-align-right th,
.table-wrapper.horizontal-align-right table td,
.table-wrapper.horizontal-align-right table th,
.tableWrapper .zheditor-table.horizontal-align-right td {
    direction: rtl;
    text-align: right;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    vertical-align: top;
}

/* RTL table paragraphs */
.zheditor-table.horizontal-align-right .zheditor-p,
.table-wrapper.horizontal-align-right .zheditor-p,
.tableWrapper .zheditor-table.horizontal-align-right .zheditor-p {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* Tables with horizontal-align-left are English content */
.zheditor-table.horizontal-align-left,
table.horizontal-align-left {
    direction: ltr;
    text-align: left;
}

.zheditor-table.horizontal-align-left td,
.zheditor-table.horizontal-align-left th,
table.horizontal-align-left td,
table.horizontal-align-left th {
    direction: ltr;
    text-align: left;
}

/* Generic RTL support - applies to elements containing Arabic characters */
/* Using attribute selector for elements with Arabic content */
[lang="ar"],
[dir="rtl"],
.rtl {
    direction: rtl;
    text-align: right;
}

/* Ensure LTR for English content */
[lang="en"],
[dir="ltr"],
.ltr {
    direction: ltr;
    text-align: left;
}

/* Auto direction for mixed content - let browser decide based on first character */
.zheditor-p,
.zheditor-heading,
h1, h2, h3, h4, h5, h6,
p {
    unicode-bidi: plaintext;
}

/* For paragraphs and headings, use CSS to auto-detect direction */
/* This allows Arabic text to flow RTL and English text to flow LTR */
.ProseMirror p,
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6,
.tiptap p,
.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6 {
    unicode-bidi: plaintext;
}

/* List items should also respect text direction */
.zheditor-li,
.zheditor-ul,
.zheditor-ol,
li, ul, ol {
    unicode-bidi: plaintext;
}

/* Table cells should inherit direction from table */
.zheditor-td,
.zheditor-tr,
td, tr {
    unicode-bidi: plaintext;
}

/* ============================================
   SIDEBAR NAVIGATION - Main styling
   ============================================ */

/* Main sidebar container */
.sidebar,
.Sidebarstyled__SidebarStyled-nArwk {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: inherit;
}

.sidebar li,
.sidebar ul {
    list-style: none !important;
    margin: 0 !important;
}

/* Category items (Brand Story, Foundation, Expression, etc.) */
.Sidebarstyled__CategoryItemStyled-daOCpr,
.sidebar--category {
    margin-bottom: 0;
}

/* List item styling - the clickable row */
.ListItemstyled__ListItemStyled-fTfWOs,
.iGeXmZ {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px 10px 16px;
    cursor: pointer;
    min-height: 40px;
    box-sizing: border-box;
}

/* Category list item (top level like Brand Story) */
.Sidebarstyled__CategoryListItemStyled-cguOCV,
.eeZeJo {
    padding-left: 16px !important;
    font-weight: 500;
}

/* Page list item (nested like Brand 3.0) */
.Sidebarstyled__PageListItemStyled-jQZRSC,
.iWELQP {
    padding-left: 32px !important;
}

/* Tab list item (deepest nesting like "Brand story / سرد الهوية") */
.Sidebarstyled__TabListItemStyled-rfyoG,
.iEyPCf {
    padding-left: 48px !important;
    font-weight: 400;
}

/* Text container */
.ListItemstyled__TextContainerStyled-AYuDB,
.iKzqSK {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* Text styling */
.ListItemstyled__TextStyled-kefdxC,
.Text-iXOHMN {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #212121;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
}

/* Active/selected text */
.kMCBIF {
    color: #212121;
}

/* Link text */
.kRdBnx,
.hHnKMP {
    color: #212121;
    text-decoration: none;
}

.kRdBnx:hover,
.hHnKMP:hover {
    color: #000;
}

/* Icons container (right side) */
.ListItemstyled__IconsContainerStyled-erHBFE,
.jGovOO {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: 8px;
}

/* Icon container wrapper */
.ListItemstyled__IconContainerStyled-ePcwXv,
.GWgEG {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   CHEVRON/EXPAND ICONS
   ============================================ */

/* Icon base styling */
.Iconstyled__IconStyled-gPYeWY {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Size 4 = 16px icons (sidebar chevrons) */
.cXwyAc,
[size="4"] {
    width: 16px !important;
    height: 16px !important;
}

/* Size 6 = 24px icons */
.hjqCBo,
[size="6"] {
    width: 24px !important;
    height: 24px !important;
}

/* Expand icon styling */
.ListItemstyled__ExpandIconStyled-JLwJS {
    transition: transform 0.2s ease;
}

/* Collapsed state - chevron pointing right (>) */
.cKMFBJ,
.ListItemstyled__ExpandIconStyled-JLwJS[aria-pressed="false"] {
    transform: rotate(-90deg);
}

/* Expanded state - chevron pointing down (v) */
.cRDEOk,
.ListItemstyled__ExpandIconStyled-JLwJS[aria-pressed="true"] {
    transform: rotate(0deg);
}

/* SVG inside icons */
.Iconstyled__IconStyled-gPYeWY svg {
    width: 100%;
    height: 100%;
}

/* ============================================
   SLIDEDOWN/NESTED CONTENT
   ============================================ */

/* Expanded submenu container */
.Sidebarstyled__SlidedownStyled-hNFULz {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}

/* Expanded state - visible */
.kzafzw {
    display: block !important;
}

/* Collapsed state - hidden */
.jlrAOz {
    display: none !important;
}

/* Sidebar item wrapper */
.Sidebarstyled__SidebarItemStyled-crpOEV,
.iCGSSR {
    margin: 0;
    padding: 0;
}

/* ============================================
   HOVER & ACTIVE STATES
   ============================================ */

/* Hover effect on list items */
.ListItemstyled__ListItemStyled-fTfWOs:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

/* Active/selected sidebar item - light blue background */
.cftTFq,
.kYRTud,
.ListItemstyled__ListItemStyled-fTfWOs.cftTFq {
    background-color: #E8F4FD !important;
    border-radius: 4px;
    margin: 2px 8px;
    width: calc(100% - 16px);
}

/* Active tab text - bold blue */
.YJpHr,
.ListItemstyled__TextStyled-kefdxC.YJpHr,
[type="heading.small"] {
    font-weight: 600 !important;
    color: var(--colors-blocks-content-text-small-heading, #0D1280) !important;
}

/* Selected page item in sidebar */
.Sidebarstyled__PageListItemStyled-jQZRSC[data-appid*="-page"]:has(+ ul .cftTFq),
.sidebar--page:has(.cftTFq) > .ListItemstyled__ListItemStyled-fTfWOs {
    background-color: #F0F4F8;
    border-radius: 4px;
}

/* ============================================
   CONTENT TABS (Below hero section)
   ============================================ */

/* Tab container */
.tabs-container,
.page-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
    padding: 0 24px;
    gap: 0;
}

/* Hide ALL line elements within tabs - they cause the moving bar issue */
.page-tabs .line,
.tab-view--tab .line,
.tabs-container .line {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Hide the horizontal scrollbar in tabs while keeping scroll functionality */
.page-tabs .overflow-x-scroll,
.page-tabs .tiny-scrollbar,
.page-tabs .overflow-x-only {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
}

.page-tabs .overflow-x-scroll::-webkit-scrollbar,
.page-tabs .tiny-scrollbar::-webkit-scrollbar,
.page-tabs .overflow-x-only::-webkit-scrollbar,
.page-tabs::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Also target the tabs container directly */
.tabs.page-tabs .full-height.flex.overflow-x-scroll {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.tabs.page-tabs .full-height.flex.overflow-x-scroll::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Individual tab wrapper */
.tab-view--tab {
    position: relative;
}

/* Tab link styling */
.tab-view--name {
    display: inline-block;
    padding: 16px 16px;
    font-size: 14px;
    color: #605f60;
    text-decoration: none !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    white-space: nowrap;
}

.tab-view--name:hover {
    color: #333;
}

/* Active tab - dark text with colored underline */
.tab-view--name.active-tab,
a.tab-view--name.active-tab {
    color: #212121 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #4d4d4d !important;
}

/* ============================================
   MAIN LAYOUT
   ============================================ */

/* Page content area */
.page {
    max-width: 848px; /* mxwg212 = 212 * 4 = 848px */
    min-width: 848px; /* miwg212 = 212 * 4 = 848px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px; /* px12 = 12 * 4 = 48px */
    padding-right: 48px;
    padding-top: 96px; /* pgt24 = 24 * 4 = 96px */
    padding-bottom: 96px;
    position: relative;
}

/* Page outline (table of contents) - positioned to the right */
.page--outline {
    position: absolute !important;
    right: -180px; /* Position outside the main content area */
    top: 48px;
    width: 160px;
}

/* On smaller screens, hide the outline or adjust */
@media (max-width: 1400px) {
    .page--outline {
        display: none;
    }
}

/* Full height containers */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html.full-height {
    height: 100%;
}

#content {
    display: flex !important;
    visibility: visible !important;
    min-height: 100vh;
}

/* Left sidebar pane - fixed position with internal scrolling */
.left-pane {
    display: flex !important;
    flex-direction: column;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
    flex-shrink: 0;
    border-right: 1px solid #e5e5e5;
    height: 100vh;
    max-height: 100vh;
    overflow-y: scroll !important;
    overflow-x: hidden;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 100;
    -webkit-overflow-scrolling: touch;
}

/* Right pane - main content area, offset by sidebar width */
.right-pane {
    flex: 1;
    margin-left: 240px;
    min-height: 100vh;
}

/* Page wrapper - natural scrolling */
.page--wrapper {
    overflow-y: visible !important;
    overflow-x: visible !important;
    height: auto !important;
}

/* Also target the nav element */
nav.left-pane,
.left-pane.wg60 {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}

/* Tree bar view - logo container */
.TreeBarViewstyled__LogoContainerStyled-hAHSwS,
.bMWLMK {
    padding: 16px;
}

/* Logo image sizing */
.logo img,
.StyleguideNavbarstyled__LogoStyled-kptZPy {
    max-width: 100%;
    height: auto;
}

/* Search box in sidebar - pill/capsule shape */
.search-box {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    margin: 0 16px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 50px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.search-box:hover,
.search-box:focus-within {
    border-color: #ccc;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Search icon styling */
.search-box svg,
.search-box .Iconstyled__IconStyled-gPYeWY {
    color: #666;
    flex-shrink: 0;
    margin-right: 8px;
}

.search-box input,
.search-box .search-text-input {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: #333;
}

.search-box input::placeholder,
.search-box .search-text-input::placeholder {
    color: #999;
}

/* Search results dropdown */
.results-container {
    position: absolute;
    top: 100%;
    left: 16px;
    right: 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
}

.results-container .results {
    padding: 0;
}

.results-container .search-result-item:first-child {
    border-radius: 8px 8px 0 0;
}

.results-container .search-result-item:last-child {
    border-radius: 0 0 8px 8px;
    border-bottom: none;
}

/* Pages wrapper - scrollable area inside sidebar */
.pages-wrapper {
    flex: 1;
    overflow-y: visible;
    padding-bottom: 16px;
}

/* Ensure sidebar inner content doesn't block scrolling */
.left-pane .tree-bar-view,
.left-pane .side-bar-background {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
}

/* ============================================
   HERO/COVER SECTION
   ============================================ */

/* Cover page container */
.cover-page {
    position: relative;
}

/* Cover section layout */
.cover {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
}

.cover-inner-content {
    max-width: 848px;
    margin: 0 auto;
    padding: 48px;
}

/* Cover text wrapper - white text and proper layout */
.cover .cover-text-wrapper,
.cover .cover-text-wrapper * {
    color: rgb(255, 255, 255) !important;
}

/* Title styling - the main heading */
.cover .cover-text-wrapper .title {
    margin-bottom: 8px;
}

.cover .cover-text-wrapper .title h1,
.cover .cover-text-wrapper h1.type_heading-xxxlarge,
h1.type_heading-xxxlarge {
    color: rgb(255, 255, 255) !important;
    font-size: 3.5rem !important;
    font-weight: 700 !important;
    line-height: 4rem !important;
    margin: 0 0 8px 0 !important;
    white-space: normal !important;
}

/* Subtitle - "Styleguide updated X days ago" */
.cover .cover-text-wrapper .subtitle {
    color: rgb(255, 255, 255) !important;
    opacity: 0.6;
    font-size: 1rem;
    margin-bottom: 16px;
}

/* Introduction/Description text */
.cover .cover-text-wrapper .introduction,
.cover .cover-text-wrapper .page-introduction,
.cover .cover-text-wrapper .page-introduction-element,
.cover .cover-text-wrapper .description,
.cover .cover-text-wrapper .ProseMirror,
.cover .cover-text-wrapper p.zheditor-p,
.cover .page-introduction .ProseMirror p.zheditor-p,
.cover .description .zheditor-p {
    color: rgb(255, 255, 255) !important;
}

/* Override the grey color from page-introduction styles when in cover */
.cover .page-introduction .ProseMirror p,
.cover .page-introduction-view p,
.cover .styleguide-description p {
    color: rgb(255, 255, 255) !important;
}

/* Ensure description text flows properly */
.cover .styleguide-description,
.cover .page-introduction-view,
.cover .description {
    max-width: 600px;
}

.cover .styleguide-description p,
.cover .page-introduction-view p,
.cover .description p,
.cover p.zheditor-p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 8px;
    white-space: normal;
}

/* ============================================
   HERO/PAGE HEADER
   ============================================ */

.page-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.3;
}

.category-name {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

/* Ready badge */
.status-badge,
[class*="badge"] {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

/* ============================================
   RIGHT SIDEBAR (Table of Contents)
   ============================================ */

.right-pane,
.outline-sidebar {
    width: 200px;
    flex-shrink: 0;
    padding: 24px 16px;
    border-left: 1px solid #e5e5e5;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.table-of-contents {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-of-contents li {
    padding: 6px 0;
}

.table-of-contents a {
    color: #666;
    text-decoration: none;
    font-size: 13px;
}

.table-of-contents a:hover,
.table-of-contents a.active {
    color: #212121;
}

/* ============================================
   TABLE STYLING - Clean table borders
   ============================================ */

/* Force all table borders to be light grey */
table,
table tr,
table td,
table th,
table tbody,
table thead,
.zheditor-table,
.zheditor-table tr,
.zheditor-table td,
.zheditor-table th,
.zheditor-table tbody,
table.zheditor-table,
.tableWrapper table,
.tableWrapper table tr,
.tableWrapper table td,
.tableWrapper table th,
.tableWrapper table tbody,
.tiptap table,
.tiptap table tr,
.tiptap table td,
.tiptap table th,
.ProseMirror table,
.ProseMirror table tr,
.ProseMirror table td,
.ProseMirror table th {
    border-color: #e5e5e5 !important;
}

/* Tables with border-style-rows - use grey borders only */
.zheditor-table.border-style-rows tr,
.zheditor-table.border-style-rows td,
.zheditor-table.border-style-rows tbody tr,
.zheditor-table.border-style-rows tbody td,
table.border-style-rows tr,
table.border-style-rows td {
    border-color: #e5e5e5 !important;
}

/* Tables with show-border class */
.zheditor-table.show-border td,
.zheditor-table.show-border tr,
.zheditor-table.show-border tbody tr,
.zheditor-table.show-border tbody td,
table.show-border td,
table.show-border tr {
    border-color: #e5e5e5 !important;
}

/* Ensure table cell borders are light grey */
.zheditor-td,
.zheditor-tr,
td.zheditor-td,
tr.zheditor-tr {
    border-color: #e5e5e5 !important;
}

/* Override CSS variables for table borders and Do's/Don'ts colors */
:root {
    --colors-blocks-table-border-main: #e5e5e5 !important;
    --colors-blocks-rules-background-do: #bdf4e9;
    --colors-blocks-rules-background-dont: #fce5e4;
    --colors-blocks-rules-text-do: #212121;
    --colors-blocks-rules-text-dont: #212121;
}

/* Remove spellcheck underlines from all content */
[spellcheck="false"],
[contenteditable="false"],
.ProseMirror,
.tiptap {
    -webkit-text-decoration-skip: none;
    text-decoration-skip-ink: none;
}

/* Disable browser spellcheck styling */
*::-webkit-spelling-error,
*::-moz-spelling-error {
    text-decoration: none !important;
}

*::-webkit-grammar-error,
*::-moz-grammar-error {
    text-decoration: none !important;
}

/* Remove any red wavy underlines (spellcheck) */
* {
    -webkit-text-decoration-style: solid !important;
    text-decoration-style: solid !important;
}

/* Remove selection styling from read-only content */
.ProseMirror[contenteditable="false"] *::selection,
.tiptap[contenteditable="false"] *::selection {
    background: transparent !important;
}

/* Hide horizontal rules that may appear as colored lines */
.zheditor-hr,
hr.zheditor-hr,
.horizontal-rule__Divider-JfvIw {
    border: none !important;
    border-top: 1px solid #e5e5e5 !important;
    margin: 16px 0 !important;
    background: transparent !important;
}

/* ============================================
   IMAGE BLOCKS - Remove background colors and extra spacing
   ============================================ */

/* Remove any background from image holders and containers */
.image-holder,
.image-container,
.image-block,
.marionette-block-wrapper-wide-selection-area,
.disable-selecting {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Fix flex containers in image blocks */
.image-holder.flex,
.image-container.flex,
.full-height.flex.flex-column {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Remove checkerboard pattern from any element */
.checkerboard {
    background: white !important;
    background-image: none !important;
}

/* Force transparent on any potentially colored containers */
.border-box.border-color-transparent,
.full-width.border-box {
    background: transparent !important;
}

/* Remove extra spacing from image blocks */
.image-block {
    padding: 0 !important;
    margin: 0 !important;
}

.image-block.nmgt2,
.image-block.pgy2,
.image-block.mgb10 {
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.image-holder {
    min-height: auto !important;
    height: auto !important;
}

.image-holder.full-height {
    height: auto !important;
}

.image-container {
    min-height: auto !important;
    height: auto !important;
}

/* Remove extra space from wrapper divs around images */
.marionette-block-wrapper-wide-selection-area,
.disable-selecting {
    padding: 0 !important;
    margin: 0 !important;
}

/* Override full-height on image wrappers */
.image-holder.full-width.full-height,
.image-block .full-height {
    height: auto !important;
}

/* Remove the block placeholder completely */
.block-placeholder {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Make images fit their content */
.image-container img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Fix the relative wrapper around images */
.image-container .relative {
    display: inline-block !important;
}

/* Override any min-full-height on image areas */
.image-block .min-full-height,
.image-holder .min-full-height {
    min-height: auto !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Overflow fixes */
html, body {
    overflow: auto !important;
    height: auto !important;
    min-height: 100vh;
}

html.overflow-hidden,
body.overflow-hidden {
    overflow: auto !important;
}

/* Hide empty placeholder divs */
div.empty {
    display: none !important;
}

/* Hide introduction placeholder when empty */
div.introduction:empty {
    display: none !important;
}

/* Hide page banner container when empty */
.page-banner-container:has(> .Box-hsdYAF:empty):not(:has(img)):not(:has(span)):not(:has(a)) {
    display: none !important;
}

/* Hide ONLY empty shortcut tiles boxes - keep ones with content */
.shortcut-tiles:empty,
.ShortcutTiles__ShortcutTilesStyled-ehsUrT:empty {
    display: none !important;
}

/* Hide the top-level shortcut-tiles wrapper when it contains only empty nested tiles */
div.shortcut-tiles:has(> div[data-block-id="shortcut-tiles"]):not(:has(.ShortcutTilestyled__StyledShortcutTileContainer-kGkoIn)) {
    display: none !important;
}

/* Hide shortcut tile containers that have no actual tile content */
div[data-block-id="shortcut-tiles"]:not(:has(.ShortcutTilestyled__StyledShortcutTileContainer-kGkoIn)):not(:has(a[href])):not(:has(img[src])) {
    display: none !important;
}

/* ============================================
   SHORTCUT TILES - Card Grid Layout
   ============================================ */

/* Shortcut tiles container - grid layout */
.ShortcutTiles__ShortcutTilesStyled-ehsUrT,
.shortcut-tiles {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 16px 0;
}

/* Individual tile container */
.ShortcutTilestyled__StyledShortcutTileContainer-kGkoIn {
    display: block;
}

/* Tile card - the clickable link */
.ShortcutTilestyled__StyledShortcutTile-cdMsFg {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease;
    height: 100%;
}

.ShortcutTilestyled__StyledShortcutTile-cdMsFg:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Tile content wrapper */
.ShortcutTilestyled__StyledShortcutTileContent-gkRQzN {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Cover image - the colored box at top */
.ShortcutTilestyled__StyledCoverImage-fTEku,
.CoverImage-bEPZkG {
    width: 100%;
    min-height: 100px;
    height: 100px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Default blue background if no image */
    background-color: #0D1280;
}

/* Body section - title and description */
.ShortcutTilestyled__StyledShortcutBody-jscCUE {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Title styling */
.ShortcutTilestyled__StyledTitle-kfgMlA {
    font-size: 14px;
    font-weight: 600;
    color: #212121;
    margin: 0;
}

/* Description styling */
.ShortcutTilestyled__StyledDescription-edeNK {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* Responsive - 2 columns on smaller screens */
@media (max-width: 900px) {
    .ShortcutTiles__ShortcutTilesStyled-ehsUrT,
    .shortcut-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive - 1 column on mobile */
@media (max-width: 500px) {
    .ShortcutTiles__ShortcutTilesStyled-ehsUrT,
    .shortcut-tiles {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   DO'S AND DON'TS BLOCKS - Grid Layout
   ============================================ */

/* Fix the negative margin on the wrapper that causes overlap with text above */
.react-renderer.node-rules [data-node-view-wrapper] {
    margin-top: 16px !important;
}

/* Main container for Do's and Don'ts - 2 column grid */
.DosAndDontsstyled__DosAndDontsContainerStyled-iDDHA-D,
[class*="DosAndDontsContainerStyled"],
.hRJCDw {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    width: 100% !important;
    align-items: start !important;
}

/* Card wrapper created by JavaScript - each card contains image + text */
.dos-donts-card {
    display: flex !important;
    flex-direction: column !important;
}

/* Empty options tile (placeholder) - hide it completely */
.DosAndDontsstyled__EmptyOptionsTileStyled-mJFus,
[class*="EmptyOptionsTileStyled"],
.hdaKHS,
.jFOOhO {
    display: none !important;
    position: absolute !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* All section wrappers - block display */
[class*="SectionStyled"] {
    display: block !important;
}

/* Image sections */
[class*="ImageSectionStyled"] {
    margin-bottom: 8px !important;
}

/* Text sections */
[class*="TextSectionStyled"] {
    margin-bottom: 0 !important;
}

/* Image sections styling */
.DosAndDontsstyled__ImageSectionStyled-jSODRH,
[class*="ImageSectionStyled"] {
    position: relative;
    width: 100%;
}

/* Text sections */
.DosAndDontsstyled__TextSectionStyled-bKziSh,
[class*="TextSectionStyled"] {
    padding-top: 8px;
    padding-bottom: 16px;
}

/* Image box container */
.DosAndDontsstyled__DosAndDontsImageBoxStyled-bJBbrC,
[class*="DosAndDontsImageBoxStyled"],
.chaNoC {
    position: relative;
    border-radius: 8px;
    overflow: visible;
    background: #fff;
}

/* The colored box (contains the image) - default grey background */
.DosAndDontsstyled__DosAndDontsColoredBoxStyled-ktvqvx,
[class*="DosAndDontsColoredBoxStyled"],
.lnmaJE,
.kAwzXL,
.hNulRr {
    position: relative;
    padding: 20px;
    background: #f5f5f5 !important;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: visible;
}

/* Image styling */
.DosAndDontsstyled__ImageStyled-bQgmfa,
.fTGcKx {
    max-width: 100% !important;
    height: auto;
    display: block;
}

/* Pill wrapper (Don't/Do badge) */
.Pillstyled__PillWrapperStyled-fJmNOr,
[class*="PillWrapperStyled"],
.kjJGDI {
    display: inline-flex;
    margin-bottom: 8px;
}

/* The pill itself - base styles */
.Pillstyled__PillStyled-djzWqY,
[class*="PillStyled"] {
    display: inline-flex !important;
    align-items: center;
    padding: 4px 12px;
    border-radius: 4px;
    gap: 6px;
}

/* Don't pill - red/pink background */
.gXMLAX,
[class*="PillStyled"][color*="dont"],
[class*="PillStyled"][color*="fce5e4"] {
    background-color: #fce5e4 !important;
}

/* Do pill - green/teal background */
.cZBtqp,
[class*="PillStyled"][color*="do,"],
[class*="PillStyled"][color*="bdf4e9"] {
    background-color: #bdf4e9 !important;
}

/* Pill icon */
.Pillstyled__StyledIcon-dJWssy,
[class*="Pillstyled__StyledIcon"],
.bVWxmo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Pill text */
.dWcYFt {
    font-weight: 500;
}

/* Description text */
.DosAndDontsstyled__Description-kAyrNA,
[class*="DosAndDonts__Description"],
[class*="Description-kAyrNA"],
.cQmtsK {
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    unicode-bidi: plaintext;
}

/* Image spacing element - reduce */
.DosAndDontsstyled__DosAndDontsImageSpacingStyled-iNvtxy,
[class*="DosAndDontsImageSpacingStyled"],
.feZCJI {
    height: 8px;
}

/* Box styling wrapper */
.jappCO {
    margin-bottom: 4px;
}

/* Caption text below images in Do/Don't blocks */
.DosAndDontsstyled__CaptionStyled-dYJIQf,
[class*="CaptionStyled"],
.gmesES {
    font-size: 12px;
    color: #666;
    text-align: center;
    padding: 8px 0;
    unicode-bidi: plaintext;
}

/* Caption text within the caption styled element */
.gmesES .Text-iXOHMN,
.gmesES .hQbMCh {
    font-size: 12px;
    color: #666;
}

/* Responsive - single column on smaller screens */
@media (max-width: 900px) {
    .DosAndDontsstyled__DosAndDontsContainerStyled-iDDHA-D,
    [class*="DosAndDontsContainerStyled"],
    .hRJCDw {
        grid-template-columns: 1fr !important;
    }
}

/* Hide spinners and modals */
.spinner,
#spinner-overlay,
.loading-spinner {
    display: none !important;
}

#modal,
#modal-on-top,
.modal,
.modal-overlay,
.login-modal,
[class*="LoginModal"],
[class*="login-modal"],
[class*="SignIn"],
[class*="sign-in"],
.ReactModal__Overlay,
.ReactModal__Content,
[role="dialog"],
[aria-modal="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide any overlay/backdrop */
.overlay-backdrop,
.modal-backdrop,
[class*="Overlay"][class*="Styled"],
[class*="backdrop"] {
    display: none !important;
}

/* Flex utilities */
.flex-column {
    display: flex !important;
    flex-direction: column !important;
}

.flex-row {
    display: flex !important;
    flex-direction: row !important;
}

/* Alignment utilities */
.right-align {
    float: right;
}

/* Sticky positioning */
.sticky {
    position: sticky;
}

/* Link reset */
a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* Image fixes */
img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   TYPOGRAPHY SPEC TABLE - Font Properties Layout
   ============================================ */

/* Properties container - holds all property rows */
.properties {
    display: block !important;
    width: 100% !important;
    max-width: 400px !important;
}

/* The flex-row within properties - should stack vertically, not horizontally */
.properties .flex-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
}

/* Individual property view items - each is a row with label + value */
.sketch-item--property-view {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    width: 100% !important;
    margin-right: 0 !important;
}

/* Inner top container within property view - horizontal row */
.sketch-item--property-view .top {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    width: 100% !important;
}

/* Property label styling - fixed width for alignment */
.sketch-item--property-view .value-label {
    color: #666 !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    min-width: 120px !important;
    width: 120px !important;
}

/* Property value styling */
.sketch-item--property-view .value {
    font-size: 14px !important;
    color: #212121 !important;
    min-width: 100px !important;
}

/* Second value (like 4rem next to 64px) */
.sketch-item--property-view .second-value {
    font-size: 14px !important;
    color: #212121 !important;
    margin-left: 24px !important;
}

/* Override the width classes for property views - they should not apply percentage widths */
.sketch-item--property-view.wg16,
.sketch-item--property-view.wg17,
.sketch-item--property-view.wg32 {
    width: 100% !important;
    min-width: unset !important;
}

/* Margin classes - reduce for cleaner look */
.sketch-item--property-view.mgr4 {
    margin-right: 0 !important;
}

.mr4 { margin-right: 16px !important; }
.mgt2 { margin-top: 8px !important; }
.mb1 { margin-bottom: 4px !important; }

/* Padding classes */
.pgb2 { padding-bottom: 8px !important; }
.pr8 { padding-right: 32px !important; }

/* Sketch item content - the main flex container */
.sketch-item--content {
    display: flex !important;
    flex-direction: row !important;
}

.sketch-item--content.flex {
    display: flex !important;
}

/* Details section (left side with name + properties) */
.sketch-item--content .details {
    flex: 1 !important;
    min-width: 0 !important;
    max-width: 450px !important;
}

/* Thumbnail section (right side with preview text) */
.sketch-item--content .thumbnail {
    flex-shrink: 0 !important;
    flex: 1 !important;
}

/* ============================================
   COLOR PALETTE - Vertical Layout
   ============================================ */

/* Color palette items need vertical (column) layout, not row */
.sketch-item--color .sketch-item--content,
.color-grid .sketch-item--content {
    display: flex !important;
    flex-direction: column !important;
}

/* Color swatch thumbnail - fixed size at top */
.sketch-item--color .thumbnail,
.color-grid .thumbnail {
    flex: none !important;
    width: auto !important;
}

/* Color name row - below thumbnail */
.sketch-item--color .name-row,
.color-grid .name-row {
    margin-top: 8px !important;
}

/* Color properties - below name, stacked vertically */
.sketch-item--color .properties,
.color-grid .properties {
    display: block !important;
    margin-top: 4px !important;
}

.sketch-item--color .properties .sketch-item--property-view,
.color-grid .properties .sketch-item--property-view {
    display: block !important;
    margin-bottom: 2px !important;
}

.sketch-item--color .properties .sketch-item--property-view .top,
.color-grid .properties .sketch-item--property-view .top {
    display: block !important;
}

.sketch-item--color .properties .value,
.color-grid .properties .value {
    font-size: 14px !important;
    color: #605f60 !important;
}

/* Truncate utility - but not for property values */
.truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Don't truncate property values */
.sketch-item--property-view .value.truncate,
.sketch-item--property-view .second-value.truncate {
    overflow: visible !important;
    white-space: nowrap !important;
}

/* ============================================
   TONE DIMENSIONS TABLE - Text/Marker Alignment
   ============================================ */

/*
 * The tone dimensions tables have text on one side and marker images on the other.
 * Each text line (including blank <br> lines) needs to match marker dot positions.
 * Arabic tables use horizontal-align-right, English use horizontal-align-left.
 */

/* Target both Arabic and English tone dimensions tables */
.zheditor-table.hide-border.horizontal-align-right,
.zheditor-table.hide-border.horizontal-align-left {
    table-layout: fixed !important;
}

/* All paragraphs - consistent line height matching marker spacing */
/* The marker image has 5 rows with equal spacing (~56px each based on image height) */
.zheditor-table.hide-border.horizontal-align-right .zheditor-td p.zheditor-p,
.zheditor-table.hide-border.horizontal-align-left .zheditor-td p.zheditor-p {
    line-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 26px !important;
}

/* Text cell - first column (700px width) */
.zheditor-table.hide-border.horizontal-align-right .zheditor-td[colwidth="700"],
.zheditor-table.hide-border.horizontal-align-left .zheditor-td[colwidth="700"] {
    vertical-align: top !important;
    padding-top: 60px !important;
    padding-bottom: 0 !important;
}

/* Spacer cell - middle column (40px width) */
.zheditor-table.hide-border.horizontal-align-right .zheditor-td[colwidth="40"],
.zheditor-table.hide-border.horizontal-align-left .zheditor-td[colwidth="40"] {
    vertical-align: top !important;
}

/* Image cell - last column with marker image */
.zheditor-table.hide-border.horizontal-align-right .zheditor-td:last-child,
.zheditor-table.hide-border.horizontal-align-left .zheditor-td:last-child {
    vertical-align: top !important;
    padding-top: 0 !important;
}

/* Ensure the image aligns at top */
.zheditor-table.hide-border.horizontal-align-right .image-block,
.zheditor-table.hide-border.horizontal-align-left .image-block {
    margin-top: 0 !important;
}

.zheditor-table.hide-border.horizontal-align-right .image-container,
.zheditor-table.hide-border.horizontal-align-left .image-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Table cells proper display */
.zheditor-table.hide-border.horizontal-align-right .zheditor-td,
.zheditor-table.hide-border.horizontal-align-left .zheditor-td {
    display: table-cell !important;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .right-pane,
    .outline-sidebar {
        display: none;
    }
}

@media (max-width: 768px) {
    .left-pane {
        display: none;
    }
}