/*
Theme Name:   GeneratePress Child
Theme URI:    https://generatepress.com
Description:  Child theme for BITCOINOX PAYMENTS LTD. website, based on GeneratePress. Front end is a port of the approved reference design (outputs/index.html + styles.css).
Author:       BITCOINOX PAYMENTS LTD.
Author URI:   https://bitcoinox.com
Template:     generatepress
Version:      1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  generatepress-child
*/

/* ============================================================
   Reference design (outputs/styles.css), ported verbatim.
   This is the only stylesheet on the front end; GeneratePress's
   own CSS is detached in functions.php.
   ============================================================ */
:root{--navy:#102a43;--ink:#142f46;--muted:#526575;--mint:#5ee0bf;--line:#dbe3e9;--pale:#f3f6f8;--white:#fff;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;color:var(--ink);background:var(--white);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:3px solid #16836b;outline-offset:6px}
.container{width:min(1200px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;left:16px;top:-100px;background:white;padding:12px 20px;z-index:10}
.skip-link:focus{top:12px}
.site-header{border-bottom:1px solid var(--line)}
.header-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:32px}
.brand{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:700;letter-spacing:.08em;line-height:1.2}
.brand-mark{display:grid;place-content:center;position:relative;width:45px;height:45px;background:var(--navy);color:white;font-size:25px;letter-spacing:-.1em}
.brand-mark span{color:var(--mint);display:inline;position:absolute;right:6px;bottom:4px;font-size:19px}
.brand-sub{display:block;font-size:11px;letter-spacing:.2em;margin-top:5px}
nav{display:flex;align-items:center;gap:32px;font-size:14px;font-weight:600}
nav a{padding-block:12px}
nav a:hover,footer a:hover{color:#14735e;text-decoration:underline;text-underline-offset:5px}
.hero{padding:96px 0 100px;background:linear-gradient(110deg,#fff 58%,#f3f6f8 58%)}
.hero-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:76px;align-items:center}
.eyebrow{margin:0 0 23px;font-size:12px;line-height:1.5;letter-spacing:.13em;text-transform:uppercase;font-weight:700}
.hero .eyebrow{color:var(--muted)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.6rem,4.4vw,4.2rem);font-weight:600;line-height:1.08;letter-spacing:-.05em;margin-bottom:28px}
h1 span{color:#287c6a}
.hero-description{font-size:18px;line-height:1.75;color:var(--muted);max-width:530px;margin-bottom:32px}
.button{display:inline-flex;align-items:center;gap:38px;padding:14px 23px;background:var(--navy);color:white;font-size:14px;font-weight:600;border:1px solid var(--navy);transition:background .15s}
.button:hover{background:#224761}.button span{font-size:21px}
.capability-panel{background:var(--navy);color:white;padding:30px 32px 23px;box-shadow:16px 16px 0 #e0e9ed}
.panel-top{display:flex;justify-content:space-between;gap:16px;font-size:11px;letter-spacing:.1em;color:#b8cbd9;border-bottom:1px solid #3b5065;padding-bottom:23px}
.panel-heading{font-size:25px;line-height:1.4;letter-spacing:-.02em;margin:27px 0}
.system-layer{display:flex;align-items:center;gap:18px;border:1px solid #42596b;padding:16px;margin-bottom:12px}
.layer-number{font-size:12px;color:var(--mint);font-family:monospace}
.system-layer strong{display:block;font-size:15px;font-weight:500}
.system-layer div>span{display:block;font-size:12px;color:#c0cfda;margin-top:2px}
.panel-note{color:#c0cfda;font-size:12px;margin:25px 0 0}
.section{padding:85px 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}
h2{font-size:clamp(2rem,3vw,2.8rem);font-weight:500;line-height:1.18;letter-spacing:-.04em;margin-bottom:0}
.section-heading>p{max-width:310px;color:var(--muted);margin-bottom:3px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.service{padding:28px 24px 0;border-right:1px solid var(--line)}
.service:first-child{padding-left:0}.service:last-child{border-right:0;padding-right:0}
.service-index{font-family:monospace;font-size:13px;color:#287c6a;display:block;margin-bottom:28px}
h3{font-size:20px;line-height:1.35;letter-spacing:-.02em;font-weight:600;margin-bottom:16px}
.service p{color:var(--muted);font-size:15px;margin-bottom:0}
.about{background:var(--pale)}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.about-intro{margin:25px 0 22px;color:var(--muted)}
.scope-note{border-left:3px solid #287c6a;padding-left:18px;font-size:14px;color:var(--muted);margin:0}
.process{list-style:none;padding:0;margin:0}
.process li{display:flex;gap:25px;padding:25px 0;border-bottom:1px solid #ced9e1}
.process li:first-child{padding-top:0}.process li:last-child{border-bottom:0;padding-bottom:0}
.process li>span{color:#287c6a;font-family:monospace;font-size:13px;padding-top:3px}
.process h3{margin-bottom:8px}.process p{font-size:15px;color:var(--muted);margin-bottom:0}
.company-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:70px}
.company-details{margin:0;border-top:1px solid var(--line)}
.company-details>div{display:grid;grid-template-columns:1fr 1.35fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}
dt{color:var(--muted)}dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.contact-card{padding:30px;background:var(--pale);border-top:3px solid #287c6a}
.contact-card .eyebrow{margin-bottom:14px}.contact-card h3{margin-bottom:20px}
address{font-style:normal;font-size:14px;line-height:1.9}
.contact-card>p:last-child{font-size:14px;color:var(--muted);margin:22px 0 0}
footer{border-top:1px solid var(--line);padding:25px 0}
.footer-inner{display:flex;justify-content:space-between;gap:24px;font-size:12px;color:var(--muted)}
.footer-inner p{margin:0}.footer-inner a{white-space:nowrap}
@media(min-width:1500px){.hero{padding-block:115px}}
@media(max-width:1050px){.container{width:calc(100% - 56px)}.hero-grid{gap:40px;grid-template-columns:1.15fr 1fr}.hero{padding-block:70px}.capability-panel{padding:24px}.about-grid{gap:50px}.company-grid{gap:35px}nav{gap:20px}.service{padding-inline:18px}}
@media(max-width:780px){.header-inner{flex-wrap:wrap;gap:14px;padding-block:22px}.brand{font-size:17px}nav{width:100%;justify-content:space-between;gap:12px;font-size:13px}.hero{background:var(--white);padding:50px 0 64px}.hero-grid{grid-template-columns:1fr;gap:42px}.hero-copy{max-width:580px}h1{font-size:clamp(2.7rem,8vw,3.9rem)}.capability-panel{max-width:560px;box-shadow:9px 9px 0 #e0e9ed}.section{padding-block:60px}.section-heading{display:block;margin-bottom:32px}.section-heading>p{margin-top:20px;max-width:450px}.service-grid{grid-template-columns:repeat(2,1fr);row-gap:30px}.service:nth-child(2){border-right:0;padding-right:0}.service:nth-child(3){padding-left:0}.service-index{margin-bottom:15px}.about-grid,.company-grid{grid-template-columns:1fr;gap:36px}.footer-inner{flex-wrap:wrap;gap:10px 24px}.footer-inner p:nth-child(2){flex-basis:100%;order:3}}
@media(max-width:420px){.container{width:calc(100% - 36px)}nav{flex-wrap:wrap;justify-content:flex-start;column-gap:20px}h1{font-size:2.6rem}.hero-description{font-size:16px}.hero .eyebrow{font-size:11px}.service-grid{grid-template-columns:1fr;gap:0}.service,.service:first-child,.service:last-child{border-right:0;border-bottom:1px solid var(--line);padding:24px 0}.service h3 br{display:none}.company-details>div{grid-template-columns:1fr;gap:5px}.contact-card{padding:24px}.panel-heading{font-size:23px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.site-header nav,.button,.skip-link,footer a{display:none}.container{width:100%}.hero,.section{padding:25px 0}.hero-grid,.about-grid,.company-grid{gap:25px}.capability-panel{box-shadow:none;background:white;color:var(--ink);border:1px solid var(--line)}.panel-top,.panel-note,.system-layer div>span{color:var(--muted)}.service,.contact-card,.process li{break-inside:avoid}body{font-size:12px}h1{font-size:34px}h2{font-size:26px}}

/* ============================================================
   WordPress integration
   ============================================================ */
/* wp_nav_menu() wraps items in <li>; render them transparently so the
   nav behaves exactly like the reference markup (direct flex <a>
   children, same gaps, no bullets). */
nav li{display:contents}

/* ============================================================
   Block markup compatibility
   The landing content lives in the page as Gutenberg blocks (see
   patterns/); paragraphs stand in for some reference span/strong
   rows and list items. These rules reproduce the reference layout
   for the block-rendered DOM; selectors mirror the originals.
   ============================================================ */
.hero-cta{margin:0}
.wp-block-group__inner-container{display:contents}
.contact-note{font-size:14px;color:var(--muted);margin:22px 0 0}
.panel-top p{margin:0}
.system-layer p{margin:0}
.system-layer .system-layer-sub{font-size:12px;color:#c0cfda;margin-top:2px}
.service .service-index{color:#287c6a;font-family:monospace;font-size:13px;display:block;margin-bottom:28px}
.process-item{display:flex;gap:25px;padding:25px 0;border-bottom:1px solid #ced9e1}
.process-item:first-child{padding-top:0}
.process-item:last-child{border-bottom:0;padding-bottom:0}
.process .li-num{color:#287c6a;font-family:monospace;font-size:13px;padding-top:3px;margin:0}
.company-details-row{display:grid;grid-template-columns:1fr 1.35fr;gap:20px;padding:17px 0;border-bottom:1px solid var(--line);font-size:14px}
.company-details>.wp-block-group__inner-container{display:contents}
.heading-note{max-width:310px;color:var(--muted);margin:0 0 3px}
@media(max-width:780px){.heading-note{margin-top:20px;max-width:450px}}
@media(max-width:420px){.service .service-index{margin-bottom:15px}.company-details-row{grid-template-columns:1fr;gap:5px}}
.company-details .dt-look{color:var(--muted);margin:0}
.company-details .dd-look{margin:0;font-weight:600;overflow-wrap:anywhere}
.contact-card .address{font-style:normal;font-size:14px;line-height:1.9;margin:0}

/* ============================================================
   Motion & micro-interactions
   Scroll-reveal is JS-driven (assets/js/site.js) and progressive:
   elements are only hidden under html.js-reveal, which the script
   adds - never in markup. Reduced motion and print show everything.
   ============================================================ */
html.js-reveal .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
html.js-reveal .reveal.reveal-x{transform:translateX(28px)}
html.js-reveal .reveal.is-visible{opacity:1;transform:none}
@media print{html.js-reveal .reveal{opacity:1!important;transform:none!important}}

.button span{transition:transform .2s ease}
.button:hover span{transform:translate(3px,-3px)}

.service{position:relative;transition:border-color .25s ease}
.service:hover{border-color:#287c6a}
.service-icon{position:absolute;top:28px;right:24px;color:#287c6a;transition:transform .25s ease}
.service:hover .service-icon{transform:translateY(-3px)}
@media(max-width:420px){.service-icon{top:24px;right:0}}

.system-layer{transition:border-color .25s ease}
.system-layer:hover{border-color:var(--mint)}