/*
Theme Name: Sankhau
Theme URI: https://sankhau.lekhactuan.com
Description: Child theme của Kadence cho website Việt Nam en Scène, theo bộ nhận diện festival "LA SEMAINE — Théâtre vietnamien en France" (xem files/SPEC.md).
Author: Le Khac Tuan
Template: kadence
Version: 1.1.0
Text Domain: kadence-child
*/

/* Design system theo files/SPEC.md — bộ nhận diện "Việt Nam en Scène" (thay cho Terra Culture Lab cũ) */
:root{
  --sk-accent:#A02C13;
  --sk-accent-dark:#810C0C;
  --sk-card-heading:#A92317;
  --sk-base:#F3E7CD;
  --sk-header-bg:#E4D3A8;
  --sk-hero-bg:#F8F1DE;
  --sk-dark:#14100E;
  --sk-heading:#000000;
  --sk-body:#4A413A;
  --sk-muted:#6E655C;
  --sk-font-display:"Oswald",sans-serif;
  --sk-font-serif-italic:"Playfair Display",serif;
}

body{background-color:var(--sk-base);}
/* Header sticky sẽ che mất phần đầu section khi bấm link neo (#what, #projects...) — bù lại bằng scroll-margin-top. */
#what,#projects,#about{scroll-margin-top:100px;}
.entry-content,.site,.content-area{background-color:transparent;}

