/*
Theme Name: UpsideNowBasic
Theme URI: https://upside-now.com/upsidenowbasic/
Author: John MacInnis
Author URI: https://upside-now.com/about/
Description: The UpsideNowBasic theme is designed to help create, publish and maintain a clean, professional, high-performance website quickly within budget. It includes a curated collection of popular color schemes, pre-installed fonts and formatted templates to jumpstart your development process. In addition to being simple to use, it offers infinite flexible design options so your website can live and grow along with your business.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 3.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: upsidenowbasic
Tags: blog, custom-colors, full-site-editing, block-patterns, wide-blocks, block-styles, editor-style, featured-images, threaded-comments, style-variations
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.

 This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}

/*
 * Prevents unnecessary scrollbars while handling long lines of preformatted text.
 * https://core.trac.wordpress.org/ticket/63875
 */
:where(pre) {
	overflow-x: auto;
}

/* Theme-design specific styles */
	 /* ---------- Buttons ---------- */
	.btn{font-family:var(--font-body, var(--wp--preset--font-family--work-sans)); font-weight:600; font-size:15px; border-radius:8px; padding:13px 24px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; text-decoration:none;}
	.btn-primary{background:#2952E3; color:#fff; box-shadow:0 6px 16px rgba(41,82,227,.35); transition:transform .15s ease, box-shadow .15s ease;}
	.btn-primary:hover{background:#000; transform:translateY(-2px); box-shadow:0 10px 22px rgba(41,82,227,.45); }
	.btn-gold{background:#C99A3D; color:#1A1200; box-shadow:0 6px 16px rgba(201,154,61,.35);}
	.btn-outline{background:transparent; border:1.5px solid rgba(255,255,255,.35); color:#fff;}
	.btn-outline.on-light{border-color:#0B1B33; color:#0B1B33;}
	.btn-ghost{background:transparent; color:#2952E3; padding:13px 4px;}
	.btn-sm{padding:10px 18px; font-size:13.5px;}
	:where(.page-template-training-page, .page-template-services-page) .btn{padding:14px 26px;}
	:where(.page-template-training-page) .btn{border:none;}
	:where(.page-template-training-page) .btn-sm{padding:10px 18px;}
	:where(.page-template-services-page) .btn-primary:hover{color:#fff;}

/*
 * Pattern and template part styles.
 *
 * Several parts share generic class names, so rules that differ per page are
 * limited with :where(), which keeps their specificity the same as the bare class.
 */

/* ---------- Training page design tokens and base elements ---------- */
.page-template-training-page{
	--ink-navy:#0B1B33;
	--slate-line:#22344F;
	--signal-cyan:#22D3EE;
	--electric-blue:#2952E3;
	--success:#12B76A;
	--bg-light:#F6F8FB;
	--white:#FFFFFF;
	--text-dark:#101828;
	--text-muted:#475467;
	--border:#E4E7EC;
	--shadow-sm:0 1px 2px rgba(16,24,40,.06);
	--font-display:'Segoe UI', sans-serif;
	--font-body:'Segoe UI', sans-serif;
	--font-mono:'JetBrains Mono', 'Courier New', monospace;
}
html:has(.page-template-training-page){scroll-behavior:smooth;}
:where(.page-template-training-page) :is(h1,h2,h3,h4){font-family:var(--font-display); color:var(--ink-navy); margin:0 0 .5em; line-height:1.16; letter-spacing:-0.01em;}
:where(.page-template-training-page) p{margin:0 0 1em; color:var(--text-muted);}
:where(.page-template-training-page) section{padding:76px 0;}
:where(.page-template-training-page) section.alt{background:var(--white); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}

/* ---------- Layout ---------- */
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
.wrap-wide{max-width:1180px; margin:0 auto; padding:0 28px;}
.section-head{max-width:640px; margin:0 auto 44px; text-align:center;}
:where(.page-template-services-page) .section-head{margin-bottom:40px;}
:where(.page-template-training-page) .section-head h2{font-size:32px;}
:where(.page-template-training-page) .section-head p{font-size:16px;}
.grid{display:grid; gap:20px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:900px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }

/* ---------- Eyebrow labels ---------- */
.eyebrow{font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#0B1B33; display:flex; align-items:center; gap:8px; margin-bottom:16px;}
:where(.page-template-services-page) .eyebrow{font-family:var(--wp--preset--font-family--work-sans); color:#22D3EE;}
:where(.page-template-services-page) .eyebrow::before{content:''; width:22px; height:2px; background:#22D3EE; display:inline-block;}
.eyebrow.on-light{color:#2952E3;}
.eyebrow.on-light::before{background:#2952E3;}

/* ---------- Cards ---------- */
.card{background:#ffffff; border:0.5px solid #475467; border-radius:14px; padding:28px;}
:where(.page-template-services-page) .card{box-shadow:0 1px 2px rgba(16,24,40,.06);}
:where(.page-template-training-page) .card{background:var(--white); border:1px solid var(--border); padding:26px; box-shadow:var(--shadow-sm);}
.curr-card{display:flex; gap:16px; align-items:flex-start;}
.curr-num{font-family:var(--font-mono); font-size:13px; color:var(--electric-blue); font-weight:700; flex-shrink:0; width:26px;}
.curr-card h4{font-size:16px; margin-bottom:5px;}
.curr-card p{font-size:14px; margin:0;}

/* ---------- Process diagram ---------- */
.steps-flow{display:flex; align-items:flex-start; justify-content:space-between; position:relative; padding:10px 0;}
.steps-flow::before{content:''; position:absolute; top:29px; left:40px; right:40px; height:2px; background:repeating-linear-gradient(90deg, #0B1B33 0 8px, transparent 8px 14px);}
.step-node{position:relative; flex:1; text-align:center; padding:0 10px;}
.step-num{width:58px; height:58px; margin:0 auto 14px; border-radius:50%; background:#0B1B33; color:#ffffff; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; box-shadow:0 0 0 3px #12B76A;}
:where(.page-template-training-page) .steps-flow::before{top:25px; left:34px; right:34px; background:repeating-linear-gradient(90deg,#22D3EE 0 8px, transparent 8px 14px);}
:where(.page-template-training-page) .step-node{padding:0 8px;}
:where(.page-template-training-page) .step-num{width:50px; height:50px; margin:0 auto 12px; color:#22D3EE; font-family:var(--font-display); font-weight:700; font-size:17px; box-shadow:0 0 0 6px var(--white);}
:where(.page-template-training-page) .step-node h5{font-family:var(--font-display); font-size:14px; color:#0B1B33; margin:0 0 4px;}
:where(.page-template-training-page) .step-node p{font-size:12.5px; margin:0; color:#AEC0DE;}

/* ---------- Icons ---------- */
.icon-row{display:flex; gap:28px; flex-wrap:wrap; justify-content:center;}
.icon-tile{width:64px; height:64px; border-radius:14px; border: 2px solid white; background:#14263F; display:flex; align-items:center; justify-content:center;}
.icon-tile svg{width:28px; height:28px; stroke: #22D3EE; fill:none; stroke-width:1.8;}
.icon-cap{font-size:12.5px; color:white; text-align:center; margin-top:8px;}

/* ---------- Spinning logo ---------- */
.spinbox, .upsn-spinbox{position:relative; top:0; left:0;}
.spinbox-75, .upsn-spinbox{width:75%;}
.ring, .upsn-ring{position:relative; top:0; left:0; animation:wee-spin 20s infinite linear;}
.middle, .upsn-middle{position:absolute; top:0; left:0;}
@keyframes wee-spin{
	0%{transform:rotate(0deg)}
	100%{transform:rotate(359deg)}
}

/* ---------- Flash cards ---------- */
.flash-can{display:grid; grid-template-columns:32% 32% 32%; gap:2%; padding-top:21px; padding-bottom:21px; width:100%; background-color:white;}
.flash-can div{border:1px solid #2952E3; border-radius:12px; box-shadow:#475467 5px 1px 7px, #475467 0px -2px 3px 2px inset; height:550px; font-size:21px; color:#111111; text-align:center; font-family:Arial, Helvetica, sans-serif; padding-left:21px; padding-right:21px;}
.flash-can div:hover{animation:highlite .5s normal; animation-fill-mode:both;}
.flash-can div:active{background-color:#0aed19;}
@keyframes highlite{
	from{background-color:none;}
	to{background-color:#C99A3D77; box-shadow:#777777 10px 5px 20px, #777777 0px -2px 3px 2px inset;}
}
.flash-can-dark{background-color:transparent;}
.flash-can-dark div{border-color:#395979; box-shadow:#395979 10px 5px 20px, #395979 0px -2px 3px 2px inset; color:white;}
.flash-can-dark div:hover{animation-name:highlite-dark;}
@keyframes highlite-dark{
	from{background-color:none;}
	to{background-color:#1E3248; border:1px solid #ffd300; box-shadow:#777777 10px 5px 20px, #777777 0px -2px 3px 2px inset;}
}
@media only screen and (max-width: 1250px){
	.flash-can{grid-template-columns:100%; padding-top:0; padding-bottom:75px;}
}

/* ---------- Parallax and scroll reveal ---------- */
.parallax, .kittylax{background-image:url('assets/images/world-map-kitty.webp'); height:720px; justify-content:center; align-items:center; padding-top:6px; background-attachment:fixed; background-position:bottom; background-repeat:no-repeat; background-size:cover;}
.pg-view{width:100%; display:grid; grid-template-columns:100%; gap:1%; padding-top:0px; padding-bottom:250px; padding-left:0%;}
.statbox{height:200px; width:30%; padding:1vh; margin:1vh; border:0.5mm solid #395979; box-shadow:#eeeeee 10px 5px 20px, #eeeeee 0px -2px 3px 2px inset; color:white; background-color:#0f1923e7; justify-self:center;}
.g-view{width:100%; display:grid; grid-template-columns:48% 48%; gap:2%; padding-top:21px; padding-bottom:75px;}
.kittylax .g-view{height:700px;}
.g-view-bg{background-image:url('assets/images/world-map-kitty.webp'); background-attachment:fixed; background-position:bottom; background-repeat:no-repeat; background-size:cover; height:700px; color:white;}
.scrollblock{height:200px; border:0.5mm solid #395979; box-shadow:#395979 0px 50px 100px -20px, #395979 0px 30px 60px -30px,#395979 0px -2px 6px 0px inset; padding-left:12px; padding-right:12px; color:white; justify-self:center;}
.g-view-bg .scrollblock{background-color:#00000099; border-color:#475467; font-size:x-large;}
@keyframes appear{
	from{opacity:0; clip-path:inset(100% 100% 0 0);}
	to{opacity:1; clip-path:inset(0 0 0 0);}
}
/* Native: Chrome / Edge / Safari 18+ */
@supports (animation-timeline: view()){
	.statbox, .scrollblock{animation:appear linear; animation-timeline:view(); animation-range:entry 0% cover 40%;}
}
/* Fallback: Firefox */
@supports not (animation-timeline: view()){
	.statbox{opacity:0; clip-path:inset(100% 100% 0 0); transition:opacity 1s linear, clip-path 1s linear;}
	.scrollblock{opacity:0; clip-path:inset(100% 100% 0 0); transition:opacity 0.5s linear, clip-path 0.5s linear;}
	.statbox.in-view, .scrollblock.in-view{opacity:1; clip-path:inset(0 0 0 0);}
}
@media only screen and (max-width: 1000px){
	.g-view{grid-template-columns:100%; padding-top:0; padding-bottom:250px;}
}
@media only screen and (max-width: 800px){
	.statbox{width:80%; left:5%; margin:6px;}
}

/* ---------- Counters ---------- */
.counters{display:flex; gap:2rem; justify-content:center; flex-wrap:wrap; padding:2rem 2rem;}
.counter{text-align:center; min-width:160px;}
.counter-number{font-family:Arial, Helvetica, sans-serif; font-size:4rem; font-weight:400; color:#ffd300; line-height:1;}
.counter-label{margin-top:0.5rem; font-family:Arial, Helvetica, sans-serif; font-size:0.9rem; letter-spacing:0.1em; text-transform:uppercase; color:#eeeeee;}

/* ---------- Announcement bar ---------- */
.announcement{position:relative; display:flex; align-items:center; top:0; width:100%; height:48px; background-color:black; overflow:hidden; max-height:48px; transition:max-height 0.4s ease, opacity 0.4s ease; opacity:1;}
.announcement.dismissed{max-height:0; opacity:0;}
.utilitybar{position:fixed; z-index:9999; width:100%; height:24px; display:flex; align-items:center; background-color:#2c2d3e; left:0; opacity:1; transition:transform 0.3s ease, opacity 0.3s ease; will-change:transform;}
.utilitybar.hidden{transform:translateY(-300%); opacity:0;}
.announcement-close{position:absolute; top:50%; right:12px; transform:translateY(-50%); background:none; border:none; color:white; font-size:18px; line-height:1; cursor:pointer; opacity:0.7; padding:4px 8px;}
.announcement-close:hover{opacity:1;}

/* ---------- Hero banners ---------- */
.services-hero-banner, .training-hero-banner{position:relative; overflow:hidden; isolation:isolate;}
.services-hero-banner::before, .training-hero-banner::before{
	content:"";
	position:absolute;
	top:-50%;
	left:-30%;
	width:35%;
	height:200%;
	background:linear-gradient(100deg, transparent 0%, #ffffff00 30%, #ffffff06 48%, #ffffff11 50%, #ffffff06 52%, #ffffff00 70%, transparent 100%);
	transform:rotate(8deg);
	pointer-events:none;
	z-index:-1;
}
.services-hero-banner::before{animation:servicesBannerBeamSweep 6s ease-in-out infinite;}
.training-hero-banner::before{animation:trainingBannerBeamSweep 16s ease-in-out infinite;}
@keyframes servicesBannerBeamSweep{
	0%{left:-30%;}
	45%{left:120%;}
	100%{left:120%;}
}
@keyframes trainingBannerBeamSweep{
	0%{left:-30%;}
	45%{left:100%;}
	100%{left:120%;}
}
@media (prefers-reduced-motion: reduce){
	.services-hero-banner::before, .training-hero-banner::before{animation:none; display:none;}
}
.hero-badges{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:34px;}
.hero-cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:12px;}
.hero-meta{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; max-width:640px; margin:0 auto;}
:where(.page-template-services-page) .hero-badges{justify-content:flex-start; margin-bottom:28px;}
:where(.page-template-services-page) .hero-cta-row{justify-content:flex-start; margin-bottom:0;}
.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.04em; padding:6px 12px; border-radius:99px;}
.badge-cyan{background:rgba(34,211,238,.14); color:#8FE9F7; border:1px solid rgba(34,211,238,.35);}
.badge-cyan.on-light{background:rgba(34,211,238,.12); color:#0E7490;}
.badge-gold{background:rgba(201,154,61,.14); color:#8A661E; border:1px solid rgba(201,154,61,.4);}
.badge-success{background:rgba(18,183,106,.12); color:#0B7A48; border:1px solid rgba(18,183,106,.35);}
:where(.page-template-services-page) .badge{font-family:var(--wp--preset--font-family--work-sans);}
:where(.page-template-services-page) .badge-success{background:rgba(18,183,106,.14); color:#5FE0A6; border-color:rgba(18,183,106,.4);}
.countdown{display:flex; gap:12px;}
.countdown .box{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:10px; padding:12px 0; width:64px; text-align:center;}
.countdown .num{font-family:var(--font-display); font-size:22px; color:#fff; font-weight:700;}
.countdown .lbl{font-family:var(--font-mono); font-size:10px; color:var(--signal-cyan); letter-spacing:.06em; margin-top:2px;}
.seats-wrap{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:18px 22px; min-width:260px; text-align:left;}
.seats-top{display:flex; justify-content:space-between; font-size:13px; color:#AEC0DE; margin-bottom:9px;}
.seats-top strong{color:#fff;}
.bar-track{height:9px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden;}
.bar-fill{height:100%; border-radius:99px; background:linear-gradient(90deg, #2952E3, #22D3EE); width:0%; transition:width 1.1s ease;}

/* ---------- Sticky call-to-action bar ---------- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(11,27,51,.96); backdrop-filter:blur(8px); border-top:1px solid var(--slate-line); padding:12px 0; transform:translateY(110%); transition:transform .3s ease;}
.sticky-cta.show{transform:translateY(0);}
.sticky-cta .wrap-wide{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.sticky-cta .info{color:#fff; font-size:13.5px;}
.sticky-cta .info b{color:var(--signal-cyan);}

/* ---------- FAQ ---------- */
:where(.page-template-training-page) .faq-item{border-bottom:1px solid var(--border);}
:where(.page-template-training-page) .faq-item:first-of-type{border-top:1px solid var(--border);}
.faq-q{cursor:pointer; list-style:none; padding:18px 4px; font-weight:600; font-size:15.5px; color:var(--text-dark); display:flex; justify-content:space-between; align-items:center; gap:12px;}
.faq-q::-webkit-details-marker{display:none;}
.faq-q .plus{font-family:var(--font-mono); font-size:20px; color:var(--electric-blue); transition:transform .2s ease; flex-shrink:0;}
.faq-item[open] .plus{transform:rotate(45deg);}
.faq-a{padding:0 4px 16px; font-size:14.5px; color:var(--text-muted);}
.wp-block-details.faq-item{border-bottom:1px solid #E4E7EC; padding:0;}
.wp-block-details.faq-item:first-of-type{border-top:1px solid #E4E7EC;}
.wp-block-details.faq-item summary{cursor:pointer; list-style:none; padding:18px 4px; font-weight:600; font-size:15.5px; color:#101828; position:relative;}
.wp-block-details.faq-item summary::-webkit-details-marker{display:none;}
.wp-block-details.faq-item summary::after{content:"+"; position:absolute; right:4px; top:16px; font-family:var(--wp--preset--font-family--roboto); font-size:20px; color:#2952E3; transition:transform .2s ease;}
.wp-block-details.faq-item[open] summary::after{transform:rotate(45deg);}
.wp-block-details.faq-item p{padding:0 4px 16px; font-size:14.5px; color:#475467; margin:0;}

/* ---------- Pricing ---------- */
.price-card{position:relative; background:#ffffff; border:1px solid #E4E7EC; border-radius:16px; padding:30px; box-shadow:0 1px 2px rgba(16,24,40,.06);}
.price-card.featured{border:1.5px solid #2952E3; box-shadow:0 8px 24px rgba(11,27,51,.10);}
.price-card .ribbon{position:absolute; top:-13px; left:24px; background:#2952E3; color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.05em; padding:5px 12px; border-radius:99px; text-transform:uppercase;}
.price-card .sub{font-size:13px; color:#475467; margin-bottom:0;}
.price-card .amt{font-family:var(--wp--preset--font-family--roboto); font-size:32px; color:#0B1B33; margin:10px 0 4px; font-weight:700;}
.price-card .amt small{font-size:14px; color:#475467; font-weight:500;}
.continuity-strip{display:flex; align-items:center; gap:16px; background:#14263F; border-radius:14px; padding:22px 28px; color:#fff; flex-wrap:wrap;}
.continuity-strip p{color:#AEC0DE; font-size:14.5px; margin:0; flex:1; min-width:220px;}

/* ---------- Guarantee ---------- */
.guarantee{display:flex; gap:20px; align-items:center; background:#ffffff; border:1px dashed #E4E7EC; border-radius:16px; padding:28px 32px;}
.guarantee .ic{width:56px; height:56px; border-radius:50%; background:rgba(18,183,106,.1); border:1.5px solid rgba(18,183,106,.35); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.guarantee .ic svg{width:26px; height:26px; stroke:#12B76A; fill:none; stroke-width:1.8;}
:where(.page-template-training-page) .guarantee h4{margin-bottom:4px; font-size:17px;}
:where(.page-template-training-page) .guarantee p{margin:0; font-size:14.5px;}

/* ---------- Final call to action ---------- */
.final-cta{background-color:var(--ink-navy); background-image:radial-gradient(800px 380px at 50% -20%, rgba(34,211,238,.20), transparent 60%); color:#fff; text-align:center; padding:72px 0;}
.final-cta h2{color:#fff; font-size:30px; max-width:600px; margin:0 auto 12px;}
.final-cta p{color:#AEC0DE; max-width:520px; margin:0 auto 32px;}
.final-cta-band{background-color:#0B1B33; background-image:radial-gradient(800px 380px at 50% -20%, rgba(34,211,238,.20), transparent 60%); color:#fff; text-align:center; padding:64px 28px; border-radius:20px;}
.final-cta-band .eyebrow{justify-content:center;}

/* ---------- Training footer ---------- */
.training-footer{background:var(--ink-navy); color:#8CA0C2; padding:28px 0 90px; text-align:center; font-size:13px; border-top:1px solid var(--slate-line);}
.training-footer strong{color:#fff;}