/*
Theme Name: FlexWise
Author: Edison Dairo Jimenez / QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* Colors */
:root{
	--night:#061418;
	--bg:#071a1e;
	--ink:#EAF4F2;
	--ink-2:#B9CFCB;
	--ink-3:#8FA9A5;
	--line:rgba(190,230,222,.16);
	--teal:#3BB7A3;
	--teal-glow:#7FE3D1;
	--display:"Sora","Helvetica Neue",Arial,sans-serif;
	--body:"Manrope","Helvetica Neue",Arial,sans-serif;
	color-scheme:dark;
}

/* WordPress Core Styles */
.alignleft{float:left; margin-right:1.5rem; margin-bottom:1rem}
.alignright{float:right; margin-left:1.5rem; margin-bottom:1rem}
.aligncenter{display:block; margin-left:auto; margin-right:auto; margin-bottom:1rem}
.alignwide{max-width:100%; margin-left:auto; margin-right:auto}
.alignfull{max-width:100vw; margin-left:calc(-50vw + 50%); width:100vw}
.wp-caption{max-width:100%; margin-bottom:1rem}
.wp-caption img{display:block; max-width:100%; height:auto}
.wp-caption-text,.wp-block-image figcaption,.gallery-caption{font-size:.875rem; color:#666; margin-top:.5rem; text-align:center}
img{max-width:100%; height:auto}
.wp-block-image img{display:block}
.gallery{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem}
.gallery-item{flex:1 0 calc(33.333% - .5rem)}
.gallery-item img{display:block; width:100%; height:auto}
.screen-reader-text{clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; word-wrap:normal!important}
.screen-reader-text:focus{background-color:#f1f1f1; clip:auto!important; clip-path:none; color:#21759b; display:block; font-size:.875rem; font-weight:700; height:auto; left:5px; line-height:normal; padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000}
.entry-content::after{content:""; display:table; clear:both}
.wp-block-quote{border-left:4px solid #ccc; margin:1.5rem 0; padding:.5rem 1.5rem}
.wp-block-pullquote{border-top:4px solid #ccc; border-bottom:4px solid #ccc; padding:1.5rem 0; text-align:center}
.wp-block-table{width:100%; margin-bottom:1.5rem; border-collapse:collapse}
.wp-block-table td,.wp-block-table th{padding:.5rem; border:1px solid #ccc}
.wp-block-separator{border:none; border-top:2px solid #ccc; margin:2rem 0}
.wp-block-button .wp-block-button__link{display:inline-block; padding:.75rem 1.5rem; text-decoration:none}
.has-text-align-left{text-align:left}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}

/* Minimal Reset */
*, *::before, *::after{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:16px}
body{font-family:sans-serif; min-height:100vh; line-height:1.5; overflow-x:hidden; font-weight:400; font-size:1.2rem;}
img, picture, video, canvas, svg{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer}
a{text-decoration:none; color:inherit}
table{border-collapse:collapse; border-spacing:0}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:inherit}
p, li, blockquote, figcaption, summary{ text-wrap:pretty;} /* no orphan words; js/noOrphans.js is the fallback */
input, select, textarea{width:100%; padding:10px; border:1px solid var(--border); background:var(--white); font:inherit; border-radius:0; -webkit-appearance:none}
textarea{resize:none; min-height:120px}

/* Layout */
.content{ width:1300px; margin:0 auto; padding:0;}
.hidden{display:none !important}
.center{ text-align:center !important;}
.bg{ display: flow-root;}
.white{ color:var(--white);}

/* Column Layout */
.row{display:flex; flex-wrap:wrap; gap:15px}
.col{flex:1}
.col-1{flex:0 0 100%}
.col-2{flex:0 0 calc(50% - 7.5px)}
.col-3{flex:0 0 calc(33.333% - 10px)}
.col-4{flex:0 0 calc(25% - 11.25px)}
.col-5{flex:0 0 calc(20% - 12px)}

/* Responsive BG */
.rbg{background-image:var(--bg-desktop); background-size:cover; background-position:center}

/* Solid fill button */
.button{display:inline-block; padding:12px 30px; background:var(--primary); color:var(--white); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.875rem; cursor:pointer; border:none; transition:background 0.3s}
.button:hover{background:var(--accent)}

/* Notifications */
.msg{padding:12px 16px; font-size:1rem; margin:20px 0 0; display:none;}
.msg.visible{display:block !important;}
.msg.success{background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7}
.msg.error{background:#fbe9e7; color:#c62828; border:1px solid #ef9a9a}
.msg.warning{background:#fff8e1; color:#f57f17; border:1px solid #ffe082}
.redBorder{border-color:#c62828 !important; outline: 2px solid #c62828 !important;}

/* ---------- FlexWise landing ---------- */
body{ background:var(--bg); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; min-width:1100px;} /* 1072 column + room for a desktop scrollbar */
a:focus-visible, button:focus-visible{ outline:3px solid var(--teal-glow); outline-offset:3px; border-radius:6px;}

/* Background scene: door left ajar, light spilling into a dark room (js/landing.js) */
.scene{ position:absolute; left:0; right:0; top:0; height:max(100vh,680px); z-index:0; overflow:hidden; pointer-events:none; background:var(--bg);}
#room{ position:absolute; inset:0; width:100%; height:100%; display:block;}
.scene::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:30%; background:linear-gradient(to bottom, rgba(7,26,30,0), var(--bg));}

/* Page column: header, blocks, footer fill the first screen */
.pageWrap{ position:relative; z-index:1; min-height:max(100vh,680px); display:flex; flex-direction:column; width:1072px; margin:0 auto;}

/* Header */
header{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:28px 0;}
header .logo{ display:flex; align-items:center; gap:10px; color:var(--ink);}
header .logo b{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.02em;}
header .by{ font-size:14px; color:var(--ink-3);}
header .by strong{ color:var(--ink); font-weight:600;}
header .by a:hover, footer a:hover{ text-decoration:underline;}

/* Blocks */
section{ flex:1; display:flex; flex-direction:column;}
.block{ margin:0;}
.heroBlock + .block{ margin-top:auto; padding-top:18vh;}
.block:last-child{ padding-bottom:32px;}
.pillarsBlock + .newsletterBlock{ margin-top:32px;}

/* Hero */
.heroBlock{ display:grid; justify-items:start; align-content:start; gap:28px; padding:14vh 0 0; max-width:600px;}
.heroBlock .eyebrow{ font-size:13px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--teal-glow);}
.heroBlock h1{ font-family:var(--display); font-weight:300; font-size:84px; line-height:1.04; letter-spacing:-.035em; max-width:13ch; text-wrap:balance; text-shadow:0 2px 30px rgba(7,26,30,.8);}
.heroBlock h1 em{ font-style:normal; font-weight:600; color:var(--teal-glow);}
.heroBlock .lede{ font-size:20px; color:var(--ink-2); max-width:30em; text-shadow:0 1px 20px rgba(7,26,30,.9);}

/* Pillars */
.pillarsBlock{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; text-align:center;}
.pillar{ display:grid; gap:4px;}
.pillar h2{ font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.01em;}
.pillar p{ font-size:15px; color:var(--ink-2);}

/* Newsletter signup */
.newsletterBlock{ display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; justify-content:center;}
.newsletterText{ font-size:16px; color:var(--ink-2);}
.email{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); background:rgba(6,20,24,.6); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-radius:999px; padding:6px 6px 6px 18px;}
.email:focus-within{ border-color:var(--teal-glow);}
.email input[type=email]{ width:230px; padding:0; border:0; background:transparent; font-family:var(--body); font-weight:600; font-size:16px; color:var(--ink); outline:none;}
.email input[type=email]::placeholder{ color:var(--ink-3); font-weight:500;}
.email .hp{ position:absolute; left:-9999px; width:1px; height:1px;}
.email button{ font:600 14px var(--body); min-height:40px; padding:8px 16px; border-radius:999px; border:0; background:var(--teal); color:var(--night); white-space:nowrap;}
.email button:hover{ background:var(--teal-glow);}
.email button:disabled{ opacity:.6; cursor:default;}
.newsletterMsg{ flex:0 0 100%; text-align:center; font-size:14px; color:var(--teal-glow);}
.newsletterMsg:empty{ display:none;}
.newsletterBlock.sent .newsletterForm, .newsletterBlock.sent .newsletterText{ display:none;}
.newsletterBlock.sent .newsletterMsg{ flex:0 0 auto; font-size:16px; min-height:54px; display:flex; align-items:center;}

/* Footer */
footer{ border-top:1px solid var(--line); padding:22px 0; display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:14px; color:var(--ink-3);}

/* ---------- Tablet: 768-1119, fixed 720 column ---------- */
@media(max-width:1119px){
	body{ min-width:750px;}
	.pageWrap{ width:720px;}

	/* door moves to the top centre (js/landing.js switches below 1120), copy centred under it */
	.heroBlock{ justify-items:center; text-align:center; padding-top:44vh; max-width:none;}
	.heroBlock h1{ font-size:64px;}
	.heroBlock .lede{ font-size:18px;}
	.heroBlock + .block{ padding-top:10vh;}

	.pillar p{ font-size:14px;}
	footer{ justify-content:center; text-align:center;}
}

/* ---------- Phone: under 768, fixed 345 column ---------- */
@media(max-width:767px){
	body{ min-width:375px;}
	.pageWrap{ width:345px;}

	header{ flex-direction:column; gap:6px; padding:22px 0;}

	.heroBlock{ gap:20px;}
	.heroBlock h1{ font-size:40px;}
	.heroBlock .lede{ font-size:17px;}

	.pillarsBlock{ grid-template-columns:1fr; gap:16px;}
	.pillar p{ font-size:15px;}

	.newsletterBlock{ gap:14px;}
	.newsletterText{ text-align:center;}
	.email{ width:100%;}
	.email input[type=email]{ flex:1; width:auto; min-width:0;}
	.newsletterBlock.sent .newsletterMsg{ min-height:0;}

	footer{ flex-direction:column; align-items:center; gap:4px;}
	footer .footPart{ display:block;}
	footer .footSep{ display:none;}
}