/*
Theme Name: Carr Workplaces 2026
Author: QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* Colors — Carr Workplaces brand */
:root{
	--navy:#22355a;
	--navy-dark:#1a2942;
	--orange:#ff6b00;
	--primary:#22355a;   /* navy — brand primary */
	--accent:#ff6b00;    /* orange — CTAs/accents */
	--white:#fff;
	--dark:#22355a;
	--text:#2a2a2a;
	--text-light:#7a7a7a;
	--border:#d9dce2;
	--bg:#fff;
	--bg-alt:#f4f5f7;

	--font-display:'Montserrat',sans-serif;  /* headings */
	--font-body:'Inter',sans-serif;          /* body/nav */
	--font-ui:'Open Sans',sans-serif;        /* buttons/labels */
}

/* 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:var(--font-body); color:var(--text); min-height:100vh; line-height:1.5; overflow-x:hidden; font-weight:400; font-size:1.2rem;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display); color:var(--navy);}
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}
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}

/* Buttons — Open Sans, uppercase, rounded 7px */
.button,.btn,.btnFill,.btnOutline{display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-weight:800; text-transform:uppercase; letter-spacing:0.03em; font-size:1rem; line-height:1; padding:18px 30px; border-radius:7px; border:2px solid var(--orange); cursor:pointer; transition:all .25s ease; text-align:center; white-space:nowrap;}
/* Primary filled (orange) */
.button,.btnFill{background:var(--orange); color:var(--white);}
.button:hover,.btnFill:hover{background:#e85f00; border-color:#e85f00;}
/* Outline (orange border) — used on dark backgrounds */
.btnOutline{background:transparent; color:var(--white);}
.btnOutline:hover{background:var(--orange); color:var(--white);}

/* 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;}

/* ACF Blocks wrapper */
.block { margin: 60px auto; position: relative;}
.block .content { margin: 0px auto;}

/* Popup CPT overlay */
.popupOverlay{position:fixed; left:0; top:0; background:rgba(255,255,255,0.8); display:block; width:100vw; height:100vh; z-index:1000;}
.popupOverlay .verticalAlign{width:100%; height:100%; display:table-cell; vertical-align:middle;}
.popupOverlay .popup{ width: 100%; margin:0 auto; max-width:420px; position: relative;}
.popupOverlay .popupFullImg{ width: 100%; margin:0 auto; display: block; }
.popupOverlay .popupFullImg img{ display: block; width: 100%;}
.popupOverlay .close{ position: absolute; right: -40px; top: -40px; width: 40px; height: 40px; box-sizing: border-box; background: url(img/close.svg) no-repeat center center / contain; cursor: pointer;}
.displayTable{ display: table; width: 100%; height: 100%;}
.verticalAlign{ display: table-cell; vertical-align: middle;}

/* Header — fixed navy bar */
.siteHeader{ position:fixed; left:0; top:0; width:100%; z-index:1000; background:var(--navy); transition:box-shadow .3s ease;}
body.admin-bar .siteHeader{ top:32px;}
body.scrolled .siteHeader{ box-shadow:0 2px 14px rgba(0,0,0,0.25);}
.navInner{ display:flex; align-items:center; gap:30px; max-width:1600px; margin:0 auto; padding:22px 60px; min-height:92px;}
.siteHeader .logo{ flex:0 0 auto; display:block;}
.siteHeader .logo img{ height:42px; width:auto; display:block;}
.primaryNav{ flex:1 1 auto; display:flex; justify-content:center;}
.primaryNav .navList{ list-style:none; display:flex; align-items:center; gap:34px; margin:0; padding:0;}
.primaryNav .navList a{ font-family:var(--font-body); font-weight:400; font-size:1rem; color:var(--white); letter-spacing:.01em; transition:color .2s;}
.primaryNav .navList a:hover{ color:var(--orange);}
.headerRight{ flex:0 0 auto; display:flex; align-items:center; gap:26px;}
.loginLink{ font-family:var(--font-body); font-size:1rem; color:var(--white); transition:color .2s;}
.loginLink:hover{ color:var(--orange);}
.headerRight .btnOutline{ padding:13px 26px; font-size:.95rem;}
/* hamburger (mobile only) */
.menuIcon{ display:none; position:relative; width:40px; height:32px; flex:0 0 auto;}
.menuIcon span{ display:block; position:absolute; left:0; width:30px; height:3px; background:var(--white); border-radius:2px; transition:.3s ease;}
.menuIcon span:nth-child(1){ top:6px;}
.menuIcon span:nth-child(2){ top:15px;}
.menuIcon span:nth-child(3){ top:24px;}
body.menuOpen .menuIcon span:nth-child(1){ top:15px; transform:rotate(45deg);}
body.menuOpen .menuIcon span:nth-child(2){ opacity:0;}
body.menuOpen .menuIcon span:nth-child(3){ top:15px; transform:rotate(-45deg);}

/* Section */
section{ padding: 139px 0 0;}

/* Main Menu (mobile full-screen overlay) */
.mainMenu { position: fixed; inset: 0; z-index: 999; background: var(--navy); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch;}
body.menuOpen .mainMenu { opacity: 1; visibility: visible; pointer-events: auto;}
body.menuOpen.scrolled .siteHeader { box-shadow: none;}
.mainMenu-inner { padding: 140px 30px 60px; min-height: 100vh; display:flex; flex-direction:column; align-items:center; gap:4px;}
.mainMenu a { display: block; font-family:var(--font-display); font-size: 1.8rem; font-weight:600; color: var(--white); text-transform: uppercase; letter-spacing:.03em; padding: 10px 0; transition: color 0.2s;}
.mainMenu a:hover { color: var(--orange);}
.mainMenu .mobileInquire{ margin-top:18px; color:var(--orange); border:2px solid var(--orange); border-radius:7px; padding:14px 30px; font-family:var(--font-ui); font-size:1.1rem; font-weight:800;}
.mainMenu .mobileInquire:hover{ background:var(--orange); color:var(--white);}

/* Footer — locations directory */
.siteFooter{ background:var(--bg-alt); color:var(--text); padding:64px 0 38px; font-family:var(--font-body); font-size:1rem;}
.footInner{ max-width:1330px; margin:0 auto; padding:0 40px;}
.footHeading{ font-family:var(--font-display); text-align:center; text-transform:uppercase; letter-spacing:.12em; font-size:1.4rem; font-weight:700; color:var(--orange); margin:0 0 42px;}
.locDirectory{ display:grid; grid-template-columns:repeat(5,1fr); gap:30px; padding-bottom:42px; border-bottom:1px solid var(--border);}
.locCol{ display:flex; flex-direction:column; gap:24px;}
.stateName{ font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; font-weight:700; color:var(--orange); margin:0 0 12px;}
.cityList{ list-style:none; margin:0 0 14px; padding:0;}
.cityList:last-child{ margin-bottom:0;}
.metroName{ font-family:var(--font-ui); text-transform:uppercase; font-size:.85rem; letter-spacing:.04em; font-weight:700; color:var(--navy); margin-bottom:5px;}
.cityList li a{ display:block; font-size:.98rem; color:var(--text-light); padding:3px 0 3px 12px; border-left:1px solid var(--border); transition:color .2s;}
.cityList li a:hover{ color:var(--orange);}
/* bottom: mailing list + social */
.footBottom{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:32px 0;}
.mailingList{ display:flex; flex-direction:column; gap:12px;}
.mlLabel{ font-family:var(--font-ui); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:1rem; color:var(--navy);}
.mlForm{ display:flex; gap:8px;}
.mlForm input{ width:330px; max-width:60vw; height:46px; padding:0 14px; border:1px solid var(--border); background:var(--white); border-radius:4px; font-size:1rem;}
.mlForm button{ width:46px; height:46px; flex:0 0 auto; border:1px solid var(--border); background:var(--white); border-radius:4px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s;}
.mlForm button span{ display:block; width:9px; height:9px; border-right:2px solid var(--navy); border-bottom:2px solid var(--navy); transform:translateX(-2px) rotate(-45deg); transition:border-color .2s;}
.mlForm button:hover{ border-color:var(--navy);}
.footSocial{ display:flex; gap:14px; align-items:center;}
.soc{ display:block; width:30px; height:30px; background:var(--navy); transition:background .2s; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain;}
.soc:hover{ background:var(--orange);}
.socFacebook{ -webkit-mask-image:url(img/icon-facebook.svg); mask-image:url(img/icon-facebook.svg);}
.socInstagram{ -webkit-mask-image:url(img/icon-instagram.svg); mask-image:url(img/icon-instagram.svg);}
.socLinkedin{ -webkit-mask-image:url(img/icon-linkedin.svg); mask-image:url(img/icon-linkedin.svg);}
/* bottom nav + copyright */
.footNav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 24px; padding:24px 0 18px; border-top:1px solid var(--border);}
.footNav a{ font-size:.95rem; color:var(--text-light); transition:color .2s;}
.footNav a:hover{ color:var(--orange);}
.copyright{ text-align:center; font-size:.9rem; color:var(--text-light);}
.copyright strong{ color:var(--navy); font-weight:700;}
.copyright a{ color:var(--text-light);}
.copyright a:hover{ color:var(--orange);}

