/*
Theme Name: WECOAP
Theme URI: https://wecoap.com
Author: WECOAP
Description: Custom 2026 redesign theme for WECOAP — Build your needs, hit our dreams.
Version: 1.0.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: wecoap
*/

@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-ExtraLight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-ExtraLightOblique.otf') format('opentype');font-weight:200;font-style:italic;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-LightOblique.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-Oblique.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-MediumOblique.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-SemiBold.otf') format('opentype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-SemiBoldOblique.otf') format('opentype');font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-BoldOblique.otf') format('opentype');font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-ExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Albula Pro';src:url('assets/fonts/AlbulaPro-ExtraBoldOblique.otf') format('opentype');font-weight:800;font-style:italic;font-display:swap;}

html,body{margin:0;padding:0;background:oklch(0.975 0.004 90);color:#191b20;font-family:'Albula Pro',sans-serif;-webkit-font-smoothing:antialiased;}
a{color:oklch(0.55 0.19 255);text-decoration:none;}
a:hover{color:oklch(0.45 0.19 255);}
::selection{background:oklch(0.62 0.19 255);color:#fff}

@keyframes fadeUp{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
[data-reveal]{opacity:0}
[data-reveal].in{animation:fadeUp 0.8s cubic-bezier(0.22,1,0.36,1) forwards}
@media (prefers-reduced-motion: reduce){[data-reveal]{opacity:1;animation:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---- Navigation ---- */
.nav-drop-menu{opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
.nav-drop:hover .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-burger{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes menuOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-14px)}}
.mobile-menu{animation:menuIn .3s cubic-bezier(0.22,1,0.36,1) both}
.mobile-menu.closing{animation:menuOut .22s ease both}
.mobile-menu a{animation:fadeUp .45s cubic-bezier(0.22,1,0.36,1) both}
.mobile-menu.closing a{animation:none}
@media (prefers-reduced-motion: reduce){.mobile-menu,.mobile-menu a{animation:none !important;opacity:1 !important}}
@media (max-width:920px){
  .nav-links{display:none !important}
  .nav-burger{display:flex !important}
}
@media (min-width:921px){
  .mobile-menu{display:none !important}
}
@media (max-width:720px){
  .team-photos{grid-template-columns:repeat(2,1fr) !important}
  .hero-header{padding-top:72px !important;padding-bottom:64px !important}
  .contact-form{padding:24px !important}
}

.nav-link{color:rgba(25,27,32,0.65)}
.nav-link:hover{color:#191b20}
.nav-link.is-active{color:#191b20}
.nav-drop-item{display:block;padding:12px 14px;border-radius:10px;color:#191b20}
.nav-drop-item:hover{background:rgba(25,27,32,0.05);color:#191b20}
.nav-cta{display:inline-block;background:#191b20;color:#fff;padding:11px 22px;border-radius:999px;font-weight:600}
.nav-cta:hover{background:oklch(0.55 0.19 255);color:#fff}
.mobile-cta{display:block;text-align:center;background:#191b20;color:#fff;padding:16px;border-radius:999px;margin-top:24px}
.mobile-cta:hover{background:oklch(0.55 0.19 255);color:#fff}

/* ---- Buttons / links ---- */
.btn-primary{background:oklch(0.62 0.19 255);color:#fff;padding:16px 32px;border-radius:999px;font-weight:600;font-size:16px;display:inline-block}
.btn-primary:hover{background:oklch(0.55 0.19 255);color:#fff}
.btn-ghost-dark{color:#f4f4f1;padding:16px 28px;border:1px solid rgba(244,244,241,0.3);border-radius:999px;font-weight:600;font-size:16px;display:inline-block}
.btn-ghost-dark:hover{border-color:#f4f4f1;color:#fff}
.link-underline{white-space:nowrap;font-weight:600;font-size:15px;border-bottom:2px solid oklch(0.62 0.19 255);padding-bottom:3px}
.btn-submit{background:oklch(0.62 0.19 255);color:#fff;border:none;border-radius:999px;padding:16px;font-family:'Albula Pro';font-weight:600;font-size:15.5px;cursor:pointer}
.btn-submit:hover{background:oklch(0.55 0.19 255)}

/* ---- Cards ---- */
.card-hover{transition:box-shadow 0.25s, transform 0.25s}
.card-hover:hover{box-shadow:0 20px 44px -18px rgba(20,22,28,0.25);transform:translateY(-4px)}
a.card-hover{color:#191b20}
a.card-hover:hover{color:#191b20}

/* ---- Footer ---- */
.footer-link{color:rgba(244,244,241,0.6)}
.footer-link:hover{color:#fff}
.footer-social-fb{width:34px;height:34px;border-radius:50%;background:rgba(244,244,241,0.1);display:flex;align-items:center;justify-content:center;color:rgba(244,244,241,0.75)}
.footer-social-fb:hover{background:#1877f2;color:#fff}
.footer-social-zalo{width:34px;height:34px;border-radius:50%;background:rgba(244,244,241,0.1);display:flex;align-items:center;justify-content:center;overflow:hidden}
.footer-social-zalo:hover{background:#0068ff}

/* ---- Floating Zalo ---- */
.zalo-float{position:fixed;bottom:92px;right:28px;z-index:1000;width:56px;height:56px;border-radius:50%;background:#0068ff;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 28px -8px rgba(0,104,255,0.55);transition:transform 0.2s, box-shadow 0.2s}
.zalo-float:hover{transform:scale(1.08);box-shadow:0 16px 34px -8px rgba(0,104,255,0.7)}

/* ---- Form fields (dark contact form) ---- */
.form-field{background:rgba(244,244,241,0.07);border:1px solid rgba(244,244,241,0.16);border-radius:12px;padding:14px 16px;color:#f4f4f1;font-family:'Albula Pro';font-size:14.5px;outline:none;width:100%;box-sizing:border-box}
.form-field::placeholder{color:rgba(244,244,241,0.45)}
.form-field:focus{border-color:oklch(0.62 0.19 255)}

/* ---- Elementor-built header (ElementsKit template) ---- */
.wecoap-el-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px)}
body.admin-bar .wecoap-el-header{top:32px}
.wecoap-el-header .nav-cta > a{display:inline-block;background:#191b20;color:#fff !important;padding:11px 22px !important;border-radius:999px;font-weight:600}
.wecoap-el-header .nav-cta > a:hover{background:#2563EB;color:#fff !important}
.contact-form-light input::placeholder,.contact-form-light textarea::placeholder{color:rgba(25,27,32,0.45)}
.contact-form-light input:focus,.contact-form-light textarea:focus{border-color:#3B82F6}

/* ---- WP admin bar offset ---- */
body.admin-bar .site-nav{top:32px}
@media (max-width:782px){body.admin-bar .site-nav{top:46px}}

/* ---- Blog post content (single) ---- */
.post-content{font-size:16.5px;line-height:1.75;color:rgba(25,27,32,0.8)}
.post-content h2,.post-content h3,.post-content h4{font-family:'Albula Pro';font-weight:700;color:#191b20;letter-spacing:-0.01em;line-height:1.25;margin:1.8em 0 0.6em}
.post-content h2{font-size:26px}
.post-content h3{font-size:21px}
.post-content p{margin:0 0 1.2em}
.post-content img{max-width:100%;height:auto;border-radius:16px}
.post-content a{font-weight:600}
.post-content blockquote{margin:1.5em 0;padding:4px 0 4px 22px;border-left:3px solid oklch(0.62 0.19 255);color:rgba(25,27,32,0.65);font-style:italic}
.post-content ul,.post-content ol{padding-left:1.4em;margin:0 0 1.2em}
.post-content li{margin-bottom:0.4em}
.post-content figure{margin:1.6em 0}
.post-content figcaption{font-size:13px;color:rgba(25,27,32,0.5);text-align:center;margin-top:8px}