/* Brand Theme CSS - Extracted from live zeroheight.com */

/* ============================================
   CUSTOM FONTS
   ============================================ */

@font-face {
    font-family: "Visby CF";
    font-weight: 800;
    src: url(https://dl.dropboxusercontent.com/scl/fi/eut5nh4l6y85ncq9ipu3d/VisbyDM-ExtraBold.ttf?rlkey=m7r3nqntnylv6jj04x9n0rqe3&dl=1);
}
@font-face {
    font-family: "Visby CF";
    font-weight: 700;
    src: url(https://dl.dropboxusercontent.com/scl/fi/wi15myka39rl82j8d2etc/VisbyDM-Bold.ttf?rlkey=gu1af7em4omlp8ld4cnn17tsa&dl=1);
}
@font-face {
    font-family: "Visby CF";
    font-weight: 500;
    src: url(https://dl.dropboxusercontent.com/scl/fi/x9y56zzl2tkmflvpzho3u/VisbyDM-DemiBold.ttf?rlkey=rmhb38hespueb6wq2f13dl7pr&dl=1);
}
@font-face {
    font-family: "Visby CF";
    font-weight: 400;
    src: url(https://dl.dropboxusercontent.com/scl/fi/cyqkrpx65zrth91null8y/VisbyDM-Regular.ttf?rlkey=yjnsj30f1l88vny77x7kt2thl&dl=1);
}
@font-face {
    font-family: "Visby CF";
    font-weight: 300;
    src: url(https://dl.dropboxusercontent.com/scl/fi/makpsau3si6b2dhmjdswm/VisbyDM-Light.ttf?rlkey=ax5oxx2c32ksvix43vp25zc6l&dl=1);
}
@font-face {
    font-family: "TheSansArabic";
    font-weight: 800;
    src: url(https://dl.dropboxusercontent.com/scl/fi/apnqwtahzavgsurveycj3/TheSansArabic-ExtraBold.otf?rlkey=29trads1tmy6icpcu6d8sgeey&dl=0);
}
@font-face {
    font-family: "TheSansArabic";
    font-weight: 700;
    src: url(https://dl.dropboxusercontent.com/scl/fi/06znxws8nsgmuuv5azihx/TheSansArabic-Bold.otf?rlkey=1y9l93ktycvohtnx0b3xo8u84&dl=0);
}
@font-face {
    font-family: "TheSansArabic";
    font-weight: 600;
    src: url(https://dl.dropboxusercontent.com/scl/fi/wkecafoskpgda99gdlnb1/TheSansArabic-SemiBold.otf?rlkey=eq3fydh9ouj6o1igfawyjiru1&dl=0);
}
@font-face {
    font-family: "TheSansArabic";
    font-weight: 400;
    src: url(https://dl.dropboxusercontent.com/scl/fi/rin047sdh0e12hldwumwo/TheSansArabic-Plain.otf?rlkey=ygidchrsltpmngdix4mp8op88&dl=0);
}
@font-face {
    font-family: "TheSansArabic";
    font-weight: 300;
    src: url(https://dl.dropboxusercontent.com/scl/fi/tbsnabafqf83n09yjm4ie/TheSansArabic-Light.otf?rlkey=uimcy80u2bcc9emn5libc7nnn&dl=0);
}
@font-face {
    font-family: "Dubai";
    font-weight: 800;
    src: url(https://dl.dropboxusercontent.com/scl/fi/xz1n6x90fbhud5lpjnedc/Dubai-Bold.otf?rlkey=dcgu49jdr3tps7r4zj1teefmj&dl=0);
}
@font-face {
    font-family: "Dubai";
    font-weight: 400;
    src: url(https://dl.dropboxusercontent.com/scl/fi/os5q9gqss0lhutvcrgtk8/Dubai-Regular.otf?rlkey=kb5ylf4gnhonmar2yqwb0adxf&dl=0);
}

/* ============================================
   CSS CUSTOM PROPERTIES (Color Theme)
   ============================================ */

:root,
:root[data-styleguide-theme="-1"],
html[data-styleguide-theme="-1"] {
    /* Dubai Municipality Brand Colors */
    --colors-blocks-content-text-styleguide-body: #3A3F57;
    --colors-blocks-upload-text-label: #3A3F57;
    --colors-blocks-content-text-large-heading: #3A3F57;
    --colors-styleguide-background-accent: #DB4E6D;
    --colors-blocks-content-text-link: #DB4E6D;
    --colors-blocks-content-text-smaller-heading: #3A3F57;
    --colors-blocks-content-text-small-heading: #0D1280;
    --colors-blocks-content-text-styleguide-title: #0D1280;
    --colors-blocks-content-text-styleguide-page-intro: #3A3F57;
    --colors-blocks-upload-background-annotation: #c51d54;
    --colors-blocks-upload-text-annotation: #ffffff;
    --colors-styleguide-reversed-accent: #ffffff;

    /* UI Element Colors */
    --colors-ui-element-background-main: #ffffff;
    --colors-ui-element-background-action: #DB4E6D;
    --colors-ui-element-background-active: #eeeeee;
    --colors-ui-element-background-hover: #f7f7f7;
    --colors-ui-element-background-search-highlight: #FCE4EC;
    --colors-ui-element-border: #dedede;
    --colors-ui-element-text: #3A3F57;
    --colors-ui-element-text-secondary: #605f60;

    /* Content Colors - Secondary */
    --colors-blocks-content-text-styleguide-secondary-body: #605f60;
    --colors-blocks-content-text-placeholder: #9e9e9e;
    --colors-blocks-content-background-styleguide-body: #ffffff;
    --colors-blocks-content-border-main: #dedede;

    /* Tab Colors - Use accent color */
    --colors-blocks-tabs-border-active: #DB4E6D;
    --colors-blocks-tabs-text-active: #3A3F57;
    --colors-blocks-tabs-text-main: #605f60;

    /* Table Colors */
    --colors-blocks-table-border-main: #dedede;
    --colors-blocks-table-background-header: #ebebeb;
    --colors-blocks-table-background-alternate-row: #fcfbfb;

    /* Upload/Label Colors */
    --colors-blocks-upload-text-label: #212121;

    /* Sidebar Colors */
    --colors-sidebar-text-icon: #605f60;

    /* Accent Color */
    --colors-styleguide-background-accent: #2265c9;
}

/* ============================================
   PAGE CONTENT STYLING
   ============================================ */

/* ============================================
   DIRECT COLOR APPLICATION (Dubai Brand)
   ============================================ */

/* Page titles - Dark Blue */
.page-title,
.page-title *,
.block-header h2,
h1.block-name,
.section-header {
    color: #0D1280 !important;
}

.page .category-name {
    color: #605f60;
}

.ql-editor table td {
    color: #3A3F57;
}

.ql-container.page-introduction .ql-editor p {
    color: #3A3F57;
}

.page-introduction .ProseMirror p.zheditor-p {
    color: #3A3F57;
}

.page--wrapper {
    background-color: #ffffff;
}

/* ============================================
   HEADINGS - Apply Brand Colors Directly
   Override extracted styles with higher specificity
   ============================================ */

/* H2 - Main section titles - Dark Blue */
html h2,
html h2.zheditor-heading,
body h2,
body h2.zheditor-heading,
.tiptap h2,
.ProseMirror h2,
.content h2,
.type_heading-xxlarge,
.type_heading-large,
.type_heading-medium,
[data-styleguide-theme] h2 {
    color: #0D1280 !important;
}

/* H3 - Main statements (large blue text) - Dark Blue */
html h3,
html h3.zheditor-heading,
body h3,
body h3.zheditor-heading,
.tiptap h3,
.ProseMirror h3,
.content h3,
.ql-editor h3,
#texteditor-container h3,
.type_heading-small:not(.tab-view--name),
[data-styleguide-theme] h3 {
    color: #0D1280 !important;
}

/* H4 - Labels ("Our vision", "الرؤية") - Dark Gray Blue */
html h4,
html h4.zheditor-heading,
body h4,
body h4.zheditor-heading,
.tiptap h4,
.ProseMirror h4,
.content h4,
.ql-editor h4,
#texteditor-container h4,
.type_heading-smaller,
[data-styleguide-theme] h4 {
    color: #3A3F57 !important;
}

/* Strong text inside headings */
html h2 strong,
html h3 strong,
html h4 strong,
body h2 strong,
body h3 strong,
body h4 strong {
    color: inherit !important;
}

/* Block titles in content */
.block-name,
.block-header,
.section-title {
    color: #0D1280 !important;
}

/* ============================================
   BODY TEXT - Dark Gray Blue
   ============================================ */

#texteditor-container p,
#texteditor-container blockquote,
#texteditor-container ul,
#texteditor-container ol,
.ql-editor p,
.ql-editor blockquote,
.ql-editor ul,
.ql-editor ol,
.block-content p,
.page-content p,
p.zheditor-p,
.zheditor-p {
    color: #3A3F57 !important;
}

/* ============================================
   LINKS - Pink/Magenta Accent
   ============================================ */

a:not(.sidebar a):not(.tab-view--name),
#texteditor-container a,
#texteditor-container a b,
#texteditor-container a strong,
.ql-editor a,
.details-box a,
.editor-link .link {
    color: #DB4E6D !important;
}

#texteditor-container .sketch-item .name-row .name {
    cursor: auto;
    color: var(--colors-blocks-upload-text-label, #212121);
}

#texteditor-container .sketch-item .name-row .name .edit svg * {
    fill: var(--colors-blocks-upload-text-label, #212121);
}

#texteditor-container a,
#texteditor-container a b,
#texteditor-container a strong,
.details-box a,
.details-box a b,
.details-box a strong,
.editor-link .link {
    color: var(--colors-blocks-content-text-link, #2265c9);
}

#texteditor-container p.show-placeholder:not(.drag-placeholder)::before {
    color: var(--colors-blocks-content-text-placeholder, #9e9e9e);
}

#texteditor-container blockquote {
    border-left: 4px solid var(--colors-blocks-content-border-main, #dedede);
}

/* ============================================
   SEARCH HIGHLIGHT
   ============================================ */

.search-highlight {
    padding-left: 1px !important;
    padding-right: 1px !important;
    background-color: var(--colors-ui-element-background-search-highlight, #E2EBF8) !important;
    color: var(--colors-ui-element-text, #212121) !important;
}

/* ============================================
   DIVIDERS AND BORDERS
   ============================================ */

.hr-border,
.divider {
    background-color: var(--colors-blocks-content-border-main, #dedede);
}

.page-tabs .border-color-full,
.pattern-type.border-color-full,
.pattern-type > .border-color-full,
.resources .code.border-color-faint,
.tabs.border-color-full {
    border-color: var(--colors-blocks-content-border-main, #dedede);
}

/* ============================================
   TABS STYLING
   ============================================ */

.page-tabs .accent-background {
    background: var(--colors-blocks-tabs-border-active, #4d4d4d);
}

.active-tab.tab-view--name {
    color: var(--colors-blocks-tabs-text-active, #212121);
}

.tab-view--name {
    color: var(--colors-blocks-tabs-text-main, #605f60);
}

/* ============================================
   TABLE STYLING
   ============================================ */

.ql-editor .table-wrapper table td {
    border-color: var(--colors-blocks-table-border-main, #dedede);
}

.table-wrapper.show-header tr:first-child td {
    background-color: var(--colors-blocks-table-background-header, #ebebeb) !important;
    border-color: var(--colors-blocks-table-border-main, #dedede) !important;
}

.table-wrapper.show-header.hide-border tr:first-child td {
    border-color: var(--colors-blocks-table-background-header, #ebebeb) !important;
}

.table-wrapper.show-header.border-style-rows tr:first-child td {
    border-left-color: var(--colors-blocks-table-background-header, #ebebeb) !important;
    border-right-color: var(--colors-blocks-table-background-header, #ebebeb) !important;
}

.table-wrapper.show-header tr:first-child {
    background-color: var(--colors-blocks-table-background-header, #ebebeb) !important;
}

.table-wrapper.highlight-even-rows tr:nth-child(odd) td {
    background-color: var(--colors-blocks-table-background-alternate-row, #fcfbfb);
}

.table-wrapper.highlight-even-rows.hide-border tr:nth-child(odd) td {
    border-color: var(--colors-blocks-table-background-alternate-row, #fcfbfb);
}

.table-wrapper.highlight-even-rows.border-style-rows tr:nth-child(odd) td {
    border-left-color: var(--colors-blocks-table-background-alternate-row, #fcfbfb);
    border-right-color: var(--colors-blocks-table-background-alternate-row, #fcfbfb);
}

.table-wrapper.highlight-even-rows tr:nth-child(odd) {
    background-color: var(--colors-blocks-table-background-alternate-row, #fcfbfb);
}

/* ============================================
   CODE BLOCKS
   ============================================ */

.inner-code {
    min-height: calc(100% - 32px);
    color: #212121;
    background-color: #fcfbfb;
    font-size: 13px;
    font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    padding: 16px;
}

.ql-editor pre.ql-syntax {
    color: #212121;
    background-color: #fcfbfb;
    font-size: 13px;
    font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
    padding: 16px;
    border: 1px solid var(--colors-blocks-content-border-main, #dedede);
    border-left: 3px solid var(--colors-styleguide-background-accent, #2265c9);
}

/* ============================================
   SYNTAX HIGHLIGHTING
   ============================================ */

.prism-script {
    color: #212121;
}

.prism-tag,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-params,
.hljs-variable,
.hljs-template-variable,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
    color: #337D18;
}

.prism-property,
.prism-class-name,
.prism-boolean,
.prism-number,
.hljs-section,
.hljs-meta,
.hljs-link,
.hljs-attr {
    color: #1e64cd;
}

.prism-punctuation,
.hljs-type,
.hljs-tag {
    color: #212121;
}

.prism-string-property,
.prism-string,
.prism-function,
.prism-attr-value,
.hljs-selector-tag,
.hljs-string,
.hljs-title {
    color: #7744CB;
}

.prism-builtin,
.prism-operator,
.prism-keyword,
.hljs-builtin-name,
.hljs-literal,
.hljs-keyword,
.hljs-built_in {
    color: #cd2622;
}

.hljs-number {
    color: #cd2622;
}

.prism-comment,
.hljs-comment {
    color: #605f60;
    font-style: italic;
}

/* ============================================
   NOTES EDITOR (Override for consistent styling)
   ============================================ */

.notes-editor p,
.notes-editor blockquote,
.notes-editor ul,
.notes-editor ol {
    color: #212121;
}

.notes-editor h2,
.notes-editor h3,
.notes-editor h4 {
    color: #212121;
}

.notes-editor a,
.notes-editor a b,
.notes-editor a strong {
    color: #2265c9;
}

/* ============================================
   STYLEGUIDE SETTINGS
   ============================================ */

.styleguide-settings-content {
    --colors-ui-element-background-main: #ffffff;
    --colors-ui-element-background-action: #2265c9;
    --colors-ui-element-background-active: #eeeeee;
    --colors-ui-element-background-hover: #f7f7f7;
    --colors-ui-element-border: #dedede;
    --colors-ui-element-text: #212121;
    --colors-ui-element-text-secondary: #605f60;
}