/* --- ARTAN / Unified CSS (Clean) --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap');

/* =============================================================================
   01) DESIGN TOKENS
============================================================================= */
:root{
  --color-white:#fff;
  --color-black:#000;
  --color-primary1:#917c6f;
  --color-primary2:#504416;
  --color-primary3:#999;
  --color-primary4:#222b00;
  --color-primary5:#008080;
  --color-primary6:#808000;
  --color-primary7:#ff5555;
  --color-primary8:#66ff00;
  --color-primary9:#00ffff;
  --color-primary10:#ffcc00;

  --bg-color:var(--color-black);
  --text-color:var(--color-white);
  --text-secondary-color:var(--color-primary3);
  --link-color:var(--color-primary5);
  --link-hover-color:var(--color-primary6);

  --font-base:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --line-height-base:1.55;

  --spacing-xs:0.35rem;
  --spacing-sm:0.75rem;
  --spacing-md:1.1rem;
  --spacing-lg:1.6rem;
  --spacing-xl:2.4rem;

  /* Stage circle size dial */
  --stage-circle-desktop:1200px;
  --stage-circle-mobile:600px;
  --stage-circle-max-desktop:1800px;
  --stage-circle-max-mobile:1200px;
  --stage-circle-vh-cap:90vh;
  --stage-circle-vw-cap:96vw;

  /* Intro motion */
  --intro-logo-max:420px;
  --intro-logo-mobile-max:360px;
  --intro-ease:cubic-bezier(0.22, 1, 0.36, 1);
  --intro-pop-duration:1.6s;
  --intro-settle-duration:1.9s;
  --intro-fade-duration:1.5s;
}

/* =============================================================================
   02) THEME MODES
============================================================================= */
body.dark-mode{
  --bg-color:var(--color-black);
  --text-color:var(--color-white);
  --text-secondary-color:var(--color-primary3);
  --link-color:var(--color-primary5);
  --link-hover-color:var(--color-primary6);
}

body.light-mode{
  --bg-color:var(--color-white);
  --text-color:var(--color-black);
  --text-secondary-color:var(--color-black);
  --link-color:var(--color-primary5);
  --link-hover-color:var(--color-primary6);
}

/* Menu overlay theme vars (menu.css paints; these are support vars) */
body.dark-mode{
  --menu-surface:rgba(0,0,0,0.94);
  --menu-surface-strong:rgba(0,0,0,0.92);
  --menu-border:rgba(255,255,255,0.18);
  --menu-sep:rgba(255,255,255,0.14);
}
body.light-mode{
  --menu-surface:rgba(255,255,255,0.92);
  --menu-surface-strong:rgba(255,255,255,0.88);
  --menu-border:rgba(0,0,0,0.14);
  --menu-sep:rgba(0,0,0,0.12);
}

/* =============================================================================
   03) RESET + BASE
============================================================================= */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:var(--font-base);
  font-size:16px;
  line-height:var(--line-height-base);
  color:var(--text-color);
  background-color:var(--bg-color);
  transition:background-color 0.6s,color 0.6s;
}
body.site-body{min-height:100vh;overflow-x:hidden;}
.container{width:90%;max-width:1200px;margin:0 auto;}

/* =============================================================================
   04) TYPOGRAPHY + LINKS
============================================================================= */
h1{font-size:2.6rem;font-weight:700;letter-spacing:0.1em;margin-bottom:var(--spacing-lg);}
h2{font-size:1.9rem;font-weight:600;margin-bottom:var(--spacing-md);}
h3{font-size:1.4rem;font-weight:500;margin-bottom:var(--spacing-sm);}
h4{font-size:1.15rem;font-weight:500;margin-bottom:var(--spacing-sm);}
h5{font-size:1rem;font-weight:500;margin-bottom:var(--spacing-xs);}
h6{font-size:0.9rem;font-weight:500;margin-bottom:var(--spacing-xs);}
p,section p{font-size:0.95rem;line-height:1.6;margin-bottom:var(--spacing-md);color:var(--text-secondary-color);}
body.light-mode div[style*='flex-direction:column'] p{color:var(--color-black);}

/* =============================================================================
   04A) CLICKABLE TEXT HOVER (GLOBAL — NO JUMP)
============================================================================= */

 a:not(.enter-button),
 .country-option,
 #language-toggle,
 #country-selector,
 .locale-button,
 .language-dropdown button,
 .language-dropdown a,
 .language-dropdown [role="menuitem"],
 .language-dropdown .language-option,
 .language-dropdown .lang-option{
  display:inline-block;
  transition:color 0.25s ease;
  transform:none !important; /* never lift/translate on hover */
  text-decoration:none !important;
}

 a:not(.enter-button):hover,
 .country-option:hover,
 #language-toggle:hover,
 #country-selector:hover,
 .locale-button:hover,
 .language-dropdown button:hover,
 .language-dropdown a:hover,
 .language-dropdown [role="menuitem"]:hover,
 .language-dropdown .language-option:hover,
 .language-dropdown .lang-option:hover,

 a:not(.enter-button):focus-visible,
 .country-option:focus-visible,
 #language-toggle:focus-visible,
 #country-selector:focus-visible,
 .locale-button:focus-visible,
 .language-dropdown button:focus-visible,
 .language-dropdown a:focus-visible,
 .language-dropdown [role="menuitem"]:focus-visible,
 .language-dropdown .language-option:focus-visible,
 .language-dropdown .lang-option:focus-visible{
  transform:none !important;
  text-decoration:none !important;
}

