/*
Theme Name: U ME RI GU
Theme URI: https://umerigu.com
Author: U ME RI GU
Description: Black, grainy community-arthouse theme for U ME RI GU. Colours and fonts are set in Appearance → Editor → Styles; Program, Residency and Rooms are edited from the dashboard.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: umerigu
*/

/* Everything below uses the palette and font presets from theme.json, so changing a colour
   or a font in Styles changes it here too. */
:root{
  --ume-bg:var(--wp--preset--color--base);
  --ume-ink:var(--wp--preset--color--ink);
  --ume-dim:var(--wp--preset--color--dim);
  --ume-soft:var(--wp--preset--color--soft);
  --ume-blue:var(--wp--preset--color--blue);
  --ume-orange:var(--wp--preset--color--orange);
  --ume-red:var(--wp--preset--color--red);
  --ume-magenta:var(--wp--preset--color--magenta);
  --ume-green:var(--wp--preset--color--green);
  --ume-tan:var(--wp--preset--color--tan);
  --ume-serif:var(--wp--preset--font-family--display);
  --ume-title:var(--wp--preset--font-family--title);
  --ume-body:var(--wp--preset--font-family--body);
  --ume-text:var(--wp--preset--font-family--text);
  --ume-num:var(--wp--preset--font-family--mono);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{overflow-x:hidden;min-height:100vh}

/* ---------- grain (background itself stays black) ---------- */
.ume-grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:umeGrain 1.4s steps(4) infinite}
@keyframes umeGrain{0%{transform:translate(0,0)}25%{transform:translate(-2%,1%)}50%{transform:translate(1%,-2%)}75%{transform:translate(-1%,2%)}100%{transform:translate(0,0)}}
.wp-site-blocks{position:relative;z-index:2}
.wp-site-blocks>*{margin-block-start:0}

/* ---------- pages ---------- */
.ume-page{min-height:100vh;padding:90px 6vw 120px;animation:umeIn .7s ease both}
@keyframes umeIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ume-page .entry-content>*+*{margin-block-start:1.2em}

/* ---------- top navigation ---------- */
.ume-header{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;
  justify-content:space-between;padding:18px 4vw;mix-blend-mode:difference;gap:20px}
.ume-header .ume-brand{display:flex;align-items:center;gap:12px}
.ume-header .wp-block-site-logo img{height:34px;width:auto}
.ume-header .wp-block-site-title{font-family:var(--ume-num);font-size:12px;letter-spacing:.35em;text-transform:lowercase;margin:0}
.ume-header .wp-block-site-title a{color:var(--ume-ink);text-decoration:none}
.ume-header .wp-block-navigation{gap:3.2vw;font-family:var(--ume-body);font-weight:400;font-size:15px;letter-spacing:.08em}
.wp-block-navigation .wp-block-navigation-item__content{color:var(--ume-ink);text-decoration:none;position:relative;padding:4px 0}
.wp-block-navigation .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ume-ink);transition:width .35s}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item>.wp-block-navigation-item__content::after{width:100%}
@media(max-width:700px){
  .ume-header .wp-block-site-title{display:none}
  .ume-header .wp-block-navigation{gap:14px;font-size:13px;letter-spacing:.04em}
}
@media(max-width:380px){.ume-header .wp-block-navigation{gap:10px;font-size:12px;letter-spacing:0}}

/* ---------- home ---------- */
.ume-home{height:100vh;overflow:hidden;text-align:center;padding:1vh 0 13vh;display:flex;flex-direction:column}
.ume-home>.entry-content{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:6px}
.ume-home>.entry-content>*{margin:0!important}
.ume-home .wp-block-site-logo img,.ume-home .ume-logo img{width:min(105px,24vw);height:auto;
  filter:drop-shadow(0 0 34px rgba(255,255,255,.16));animation:umeBreathe 6s ease-in-out infinite}
@keyframes umeBreathe{0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 26px rgba(255,255,255,.12))}
  50%{transform:translateY(-10px) scale(1.02);filter:drop-shadow(0 0 48px rgba(255,255,255,.26))}}
.ume-home .wp-block-site-tagline,.ume-tag{font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:var(--ume-dim);margin-top:12px!important}
.ume-hero{flex:1;min-height:0;width:100%;display:grid;place-items:center}
.ume-hero canvas{width:min(96vw,1300px);height:100%;display:block;cursor:grab;touch-action:none}
.ume-hero canvas:active{cursor:grabbing}
.ume-home .wp-block-navigation.ume-home-nav{position:fixed;bottom:5vh;left:0;right:0;justify-content:center;gap:9vw;z-index:5;
  font-size:clamp(16px,2vw,22px);letter-spacing:.06em;font-weight:400}
