/*
Theme Name:   PNG Beyond50 (Kunco Child)
Theme URI:    https://pngbeyond50.atopng.com/
Description:  Brand child theme for PNG Beyond50 Foundation Inc. Restyles Kunco, WooCommerce and GiveWP (legacy and visual-builder forms) with the foundation's logo colours, and adds a "PB50 Home" page template.
Author:       PNG Beyond50 Foundation Inc.
Template:     kunco
Version:      1.0.0
Text Domain:  pb50
*/

/* ------------------------------------------------------------------
   1. Brand tokens (sampled from the PNG Beyond50 logo)
------------------------------------------------------------------ */
:root{
  --pb-navy:#003A64;      /* "PNG BEYOND" lettering, map */
  --pb-navy-deep:#00243F;
  --pb-leaf:#439A3A;      /* "Foundation INC.", left figure */
  --pb-lime:#7DA630;      /* "50" */
  --pb-sun:#F5A90C;       /* stars, right figure */
  --pb-clay:#E8771B;      /* flame / leaf stroke */
  --pb-ink:#10161C;       /* black soldier fly */
  --pb-bg:#FAFBF6;
  --pb-surface:#FFFFFF;
  --pb-surface-2:#F1F5EC;
  --pb-line:#DCE3D6;
  --pb-text:#1A2530;
  --pb-muted:#5B6A73;
  --pb-radius:14px;
  --pb-shadow:0 1px 2px rgba(0,36,63,.06),0 8px 28px rgba(0,36,63,.08);
  --pb-display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --pb-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --pb-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  /* GiveWP visual-builder forms read these */
  --givewp-primary-color:var(--pb-leaf);
  --givewp-secondary-color:var(--pb-sun);
}

