/*
Theme Name: Northstone
Theme URI: https://archaeo.agency
Author: Archaeo Agency LLC
Author URI: https://archaeo.agency
Description: Scroll-driven 3D construction theme. Visitors scroll and watch a building go up phase by phase, configure their own build, read an estimate, browse projects, apply for jobs and sign in to a client portal. Pair it with the Northstone Kit plugin for projects, careers, leads, the client portal and editable content.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 7.1
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: northstone
Tags: one-column, custom-logo, custom-menu, featured-images, rtl-language-support, translation-ready, threaded-comments
*/

/* Base resets (the front-page stylesheet assumes them). */
body{margin:0}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.skip-link:focus{clip:auto;clip-path:none;height:auto;width:auto;left:12px;top:12px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px;border-radius:2px}

/* Admin bar: keep the fixed chrome below it. */
body.admin-bar .nav{top:var(--wp-admin--admin-bar--height,32px)}
body.admin-bar .mhud{top:calc(66px + var(--wp-admin--admin-bar--height,32px) + env(safe-area-inset-top,0px))}
body.admin-bar .menu{padding-top:calc(80px + var(--wp-admin--admin-bar--height,32px))}
body.admin-bar .cfg{top:calc(72px + var(--wp-admin--admin-bar--height,32px) + env(safe-area-inset-top,0px))}

/* Brand with an uploaded logo. */
.brand.has-logo img{display:block;height:28px;width:auto}
footer .brand.has-logo img{filter:brightness(0) invert(1)}

/* Front page: additions for real data. */
.proj.has-photo .draw,.modal .draw.has-photo{padding:0;place-items:stretch}
.proj.has-photo .draw img,.modal .draw.has-photo img{width:100%;height:100%;object-fit:cover;display:block}
.modal .draw.has-photo{min-height:280px}
.modal .more{display:inline-block;margin-top:18px;text-decoration:none}
.thanks.bad{border-color:var(--orange);color:var(--orange-2)}
.btn.busy,.btn:disabled{opacity:.6;cursor:progress}
.hp{position:absolute!important;inset:0 auto auto 0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none}
.demo-tag{display:inline-block;margin-inline-start:8px;padding:2px 7px;border-radius:999px;background:var(--orange);color:var(--ink);font-size:.58rem;letter-spacing:.1em;vertical-align:1px}
#camImg{width:100%;height:auto;display:block;border-radius:3px;aspect-ratio:16/9;object-fit:cover;background:#1a2338}
.pc li a{color:var(--ink)}
.office a{color:var(--ink)}
#pMsg{margin-top:4px}