/* Section tối (kiểu "What we do" / footer trong terra.css) — dùng qua Kadence Row Layout > Advanced > CSS Class "sk-dark-section" */
.sk-dark-section{background-color:var(--sk-dark)!important;color:#EDE5D9;}
.sk-dark-section h1,.sk-dark-section h2,.sk-dark-section h3{color:#F5EEE3;}
.sk-dark-section p{color:#B3A89B;}

/* Nhãn eyebrow kiểu terra.css — dùng qua CSS Class "sk-eyebrow" trên Advanced Text/Heading */
.sk-eyebrow{font-family:Barlow,sans-serif;font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--sk-accent);}

/* Placeholder nội dung chưa có dữ liệu thật — CSS class "sk-placeholder" */
.sk-placeholder{opacity:.65;font-style:italic;}

/* ==========================================================================
   Header — theo bộ nhận diện "Việt Nam en Scène" (files/SPEC.md, header.php)
   ========================================================================== */
/* Kadence đặt #wrapper{overflow:hidden} toàn cục — vô hiệu hoá position:sticky của phần tử con
   (theo chuẩn CSS: sticky không hoạt động nếu có ancestor với overflow khác visible).
   Ghi đè về visible để header sticky hoạt động đúng. */
#wrapper{overflow:visible!important;}

/* #masthead (id) trong CSS gốc Kadence có specificity cao hơn .sk-site-header (class),
   nên set position:relative đè mất sticky của mình — dùng !important để thắng chắc chắn. */
#masthead.sk-site-header{position:sticky!important;top:0!important;z-index:999;background:var(--sk-header-bg);border-bottom:1px solid rgba(0,0,0,.08);}
.sk-header-grid{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,40px);padding-top:14px;padding-bottom:14px;}
.sk-logo{display:flex;align-items:center;text-decoration:none;}
.sk-logo img{display:block;height:52px;width:auto;}
.sk-logo-fallback{font-family:var(--sk-font-display);font-weight:600;font-size:22px;letter-spacing:.04em;color:var(--sk-accent);text-transform:uppercase;}
.sk-main-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2.2vw,34px);}
.sk-main-nav a{white-space:nowrap;font:500 clamp(11px,.9vw,13px)/1 var(--sk-font-display);letter-spacing:.08em;text-transform:uppercase;color:#000;padding-bottom:5px;border-bottom:1.5px solid transparent;text-decoration:none;}
.sk-main-nav a:hover{color:var(--sk-accent);border-bottom-color:rgba(160,44,19,.4);}
.sk-main-nav a.is-active{color:var(--sk-accent);border-bottom-color:var(--sk-accent);}
.sk-header-right{display:flex;align-items:center;gap:clamp(12px,1.6vw,22px);}
.sk-lang{display:flex;gap:6px;font:500 12px/1 var(--sk-font-display);letter-spacing:.06em;}
.sk-lang a{color:#000;text-decoration:none;text-transform:uppercase;}
.sk-lang a.is-active{color:var(--sk-accent);border-bottom:1.5px solid var(--sk-accent);padding-bottom:2px;}
.sk-lang span{color:#A99C90;}
.sk-btn-ticket{display:inline-flex;align-items:center;justify-content:center;background:var(--sk-accent);color:#fff!important;text-decoration:none;font:500 13px/1 var(--sk-font-display);letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;white-space:nowrap;}
.sk-btn-ticket:hover{background:var(--sk-accent-dark);}

@media (max-width:1024px){
  .sk-main-nav{display:none;}
}
@media (max-width:640px){
  .sk-header-right .sk-lang{display:none;}
}

/* ==========================================================================
   Footer — theo bộ nhận diện "Việt Nam en Scène" (footer.php)
   ========================================================================== */
.sk-site-footer{background:var(--sk-dark);color:#C9BEB1;}
.sk-footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:34px;padding-top:48px;padding-bottom:30px;}

.sk-flogo{display:flex;flex-direction:column;gap:8px;text-decoration:none;max-width:220px;}
.sk-flogo img{width:150px;height:auto;filter:brightness(0) invert(1);opacity:.92;}
.sk-flogo-3{font-family:var(--sk-font-display);font-size:10px;letter-spacing:.08em;color:#9A8F83;text-transform:uppercase;}

.sk-fcontact{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column;gap:15px;}
.sk-fcontact li{display:flex;align-items:center;gap:14px;font:500 11.5px/1 var(--sk-font-display);letter-spacing:.08em;text-transform:uppercase;color:#C9BEB1;}
.sk-fcontact-mail{font-size:11px;letter-spacing:.04em;overflow-wrap:anywhere;}
.sk-fcontact a{color:inherit;text-decoration:none;}
.sk-fcontact a:hover{color:var(--sk-accent);}
.sk-fcontact svg{flex:0 0 15px;width:15px;height:15px;fill:none;stroke:var(--sk-accent);stroke-width:1.4;}

.sk-fmenu{list-style:none;margin:0;padding:6px 0 0;display:flex;flex-direction:column;gap:15px;}
.sk-fmenu a{font:500 11.5px/1 var(--sk-font-display);letter-spacing:.08em;text-transform:uppercase;color:#C9BEB1;text-decoration:none;}
.sk-fmenu a:hover{color:var(--sk-accent);}

.sk-newsletter{padding-top:6px;}
.sk-newsletter p:not(.sk-eyebrow){font-size:13px;line-height:1.7;color:#A2978A;margin:14px 0 16px;}
.sk-nl-form{display:flex;height:38px;max-width:240px;}
.sk-nl-form input{flex:1;min-width:0;border:1px solid rgba(201,190,177,.3);background:#FBF7F0;color:#2B211C;padding:0 12px;font:400 13px Barlow,sans-serif;outline:none;}
.sk-nl-form button{width:42px;border:0;background:var(--sk-accent);color:#fff;font-size:15px;cursor:pointer;}
.sk-nl-form button:hover{background:var(--sk-accent-dark);}

.sk-footer-bottom{border-top:1px solid rgba(201,190,177,.14);}
.sk-footer-bottom-inner{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;padding-top:16px;padding-bottom:16px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A8073;}
.sk-legal{display:flex;gap:18px;white-space:nowrap;margin:0;}
.sk-legal a{color:#8A8073;text-decoration:none;}
.sk-legal a:hover{color:var(--sk-accent);}