/*
Theme Name: Baknet
Theme URI: https://baknet.io
Author: Baknet Cyber Solutions
Description: Custom block theme for Baknet Cyber Solutions. Ink navy and signal orange, Red Hat type system, WCAG AA.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: baknet
*/

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:focus-visible { outline: 3px solid #B85E1F; outline-offset: 2px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: #1F2534; color: #fff; padding: .6rem 1rem; z-index: 100000; }
.skip-link:focus { left: 0; }

h1, h2 { letter-spacing: -0.018em; text-wrap: balance; }
h3 { letter-spacing: -0.008em; }

/* ---------- Header ---------- */
.bk-header { border-bottom: 1px solid #E9EDF4; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); position: sticky; top: 0; z-index: 50; transition: box-shadow .25s ease; }
.bk-header-scrolled { box-shadow: 0 8px 30px rgba(31,37,52,.10); }
.bk-header .wp-block-site-logo img { max-height: 42px; width: auto; }
.bk-header .wp-block-navigation a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .95rem; letter-spacing: .01em; color: #1F2534; }
.bk-header .wp-block-navigation a:hover { color: #B85E1F; }
.bk-header .wp-block-navigation .wp-block-navigation__submenu-container a { font-weight: 500; font-size: .92rem; padding: .5rem 1.1rem; }
.wp-block-navigation__submenu-container { border: 1px solid #E9EDF4 !important; border-radius: 12px; box-shadow: 0 18px 44px rgba(31,37,52,.14); min-width: 250px !important; padding: .4rem 0 !important; background: #fff !important; }
.bk-nav-cta a { background: #B85E1F; color: #fff !important; border-radius: 10px; padding: .62rem 1.25rem !important; transition: background .2s ease; }
.bk-nav-cta a:hover { background: #A9551B; color: #fff !important; }

/* ---------- Section rhythm ---------- */
.bk-kicker { font-family: var(--wp--preset--font-family--display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; color: #B85E1F; margin-bottom: .4rem !important; }
.bk-kicker-ondark { color: #E89A5F; }
.bk-lede { max-width: 660px; margin-left: auto !important; margin-right: auto !important; }

/* ---------- Hero / dark sections ---------- */
.bk-hero-eyebrow { letter-spacing: .18em; text-transform: uppercase; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .8rem; color: #E89A5F; }
.bk-dark { background-color: #1F2534; }
.bk-dark-deep { background-color: #171C28; }

/* dark sections with parallax artwork */
.bk-parallax { background-size: cover; background-position: center top; will-change: background-position; }
.bk-dark-delivery { background-color: #1F2534; background-image: url('/wp-content/uploads/2026/07/graphic-section-delivery-circuit-navy-1920x1000-1.jpg'); }
.bk-cta-band { background-color: #1F2534; background-image: url('/wp-content/uploads/2026/07/graphic-cta-radar-navy-1600x800-1.jpg'); background-size: cover; background-position: center; border-radius: 22px; overflow: hidden; box-shadow: 0 30px 70px rgba(23,28,40,.28); }

/* hero cover */
.bk-hero-cover { position: relative; background-attachment: scroll !important; background-size: cover; background-position: center top; will-change: background-position; }
.bk-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }
.bk-hero-cover .bk-hero-eyebrow { animation: bk-fade-up .8s .1s both; }
.bk-hero-cover h1 { animation: bk-fade-up .8s .25s both; }
.bk-hero-cover .bk-hero-sub { animation: bk-fade-up .8s .4s both; }
.bk-hero-cover .wp-block-buttons { animation: bk-fade-up .8s .55s both; }
@keyframes bk-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ---------- Cards (equal height, bottom-pinned links) ---------- */
.wp-block-column.bk-card, .wp-block-column.bk-card-dark, .wp-block-column.bk-stat, .wp-block-column.bk-step { display: flex; flex-direction: column; height: auto; }
.bk-card { background: #fff; border: 1px solid #E6EAF2; border-radius: 16px; padding: 2rem 1.8rem; box-shadow: 0 1px 2px rgba(31,37,52,.04); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; }
.bk-card:hover { box-shadow: 0 18px 44px rgba(31,37,52,.10); transform: translateY(-3px); border-color: #D9DFEA; }
.bk-card h3 { margin-top: 0; }
.bk-card h3 a { text-decoration: none; color: #1F2534; }
.bk-card h3 a:hover { color: #B85E1F; }
.bk-card > p:last-child { margin-top: auto !important; padding-top: .6rem; }
.bk-card > p:last-child a { text-decoration: none; }
.bk-card > p:last-child a:hover { text-decoration: underline; }
.bk-card-dark { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.11); border-radius: 16px; padding: 2rem 1.8rem; }

/* icon container: warm rounded square, consistent 64px */
.bk-icon-box { width: 64px; height: 64px; border-radius: 16px; background: #FBF1E9; display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; }
.bk-icon-box img { width: 32px !important; height: 32px !important; }
.bk-icon-box figure { margin: 0; }
.bk-icon-box-dark { background: rgba(217,119,47,.14); }

/* ---------- Stat tiles ---------- */
.bk-stat { background: #F7F8FB; border: 1px solid #E6EAF2; border-radius: 16px; padding: 1.9rem 1.7rem; }
.bk-stat .bk-stat-num { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 2.9rem; letter-spacing: -0.02em; color: #B85E1F; line-height: 1.05; margin-bottom: .4rem !important; }
.bk-stat h3 { margin-top: 0; margin-bottom: .35rem; }
.bk-stat p:last-child { margin-bottom: 0; }

/* ---------- Process steps ---------- */
.bk-step-num { font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 1.9rem; color: #D9772F; line-height: 1; margin-bottom: .6rem !important; }

/* ---------- Logo strip / marquee ---------- */
.bk-logos img { filter: grayscale(1) contrast(.5) brightness(1.3); opacity: .7; transition: filter .25s ease, opacity .25s ease; height: 44px !important; width: auto !important; max-width: none; }
.bk-logos img:hover { filter: none; opacity: 1; }
.bk-marquee { overflow: hidden; display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.bk-marquee-track { display: flex; align-items: center; gap: 4.5rem; padding-right: 4.5rem; flex-shrink: 0; min-width: max-content; animation: bk-scroll 38s linear infinite; }
.bk-marquee:hover .bk-marquee-track { animation-play-state: paused; }
@keyframes bk-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- Industry pills ---------- */
.bk-pill { background: #fff; border: 1px solid #E6EAF2; border-radius: 999px; padding: .6rem 1.4rem !important; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .95rem; color: #1F2534; margin: 0 !important; transition: border-color .2s ease, box-shadow .2s ease; }
.bk-pill:hover { border-color: #D9772F; box-shadow: 0 6px 18px rgba(31,37,52,.08); }

/* ---------- Footer ---------- */
.bk-footer { background: #171C28; color: #C7CEDA; }
.bk-footer a { color: #C7CEDA; text-decoration: none; }
.bk-footer a:hover { color: #fff; text-decoration: underline; }
.bk-footer h2, .bk-footer h3 { color: #9AA1B0; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin-bottom: 1.1rem; }
.bk-footer .wp-block-site-logo img { max-height: 40px; width: auto; }
.bk-footer li { margin-bottom: .55rem; }
.bk-footer-bottom { border-top: 1px solid #262E42; color: #9AA1B0; font-size: .88rem; }

/* ---------- Forms (CF7) ---------- */
.wpcf7 label { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .95rem; display: block; margin-bottom: .35rem; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 select, .wpcf7 textarea {
  width: 100%; padding: .85rem 1.05rem; border: 1.5px solid #C7CEDA; border-radius: 10px; font: inherit; color: #1F2534; background: #fff; margin-bottom: 1.1rem;
}
.wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { border-color: #B85E1F; outline: 2px solid rgba(184,94,31,.35); }
.wpcf7 input[type="submit"] { background: #B85E1F; color: #fff; border: 0; border-radius: 10px; padding: .95rem 1.9rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .2s ease; }
.wpcf7 input[type="submit"]:hover { background: #A9551B; }
.wpcf7 .wpcf7-not-valid-tip { color: #B02A1E; }

/* ---------- Utilities ---------- */
.bk-divider { border: 0; border-top: 1px solid #E6EAF2; }
.bk-rounded-img img { border-radius: 16px; }
.bk-globalmap img { border-radius: 20px; box-shadow: 0 24px 60px rgba(23,28,40,.30); }
.bk-check li { margin-bottom: .45rem; }
.bk-breadcrumb { font-size: .88rem; color: #4A5568; }
.bk-breadcrumb a { color: #4A5568; }

/* ---------- Motion ---------- */
.bk-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.bk-reveal.bk-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .bk-reveal { opacity: 1; transform: none; transition: none; }
  .bk-marquee-track { animation: none !important; }
  .bk-hero-cover .bk-hero-eyebrow, .bk-hero-cover h1, .bk-hero-cover .bk-hero-sub, .bk-hero-cover .wp-block-buttons { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
  .bk-cols-5 .wp-block-column, .bk-cols-4 .wp-block-column { flex-basis: 100% !important; }
  .bk-header .wp-block-navigation a { font-size: 1.05rem; }
  .bk-stat .bk-stat-num { font-size: 2.4rem; }
}

/* short final rows: centered, same card width as full rows */
.bk-cols-center { justify-content: center; }
.bk-cols-center.bk-cols-5 > .wp-block-column { flex-grow: 0; flex-basis: calc(33.333% - 1rem); }
.bk-cols-center.bk-cols-4 > .wp-block-column { flex-grow: 0; flex-basis: calc(50% - 0.75rem); }
@media (max-width: 781px) { .bk-cols-center > .wp-block-column { flex-basis: 100% !important; } }