/* Keep baseline typography intact */


 a,
 .country-option,
 #language-toggle,
 #country-selector,
 .locale-button{
  letter-spacing:inherit !important;
  word-spacing:normal !important;
}

/* =============================================================================
   04B) RTL TEXT OVERRIDES (TEXT-ONLY, NO LAYOUT FLIP)
============================================================================= */

/* When a RTL language is active, keep layout LTR but fix script typography */
html.lang-rtl [data-i18n-key]{
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-transform: none !important;
  font-kerning: normal;
  text-align: start !important;
}

/* Headings often carry tracking that breaks Arabic/Persian readability */
html.lang-rtl h1,
html.lang-rtl h2,
html.lang-rtl h3,
html.lang-rtl h4,
html.lang-rtl h5,
html.lang-rtl h6{
  letter-spacing: normal;
}

/* Locale controls: remove uppercase/spacing styling in RTL */
html.lang-rtl #language-toggle,
html.lang-rtl #country-selector,
html.lang-rtl .language-dropdown button,
html.lang-rtl .language-dropdown a,
html.lang-rtl .language-dropdown [role="menuitem"],
html.lang-rtl .language-dropdown .language-option,
html.lang-rtl .language-dropdown .lang-option{
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* =============================================================================
   05) UTILITIES
============================================================================= */
.mb-xs{margin-bottom:var(--spacing-xs);}
.mb-sm{margin-bottom:var(--spacing-sm);}
.mb-md{margin-bottom:var(--spacing-md);}
.mb-lg{margin-bottom:var(--spacing-lg);}
.mb-xl{margin-bottom:var(--spacing-xl);}

/* =============================================================================
   06) HEADER + RIBBON (TRANSPARENT BASELINE)
============================================================================= */
.site-header{
  position:relative;
  width:100%;
  padding-top:3.2rem;
  padding-bottom:1.6rem;
  background:transparent;
  z-index:10;
}
.site-header h1{font-size:2rem;font-weight:700;margin-bottom:0.5rem;}

.main-nav ul{list-style:none;display:flex;gap:2rem;margin:0;padding:0;}
.main-nav a{text-decoration:none;color:#fff;font-weight:500;transition:color 0.18s;}
.main-nav a:hover{color:var(--link-hover-color);}

/* Header controls rail (kept as invisible container) */
#header-controls{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:90%;
  max-width:1200px;
  height:64px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  z-index:100001;
  pointer-events:all;
  isolation:isolate;
  overflow:hidden;
  background:transparent;
  border:0;
}

/* Controls always above */
#header-controls #menu-button,
#header-controls #menu-button-container,
#header-controls .theme-toggle,
#header-controls #theme-toggle{
  position:relative;
  z-index:2;
  top:0;
}

/* Menu button container sizing */
#header-controls #menu-button-container{
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#header-controls #menu-button,
#header-controls #menu-button-container{order:1;}
#header-controls #theme-toggle,
#header-controls .theme-toggle{order:2;}

/* Theme toggle hidden on home; visible while menu is open */
#header-controls #theme-toggle,
#header-controls .theme-toggle{display:none;}
body.menu-open #header-controls #theme-toggle,
body.menu-open #header-controls .theme-toggle{display:inline-flex;}

@media (max-width:768px){
  #header-controls{height:60px;}
  #header-controls #menu-button-container{height:60px;}
}

/* =============================================================================
   07) FOOTER
============================================================================= */
:root{
  /* Footer rail gutter (responsive) */
  --footer-gutter: clamp(18px, 4vw, 96px);
  --footer-rail-width: calc(100% - (var(--footer-gutter) * 2));
  --site-gutter: var(--footer-gutter);
  --site-rail-width: var(--footer-rail-width);
}
.footer-separator{
  width: var(--footer-rail-width);
  max-width: none;
  height:1px;
  border:none;
  margin:1.5rem auto;
  background-color:var(--color-primary3);
  opacity:0.6;
  display:block;
}
.footer-separator-dot{
  margin:0 0.55rem;
  opacity:0.9;
  user-select:none;
  display:inline-block;
  line-height:1;
  transform:translateY(-0.5px);
}
.footer-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width: var(--footer-rail-width);
  max-width: none;
  margin:0 auto 1rem auto;
  color:var(--text-secondary-color);
  font-size:0.75rem;
}
.site-footer{
  width:100%;
  font-size:0.9rem;
  margin:0;
  padding:0;
  background-color:transparent;
  color:var(--text-secondary-color);
  text-align:center;
}
body.dark-mode .site-footer{color:var(--text-color);}
.footer-left{text-align:left;}
.footer-right{text-align:right;}
.footer-left,.footer-right{font-size:0.9rem;line-height:1.2;letter-spacing:0.02em;margin:0;}

