/*
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);}
/* Kadence dùng flex sticky-footer (#inner-wrap{flex:1 0 auto}) — khi nội dung ngắn hơn
   viewport, #inner-wrap bị kéo giãn nhưng phần tử con (#content) không tự giãn theo,
   để lộ khoảng trống nền body (khác màu/không có hoạ tiết) trước khi tới footer.
   Giãn #content full chiều cao #inner-wrap để nền/hoạ tiết luôn phủ kín. */
#inner-wrap{display:flex;flex-direction:column;}
#inner-wrap #content{flex:1 0 auto;display:flex;flex-direction:column;}
#inner-wrap #content>.sk-hero-trad-wrap{flex:1 0 auto;}
/* 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;position:relative;}

/* 1 ảnh nền hoạ tiết sân khấu duy nhất, phủ từ header xuống hết footer, đặt ở cấp #wrapper
   thay vì lồng trong .sk-hero-trad-wrap — dùng chung cho MỌI trang có layout này (trang chủ,
   trang tĩnh, archive CPT — xem sk_page_uses_shared_bg() trong functions.php + header.php).
   Dùng background-repeat (không phải <img object-fit:cover height:100%) vì height:100% của
   #wrapper co giãn theo TOÀN BỘ chiều cao trang — trang càng dài (vd archive Chương trình
   nhiều tiết mục) càng phóng to ảnh gốc lên nhiều lần, gây vỡ hình/mờ. background-size cố
   định (auto 1330px — đúng tỷ lệ phóng ~1.4x như khi hiển thị tự nhiên trên trang chủ) +
   repeat-y để lặp lại vừa đủ, không phóng to quá mức dù trang dài bao nhiêu. */
body.sk-has-page-bg #wrapper{position:relative;}
/* background-size cố định (vd 1498px) + repeat cả 2 chiều từng bị hở "khoảng trống be trơn"
   2 bên trên màn hình rộng (ảnh gốc có viền trong khá rỗng quanh hoạ tiết, lặp ngang lộ rõ
   viền rỗng đó, trông như bị đóng khung ở giữa) — width:100% (khớp đúng chiều rộng khung chứa,
   không dư/thiếu) đảm bảo LUÔN đúng 1 bản duy nhất theo chiều ngang, không có mối nối ngang
   nên không thể hở 2 bên nữa; height:auto giữ tỷ lệ gốc + repeat-y để lặp xuống khi trang dài. */
body.sk-has-page-bg #wrapper::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background-repeat:repeat-y;background-position:top center;background-size:100% auto;opacity:.5;z-index:0;pointer-events:none;}

/* #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;align-items:center;gap:6px;font:500 12px/1 var(--sk-font-display);letter-spacing:.06em;}
.sk-lang a{display:inline-flex;align-items:center;gap:5px;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-flag{display:block;width:18px;height:12px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);flex:none;}
.sk-lang-sep{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);}

.sk-nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;width:30px;height:30px;background:transparent;border:0;padding:0;cursor:pointer;flex:none;}
.sk-nav-toggle span{display:block;width:100%;height:2px;background:#000;border-radius:1px;transition:transform .2s ease,opacity .2s ease,width .2s ease;}
.sk-nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);width:100%;}
.sk-nav-toggle.is-open span:nth-child(2){opacity:0;}
.sk-nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);width:100%;}

@media (max-width:1024px){
  .sk-nav-toggle{display:flex;order:-1;}
  .sk-main-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    background:var(--sk-header-bg);
    padding:8px clamp(24px,6vw,80px) 22px;
    border-bottom:1px solid rgba(0,0,0,.08);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
  }
  .sk-main-nav.is-open{display:flex;}
  .sk-main-nav a{padding:10px 0;width:100%;border-bottom:1px solid rgba(0,0,0,.06);}
}

/* Bộ chuyển ngôn ngữ luôn hiện cạnh nút Đặt vé (không nằm trong menu) — thu gọn dần
   trên màn hình hẹp để vẫn đủ chỗ cho logo + nút mở menu + ngôn ngữ + Đặt vé trên 1 hàng. */
@media (max-width:480px){
  .sk-header-right{gap:8px;}
  .sk-lang{gap:3px;font-size:11px;}
  .sk-lang a{gap:2px;}
  .sk-lang-sep{margin:0 1px;}
  .sk-btn-ticket{padding:10px 12px;font-size:11px;}
}
@media (max-width:380px){
  .sk-lang-code{display:none;} /* chỉ còn cờ, bỏ chữ VI/FR/EN cho đỡ chật */
  .sk-lang-sep{display:none;}
}

/* ==========================================================================
   Footer — theo bộ nhận diện "Việt Nam en Scène" (footer.php)
   ========================================================================== */
/* Nền bán trong suốt (không phải var(--sk-header-bg) đặc) để hé lộ mờ hoạ tiết đình chùa
   dùng chung của toàn site phía sau — cùng tông màu be với menu chính. Áp dụng mọi trang
   vì giờ mọi trang đều có ảnh nền chung ở cấp #wrapper (xem header.php). */
.sk-site-footer{position:relative;overflow:hidden;background:rgba(228,211,168,.75);color:var(--sk-body);}
.sk-footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-top:10px;padding-bottom:30px;}
.sk-footer-bottom{position:relative;z-index:1;}
@media (max-width:720px){
  .sk-footer-grid{grid-template-columns:1fr;}
}


.sk-fcol{min-width:0;}

.sk-flogo{display:flex;flex-direction:column;gap:8px;text-decoration:none;max-width:280px;}
.sk-flogo img{width:150px;height:auto;}
.sk-flogo-3{font-family:var(--sk-font-display);font-size:10px;letter-spacing:.08em;color:var(--sk-muted);text-transform:uppercase;}
.sk-fabout-text{font-size:13px;line-height:1.7;color:var(--sk-body);max-width:320px;margin:16px 0 0;}

.sk-fcontact{list-style:none;margin:0;padding:14px 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:var(--sk-body);}
.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-fshare-label{font:500 11.5px/1 var(--sk-font-display);letter-spacing:.08em;text-transform:uppercase;color:var(--sk-body);margin:22px 0 12px;}
.sk-fshare{display:flex;gap:10px;}
.sk-fshare-btn{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(0,0,0,.15);background:transparent;cursor:pointer;text-decoration:none;transition:background .15s ease,border-color .15s ease;}
.sk-fshare-btn svg{width:16px;height:16px;fill:none;stroke:var(--sk-accent);stroke-width:1.4;}
.sk-fshare-btn:hover{background:var(--sk-accent);border-color:var(--sk-accent);}
.sk-fshare-btn:hover svg{stroke:#fff;}
.sk-fshare-copy{position:relative;}
.sk-fshare-copy.is-copied::after{content:attr(data-copied);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--sk-heading);color:#fff;font:500 10px/1 var(--sk-font-display);letter-spacing:.04em;text-transform:none;padding:6px 10px;border-radius:3px;}

.sk-newsletter{padding-top:0;}
.sk-newsletter p:not(.sk-eyebrow){font-size:13px;line-height:1.7;color:var(--sk-body);margin:14px 0 16px;}
.sk-nl-form{display:flex;height:38px;max-width:280px;}
.sk-nl-form input{flex:1;min-width:0;border:1px solid rgba(0,0,0,.15);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(0,0,0,.1);}
.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:var(--sk-muted);}
.sk-legal{display:flex;gap:18px;white-space:nowrap;margin:0;}
.sk-legal a{color:var(--sk-muted);text-decoration:none;}
.sk-legal a:hover{color:var(--sk-accent);}