/*
Theme Name: Shawburn WPCOM
Version: 1.4.59
Template: varia-wpcom
Text Domain: shawburn-wpcom
AMP: true
*/
/* ----------------------------------------------
   Global Resets
---------------------------------------------- */
*,
:before,
:after { box-sizing:border-box; }

img {max-width:100%; height:auto;}

/* ----------------------------------------------
   GLOBAL TYPOGRAPHY SYSTEM
   Uses variables generated by typography.php
---------------------------------------------- */

:root {
    /* Semantic aliases keep legacy/component CSS tied to the theme.json tokens. */
    --color-text: var(--wp--preset--color--primary-1, #090A09);
    --color-primary: var(--wp--preset--color--secondary-2, #0075A3);
    --color-text-muted: #555;
    --color-h1: var(--wp--preset--color--primary-1, #090A09);
    --color-h2: var(--wp--preset--color--secondary-1, #598C18);
    --color-h3: var(--wp--preset--color--primary-1, #090A09);
    --color-h4: var(--wp--preset--color--primary-1, #090A09);
    --color-h5: var(--wp--preset--color--primary-2, #94B01E);
    --color-h6: #B3B3B3;
    --spacing-xs: var(--wp--preset--spacing--shamaa-xs, 8px);
    --spacing-s: var(--wp--preset--spacing--shamaa-s, 12px);
    --spacing-m: var(--wp--preset--spacing--shamaa-m, 16px);
    --spacing-l: var(--wp--preset--spacing--shamaa-l, 24px);
    --spacing-xl: var(--wp--preset--spacing--shamaa-xl, 32px);
    --spacing-2xl: var(--wp--preset--spacing--shamaa-2xl, 48px);
    --content-flow-gap: var(--spacing-m, 16px);
    --section-flow-gap: 40px;
    --fw-link: 500;
}

html {
	margin:0;
	padding:0;
	background-color:#F6F6F6;
	font-size: var(--fs-body, 16px);
	scroll-behavior: smooth;
}

body {
	max-width:1024px;
	margin:0 auto;
	padding:0;
	background-color:#fff;
	overflow-x:hidden;
    font-family: var(--font-body, sans-serif);
    font-size: var(--fs-body, 1rem);
    line-height: var(--lh-body, 1.6);
    color: var(--color-text, #090A09);
    font-weight: var(--fw-body, 400);
}

/* ----------------------------------------------
   HEADINGS
---------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, inherit);
    margin-top: 0;
    margin-bottom: var(--spacing-m, 1rem);
}

h1 { font-size: var(--fs-h1, 2.5rem); font-weight: var(--fw-h1, 700); line-height: var(--lh-h1, 1.2); color: var(--color-h1,#090A09); }
h2 { font-size: var(--fs-h2, 2rem); font-weight: var(--fw-h2, 700); line-height: var(--lh-h2, 1.2); color: var(--color-h2, #598C18); }
h3 { font-size: var(--fs-h3, 1.75rem); font-weight: var(--fw-h3, 700); line-height: var(--lh-h3, 1.2); color: var(--color-h3, #090A09); }
h4 { font-size: var(--fs-h4, 1.5rem); font-weight: var(--fw-h4, 700); line-height: var(--lh-h4, 1.2); color: var(--color-h4, #090A09); }
h5 { font-size: var(--fs-h5, 1.25rem); font-weight: var(--fw-h5, 700); line-height: var(--lh-h5, 1.2); color: var(--color-h5, #94B01E); }
h6 { font-size: var(--fs-h6, 1rem); font-weight: var(--fw-h6, 700); line-height: var(--lh-h6, 1.2); color: var(--color-h6, #B3B3B3); }

/* ----------------------------------------------
   PARAGRAPHS & TEXT ELEMENTS
---------------------------------------------- */

p {
    margin-top: 0;
    margin-bottom: var(--spacing-m, 1rem);
}
p:last-child {
	margin-bottom:0;
}
strong {
    font-weight: var(--fw-strong, 600);
}

em {
    font-style: italic;
}

small {
    font-size: var(--fs-small, 0.875rem);
}

/* ----------------------------------------------
   LISTS
---------------------------------------------- */

ul, ol {
    margin-block-start: 0;
    margin-block-end: var(--spacing-m, 1rem);
    padding-block: 0;
    padding-inline-start: 24px;
    padding-inline-end: 0;
    line-height: var(--lh-body, 1.6);
}

li {
    margin-bottom: 0.5em;
}

/* ----------------------------------------------
   SECTION SPACING
---------------------------------------------- */
/*
 * A Group rendered semantically as <section> is treated as a page section.
 * Ordinary Group blocks remain neutral containers so patterns/cards do not
 * inherit section spacing accidentally. Editors can override this margin
 * through the native Dimensions control when a section needs an exception.
 */
section.wp-block-group {
    margin-block-end: var(--section-flow-gap, 40px);
}

/* ----------------------------------------------
   LINKS
---------------------------------------------- */

a {
    color: var(--color-primary, #0055aa);
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: underline;
}

/* ----------------------------------------------
   LINKED FIGURE CAPTIONS
---------------------------------------------- */
/*
 * Action links placed in WordPress figure captions use the same lightweight
 * visual language as the Shamaa Link Button, without changing ordinary
 * unlinked caption text. Keep the › glyph identical in both languages and
 * let the bidi context mirror it in RTL.
 */
:where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--shamaa-secondary-2, #0075A3);
    font-weight: var(--fw-link, 500);
    text-decoration: none !important;
}

:where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a:not(:last-child) {
    margin-inline-end: var(--spacing-m, 16px);
}

:where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a::after {
    content: "›";
    display: inline-block;
    flex: 0 0 auto;
    font-size: 1.35em;
    font-weight: 700;
    line-height: .75;
    text-shadow: none;
    transition: text-shadow .2s ease;
}

:where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a:is(:hover, :focus-visible) {
    color: var(--shamaa-secondary-2, #0075A3);
    text-decoration: none !important;
}

:where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a:is(:hover, :focus-visible)::after {
    text-shadow: 5px 0 currentColor;
}

:where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

:where(.rtl, [dir="rtl"]) :where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a:is(:hover, :focus-visible)::after,
:where(
    figcaption.wp-element-caption,
    .wp-block-image figcaption,
    .wp-block-video figcaption,
    .wp-block-embed figcaption
) a:dir(rtl):is(:hover, :focus-visible)::after {
    text-shadow: -5px 0 currentColor;
}

/* ----------------------------------------------
   Buttons
---------------------------------------------- */
.shamaa-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 16px;
}

/*
 * Theme/PHP filled buttons. Keep the same › glyph in both directions; Arabic
 * bidi handles the visual direction while only the hover shadow travel flips.
 */
.shamaa-button-primary,
.shamaa-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    vertical-align: middle;
    padding: 12px 16px;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 10px 30px -10px #090a09de;
    color: #fff;
    cursor: pointer;
    fill: #fff;
    font-family: var(--font-body, sans-serif);
    font-size: var(--fs-body, 15px);
    font-weight: var(--fw-link, 500);
    letter-spacing: -.23px;
    line-height: 1.2;
    position: relative;
    text-align: center;
    text-decoration: none !important;
    transition: box-shadow .15s ease;
}

.shamaa-button-primary::after,
.shamaa-button-secondary::after {
    content: "›";
    display: inline-block;
    order: 2;
    flex: 0 0 auto;
    font-size: 1.25em;
    font-weight: 700;
    line-height: .75;
    text-shadow: none;
    transition: text-shadow .2s ease;
}

.rtl .shamaa-button-primary,
.rtl .shamaa-button-secondary,
.shamaa-button-primary:dir(rtl),
.shamaa-button-secondary:dir(rtl) {
    letter-spacing: 0;
}

.shamaa-button-primary {
    background-color: #00587A;
    background-image: linear-gradient(180deg, #0075A3 0%, #00587A 100%);
}

.shamaa-button-secondary {
    background-color: #090A09;
    background-image: linear-gradient(180deg, #4E564E 0%, #090A09 100%);
}

.shamaa-button-primary:hover,
.shamaa-button-primary:focus-visible {
    background-color: #0075A3;
    background-image: linear-gradient(180deg, #0075A3 0%, #0075A3 100%);
    box-shadow: none;
}

.shamaa-button-secondary:hover,
.shamaa-button-secondary:focus-visible {
    background-color: #303630;
    background-image: linear-gradient(180deg, #303630 0%, #303630 100%);
    box-shadow: none;
}

.shamaa-button-primary:hover::after,
.shamaa-button-primary:focus-visible::after,
.shamaa-button-secondary:hover::after,
.shamaa-button-secondary:focus-visible::after {
    text-shadow: 5px 0 currentColor;
}

.rtl .shamaa-button-primary:hover::after,
.rtl .shamaa-button-primary:focus-visible::after,
.rtl .shamaa-button-secondary:hover::after,
.rtl .shamaa-button-secondary:focus-visible::after,
[dir="rtl"] .shamaa-button-primary:hover::after,
[dir="rtl"] .shamaa-button-primary:focus-visible::after,
[dir="rtl"] .shamaa-button-secondary:hover::after,
[dir="rtl"] .shamaa-button-secondary:focus-visible::after,
.shamaa-button-primary:dir(rtl):hover::after,
.shamaa-button-primary:dir(rtl):focus-visible::after,
.shamaa-button-secondary:dir(rtl):hover::after,
.shamaa-button-secondary:dir(rtl):focus-visible::after {
    text-shadow: -5px 0 currentColor;
}

.shamaa-button-primary:focus-visible,
.shamaa-button-secondary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/*
 * Gutenberg default Button = Shamaa Primary behavior. The explicit Primary
 * variation remains available for existing saved content, but both share one
 * interaction implementation here. Secondary uses the same chevron system.
 */
.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link,
.wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link,
.wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    vertical-align: middle;
    cursor: pointer;
    position: relative;
    text-decoration: none !important;
    transition: box-shadow .15s ease;
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link::after,
.wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link::after,
.wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link::after {
    content: "›";
    display: inline-block;
    order: 2;
    flex: 0 0 auto;
    font-size: 1.25em;
    font-weight: 700;
    line-height: .75;
    text-shadow: none;
    transition: text-shadow .2s ease;
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:is(:hover, :focus-visible),
.wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link:is(:hover, :focus-visible) {
    background-color: #0075A3;
    background-image: linear-gradient(180deg, #0075A3 0%, #0075A3 100%);
    box-shadow: none;
}

.wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link:is(:hover, :focus-visible) {
    background-color: #303630;
    background-image: linear-gradient(180deg, #303630 0%, #303630 100%);
    box-shadow: none;
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:is(:hover, :focus-visible)::after,
.wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link:is(:hover, :focus-visible)::after,
.wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link:is(:hover, :focus-visible)::after {
    text-shadow: 5px 0 currentColor;
}

.rtl .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:is(:hover, :focus-visible)::after,
.rtl .wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link:is(:hover, :focus-visible)::after,
.rtl .wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link:is(:hover, :focus-visible)::after,
[dir="rtl"] .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:is(:hover, :focus-visible)::after,
[dir="rtl"] .wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link:is(:hover, :focus-visible)::after,
[dir="rtl"] .wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link:is(:hover, :focus-visible)::after,
.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:dir(rtl):is(:hover, :focus-visible)::after,
.wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link:dir(rtl):is(:hover, :focus-visible)::after,
.wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link:dir(rtl):is(:hover, :focus-visible)::after,
html:lang(ar) body .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:is(:hover, :focus-visible)::after,
html:lang(ar) body .wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link:is(:hover, :focus-visible)::after,
html:lang(ar) body .wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link:is(:hover, :focus-visible)::after {
    text-shadow: -5px 0 currentColor;
}

.wp-block-button:not([class*="is-style-"]) > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Gutenberg Link button variation. */
.wp-block-button.is-style-shamaa-link-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: fit-content;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--shamaa-secondary-2, #0075A3);
    font-weight: 500;
    text-decoration: none !important;
}

.wp-block-button.is-style-shamaa-link-button .wp-block-button__link::after {
    content: "›";
    display: inline-block;
    order: 2;
    flex: 0 0 auto;
    font-size: 1.35em;
    font-weight: 700;
    line-height: .75;
    text-shadow: none;
    transition: text-shadow .2s ease;
}

.wp-block-button.is-style-shamaa-link-button .wp-block-button__link:is(:hover, :focus-visible) {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--shamaa-secondary-2, #0075A3);
    text-decoration: none !important;
}

.wp-block-button.is-style-shamaa-link-button .wp-block-button__link:is(:hover, :focus-visible)::after {
    text-shadow: 5px 0 currentColor;
}

.wp-block-button.is-style-shamaa-link-button .wp-block-button__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.rtl .wp-block-button.is-style-shamaa-link-button .wp-block-button__link:is(:hover, :focus-visible)::after,
[dir="rtl"] .wp-block-button.is-style-shamaa-link-button .wp-block-button__link:is(:hover, :focus-visible)::after,
.wp-block-button.is-style-shamaa-link-button .wp-block-button__link:dir(rtl):is(:hover, :focus-visible)::after,
html:lang(ar) body .wp-block-button.is-style-shamaa-link-button .wp-block-button__link:is(:hover, :focus-visible)::after,
.wp-block-button.is-style-shamaa-link-button .wp-block-button__link:lang(ar):is(:hover, :focus-visible)::after {
    text-shadow: -5px 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .shamaa-button-primary,
    .shamaa-button-secondary,
    .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link,
    .wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link,
    .wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link {
        transition: none;
    }

    .shamaa-button-primary::after,
    .shamaa-button-secondary::after,
    .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link::after,
    .wp-block-button.is-style-shamaa-button-primary > .wp-block-button__link::after,
    .wp-block-button.is-style-shamaa-button-secondary > .wp-block-button__link::after,
    .wp-block-button.is-style-shamaa-link-button .wp-block-button__link::after,
    :where(
        figcaption.wp-element-caption,
        .wp-block-image figcaption,
        .wp-block-video figcaption,
        .wp-block-embed figcaption
    ) a::after {
        transition: none;
    }
}

/* PDF and document actions.
 * Existing PDF/Document styles stay dark for card/pattern use.
 * PDF Link/Document Link are the blue standalone variants.
 */
.wp-block-button:is(
    .is-style-shamaa-document-button-pdf,
    .is-style-shamaa-document-button-text,
    .is-style-shamaa-pdf-link,
    .is-style-shamaa-document-link
) .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none !important;
}

/* File icon */
.wp-block-button:is(
    .is-style-shamaa-document-button-pdf,
    .is-style-shamaa-document-button-text,
    .is-style-shamaa-pdf-link,
    .is-style-shamaa-document-link
) .wp-block-button__link::before {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* PDF icon */
.wp-block-button:is(
    .is-style-shamaa-document-button-pdf,
    .is-style-shamaa-pdf-link
) .wp-block-button__link::before {
    -webkit-mask-image: url("assets/icons/pdf-icon.svg");
    mask-image: url("assets/icons/pdf-icon.svg");
}

/* Text-document icon */
.wp-block-button:is(
    .is-style-shamaa-document-button-text,
    .is-style-shamaa-document-link
) .wp-block-button__link::before {
    -webkit-mask-image: url("assets/icons/text-icon.svg");
    mask-image: url("assets/icons/text-icon.svg");
}

/* Existing dark actions preserve their established hover behavior. */
.wp-block-button:is(
    .is-style-shamaa-document-button-pdf,
    .is-style-shamaa-document-button-text
) .wp-block-button__link:hover {
    color: var(--shamaa-secondary-2, #0075A3);
}

/* New standalone link variants stay blue and only gain an underline. */
.wp-block-button:is(
    .is-style-shamaa-pdf-link,
    .is-style-shamaa-document-link
) .wp-block-button__link:is(:hover, :focus-visible) {
    color: var(--shamaa-secondary-2, #0075A3);
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.wp-block-button:is(
    .is-style-shamaa-document-button-pdf,
    .is-style-shamaa-document-button-text,
    .is-style-shamaa-pdf-link,
    .is-style-shamaa-document-link
) .wp-block-button__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* ----------------------------------------------
   BLOCKQUOTES
---------------------------------------------- */

blockquote {
    margin: var(--spacing-l, 2rem) 0;
    padding-inline-start: var(--spacing-m, 1rem);
    border-inline-start: 4px solid var(--color-primary, #0055aa);
    font-style: italic;
    color: var(--color-text-muted, #555);
}
/* ----------------------------------------------
   Details Dropdowns
---------------------------------------------- */
details[open] summary {
	font-weight:700;
}
/* ----------------------------------------------
   CODE
---------------------------------------------- */

code {
    font-family: var(--font-mono, monospace);
    background: var(--color-code-bg, #f5f5f5);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-size: 0.95em;
}
/* ----------------------------------------------
   Layouts
---------------------------------------------- */
.wp-block-columns { margin-bottom:0!important; gap:0; }
.wp-block-column { padding:var(--spacing-l, 24px); }

/* ----------------------------------------------
   Utilities
---------------------------------------------- */
header.entry-header {
    padding:8px 24px;
    background: transparent linear-gradient(180deg, #94B01E 0%, #598C18 100%) 0% 0% no-repeat padding-box;
    color:#fff;
}
header.entry-header * { color:inherit!important; margin:0!important; }
.entry-section-title {
    font-family: var(--font-heading, inherit);
    font-size: var(--fs-h1, 2.5rem);
    font-weight: var(--fw-h1, 700);
    line-height: var(--lh-h1, 1.2);
}

.hide-visually {display: none; }
/* ----------------------------------------------
   Patterns
---------------------------------------------- */
/* Sidebar Menu */
.shamaa-sidebar-menu { list-style: none; padding: 0; margin: 0; font-weight:500; }
.shamaa-sidebar-menu li:not(:last-child) { border-bottom:1px solid #CACACA; margin-bottom:0; }
.shamaa-sidebar-menu a { display:block; padding:16px 0; color:inherit; text-decoration:none; }
.shamaa-sidebar-menu a:hover,
.shamaa-sidebar-menu a.is-current-page,
.shamaa-sidebar-menu a[aria-current="page"] { color:#0075A3; }

/* Link list */
.link-list li::marker { color:#0055aa; }

/* Press Item */
.shamaa-press-item {
    margin-block: 0;
    margin-inline-start: auto;
    margin-inline-end: 0;
    border-inline-start: 1px solid #d6d6d6;
    padding-block: 24px;
    padding-inline-start: 24px;
    width: calc(100% - 70px);
    position: relative;
}
.shamaa-press-item::before {
	content: "";
	position: absolute;
	inset-inline-start: -3px;
	top: 33px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #598C18;
}
.shamaa-press-year {
	display: block;
	text-align: end;
	padding-inline-end: 24px;
	font-weight: 700;
	color: #598c18;
	width: 70px;
	position: absolute !important;
	inset-inline-end: 100%;
}
.shamaa-press-title { margin:0; font-family:var(--font-body);}
.shamaa-press-source { margin:0; }

/* Accordion */
.shamaa-accordion .wp-block-accordion-item:not(:first-child) { margin-top:8px }
.shamaa-accordion .wp-block-accordion-heading { background-color: #F9FCEE; }
.shamaa-accordion .wp-block-accordion-heading__toggle { padding:12px 8px 12px 16px;}
.shamaa-accordion .wp-block-accordion-heading:hover { background-color: #F3F9DC; color:#0055aa; }
.shamaa-accordion .wp-block-accordion-heading:hover .wp-block-accordion-heading__toggle-title { text-decoration:none!important; }
.shamaa-accordion .wp-block-accordion-panel { margin-top:16px; margin-bottom: 16px;}

/* Guide Card */
.shamaa-guide-card { position:relative; transition:all ease 0.4s;}
.shamaa-guide-card:hover {
    background-color:#fff!important;
    box-shadow: 0px 4px 16px #0000001F;
    transition:all ease 0.4s;
}
.shamaa-guide-card .wp-block-group { position:unset!important; }
.shamaa-guide-card-title { font-family:var( --font-body);  }
.shamaa-guide-card-title a { display:block; text-decoration:none!important; }
.shamaa-guide-card-title a:after { content:""; position:absolute; inset:0; z-index:2; }
.shamaa-guide-card-action {font-weight:500;display:flex;align-items: baseline;}
.shamaa-guide-card-action:before,
.shamaa-guide-card-action:after {
    content:"";
    display:inline-block;
    width:6px; height:6px;
    border-top:2px solid;
    border-right:2px solid;
    border-radius:0px 2px 0px 0px;
    transform-origin:center;
    transform:rotate(45deg);
    order:2;
    position:relative;
    top:-1px;
}
.shamaa-guide-card-action:before { left:2px;}
.shamaa-guide-card-action:after { left:-4px; transition:all ease 0.4s; }
.shamaa-guide-card:hover .shamaa-guide-card-action:after { left:1px; transition:all ease 0.4s; }

/* In-The-Media Card */
.media-card {
    display:flex;
    flex-direction:column;
    justify-content: space-between;
    row-gap: 16px;
    padding:20px;
    background-color:#FAFAE9;
    border: 1px solid #FAFAE9;
    border-radius:8px;
    text-align:center;
    position:relative;
    transition:all ease 0.4s;
    cursor:pointer;
}
.media-card:hover {
    background-color:#fff!important;
    box-shadow: 0px 3px 15px #0000001A;
border-color:#DCED96;
    transition:all ease 0.4s;
}
.media-card-top { position:unset!important; }
.media-card-date { font-size: 13px; margin-bottom: 8px; opacity:0.7;}
.media-card-title {font-family:var( --font-body);font-size:15px;font-weight:600;line-height:1.5;margin: 0;}
.media-card-title a { display:block; text-decoration:none!important; color:#090A09;  }
.media-card-title a:after { content:""; position:absolute; inset:0; z-index:2; }
.media-card-button {
    margin: 0;
    position: relative;
    padding-top: 20px;
}
.media-card-button:before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #94b01e;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* Match the Link button's chevron feedback when the whole Media card is active. */
.media-card:is(:hover, :focus-within)
.media-card-button .wp-block-button.is-style-shamaa-link-button .wp-block-button__link::after {
    text-shadow: 5px 0 currentColor;
}

.rtl .media-card:is(:hover, :focus-within)
.media-card-button .wp-block-button.is-style-shamaa-link-button .wp-block-button__link::after,
[dir="rtl"] .media-card:is(:hover, :focus-within)
.media-card-button .wp-block-button.is-style-shamaa-link-button .wp-block-button__link::after {
    text-shadow: -5px 0 currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .media-card-button .wp-block-button.is-style-shamaa-link-button .wp-block-button__link::after {
        transition: none;
    }
}

/* Award Card */
.shamaa-award-card {
    background-color: #FFF;
    padding-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 0px 0px 2px #f6f6f6;
		max-width: 296px;
		margin-left: auto !important;
		margin-right: auto !important;
}

.shamaa-award-title {
	padding: 0 16px;
	margin: 24px 0 4px;
	font-size: 15px;
}

.shamaa-award-location {
	padding: 0 16px;
	    margin: 4px 0 0;
	    font-size: 15px;
}

.shamaa-award-recipient {
    position: relative;
    padding:12px 0;
    padding-inline-start: 24px;
    width: calc(100% - 32px);
    border-top:2px solid #f6f6f6;
    margin: 16px auto 0;
}
.shamaa-award-recipient::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 16px;
    width: 16px;
    height: 16px;
    background: url("assets/icons/graduation-icon.svg") center / contain no-repeat;
}
.shamaa-award-recipient-name {
    color: #598c18;
    font-size: 14px;
    font-weight: 500;
    margin:0!important;
}
.shamaa-award-recipient-degree {
    font-size: 13px;
    font-weight: 400;
    margin:0!important;
}

/* Speaker and Booklet Card */
.spkbook-card {
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    padding: 16px;
    gap: 16px;
    position: relative;
    z-index: 2;
}
.spkbook-card .wp-block-column { padding: 0; }
.spkbook-card-subtitle {
    margin-top: 4px;
    color: #505150;
    font-size: 13px;
    font-weight: 400;
}
.spkbook-card-title a,
.spkbook-card-subtitle a { color: inherit; }
.spkbook-card-photos a:hover { box-shadow: 0 0 20px -5px #D6D6D6; }

.spkbook-card-summary {
    font-size: 14px;
    margin-top: 16px;
}

.spkbook-card-separator {
    width: 30px !important;
    height: 3px;
    border: 0;
    background-color: #94B01E;
    border-radius: 3px;
    margin: 16px 0 0;
}

.spkbook-card-more {
    font-size: 14px;
    margin-top: 16px;
}

/*
 * The modal script adds .spkbook-modal-ready to each card only after it finds
 * the real Button-block opener. If markup is incomplete or JavaScript fails,
 * continuation content remains readable rather than hiding behind a dead UI.
 */
.spkbook-modal-ready .spkbook-card-more > :not(.spkbook-card-more-actions) {
    display: none;
}

.spkbook-card-more-actions {
    margin: 0;
}

.spkbook-card-more-actions .wp-block-button {
    margin: 0;
}

.spkbook-card-links {
    margin-top: 16px;
    font-size: 14px;
    line-height: 1;
    font-weight: 500;
}

/* Keep the page layout stable while the live card is temporarily moved to body. */
.spkbook-modal-placeholder {
    inline-size: 100%;
    visibility: hidden;
    pointer-events: none;
}

/* Viewport-level modal host. The wrapper is moved to body while open so no
 * Group/Grid/Columns containing block can clip or contain position:fixed. */
.spkbook-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: auto;
}

.spkbook-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 50%);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1;
}

.spkbook-modal > .spkbook-modal-dialog {
    position: relative;
    z-index: 2;
    inline-size: min(650px, 100%);
    max-inline-size: none !important;
    max-block-size: calc(100dvh - 48px);
    margin: 0 !important;
}

.spkbook-modal .spkbook-card {
    inline-size: 100%;
    max-block-size: calc(100dvh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 28px;
    padding-inline-end: 64px;
    border: 0;
    border-radius: 9px;
    background-color: #FFFFFF;
    box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
}

.spkbook-modal .spkbook-card-more {
    margin-top: 24px;
}

.spkbook-modal .spkbook-card-more-actions {
    display: none;
}

.spkbook-modal-ready.spkbook-modal .spkbook-card-more > :not(.spkbook-card-more-actions) {
    display: block;
}

.spkbook-modal .spkbook-card-more-actions + * {
    margin-block-start: 0;
}

/* Modal continuation marker matches the Directory dialog: one subtle
 * inline green chevron beside the continuation content, with RTL-aware motion. */
.spkbook-modal .spkbook-card-more {
    position: relative;
}

.spkbook-modal .spkbook-card-more::before {
    content: "";
    position: absolute;
    inset-block-start: 0.46em;
    inset-inline-start: -1.15rem;
    width: 0.48rem;
    height: 0.48rem;
    margin: 0;
    border-top: 3px solid var(--wp--preset--color--primary-2, var(--shamaa-primary-2, #94B01E));
    border-right: 3px solid var(--wp--preset--color--primary-2, var(--shamaa-primary-2, #94B01E));
    transform: rotate(45deg);
    pointer-events: none;
    animation: spkbook-continuation-ltr 1.8s ease-in-out infinite;
}

html[dir="rtl"] .spkbook-modal .spkbook-card-more::before {
    transform: rotate(-135deg);
    animation-name: spkbook-continuation-rtl;
}

@keyframes spkbook-continuation-ltr {
    0%, 70%, 100% { transform: translateX(0) rotate(45deg); }
    82% { transform: translateX(0.18rem) rotate(45deg); }
}

@keyframes spkbook-continuation-rtl {
    0%, 70%, 100% { transform: translateX(0) rotate(-135deg); }
    82% { transform: translateX(-0.18rem) rotate(-135deg); }
}

.spkbook-modal-close {
    position: absolute;
    inset-block-start: 12px;
    inset-inline-end: 12px;
    z-index: 4;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #303630;
    cursor: pointer;
}

.spkbook-modal-close::before,
.spkbook-modal-close::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
}

.spkbook-modal-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.spkbook-modal-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.spkbook-modal-close:hover {
    background: rgb(0 0 0 / 0.07);
}

.spkbook-modal-close:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary-2, var(--shamaa-primary-2, #94B01E));
    outline-offset: 3px;
}

body.spkbook-modal-open {
    overflow: hidden;
}

@media (max-width: 700px) {
    .spkbook-modal {
        padding: 16px;
    }

    .spkbook-modal > .spkbook-modal-dialog,
    .spkbook-modal .spkbook-card {
        max-block-size: calc(100dvh - 32px);
    }

    .spkbook-modal .spkbook-card {
        padding: 20px;
        padding-inline-end: 56px;
    }

    .spkbook-modal .spkbook-card-more::before {
        inset-inline-start: -0.95rem;
    }

    .spkbook-modal .spkbook-card-photos {
        max-inline-size: 120px;
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spkbook-modal .spkbook-card-more::before {
        animation: none;
    }
}


/* Shamaa Event Shedule Sessions */
.shamaa-event-schedule { display:flex; flex-direction:column; row-gap:8px; align-items:stretch;}
.shamaa-event-schedule a { color: inherit;}
.shamaa-event-day {
    width:100%;
    background: transparent linear-gradient(180deg, #EBF2D6 0%, #CCDE9A 100%) 0% 0% no-repeat padding-box;
    border-radius: 4px;
    padding:8px 16px;
}
.shamaa-compact-schedule {background-color: #F6F6F6;border-radius: 4px;padding: 12px 16px;line-height: 1;flex-wrap: wrap;}
.shamaa-compact-schedule-item {flex-wrap: nowrap; white-space:nowrap; font-size:13px;font-weight:400;gap: 0px;}
.shamaa-compact-schedule-time { font-weight:700; }
.shamaa-compact-schedule-title:before { content:"|"; margin:0 4px; }
.shamaa-session-list { margin:0; row-gap:8px; }

.shamaa-session-item {
    width: 100%;
    border: 1px solid #D6D6D6;
    border-radius: 4px;
    padding: 16px 0;
    align-items: stretch!important;
    gap: 0;
}
.shamaa-session-title { color:#598C18; }
.shamaa-session-subtitle { margin-top:0;}

.shamaa-session-time { order: 1; min-width: 120px; padding:8px 16px;}
.shamaa-session-item:after {
    content: "";
    min-height: 65px;
    width: 1px;
    background-color: #D6D6D6;
    display: block;
    order: 2;
}

.shamaa-session-start  {font-size:20px;font-weight:600;text-align: center;}
.shamaa-session-range {font-size:13px;font-weight:600;color:#598C18;text-align:center!important;margin: 0!important;}
.shamaa-session-details { padding:8px 16px; order:3;}

.shamaa-session-presenters {
    padding-left:16px!important;
    margin-top: 24px!important;
    font-size:14px;
}

.shamaa-session-presenters:before {
    content:"";
    display:block;
    width:30px;
    height:3px;
    background-color:#94B01E;
margin-bottom:24px;
    transform:translateX(-16px);
}
.shamaa-session-presenters > li:not(:last-child) { margin-bottom:16px; }
.shamaa-session-presenters > li::marker {
    color: #94B01E;
}
/* Thesaurus Legend */
.shamaa-thesaurus-legend td {
    vertical-align: top;
}

.shamaa-thesaurus-legend td:first-child {
    width: 50px;
    white-space: nowrap;
}
/* Media Queries */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ----------------------------------------------
   NATIVE GUTENBERG GALLERY
---------------------------------------------- */
/*
 * Core Gallery uses flex-grow on nested Image figures, which makes an
 * incomplete final row expand to fill the full row. Preserve the selected
 * column geometry instead; this targets core/gallery only.
 */
.wp-block-gallery.has-nested-images > figure.wp-block-image {
    flex-grow: 0;
}

/*
 * A cropped Gallery is a gallery-level decision. Older/imported nested Image
 * blocks can retain inline width/height/scale styles that outrank Core's normal
 * Gallery stylesheet and make individual thumbnails appear stretched. Enforce
 * Core's intended crop behavior consistently while leaving object-position
 * available for per-image focal positioning.
 */
.wp-block-gallery.has-nested-images.is-cropped
figure.wp-block-image:not(#individual-image) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/*
 * Keep WordPress Core responsible for lightbox loading, navigation and image
 * source selection. Shamaa only supplies presentation and EN/AR-safe control
 * placement. Core 7.0 uses the attachment source/srcset for the enlarged image.
 */
.wp-lightbox-overlay .scrim {
    /*
     * Core animates scrim opacity to 1, so put transparency in the color itself
     * rather than on opacity. This preserves Core's fade while keeping the page
     * visible beneath a blurred Shamaa Night overlay.
     */
    background-color: rgb(9 10 9 / 64%) !important;
    -webkit-backdrop-filter: blur(8px) saturate(90%);
    backdrop-filter: blur(8px) saturate(90%);
}

/* Gallery thumbnails may be cropped; the enlarged view should show the full image. */
.wp-lightbox-overlay .lightbox-image-container img {
    object-fit: contain !important;
    object-position: center !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0 !important;
    border: 1px solid rgb(255 255 255 / 18%) !important;
    border-radius: 4px;
    background: rgb(9 10 9 / 42%) !important;
    color: #fff;
    fill: #fff !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-close-button:focus,
.wp-lightbox-overlay .wp-lightbox-navigation-button:hover,
.wp-lightbox-overlay .wp-lightbox-navigation-button:focus {
    background: rgb(9 10 9 / 68%) !important;
}

.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible,
.wp-lightbox-overlay .wp-lightbox-navigation-button:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary-2, #94B01E);
    outline-offset: 3px;
}

/*
 * Core positions these controls with physical left/right properties. Keep that
 * contract explicit here; mixing logical inset properties with Core's physical
 * declarations caused the 1.4.52 controls to land on the opposite edge.
 */
.wp-lightbox-overlay .wp-lightbox-close-button {
    left: auto !important;
    right: max(16px, env(safe-area-inset-right)) !important;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
    left: max(16px, env(safe-area-inset-left)) !important;
    right: auto !important;
}

.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
    left: auto !important;
    right: max(16px, env(safe-area-inset-right)) !important;
}

html[dir="rtl"] .wp-lightbox-overlay .wp-lightbox-close-button,
html:lang(ar) .wp-lightbox-overlay .wp-lightbox-close-button {
    left: max(16px, env(safe-area-inset-left)) !important;
    right: auto !important;
}

html[dir="rtl"] .wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
html:lang(ar) .wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
    left: auto !important;
    right: max(16px, env(safe-area-inset-right)) !important;
}

html[dir="rtl"] .wp-lightbox-overlay .wp-lightbox-navigation-button-next,
html:lang(ar) .wp-lightbox-overlay .wp-lightbox-navigation-button-next {
    left: max(16px, env(safe-area-inset-left)) !important;
    right: auto !important;
}

html[dir="rtl"] .wp-lightbox-overlay .wp-lightbox-navigation-icon svg,
html:lang(ar) .wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
    transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
    .wp-lightbox-overlay .wp-lightbox-close-button,
    .wp-lightbox-overlay .wp-lightbox-navigation-button {
        transition: none;
    }
}

.hidden-s { display:none!important; }