/* WordPress-only additions. The design itself is assets/css/site.css, unchanged from the original site. */

/* Elementor's base stylesheet is loaded into the "elementor-base" layer (see inc/elementor.php), so this
   theme's unlayered styles win any conflict. Inside the Mishaal Atheer sections, the "ma-reset" layer also
   returns the few elements Elementor restyles (images, links, figures, embeds) to the browser defaults the
   original design was built on. */
@layer elementor-base, ma-reset;
@layer ma-reset {
  [class*="elementor-widget-ma-"] img { border: revert; border-radius: revert; box-shadow: revert; height: revert; max-width: revert; }
  [class*="elementor-widget-ma-"] a { box-shadow: revert; text-decoration: revert; }
  [class*="elementor-widget-ma-"] figure { margin: revert; }
  [class*="elementor-widget-ma-"] hr { background-color: revert; margin: revert; }
  [class*="elementor-widget-ma-"] iframe, [class*="elementor-widget-ma-"] video { border: revert; line-height: revert; margin: revert; max-width: revert; width: revert; }
  [class*="elementor-widget-ma-"] *, [class*="elementor-widget-ma-"] ::before, [class*="elementor-widget-ma-"] ::after { box-sizing: revert; }
}

/* Logged-in editors: keep the fixed header and menu below the admin bar. */
body.admin-bar .hdr, body.admin-bar .menu { top: 32px; }
body.admin-bar .menu { inset: 32px 0 0; }
@media (max-width: 782px) {
  body.admin-bar .hdr { top: 46px; }
  body.admin-bar .menu { inset: 46px 0 0; }
  #wpadminbar { position: fixed; }
}

/* Standard pages (privacy policy and the like) in the site's typography. */
.wp-prose { max-width: 46rem; margin: 0 auto; padding: 0 var(--gut) clamp(90px, 11vw, 160px); }
.wp-prose > * + * { margin-top: 1.1em; }
.wp-prose h2, .wp-prose h3 { font-family: var(--serif); font-weight: 400; line-height: 1.15; margin-top: 1.8em; }
.wp-prose h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); }
.wp-prose h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.wp-prose a { text-decoration: underline; text-underline-offset: 3px; }
.wp-prose img { max-width: 100%; height: auto; }
.wp-prose ul.wp-list { list-style: none; padding: 0; }
.wp-prose ul.wp-list li { padding: 14px 0; border-bottom: 1px solid var(--line); }
body.wp-page .phead { padding-bottom: clamp(30px, 4vw, 50px); }

/* Elementor: the containers that hold the original sections behave as plain blocks, so each section
   lays out exactly as it did on the original pages (no added padding, gaps, widths or flex layout). */
.elementor .e-con.ma-flow,
.elementor .e-con.ma-flow > .e-con-inner,
.elementor .elementor-section.ma-flow,
.elementor .elementor-section.ma-flow > .elementor-container,
.elementor .elementor-section.ma-flow .elementor-column,
.elementor .elementor-section.ma-flow .elementor-widget-wrap {
  display: block !important; padding: 0 !important; margin: 0 !important; gap: 0 !important;
  width: auto !important; max-width: none !important; min-height: 0 !important; border: 0 !important;
}
.elementor .elementor-element[class*="elementor-widget-ma-"] { margin: 0 !important; width: auto; max-width: none; }

/* New pages built with Elementor: start below the fixed header. */
main.ma-el-page { padding-top: var(--hdr); }
body[data-page="home"] main.ma-el-page, .elementor-location-single main.ma-el-page { padding-top: 0; }

/* Elementor Site Settings printed inline (CSS print method "internal") cannot repaint the page either. */
html body[class*="elementor-kit-"] { background: var(--wall); color: var(--ink); }