.footer-locale{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  white-space:nowrap;
}
.footer-right.footer-locale{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  text-align:unset;
}
.locale-item{position:relative;display:inline-flex;align-items:center;}
.locale-button{
  background:none;
  border:none;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  line-height:1;
}
#country-selector{
  font-size:0.85rem;
  font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  opacity:0.85;
  transition:opacity 0.25s;
}
#country-selector:hover{opacity:1;}

/* =============================================================================
   08) THEME TOGGLE
============================================================================= */
.theme-toggle{
  width:14px;
  height:14px;
  border-radius:50%;
  background-color:var(--text-color);
  border:none;
  box-shadow:none;
  cursor:pointer;
  z-index:9999;
  transition:transform 0.3s,opacity 0.3s,background-color 0.3s;
}
body.dark-mode .theme-toggle{background-color:var(--color-white);}
body.light-mode .theme-toggle{background-color:var(--color-black);}
.theme-toggle:hover{transform:scale(1.15);opacity:0.9;}
@media (prefers-reduced-motion:reduce){body,.theme-toggle{transition:none !important;}}

/* ============================================================================
   09) LOCALE (LANGUAGE)
============================================================================= */
#language-toggle{
  background:none;border:none;padding:0;margin:0;font:inherit;
  font-size:0.85rem;font-weight:400;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--text-color);cursor:pointer;opacity:0.85;transition:opacity 0.25s;
}
#language-toggle:hover{opacity:1;}

.language-dropdown{
  position:absolute;
  bottom:calc(100% + 10px);
  right:0;
  min-width:176px;
  padding:0.55rem;
  background-color:var(--bg-color);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,0.38),0 2px 10px rgba(0,0,0,0.22);
  display:none;
  z-index:200001;
}
.language-dropdown.visible,
.language-dropdown[aria-hidden="false"]{display:block;}
.language-dropdown > *{width:100%;}

.language-dropdown button,
.language-dropdown a,
.language-dropdown [role="menuitem"],
.language-dropdown .language-option,
.language-dropdown .lang-option{
  appearance:none;-webkit-appearance:none;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:0.65rem 0.85rem;
  border-radius:10px;
  background:transparent;
  border:none;
  font:inherit;
  font-size:0.85rem;
  font-weight:400;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-color);
  text-decoration:none;
  cursor:pointer;
  transition: opacity 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.language-dropdown button:hover,
.language-dropdown a:hover,
.language-dropdown [role="menuitem"]:hover,
.language-dropdown .language-option:hover,
.language-dropdown .lang-option:hover{
  background-color:rgba(255,255,255,0.06);
  opacity:0.98;
}
body.light-mode .language-dropdown{
  border:1px solid rgba(0,0,0,0.14);
  box-shadow:0 18px 40px rgba(0,0,0,0.16),0 2px 10px rgba(0,0,0,0.10);
}
body.light-mode .language-dropdown button:hover,
body.light-mode .language-dropdown a:hover,
body.light-mode .language-dropdown [role="menuitem"]:hover,
body.light-mode .language-dropdown .language-option:hover,
body.light-mode .language-dropdown .lang-option:hover{
  background-color:rgba(0,0,0,0.05);
}

/* Country overlay styles live in assets/css/country-cverlay.css (sovereign). */

/* =============================================================================
   10) GLOBAL CLOSE BUTTON
============================================================================= */
.global-close-button{
  background:none;
  border:none;
  font-size:1.2rem;
  font-weight:300;
  color:var(--text-color);
  cursor:pointer;
  opacity:1;
  padding:0;
  margin:0;
  line-height:1;
  position:relative;
  display:inline-block;
  width:1.2rem;
  height:1.2rem;
  transition:color 0.3s,transform 0.22s;
}
.global-close-button span{
  display:block;
  width:100%;
  height:1.2px;
  background-color:currentColor;
  position:absolute;
  top:50%;
  left:0;
  transform-origin:center;
  transition:background-color 0.3s,transform 0.4s;
}
.global-close-button span:nth-child(1){transform:rotate(45deg);}
.global-close-button span:nth-child(2){transform:rotate(-45deg);}
.global-close-button:hover{color:var(--color-primary7);transform:scale(1.08);}
.global-close-button:hover span:nth-child(1),
.global-close-button:hover span:nth-child(2){transform:rotate(0deg);}

