/*
Theme Name: PercentageCalculatorUK
Theme URI: https://percentagecalculatoruk.com/
Author: Custom conversion from Google AI Studio source
Description: WordPress conversion of the PercentageCalculatorUK React calculator suite with Customizer-managed ads, affiliate product bar, footer controls, real WordPress pages, and blog integration.
Version: 1.1.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: percentagecalculatoruk
*/

html, body { margin: 0; padding: 0; }
body { background: #f8fafc; }
#root { min-height: 100vh; }
.pcuk-server-fallback { max-width: 72rem; margin: 2rem auto; padding: 0 1rem; font-family: system-ui, sans-serif; }
.js .pcuk-server-fallback { display:none; }
.pcuk-ad-slot { width:100%; display:flex; justify-content:center; align-items:center; box-sizing:border-box; }
.pcuk-ad-inner { width:min(100% - 24px, 1100px); margin:10px auto; padding:10px; text-align:center; overflow:hidden; }
.pcuk-top-product { position:sticky; top:0; z-index:60; background:#0f172a; color:white; border-bottom:1px solid rgba(255,255,255,.12); font-family:system-ui,sans-serif; }
.pcuk-top-product .pcuk-top-product-inner { max-width:1280px; margin:auto; min-height:42px; padding:8px 16px; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pcuk-top-product a { color:white; text-decoration:none; font-weight:700; }
.pcuk-top-product .pcuk-cta { background:#2563eb; padding:7px 12px; border-radius:9px; }
.pcuk-sticky-side { position:fixed; right:12px; top:35%; z-index:35; max-width:300px; }
.pcuk-sticky-side .pcuk-ad-inner { width:100%; margin:0; }
.pcuk-wp-content h2,.pcuk-wp-content h3 { color:#0f172a; font-weight:800; margin-top:1.6em; }
.pcuk-wp-content p,.pcuk-wp-content li { line-height:1.75; }
.pcuk-wp-content a { color:#2563eb; text-decoration:underline; }
.pcuk-wp-content img { max-width:100%; height:auto; border-radius:16px; }
@media (max-width: 1100px){ .pcuk-sticky-side{display:none;} }
body.admin-bar .pcuk-top-product { top:32px; }
@media (max-width:782px){ body.admin-bar .pcuk-top-product{top:46px;} }

/* v1.1.0: consolidated responsive header. This replaces all previous desktop/tablet header overrides. */
#root header{
  width:100%;
  box-sizing:border-box;
}
#root header > div:first-child{
  width:100%;
  box-sizing:border-box;
}
#root header > div:first-child > div{
  box-sizing:border-box;
}
#root header .pcuk-menu-toggle{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center !important;
  justify-content:center !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  padding:0 !important;
  border:1px solid #cbd5e1 !important;
  border-radius:10px !important;
  background:#fff !important;
  color:#0f172a !important;
  box-shadow:0 1px 2px rgba(15,23,42,.05) !important;
  overflow:visible !important;
  cursor:pointer !important;
  z-index:100 !important;
}
#root header .pcuk-menu-toggle:hover{
  background:#f8fafc !important;
  border-color:#94a3b8 !important;
}
#root header .pcuk-menu-toggle .pcuk-menu-icon{
  position:relative !important;
  display:block !important;
  width:22px !important;
  height:16px !important;
  flex:0 0 22px !important;
}
#root header .pcuk-menu-toggle .pcuk-menu-icon::before,
#root header .pcuk-menu-toggle .pcuk-menu-icon::after,
#root header .pcuk-menu-toggle .pcuk-menu-icon > span{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  width:22px !important;
  height:2.5px !important;
  border-radius:999px !important;
  background:#0f172a !important;
  opacity:1 !important;
  visibility:visible !important;
  transform-origin:center !important;
  transition:transform .18s ease, top .18s ease, opacity .18s ease !important;
}
#root header .pcuk-menu-toggle .pcuk-menu-icon::before{ top:0 !important; }
#root header .pcuk-menu-toggle .pcuk-menu-icon > span{ top:6.75px !important; }
#root header .pcuk-menu-toggle .pcuk-menu-icon::after{ top:13.5px !important; }
#root header .pcuk-menu-toggle[aria-expanded="true"] .pcuk-menu-icon::before{
  top:6.75px !important;
  transform:rotate(45deg) !important;
}
#root header .pcuk-menu-toggle[aria-expanded="true"] .pcuk-menu-icon > span{
  opacity:0 !important;
}
#root header .pcuk-menu-toggle[aria-expanded="true"] .pcuk-menu-icon::after{
  top:6.75px !important;
  transform:rotate(-45deg) !important;
}

@media (min-width:768px){
  #root header{
    position:relative !important;
    top:auto !important;
    inset:auto !important;
    transform:none !important;
    overflow:visible !important;
    z-index:40 !important;
  }
  #root header > div:first-child{
    max-width:none !important;
    padding-left:0 !important;
    padding-right:0 !important;
    overflow:visible !important;
  }
  #root header > div:first-child > div{
    position:relative !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    max-width:1280px !important;
    min-height:70px !important;
    margin:0 auto !important;
    padding:10px 82px 10px 24px !important;
    gap:24px !important;
    overflow:visible !important;
  }
  #root header nav{
    display:none !important;
  }
  #root header .pcuk-brand{
    order:1 !important;
    flex:1 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
  }
  #root header .pcuk-header-actions{
    order:2 !important;
    display:flex !important;
    flex:0 0 auto !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:10px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    overflow:visible !important;
  }
  #root header .pcuk-search-button{
    display:flex !important;
    min-width:112px !important;
    min-height:40px !important;
    justify-content:center !important;
    flex:0 0 auto !important;
  }
  #root header .pcuk-history-button{
    display:flex !important;
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 40px !important;
    border:1px solid #e2e8f0 !important;
    background:#fff !important;
  }
  #root header .pcuk-menu-toggle-wide{
    position:absolute !important;
    top:13px !important;
    right:max(32px, calc((100vw - 1280px) / 2 + 32px)) !important;
    transform:none !important;
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    margin:0 !important;
    z-index:9999 !important;
  }
  #root main{
    position:relative !important;
    z-index:0 !important;
  }
}

@media (min-width:768px) and (max-width:1023px){
  #root header > div:first-child > div{
    min-height:66px !important;
    padding-left:16px !important;
    padding-right:70px !important;
    gap:14px !important;
  }
  #root header .pcuk-brand p{
    display:none !important;
  }
  #root header .pcuk-brand span.text-base,
  #root header .pcuk-brand span.sm\:text-lg{
    font-size:16px !important;
  }
  #root header .pcuk-search-button{
    min-width:40px !important;
    width:40px !important;
    padding:0 !important;
  }
  #root header .pcuk-search-button span,
  #root header .pcuk-search-button kbd{
    display:none !important;
  }
  #root header .pcuk-menu-toggle-wide{
    top:11px !important;
    right:24px !important;
  }
}

/* v1.1.2 responsive menu positioning */
@media (min-width:768px){
  #root header .pcuk-menu-toggle-mobile{display:none !important;}
  #root header .pcuk-menu-toggle-wide{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
}
@media (max-width:767px){
  #root header .pcuk-menu-toggle-wide{display:none !important;}
  #root header .pcuk-menu-toggle-mobile{display:flex !important;}
}