/* Gravity Forms on the Contact page, in the look of the original contact form. */
.ma-gf .gform-theme {
  --gf-form-gap-x: 22px; --gf-form-gap-y: 22px; --gf-radius: 0;
  --gf-ctrl-font-family: var(--sans); --gf-font-family-base: var(--sans); --gf-ctrl-label-font-family-primary: var(--sans);
  --gf-ctrl-size: auto; --gf-ctrl-padding-x: 14px; --gf-ctrl-padding-y: 13px;
  --gf-ctrl-font-size: 1.05rem; --gf-ctrl-line-height: 1.4;
  --gf-ctrl-outline-color-focus: rgba(176,129,77,.15); --gf-ctrl-outline-width-focus: 3px; --gf-ctrl-outline-offset: 0;
  --gf-ctrl-border-color-focus: var(--bronze-txt); --gf-ctrl-label-color-primary: var(--stone); --gf-ctrl-label-color-req: var(--stone);
  font-family: var(--sans);
}
.ma-gf .gform_wrapper .gform_heading { display: none; }
.ma-gf .gform_wrapper .gfield_label, .ma-gf .gform_wrapper .gform-field-label, .ma-gf .gform_wrapper legend.gfield_label {
  font: 400 .68rem var(--sans) !important; letter-spacing: .22em !important; text-transform: uppercase !important; color: var(--stone) !important; margin: 0 0 8px !important;
}
.ma-gf .gform_wrapper .gfield_required { color: inherit !important; font: inherit !important; margin-left: 0 !important; padding: 0 !important; }
.ma-gf .gform_wrapper .gfield_required .gfield_required_text { font: inherit !important; }
.ma-gf .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]):not([type=hidden]),
.ma-gf .gform_wrapper select, .ma-gf .gform_wrapper textarea {
  background-color: var(--card) !important; border: 1px solid #D3C7B5 !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 13px 14px !important; font: 400 1.05rem var(--sans) !important; letter-spacing: 0; color: var(--ink) !important;
  min-height: 0 !important; block-size: auto !important; height: auto !important; line-height: normal !important; transition: border-color .3s, box-shadow .3s;
}
.ma-gf .gform_wrapper select { padding-right: 38px !important; }
.ma-gf .gform_wrapper input:focus, .ma-gf .gform_wrapper select:focus, .ma-gf .gform_wrapper textarea:focus {
  border-color: var(--bronze-txt) !important; box-shadow: 0 0 0 3px rgba(176,129,77,.15) !important; outline: 0 !important;
}
.ma-gf .gform_wrapper textarea { min-height: 150px !important; block-size: 150px !important; height: 150px !important; resize: vertical; }
.ma-gf .gform_wrapper .gform_footer, .ma-gf .gform_wrapper .gform_page_footer { margin: 44px 0 0 !important; padding: 0 !important; }
.ma-gf .gform_wrapper .gform_footer .btn, .ma-gf .gform_wrapper .gform_footer button.btn {
  display: inline-flex !important; align-items: center; gap: 14px; padding: 18px 34px !important; min-height: 0 !important; height: auto !important;
  background: var(--btn) !important; color: #fff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  font: 600 .72rem var(--sans) !important; letter-spacing: .24em !important; text-transform: uppercase !important; line-height: 1.2 !important;
  position: relative; overflow: hidden; isolation: isolate; cursor: pointer; width: auto !important;
}
.ma-gf .gform_wrapper .gfield_validation_message, .ma-gf .gform_wrapper .validation_message { background: none !important; border: 0 !important; padding: 6px 0 0 !important; color: #9b3a1a !important; font-size: .85rem !important; }
.ma-gf .gform_wrapper .gform_validation_errors { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 0 16px !important; }
.ma-gf .gform_wrapper .gform_validation_errors .gform_submission_error { color: #9b3a1a !important; font: 400 .88rem var(--sans) !important; }
.ma-gf .gform_wrapper .gfield_error input, .ma-gf .gform_wrapper .gfield_error select, .ma-gf .gform_wrapper .gfield_error textarea { border-color: #9b3a1a !important; }
.ma-gf .sent { display: block; }
.ma-gf .gform_confirmation_message { font: inherit; color: inherit; }
.ma-gf #attached:empty { display: none; }
.ma-gf #attached { margin: 0 0 22px; }
.ma-gf:has(.gform_confirmation_message) #attached { display: none; }

/* Language switch (WPML): "EN · عربي" beside the search in the header, and at the foot of the phone menu. */
.lang { display: flex; align-items: center; gap: 8px; font: 500 .64rem/1 var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--stone); white-space: nowrap; }
.lang a { padding: 8px 0; color: var(--stone); transition: color .3s; }
.lang a:hover, .lang a[aria-current] { color: var(--bronze-txt); }
.lang a[lang="ar"] { font: 500 .86rem/1 "IBM Plex Sans Arabic", var(--sans); letter-spacing: 0; text-transform: none; }
.lang span { color: var(--line); }
.hdr__lang { margin-left: 4px; }
@media (max-width: 1279px) { .hdr__lang { display: none; } }
.menu__lang { margin-top: 10px; font-size: .74rem; }
.menu__lang a[lang="ar"] { font-size: .95rem; }

/* Reading pages: My Story, Biography, Artist Statement, CV (the About page's sections on pages of their own). */
.rd { padding-top: var(--hdr); }
.rd-nav { border-block: 1px solid var(--line); background: rgba(246,241,232,.95); }
.rd-nav__in { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1680px; margin: 0 auto; padding: 0 var(--gut); }
.rd-nav a { display: flex; align-items: baseline; gap: 12px; padding: 18px 18px; border-left: 1px solid var(--line); font: 500 .8rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--stone); transition: color .3s, background .3s; }
.rd-nav a:first-child { border-left: 0; padding-left: 0; }
.rd-nav a small { font-size: .7rem; color: var(--bronze-txt); font-variant-numeric: tabular-nums; }
.rd-nav a b { font-weight: 500; }
.rd-nav a:hover, .rd-nav a[aria-current] { color: var(--ink); }
.rd-nav a[aria-current] b { box-shadow: inset 0 -1px 0 var(--bronze); }
.rd-nav .rd-nav__about { justify-content: flex-end; }
@media (max-width: 860px) {
  .rd-nav__in { grid-template-columns: 1fr 1fr; padding: 0; }
  .rd-nav a, .rd-nav a:first-child { padding: 14px 16px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .rd-nav a:nth-child(odd) { border-left: 0; }
  .rd-nav a:nth-child(-n+2) { border-top: 0; }
  .rd-nav .rd-nav__about { grid-column: 1 / -1; justify-content: flex-start; border-left: 0; }
}
.rd__body { padding-bottom: clamp(90px, 10vw, 150px); }
.am-panel__head h1 { margin: 6px 0 0; font: 400 clamp(2.6rem, 5vw, 5rem)/1 var(--serif); color: var(--ink); }
.am-panel__head h1 em { display: block; margin-top: 10px; font-size: .5em; color: var(--bronze-txt); }
.story__body h2.story__h { margin: 2.2em 0 .8em; font: 500 clamp(1.7rem, 2.6vw, 2.3rem)/1.1 var(--serif); color: var(--bronze-deep); }
.story__body section:first-child h2.story__h { margin-top: 0; }
.cvb h2.cvb__h { margin: 0 0 16px; font: 400 .7rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--stone); }
.rd__extra { padding-top: 0; }