/*
Theme Name: Masori
Theme URI: https://masori.com.au
Author: Adelaide SEO Marketing
Description: Architectural surface protection theme for Masori - "The Monolith" design concept. Maroon and ivory palette, Cormorant Garamond / Jost / Bodoni Moda typography, with generated SVG placeholder imagery.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: masori
*/

/* ============================================================
   CORE - shared by every page
   Page-specific rules live in css/home.css, css/service.css,
   css/terms.css and css/notfound.css (conditionally enqueued).
   ============================================================ */

:root{
  --m-950:#200708; --m-900:#2C090B; --m-850:#330A0C; --m-800:#3B0C0E; --m-700:#4E1013; --m-600:#631A1E; --m-500:#75272B;
  --rose:#A9767A; --rose-soft:#C79FA0; --rose-deep:#8A5A5E;
  --ivory:#ECE1D0; --parchment:#E2D5C2;
  --paper:#F7F2E8; --paper-2:#EFE8DA;
  --ink:#33141A; --ink-soft:#5C353B;
  --hairline:rgba(236,225,208,.14); --hairline-soft:rgba(236,225,208,.08);
  --hd:rgba(76,23,29,.18); --hd-soft:rgba(76,23,29,.10);
  --serif:'Cormorant Garamond',Georgia,serif;
  --brand:'Bodoni Moda','Bodoni MT',Didot,Georgia,serif;
  --sans:'Jost',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--m-900);color:var(--parchment);font-family:var(--sans);font-weight:300;font-size:16.5px;line-height:1.75;-webkit-font-smoothing:antialiased}
::selection{background:var(--ivory);color:var(--m-800)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--rose-soft);outline-offset:3px}
img,svg{display:block}
img{max-width:100%;height:auto}
[hidden]{display:none!important}
[id]{scroll-margin-top:96px}
body.menu-open{overflow:hidden}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.container{width:min(1280px,92vw);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--ivory);color:var(--m-800);padding:10px 18px;z-index:300}
.skip:focus{left:12px;top:12px}

.eyebrow{font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--rose);font-weight:400}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ivory);line-height:1.1}
.btn{display:inline-block;font-size:11px;letter-spacing:.28em;text-transform:uppercase;padding:17px 34px;border:1px solid rgba(236,225,208,.45);color:var(--ivory);background:transparent;transition:background .4s,color .4s,border-color .4s;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:var(--ivory);color:var(--m-800);border-color:var(--ivory)}
.btn--solid{background:var(--ivory);color:var(--m-800);border-color:var(--ivory)}
.btn--solid:hover{background:var(--parchment);border-color:var(--parchment)}
.textlink{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--rose-soft);display:inline-flex;align-items:center;gap:12px;transition:gap .3s,color .3s}
.textlink::after{content:"\2192"}
.textlink:hover{gap:18px;color:var(--ivory)}

/* ---------- button rows ----------
   One component for every pair of buttons, so they are always the same
   size, evenly spaced and aligned. Stacks full-width on small screens. */