/* Footer base row and credit. */
.site-footer .foot-base{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;color:#8ea0b4}
.site-footer .foot-base p{margin:0}
.site-footer .credit a{color:#d7dde4;text-decoration:underline;text-underline-offset:3px}
.site-footer .legal ul,.site-footer ul.legal{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem}
.site-footer .office-lines{line-height:1.6}
.site-footer .office-lines a{color:#d7dde4}

/* Inner pages. */
.ns-inner{background:var(--paper)}
.ns-inner .site-content{padding-top:64px}
.ns-inner .nav{position:fixed}
.page-main{padding:clamp(48px,7vw,96px) 0}
.page-head{margin-bottom:clamp(28px,4vw,48px)}
.page-head .big{max-width:22ch}
.wrap.narrow,.narrow-text{max-width:760px}
.lead-img{margin:0 0 32px}
.lead-img img{width:100%;border-radius:3px;display:block}
.entry-content{font-size:1.08rem;line-height:1.7}
.entry-content > *{max-width:68ch}
.entry-content h2,.entry-content h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:1.8em 0 .5em;font-variation-settings:"opsz" 96}
.entry-content h2{font-size:1.8rem}.entry-content h3{font-size:1.35rem}
.entry-content a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px}
.entry-content blockquote{margin:1.5em 0;padding:4px 0 4px 20px;border-inline-start:3px solid var(--orange);font-size:1.15rem}
.entry-content img{border-radius:3px}
.entry-content .alignwide{max-width:1000px}
.entry-content .alignfull{max-width:none}
.entry-content table{border-collapse:collapse;width:100%}
.entry-content th,.entry-content td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:start}
.cards .card{background:var(--paper-2);border-radius:3px;overflow:hidden;min-width:0}
.cards .card-link{display:block;color:inherit;text-decoration:none;height:100%}
.cards .card-img img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.cards .card-body{padding:18px 20px 22px}
.cards .card-meta{margin:0 0 6px;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cards .card-title{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.015em;margin:0 0 8px;font-variation-settings:"opsz" 96}
.cards .card-text p{margin:0;color:var(--muted);font-size:.96rem}
.cards .card-link:hover .card-title{text-decoration:underline;text-decoration-color:var(--orange)}
.pagination,.post-navigation{margin-top:40px}
.nav-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--font-mono);font-size:.78rem}
.nav-links a,.nav-links span{color:var(--ink)}
.post-navigation .nav-links{justify-content:space-between}
.post-navigation .nav-k{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.search-form{display:flex;gap:8px;max-width:480px;margin:20px 0}
.search-form label{flex:1}
.search-form .search-submit{font:inherit;font-weight:600;background:var(--ink);color:var(--paper);border:0;border-radius:2px;padding:0 18px;cursor:pointer}
.project-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start;margin-bottom:40px}
@media(max-width:899px){.project-grid{grid-template-columns:1fr}}
.project-visual{margin:0;background:var(--paper-3);border-radius:3px;padding:40px 10% 0;display:grid;place-items:end center;direction:ltr}
.project-visual.has-photo,.project-visual:has(img){padding:0;place-items:stretch}
.project-visual img{display:block;width:100%;height:100%;object-fit:cover;border-radius:3px}
.project-page .facts{margin:0;display:grid;gap:14px}
.project-page .facts div{border-top:1px solid var(--line);padding-top:10px}
.project-page .facts dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.project-page .facts dd{margin:4px 0 0;font-weight:500}
.project-page .back{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.btn2{text-decoration:none;display:inline-block}
.comments{margin-top:56px;padding-top:24px;border-top:1px solid var(--line)}
.comment-list{list-style:none;padding:0}
.comment-list .comment{margin:0 0 18px}
.wp-caption-text,.wp-element-caption{font-size:.85rem;color:var(--muted)}
.sticky .card-title::after{content:" ·";color:var(--orange)}
.bypostauthor{display:block}
.alignleft{float:left;margin:0 20px 12px 0}.alignright{float:right;margin:0 0 12px 20px}.aligncenter{margin-left:auto;margin-right:auto}

/* Urdu: Nastaliq needs taller form controls; numbers and addresses stay left-to-right. */
html[lang=ur] select{line-height:2.1;padding-top:6px;padding-bottom:6px;min-height:58px}
html[dir=rtl] a[href^="tel:"],html[dir=rtl] a[href^="mailto:"]{unicode-bidi:isolate;direction:ltr}

/* Only the site footer is the dark band; comment and entry footers stay plain. */
footer:not(.site-footer){background:none;color:inherit;padding:0}

/* The build read-out in the nav needs room; below this width the phase card carries it. */
@media (max-width:1379px){.nav .hud{display:none}}

/* Accessibility (WCAG 2.1 AA contrast). The bright brand orange stays for shapes, bars and
   large type; small orange text on light paper uses a deeper shade, and orange buttons
   carry dark text. */
:root{--orange-ink:#a8380a;--muted:#555a62}
.sec-eyebrow,.why .k,.steps .n,.modal .kind,.p-head .wk,.live,.stage .eyebrow b,.cfg .note b{color:var(--orange-ink)}
.band .sec-eyebrow,.site-footer .sec-eyebrow{color:var(--orange)}
.btn{color:var(--ink)}
.btn:hover{color:var(--ink)}
footer:not(.site-footer) a,footer:not(.site-footer) time,footer:not(.site-footer) .url{color:inherit}