@media(min-width:768px){
	.showIphone{ display: none;}
}

/* Tablet */
@media(max-width:1299px){
	html{font-size: 14px;}
	.content{ width: 780px; padding: 0;}
	body{ min-width: 810px; }

	.showDesktop,
	.hideIpad{ display: none !important;}

	/* Header — collapse to hamburger */
	.primaryNav, .headerRight { display:none;}
	.menuIcon { display:block;}
	.navInner { justify-content:space-between; padding:18px 40px; min-height:78px;}
	.siteHeader .logo img { height:38px;}

	/* Section */
	section { padding: 110px 0 0;}

	/* Footer */
	.footInner { padding:0 30px;}
	.locDirectory { grid-template-columns:repeat(3,1fr); gap:26px;}

	/* Grid */
	.col-3, .col-4, .col-5 { flex: 0 0 calc(50% - 7.5px);}
}

/* Phone */
@media(max-width:767px){
	.popupOverlay .popup{max-width: 300px;}
	html { font-size: 11px;}
	.content { width: 370px; padding:0;}
	body{ min-width: 390px; }

	/* Header */
	.navInner { padding:16px 24px; min-height:68px;}
	.siteHeader .logo img { height:34px;}

	/* Main Menu */
	.mainMenu-inner { padding: 120px 24px 40px;}

	/* Section */
	section { padding: 90px 0 0;}

	/* Responsive BG */
	.rbg { background-image: var(--bg-phone);}

	/* Grid */
	[class*="col-"] { flex: 0 0 100%;}

	.locDirectory { grid-template-columns:repeat(2,1fr); gap:22px 18px;}
	.footBottom { flex-direction:column; align-items:flex-start; gap:22px;}
	.mlForm input { width:260px;}
	.footNav { gap:6px 16px;}
	#wpadminbar{ display: none !important;}
	body.admin-bar{ margin-top: -46px;}
	body.admin-bar header{ top: 0;}
	.hideIphone{ display: none !important;}
	.showIphone{ display: block !important;}
}