.btn-row,.hero-actions,.end-actions{display:flex;flex-wrap:wrap;gap:18px;max-width:620px;align-items:stretch}
.btn-row>.btn,.hero-actions>.btn,.end-actions>.btn{flex:1 1 0;min-width:215px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
.btn-row--center,.end-actions,.page-hero--center .hero-actions{margin-inline:auto;justify-content:center}
.cta .btn-row,.cta-end .btn-row{margin-inline:auto;justify-content:center}

/* Mobile: in-page button pairs stack one under the other, full width and
   equally sized. The sticky CTA bar is the deliberate exception - it stays
   side by side, and is styled separately below. */
@media (max-width:640px){
  .btn-row,.hero-actions,.end-actions{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:14px;max-width:340px}
  .btn-row--center,.end-actions,.page-hero--center .hero-actions{margin-inline:auto}
  .btn-row>.btn,.hero-actions>.btn,.end-actions>.btn{flex:0 0 auto;width:100%;min-width:0}
}

/* ---------- header ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:24px clamp(20px,4vw,48px);border-bottom:1px solid transparent;transition:background .35s,border-color .35s,padding .35s}
.site-header.scrolled{background:rgba(32,7,8,.92);backdrop-filter:blur(10px);border-bottom-color:var(--hairline-soft);padding-block:13px}
.mark{width:46px;height:46px;border:1px solid rgba(236,225,208,.3);display:grid;place-items:center;font-family:var(--brand);font-size:21px;color:var(--ivory);flex:none}
.site-nav{position:absolute;left:50%;transform:translateX(-50%)}
.site-nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.site-nav li{margin:0}
.site-nav a{position:relative;display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose-soft);transition:color .3s;padding:4px 0;white-space:nowrap}
.site-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--rose-soft);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.site-nav a:hover{color:var(--ivory)}
.site-nav .current-menu-item>a,
.site-nav .current_page_item>a,
.site-nav a.active{color:var(--ivory)}
.site-nav .current-menu-item>a::after,
.site-nav .current_page_item>a::after,
.site-nav a.active::after{transform:scaleX(1)}
.hdr-right{display:flex;align-items:center;gap:12px}
.btn--hdr{padding:13px 24px}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(236,225,208,.3);background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:1px;background:var(--ivory)}

/* ---------- mobile menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:200;background:var(--m-950);display:flex;flex-direction:column;padding:24px clamp(20px,6vw,44px) 36px;overflow-y:auto}
.mm-top{display:flex;align-items:center;justify-content:space-between}
.mm-word{font-family:var(--brand);font-size:17px;letter-spacing:.44em;text-indent:.44em;color:var(--rose-soft)}
.mm-close{width:44px;height:44px;border:1px solid rgba(236,225,208,.3);background:transparent;color:var(--ivory);font-size:20px;font-family:var(--sans);font-weight:200;cursor:pointer}
.mm-nav{margin-top:28px}
.mm-nav ul{list-style:none;display:flex;flex-direction:column;margin:0;padding:0}
.mm-nav a{display:block;font-family:var(--serif);font-size:clamp(1.45rem,6vw,1.85rem);color:var(--parchment);padding:15px 2px;border-bottom:1px solid var(--hairline-soft)}
.mm-nav .current-menu-item>a,
.mm-nav .current_page_item>a,
.mm-nav a.active{color:var(--ivory);font-style:italic}
.mm-cta{margin-top:32px;text-align:center;display:block}

/* ---------- footer ---------- */
.footer{background:var(--m-950);border-top:1px solid var(--hairline-soft);padding:clamp(56px,7vw,80px) 0 36px;color:#C9ABA6;position:relative;overflow:hidden}
/* Sized so the whole wordmark fits inside the container at every width -
   the trailing letter-space is balanced by an equal text-indent. */
.footer-ghost{font-family:var(--brand);font-size:clamp(2.4rem,14vw,14rem);letter-spacing:.16em;text-indent:.16em;line-height:1;text-align:center;color:rgba(236,225,208,.045);user-select:none;white-space:nowrap;max-width:100%;margin:-.1em 0 clamp(26px,4vw,42px)}
.footer-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--hairline-soft)}
.footer .wordmark{font-family:var(--brand);font-size:22px;letter-spacing:.46em;text-indent:.46em;color:var(--ivory)}
.footer .brand-sub{font-size:7.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--rose);margin-top:8px;text-align:center}
.footer-links ul{display:flex;gap:clamp(28px,4vw,64px);flex-wrap:wrap;list-style:none;margin:0;padding:0}
.footer-links a{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#CFA9A4;transition:color .3s}
.footer-links a:hover{color:var(--ivory)}
.footer-bottom{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;padding-top:26px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center;color:#8E6C68}
.footer-bottom a{border-bottom:1px solid rgba(169,118,122,.5);padding-bottom:2px}
.footer-bottom a:hover{color:var(--ivory)}

/* ---------- mobile CTA bar ----------
   Two side-by-side buttons pinned to the bottom of the viewport on phones
   and small tablets, sharing the row equally. Hidden while the mobile menu
   is open, and the body gets matching bottom padding so nothing is covered. */
.mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:150;display:none;flex-direction:row;align-items:stretch;gap:10px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));background:rgba(32,7,8,.96);backdrop-filter:blur(10px);border-top:1px solid var(--hairline)}
.mobile-cta .btn{flex:1 1 0;width:auto;min-width:0;padding:14px 12px;font-size:10.5px;letter-spacing:.22em;display:flex;align-items:center;justify-content:center;text-align:center}

@media (max-width:767px){
  .mobile-cta{display:flex}
  /* --mobile-cta-h is measured from the bar itself in site.js, so the
     reserved space stays correct if the labels or sizing change. */
  body.has-mobile-cta{padding-bottom:calc(var(--mobile-cta-h,124px) + 8px + env(safe-area-inset-bottom,0px))}
}
body.menu-open .mobile-cta{display:none}

/* ---------- shared card hover ---------- */
.bcard,.ccard{transition:transform .35s cubic-bezier(.2,.6,.2,1),box-shadow .35s}
.bcard:hover,.ccard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(59,12,14,.14)}

/* ---------- reveal on scroll ---------- */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.2,.6,.2,1),transform .95s cubic-bezier(.2,.6,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- scrollbar ---------- */
html{scrollbar-width:thin;scrollbar-color:var(--m-600) var(--m-950)}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--m-950)}
::-webkit-scrollbar-thumb{background:var(--m-600);border:3px solid var(--m-950);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--m-500)}

/* ---------- shared band helpers ---------- */
.darkline{background:radial-gradient(85% 130% at 50% 0%,rgba(236,225,208,.035),transparent 60%);border-top:1px solid var(--hairline-soft)}
.dark2{background:radial-gradient(85% 130% at 50% 0%,rgba(236,225,208,.03),transparent 55%),var(--m-850);border-top:1px solid var(--hairline-soft)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .bcard,.ccard{transition:none}
  .bcard:hover,.ccard:hover{transform:none;box-shadow:none}
}
@media (max-width:1140px){
  .site-nav{display:none}
  .burger{display:flex}
}

/* Mobile: a slightly smaller button across the whole site. Tightening the
   tracking as well as the padding is what lets a pair sit side by side. */
@media (max-width:767px){
  .btn{font-size:10px;letter-spacing:.2em;padding:13px 22px;line-height:1.35}
  .btn--hdr{padding:11px 16px}
  .mobile-cta .btn{padding:13px 10px;font-size:10px;letter-spacing:.2em}
}
/* Only the sticky bar needs the extra-narrow tier now that in-page pairs
   stack full width: its two buttons share one row down to 320px. */
@media (max-width:400px){
  .mobile-cta .btn{font-size:9.5px;letter-spacing:.16em;padding-left:8px;padding-right:8px}
}

@media (max-width:560px){
  .hdr-right .btn{display:none}
}

/* ---------- admin bar offset ---------- */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .site-header{top:46px}
}

/* Full-width Google Map above the footer. */
.service-map{height:clamp(420px,46vw,620px);background:#DDD5C8;border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft)}
.service-map iframe{display:block;width:100%;height:100%;border:0}
@media(max-width:560px){.service-map{height:360px}}