/* =============================================================================
   11) CUSTOM CURSOR
============================================================================= */
html,body,body *{cursor:none !important;}
.custom-cursor{
  position:fixed;
  top:0;
  left:0;
  width:12px;
  height:12px;
  border-radius:50%;
  pointer-events:none;
  z-index:2147483647;
  background-color:var(--color-primary1);
  transform:translate(-50%,-50%);
  transition:background-color 0.3s,transform 0.1s,opacity 0.2s;
  opacity:1;
  mix-blend-mode:normal;
  display:block;
  visibility:visible;
  left:0;
  right:auto;
  top:0;
  bottom:auto;
}
@media (hover:none) and (pointer:coarse), (max-width:768px){
  .custom-cursor{display:none !important;}
  html,body,body *{cursor:auto !important;}
}
html[dir="rtl"] .custom-cursor,
body[dir="rtl"] .custom-cursor{
  direction:ltr;
  unicode-bidi:isolate;
  transform:translate(-50%,-50%) !important;
}

/* =============================================================================
   12) INTRO LOGO ANIMATION (CSS HOOKS)
============================================================================= */
body.intro-loading{overflow:hidden;}
body.intro-loading .stage-circle{opacity:0;background:transparent;}
body.intro-loading .stage-circle::after{opacity:0;animation:none;}

body.intro-reveal .stage-circle{opacity:1;transition:opacity 0.9s var(--intro-ease);}

body.intro-loading #header-controls,
body.intro-loading .site-essence,
body.intro-loading .site-footer,
body.intro-loading .footer-separator,
body.intro-loading #menu-overlay{
  opacity:0;
  pointer-events:none;
}

/* Stage text + CTA silent until reveal */
body.intro-loading #announcement,
body.intro-loading #enter-button,
body.intro-loading .enter-button{
  opacity:0;
  transform:translateY(18px);
}
body.intro-reveal #announcement,
body.intro-reveal #enter-button,
body.intro-reveal .enter-button{
  opacity:1;
  transform:translateY(0);
  transition:opacity 0.65s ease,transform 0.85s var(--intro-ease);
}

/* Intro logo overlay */
.site-logo.intro-logo{
  position:fixed;
  left:50%;
  top:50%;
  right:auto;
  bottom:auto;
  display:block;
  width:min(62vw, var(--intro-logo-max));
  height:auto;
  margin:0 !important;
  z-index:300000;
  opacity:0;
  transform:translate(-50%,-50%) scale(0.68);
  transition:opacity var(--intro-pop-duration) ease,transform var(--intro-settle-duration) var(--intro-ease);
  will-change:transform,opacity;
  backface-visibility:hidden;
}
.site-logo.intro-logo.intro-pop{opacity:1;transform:translate(-50%,-50%) scale(1);}
.site-logo.intro-logo.intro-settle{transform:translate(-50%,-50%) scale(0.94);}
.site-logo.intro-logo.intro-fade{
  opacity:0;
  transform:translate(-50%,-50%) scale(0.30);
  transition:opacity var(--intro-fade-duration) ease,transform var(--intro-fade-duration) var(--intro-ease);
}
html[dir="rtl"] .site-logo.intro-logo,
body[dir="rtl"] .site-logo.intro-logo{left:50% !important;right:auto !important;}

.site-logo.intro-docked{
  position:relative;
  left:auto;
  top:auto;
  transform:none;
  width:320px;
  margin:0 auto 2rem auto;
  z-index:1;
  opacity:1;
}
@media (max-width:640px){
  .site-logo.intro-logo{width:min(78vw, var(--intro-logo-mobile-max));}
  .site-logo.intro-docked{width:260px;}
}
@media (prefers-reduced-motion: reduce){
  body.intro-loading{overflow:auto;}
  .site-logo.intro-logo,
  .site-logo.intro-logo.intro-fade,
  body.intro-reveal #announcement,
  body.intro-reveal #enter-button,
  body.intro-reveal .enter-button{
    transition:none !important;
    animation:none !important;
    transform:none !important;
  }
}

/* =============================================================================
   13) PRE-ENTER CONTENT GATE (HOMEPAGE)
============================================================================= */
body:not(.site-entered) section,
body:not(.site-entered) .featured-section,
body:not(.site-entered) .section-posts,
body:not(.site-entered) .section-comments,
body:not(.site-entered) .site-footer,
body:not(.site-entered) .footer-flex,
body:not(.site-entered) .footer-separator{
  display:none !important;
}

/* Keep stage visible without breaking its internal layout */
body:not(.site-entered) #stage{display:flex !important;}
body:not(.site-entered) #stage *{display:revert;}
body:not(.site-entered){overflow:hidden;}