/* ------------------------------------------------------------------
   2. Base typography
------------------------------------------------------------------ */
body{font-family:var(--pb-body)!important; color:var(--pb-text); background:var(--pb-bg); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6,.title,.widget-title,.heading-title,.entry-title,.give-form-title{font-family:var(--pb-display)!important; color:var(--pb-navy); letter-spacing:-.015em; text-wrap:balance}
a{color:var(--pb-leaf)}
a:hover,a:focus{color:var(--pb-navy)}
:focus-visible{outline:3px solid var(--pb-clay); outline-offset:2px}
::selection{background:var(--pb-sun); color:var(--pb-navy-deep)}
.sub-title,.heading-sub-title,.eyebrow{font-family:var(--pb-mono)!important; font-size:.76rem!important; letter-spacing:.12em; text-transform:uppercase; color:var(--pb-leaf)!important}

/* ------------------------------------------------------------------
   3. Buttons (Kunco .btn-theme, WP blocks, WooCommerce)
------------------------------------------------------------------ */
.btn-theme,.btn-theme-2,.button,button.button,.give-btn,
.wp-block-button__link,.woocommerce a.button,.woocommerce button.button,.woocommerce a.button.alt,.woocommerce button.button.alt{
  font-family:var(--pb-body)!important; font-weight:700!important; text-transform:none!important; letter-spacing:0!important;
  border-radius:999px!important; padding:14px 26px!important; border:2px solid transparent!important;
  background:var(--pb-sun)!important; color:var(--pb-navy-deep)!important; box-shadow:0 6px 18px rgba(245,169,12,.30);
  transition:transform .15s,background .15s,box-shadow .15s}
.btn-theme:hover,.button:hover,.give-btn:hover,.wp-block-button__link:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{
  background:#FFB823!important; color:var(--pb-navy-deep)!important; transform:translateY(-1px)}
.btn-theme-2,.btn-white{background:transparent!important; border-color:currentColor!important; box-shadow:none}

/* ------------------------------------------------------------------
   4. Header (Kunco header-v1)
------------------------------------------------------------------ */
.header-default .topbar,.header-v1 .topbar{background:var(--pb-navy-deep)!important; color:#B8C9D6}
.header-default .topbar a{color:#B8C9D6!important}
.header-default .topbar a:hover{color:var(--pb-sun)!important}
.header-default .header-bottom,.header-v1 .header-bottom,.header-mobile{background:rgba(255,255,255,.94)!important; backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--pb-line); box-shadow:none!important}
.header-default .logo img,.header-mobile .logo img{max-height:64px!important; width:auto}
.gva-nav-menu > li > a,.navbar-nav-menu > li > a{font-family:var(--pb-body)!important; font-weight:600!important; font-size:15px!important; text-transform:none!important; letter-spacing:0!important; color:var(--pb-text)!important; padding:10px 14px!important; border-radius:999px}
.gva-nav-menu > li:hover > a,.gva-nav-menu > li.current-menu-item > a,.gva-nav-menu > li.current-menu-ancestor > a{color:var(--pb-navy)!important; background:var(--pb-surface-2); box-shadow:inset 0 -2px 0 var(--pb-sun)}
.gva-nav-menu .submenu-inner{border-radius:12px; border:1px solid var(--pb-line); box-shadow:var(--pb-shadow); border-top:3px solid var(--pb-sun)!important; padding:8px 0}
.gva-nav-menu .submenu-inner li a{color:var(--pb-text)!important; font-weight:500}
.gva-nav-menu .submenu-inner li a:hover{color:var(--pb-leaf)!important; padding-left:24px}
.mini-cart-header .mini-cart-items,.cart-count{background:var(--pb-sun)!important; color:var(--pb-navy-deep)!important}

/* Bilum stripe under the header */
.header-default .header-bottom::after{content:""; display:block; height:6px; background:repeating-linear-gradient(90deg,var(--pb-leaf) 0 40px,var(--pb-lime) 40px 80px,var(--pb-sun) 80px 110px,var(--pb-clay) 110px 130px,var(--pb-navy) 130px 170px)}

/* ------------------------------------------------------------------
   5. Page titles / breadcrumbs
------------------------------------------------------------------ */
.custom-breadcrumb,.breadcrumb-wrap,.page-title-wrap{background:radial-gradient(1200px 500px at 85% -10%,#0B5A8F 0%,transparent 60%),linear-gradient(180deg,var(--pb-navy),var(--pb-navy-deep))!important}
.custom-breadcrumb .heading-title,.custom-breadcrumb h2,.page-title{color:#F2F6F9!important}
.custom-breadcrumb .breadcrumb,.custom-breadcrumb .breadcrumb a{color:#B8C9D6!important; font-family:var(--pb-mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}

/* ------------------------------------------------------------------
   6. Campaign cards (Kunco GiveWP blocks)
------------------------------------------------------------------ */
.give-block,.give-block-2,.gives-tab .give-block{background:var(--pb-surface); border:1px solid var(--pb-line); border-radius:var(--pb-radius); overflow:hidden; transition:box-shadow .2s,transform .2s}
.give-block:hover,.give-block-2:hover{box-shadow:var(--pb-shadow); transform:translateY(-3px)}
.give-block .give-image img{aspect-ratio:16/9; object-fit:cover; width:100%}
.give-block .give-content{padding:20px 22px 22px!important}
.give-block .give-content .title a{color:var(--pb-navy)!important; font-family:var(--pb-display); font-weight:700}
.give-goal-progress .give-progress-bar,.progress,.give-progress{height:10px!important; border-radius:99px!important; background:var(--pb-surface-2)!important; border:1px solid var(--pb-line); overflow:hidden; box-shadow:none!important}
.give-goal-progress .give-progress-bar > span,.progress .progress-bar,.give-progress .progress-bar{border-radius:99px!important; background:linear-gradient(90deg,var(--pb-leaf),var(--pb-lime) 70%,var(--pb-sun))!important}
.give-goal-progress .raised,.give-goal-progress .income{font-family:var(--pb-display); font-weight:800; color:var(--pb-navy)}
.progress .percentage,.give-percentage{background:var(--pb-navy)!important; color:#fff!important; border-radius:6px}

/* ------------------------------------------------------------------
   7. Footer
------------------------------------------------------------------ */
#wp-footer,.footer-main{background:var(--pb-navy-deep)!important; color:#B8C9D6!important}
#wp-footer::before{content:""; display:block; height:18px; background:
  linear-gradient(135deg,var(--pb-sun) 25%,transparent 25%) -9px 0/18px 18px,
  linear-gradient(225deg,var(--pb-sun) 25%,transparent 25%) -9px 0/18px 18px,
  linear-gradient(315deg,var(--pb-clay) 25%,transparent 25%) 0 0/18px 18px,
  linear-gradient(45deg,var(--pb-clay) 25%,transparent 25%) 0 0/18px 18px,var(--pb-leaf)}
#wp-footer h1,#wp-footer h2,#wp-footer h3,#wp-footer .widget-title{color:#F2F6F9!important}
#wp-footer a{color:#B8C9D6!important}
#wp-footer a:hover{color:var(--pb-sun)!important}
#wp-footer .copyright{border-top:1px solid rgba(255,255,255,.1); background:transparent!important; color:#93A6B2}
#wp-footer .logo img,#wp-footer .footer-logo img{background:#F7F9F4; border-radius:12px; padding:10px 14px}

/* ------------------------------------------------------------------
   8. Forms
------------------------------------------------------------------ */
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],select,textarea{
  font-family:var(--pb-body); border:1.5px solid var(--pb-line)!important; border-radius:10px!important; padding:13px 14px!important; background:#fff; color:var(--pb-text); box-shadow:none!important}
input:focus,select:focus,textarea:focus{border-color:var(--pb-leaf)!important; box-shadow:0 0 0 4px rgba(67,154,58,.18)!important; outline:none}

/* Cookie banner (CookieAdmin) */
.cookieadmin_accept_btn{background:var(--pb-leaf)!important; color:#fff!important; border-radius:999px!important}
.cookieadmin_reject_btn,.cookieadmin_customize_btn,.cookieadmin_save_btn{border-radius:999px!important}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* Header quick "Donate Now" button and search */
.header-default .quick-button a,.quick-button a{display:inline-flex!important; align-items:center; height:auto!important; line-height:1!important; padding:14px 22px!important; margin:8px 0; border-radius:999px!important; background:var(--pb-sun)!important; color:var(--pb-navy-deep)!important; font-family:var(--pb-body)!important; font-weight:700!important; box-shadow:0 6px 18px rgba(245,169,12,.30)}
.header-default .quick-button a:hover{background:#FFB823!important}
.header-default .quick-button{background:transparent!important}
.btn-search input,.btn-search .fa{background:var(--pb-navy)!important; color:#fff!important; border-radius:0 10px 10px 0!important; padding:0 14px!important; box-shadow:none!important}
.header-default .gva-search input[type=text],.header-default .search-form input[type=text]{border-radius:10px 0 0 10px!important}