@media(max-width:700px){.ume-home .wp-block-navigation.ume-home-nav{gap:4.5vw;flex-wrap:nowrap;padding:0 4vw;font-size:14px;letter-spacing:.02em}}
@media(max-width:380px){.ume-home .wp-block-navigation.ume-home-nav{gap:3.5vw;padding:0 3vw;font-size:13px;letter-spacing:0}}
.editor-styles-wrapper .ume-home .wp-block-navigation.ume-home-nav{position:static}

/* ticker — events passing across the frame */
.ume-ticker{width:100vw;flex:none;overflow:hidden;margin:2vh 0 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ume-ticker .strip{display:inline-flex;white-space:nowrap;animation:umeTicker 38s linear infinite;will-change:transform}
.ume-ticker .strip:hover{animation-play-state:paused}
@keyframes umeTicker{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.ume-ticker .item{display:inline-flex;align-items:baseline;gap:12px;padding:0 24px;font-size:13px}
.ume-ticker .d{font-family:var(--ume-num);color:var(--ume-orange)}
.ume-ticker .dash,.ume-ticker .sep{color:var(--ume-dim)}
.ume-ticker .sep{margin-left:22px}
.ume-ticker .t{letter-spacing:.05em}

/* ---------- buttons ---------- */
.ume-btn,.wp-block-button__link{display:inline-block;border:1px solid var(--ume-ink);color:var(--ume-ink);background:none;
  font-family:var(--ume-num);font-size:12px;letter-spacing:.25em;text-transform:uppercase;text-decoration:none;
  padding:12px 26px;transition:.3s;cursor:pointer;border-radius:0}
.ume-btn:hover,.wp-block-button__link:hover{background:var(--ume-ink);color:var(--ume-bg)}
.ume-btn.blue{border-color:var(--ume-blue);color:#9a9aff}
.ume-btn.blue:hover{background:var(--ume-blue);color:#fff}

/* ---------- section label + year mark ---------- */
.ume-label,.ume-label.wp-block-paragraph{font-family:var(--ume-num);font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ume-dim);margin:7vh 0 1vh!important}
.ume-yr{position:fixed;right:4vw;bottom:5vh;font-family:var(--ume-num);font-size:clamp(22px,3vw,38px);color:var(--ume-ink);
  line-height:1;z-index:3;pointer-events:none}
.ume-yr b{display:block;color:var(--ume-red);font-weight:400}

/* ---------- program / residency lists ---------- */
.ev-list{display:flex;flex-direction:column;max-width:880px}
.ev{display:grid;grid-template-columns:150px 1fr auto;gap:32px;align-items:baseline;
  padding:26px 6px;border-bottom:1px solid rgba(239,236,230,.13);text-decoration:none;color:var(--ume-ink);
  transition:.3s;position:relative}
a.ev:hover{padding-left:22px;background:linear-gradient(90deg,rgba(43,43,255,.12),transparent)}
.ev .d{font-family:var(--ume-num);font-size:clamp(14px,1.5vw,20px);line-height:1.3;color:var(--ume-orange)}
.ev .t{font-family:var(--ume-title);font-weight:560;font-size:clamp(20px,3vw,34px);text-transform:uppercase;line-height:1}
.ev .s{display:block;font-family:var(--ume-text);font-weight:300;font-size:13px;color:var(--ume-red);text-transform:none;letter-spacing:.05em;margin-top:6px}
.ev .p{display:block;font-family:var(--ume-num);font-size:12px;letter-spacing:.12em;color:var(--ume-dim);margin-top:6px;text-transform:none}
.ev .arrow{font-family:var(--ume-num);color:var(--ume-dim);font-size:14px;transition:.3s}
a.ev:hover .arrow{color:var(--ume-ink);transform:translateX(6px)}
.ev.upcoming{opacity:.5}
div.ev.upcoming{cursor:default}
.ev.upcoming .d{color:var(--ume-magenta)}
.ev.upcoming .badge{font-family:var(--ume-num);font-size:10px;letter-spacing:.25em;color:var(--ume-magenta);
  border:1px solid var(--ume-magenta);padding:4px 10px;border-radius:20px;align-self:center}
.ev-list.residency .ev .d{color:var(--ume-green)}
.ume-empty{font-family:var(--ume-num);font-size:12px;letter-spacing:.2em;color:var(--ume-dim);margin-top:4vh}
@media(max-width:600px){.ev{grid-template-columns:84px 1fr;gap:18px}.ev .d{font-size:13px}.ev .arrow,.ev.upcoming .badge{display:none}}

/* ---------- single event / residency ---------- */
.ev-detail>*{max-width:1000px}
.ev-detail .back{font-family:var(--ume-num);font-size:12px;letter-spacing:.2em;color:var(--ume-dim);text-decoration:none;display:inline-block;margin-bottom:5vh}
.ev-detail .back:hover{color:var(--ume-ink)}
.ev-detail .head{display:flex;gap:26px;align-items:baseline;flex-wrap:wrap;margin-bottom:2vh}
.ev-detail .head .d{font-family:var(--ume-num);font-size:clamp(26px,4vw,44px);color:var(--ume-orange)}
.ev-detail.is-residency .head .d{color:var(--ume-green)}
.ev-detail .head h1{font-family:var(--ume-title);font-weight:560;font-size:clamp(40px,7vw,90px);text-transform:uppercase;line-height:.95;margin:0}
.ev-detail .sub{font-family:var(--ume-text);color:var(--ume-red);font-size:15px;letter-spacing:.06em;margin-bottom:5vh}
.ev-detail .entry-content p{font-family:var(--ume-text);font-size:15px;line-height:1.75;color:var(--ume-soft)}
.ev-detail .entry-content .wp-block-columns{gap:4vw}
.ev-detail .entry-content .wp-block-image{margin:0 0 16px}
.ev-detail .entry-content .wp-block-image img{width:100%;height:auto;display:block}
.ev-detail .entry-content a{color:#9a9aff}

/* ---------- about ---------- */
.ume-about-hero{min-height:100vh;padding:90px 6vw 6vh;justify-content:flex-end!important;align-items:center!important}
.ume-scroll{font-family:var(--ume-num);font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--ume-dim);animation:umeCue 2.4s ease-in-out infinite}
@keyframes umeCue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:.95}}
.ume-about-body{padding:14vh 6vw 10vh;max-width:760px;margin:0 auto!important}
.ume-about-body p{font-size:19px;line-height:1.75;color:var(--ume-soft)}
.ume-kwords{font-family:var(--ume-num);font-size:14px;letter-spacing:.25em;color:var(--ume-dim);line-height:2.2;text-transform:lowercase;text-align:center;padding:0 6vw 18vh;margin:0!important}
.ume-page.is-full{padding:0}

/* ---------- space / floor plan ---------- */
.ume-space .lvl-switch{display:flex;gap:18px;margin-bottom:4vh}
.ume-space .lvl-switch button{background:none;border:1px solid rgba(239,236,230,.3);color:var(--ume-dim);
  font-family:var(--ume-num);font-size:13px;letter-spacing:.2em;padding:10px 22px;cursor:pointer;transition:.3s}
.ume-space .lvl-switch button.on{color:var(--ume-bg);background:var(--ume-ink);border-color:var(--ume-ink)}
.ume-space .space-wrap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:4vw;align-items:start}
@media(max-width:900px){.ume-space .space-wrap{grid-template-columns:1fr}}
.ume-space .plan{width:100%;height:auto;display:block}
.ume-space .plan .room{cursor:pointer;transition:filter .25s,opacity .25s;opacity:.88}
.ume-space .plan .room:hover{filter:brightness(1.25) saturate(1.2);opacity:1}
.ume-space .plan .room.sel{filter:brightness(1.3);opacity:1;stroke:#fff;stroke-width:2}
.ume-space .plan text{font-family:var(--ume-title);font-weight:560;text-transform:uppercase;letter-spacing:.02em;fill:#0b0b0e;pointer-events:none}
.ume-space .plan text.lt{fill:#efece6}
.ume-space .plan .still{opacity:.55;cursor:default}
.ume-space .hintline{margin-top:3vh;font-size:12px;color:var(--ume-dim);letter-spacing:.12em}
.ume-space .room-panel{border:1px solid rgba(239,236,230,.18);padding:28px;min-height:340px;
  background:rgba(11,11,14,.55);backdrop-filter:blur(6px);position:sticky;top:90px}
.ume-space .room-panel .pic{height:230px;cursor:default;position:relative;display:grid;place-items:center;font-family:var(--ume-num);font-size:12px;
  letter-spacing:.3em;color:rgba(0,0,0,.65);margin-bottom:20px;background-size:cover;background-position:center;transition:background .4s}
.ume-space .room-panel h3{font-family:var(--ume-title);font-size:30px;font-weight:560;text-transform:uppercase;line-height:1;margin:0 0 8px}
.ume-space .room-panel .spec{font-family:var(--ume-num);color:var(--ume-orange);font-size:13px;letter-spacing:.08em;margin-bottom:14px;white-space:pre-line}
.ume-space .room-panel p{font-size:14px;line-height:1.6;color:var(--ume-soft);margin:0 0 22px;white-space:pre-wrap}

/* ---------- contact ---------- */
.ume-contact{max-width:760px}
.ume-contact form{display:flex;flex-direction:column;gap:14px}
.ume-contact label{font-family:var(--ume-num);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:#8fdc5a}
.ume-contact input,.ume-contact select,.ume-contact textarea{background:var(--ume-blue);border:none;border-bottom:3px solid var(--ume-tan);
  color:#aef07d;font-family:var(--ume-body);font-size:15px;padding:14px 16px;outline:none;width:100%;border-radius:0;-webkit-appearance:none;appearance:none}
.ume-contact ::placeholder{color:#8fdc5a;opacity:.85}
.ume-contact textarea{min-height:130px;resize:vertical}
.ume-contact button{align-self:flex-start;margin-top:12px}
.ume-contact button:disabled{opacity:.5;cursor:wait}
.ume-contact .sent-note{display:none;font-family:var(--ume-num);font-size:13px;letter-spacing:.14em;color:#8fdc5a;border:1px solid #8fdc5a55;padding:16px 20px;margin-top:6px}
.ume-contact .icons{display:flex;gap:22px;margin-top:26px}
.ume-contact .icons a{color:var(--ume-ink);opacity:.75;transition:.3s;display:inline-flex}
.ume-contact .icons a:hover{opacity:1;transform:translateY(-3px)}
.ume-contact .icons svg{width:28px;height:28px}

/* editor-only stand-ins for the interactive blocks */
.ume-placeholder{border:1px dashed rgba(239,236,230,.35);padding:28px;text-align:center;font-family:var(--ume-num);
  font-size:12px;letter-spacing:.2em;color:var(--ume-dim);text-transform:uppercase;width:100%}

/* ---------- about: the elements — one calm centred column; each opens into the same reading column ---------- */
/* pairs side by side (left centre / right centre); the centred ones take a full row below */
.ume-orbs{display:flex;flex-direction:column;align-items:center;gap:14vh;max-width:none;margin:0!important;padding:10vh 6vw 16vh}
.ume-orb{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;max-width:640px;min-width:0}
.ume-orbs>.ume-orb{margin:0!important} /* WordPress adds a block gap above every item after the first */
.ume-orb.is-center{grid-column:1/-1;max-width:640px}
.ume-orb.is-center details>:not(summary){text-align:justify;text-align-last:center;hyphens:auto}
.ume-orb .wp-block-image{margin:0 0 10px;cursor:pointer}
.ume-orb>details{margin-top:0!important} /* no extra WordPress block gap between icon and title */
.ume-orb .wp-block-image img{height:320px;width:auto;display:block;transition:transform .6s ease,filter .6s ease}
.ume-orb .wp-block-image:hover img{transform:translateY(-6px);filter:drop-shadow(0 0 24px rgba(239,236,230,.18))}
.ume-orb details{width:100%}
.ume-orb summary{list-style:none;cursor:pointer;font-family:var(--ume-num);font-weight:600;font-size:16px;letter-spacing:.12em;color:var(--ume-ink)}
.ume-orb summary::-webkit-details-marker{display:none}
.ume-orb summary::after{content:"";display:block;width:9px;height:9px;margin:10px auto 0;border-right:1.5px solid var(--ume-red);
  border-bottom:1.5px solid var(--ume-red);transform:rotate(45deg);transition:transform .35s}
.ume-orb details[open] summary::after{transform:rotate(225deg)}
.ume-orb details>:not(summary){font-size:18px;line-height:1.7;color:var(--ume-soft);margin-top:14px;text-align:left;animation:umeIn .5s ease both}
.ume-orb details>p:nth-of-type(1){margin-top:4vh}
.ume-orb details>p.ume-ar{direction:rtl;text-align:right;line-height:1.85}
.ume-orb details>p.ume-ar+p:not(.ume-ar){margin-top:2.2em}
@media(max-width:800px){.ume-orbs{gap:10vh}.ume-orb .wp-block-image img{height:240px}}

/* ---------- about: Casa blanca e.V. — the closing band, light and calm against the black ---------- */
.ume-casa{position:relative;z-index:3;background:var(--wp--preset--color--teal);color:var(--wp--preset--color--base);
  padding:12vh 6vw 14vh;margin:0!important;overflow:hidden}
.ume-casa::before{content:"";position:absolute;right:-12vw;top:-18vw;width:52vw;height:52vw;border-radius:50%;
  border:1px solid rgba(0,0,0,.18);box-shadow:0 0 0 4vw rgba(0,0,0,.035),0 0 0 9vw rgba(0,0,0,.025);pointer-events:none}
.ume-casa .ume-casa-title{font-family:var(--ume-serif);font-weight:400;text-transform:none;font-size:clamp(32px,4.5vw,64px);
  line-height:1;letter-spacing:0;color:var(--wp--preset--color--base);margin:0 0 5vh;max-width:none;position:relative}
.ume-casa .ume-casa-text{columns:2 300px;column-gap:4vw;max-width:900px;position:relative}
.ume-casa .ume-casa-text p{color:var(--wp--preset--color--base);font-family:var(--ume-text);font-size:16px;line-height:1.7;margin:0 0 1em}

/* ---------- about: Terminology — full-width, three columns read right to left ---------- */
.ume-orb.is-wide{grid-column:1/-1}
.ume-orb.is-wide details{max-width:none;width:100%}
.ume-orb.is-wide details>.ume-terms{margin-top:6vh;gap:4vw;align-items:flex-start}
@media(min-width:782px){.ume-orb.is-wide .ume-terms{flex-direction:row-reverse}}
.ume-terms p{font-family:var(--ume-text);font-size:16px;line-height:1.55;color:var(--ume-ink);text-align:justify;margin:0 0 1.4em}
.ume-terms .wp-block-column:first-child{text-align:right}
.ume-terms .wp-block-column:first-child .wp-block-image{margin:0 0 4vh auto;width:min(300px,100%)}
.ume-terms .wp-block-column:first-child .wp-block-image img{width:100%;height:auto}
.ume-terms p.ume-term-origin{text-align:right}
.ume-terms .wp-block-column:nth-child(2){padding-top:16vh}
.ume-terms .wp-block-column:nth-child(2) p{text-align:left}
.ume-terms .wp-block-column:nth-child(3){padding-top:4vh}
.ume-terms .wp-block-column:nth-child(3) p{text-align-last:right}
@media(max-width:781px){.ume-terms .wp-block-column:nth-child(n){padding-top:0}}

/* ---------- program page: upcoming on the left; the archive starts below it, from the centre of the frame ---------- */
@media(min-width:901px){
  .ume-page .entry-content:has(> .ume-events .ev-list.upcoming):has(> .ume-events .ev-list.past){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:0;align-items:start}
  .ume-page .entry-content>.ume-events{margin:0!important;min-width:0}
  .ume-page .entry-content>.ume-events:has(.ev-list.upcoming){grid-column:1;grid-row:1;padding-right:4vw}
  .ume-page .entry-content>.ume-events:has(.ev-list.past){grid-column:2;grid-row:2;margin-top:10vh!important}
  .ume-page .entry-content>.ume-events .ume-label{margin-top:0!important}
}

/* cosmos: one continuous text — no gaps between the lines/paragraphs, just the divider between Arabic and English */
.ume-orb:has(p.ume-ar) details>p{margin-top:0!important;margin-bottom:0}
.ume-orb:has(p.ume-ar) details>p:nth-of-type(1){margin-top:4vh!important}
.ume-orb:has(p.ume-ar) details>p.ume-ar+p:not(.ume-ar){margin-top:2.2em!important;padding-top:0;border:0}


/* room photos: several per room — click the photo or a dot for the next one */
.ume-space .room-panel .pic.has-many{cursor:pointer}
.ume-space .room-panel .pic .dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.ume-space .room-panel .pic .dots button{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.85);
  background:transparent;cursor:pointer}
.ume-space .room-panel .pic .dots button.on{background:#fff}