/*
Theme Name:   Blacksilver Child — Hidden North
Theme URI:    https://hiddennorth.com.au
Description:  Hidden North brand layer over Blacksilver 9.x. Built from the Hidden North Digital Style Guide v1.0. All brand values live in :root; theme-markup overrides are grouped at the foot of the file.
Author:       Bourne Creative
Template:     blacksilver
Version:      1.0.1
Text Domain:  blacksilver-child
*/

/* ==========================================================================
   01 — TOKENS
   ========================================================================== */

:root{
  --hn-bone:#EDE9E1;
  --hn-panel:#E2DDD3;
  --hn-concrete:#C9C5BC;
  --hn-rule:#CDC8BE;
  --hn-stone:#8A8B85;
  --hn-blue:#5B6E75;
  --hn-olive:#6E7358;
  --hn-rust:#9A5238;
  --hn-rust-hover:#7A3E2A;
  --hn-ink:#2B3033;
  --hn-bitumen:#16181A;
  --hn-body:#474C4F;
  --hn-meta:#5C6265;

  --hn-rule-w:2px;
  --hn-bracket-w:3px;
  --hn-wrap:1180px;
  --hn-prose:720px;

  /* Nine-step spacing scale */
  --hn-3xs:4px;  --hn-2xs:8px;  --hn-xs:12px; --hn-s:16px;
  --hn-m:24px;   --hn-l:40px;   --hn-xl:64px; --hn-2xl:96px; --hn-3xl:144px;

  /* Page gutter: 16px on phones, 24px tablet, 40px desktop */
  --hn-gutter:clamp(16px, 4vw, 40px);

  --hn-font:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   02 — TYPEFACE (self-hosted Archivo variable, wght 100–900, wdth 62–125)
   ========================================================================== */

@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  font-stretch:62% 125%;
  src:url("https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5/files/archivo-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  font-stretch:62% 125%;
  src:url("https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5/files/archivo-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ==========================================================================
   03 — FLAT, SQUARE, UNSHADOWED (applied once)
   ========================================================================== */

*,*::before,*::after{
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* ==========================================================================
   04 — GROUND & BODY TYPE
   ========================================================================== */

html,body{ background:var(--hn-bone); }

body,
.container-wrapper,
.site-back-cover{
  background-color:var(--hn-bone);
}

body,
input, textarea, select, button{
  font-family:var(--hn-font);
}
/* Blacksilver sets Jost on a long list of theme selectors with higher specificity.
   One family everywhere; icon fonts are excluded. */
:where(h1,h2,h3,h4,h5,h6,p,li,a,span,div,label,blockquote,figcaption,input,textarea,select,button,td,th,em,strong):not([class*="fa-"]):not([class*="icon"]):not([class*="lg-"]):not([class*="feather"]){
  font-family:var(--hn-font) !important;
}

body{
  color:var(--hn-body);
  font-size:1.0625rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

/* Theme default body grey (#7e7e7e) fails contrast on Bone; reset to body grey.
   Elementor per-widget colours (e.g. white copy on photographs) still win. */
.entry-content,
.section-description,
.section-description p,
.entry-title-subheading,
.entry-title-subheading p,
.text-is-dark .section-description p,
.text-is-dark .entry-title-subheading p{
  color:var(--hn-body);
  font-family:var(--hn-font);
  font-size:1.0625rem;
  line-height:1.55;
}

.entry-content p,
.entry-content li,
.section-description p{
  max-width:72ch;
  letter-spacing:0;
}
.entry-content p + p,
.section-description p + p{ margin-top:0; }
.entry-content p,
.section-description p{ margin-bottom:var(--hn-m); }
.entry-content p:last-child,
.section-description p:last-child{ margin-bottom:0; }

/* ==========================================================================
   05 — HEADINGS
   ========================================================================== */

h1,h2,h3,h4,h5,h6,
.entry-title,
.section-title{
  font-family:var(--hn-font);
  color:var(--hn-ink);
  font-stretch:100%;
  text-wrap:balance;
}

h1, .entry-content h1, .section-title h1, h1.section-title{
  font-weight:700 !important;
  font-size:clamp(1.75rem, 4vw, 2.5rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.02em !important;
}

h2, .entry-content h2, h2.section-title{
  font-weight:700 !important;
  font-size:clamp(1.25rem, 2.4vw, 1.625rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.015em !important;
}

h3, .entry-content h3{
  font-weight:700 !important;
  font-size:1.125rem !important;
  line-height:1.2 !important;
  letter-spacing:-.01em !important;
}

h4, .entry-content h4{
  font-weight:700 !important;
  font-size:1rem !important;
  line-height:1.3 !important;
  letter-spacing:0 !important;
}

/* Metadata voice — eyebrows, captions, nav, buttons */
.hn-meta,
h5.section-sub-title,
.entry-sub-title,
.worktype-categories{
  font-family:var(--hn-font);
  font-size:.6875rem;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* Display — expanded caps for hero titles that are names, not sentences */
.hn-display{
  font-weight:600;
  font-size:clamp(2.5rem, 6vw, 4.5rem);
  line-height:.9;
  letter-spacing:.01em;
  text-transform:uppercase;
  font-stretch:125%;
  font-variation-settings:"wdth" 125;
}

/* ==========================================================================
   06 — LINKS, BUTTONS, FOCUS
   ========================================================================== */

a{ transition:color .12s linear, border-color .12s linear, background-color .12s linear; }

.entry-content .section-description a:not(.hn-btn),
.entry-content p a:not(.hn-btn),
.entry-content li a:not(.hn-btn){
  color:var(--hn-rust);
  text-decoration:none;
  border-bottom:1px solid var(--hn-rust);
}
.entry-content .section-description a:not(.hn-btn):hover,
.entry-content p a:not(.hn-btn):hover,
.entry-content li a:not(.hn-btn):hover{
  color:var(--hn-rust-hover);
  border-bottom-width:2px;
}

:focus-visible{
  outline:2px solid var(--hn-rust) !important;
  outline-offset:2px;
}

/* Primary button: Rust fill, Bone label, flush-left label, 48px target */
.hn-btn,
.mtheme-button,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
input[type=submit]{
  display:inline-flex !important;
  align-items:center;
  justify-content:flex-start;
  min-height:48px;
  padding:15px 20px !important;
  background:var(--hn-rust) !important;
  color:var(--hn-bone) !important;
  border:0 !important;
  font-family:var(--hn-font) !important;
  font-size:.6875rem !important;
  font-weight:500 !important;
  line-height:1 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  text-align:left;
  transform:none !important;
  transition:background-color .12s linear !important;
}
.hn-btn:hover,
.mtheme-button:hover,
a:hover .mtheme-button,
.elementor-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
input[type=submit]:hover{
  background:var(--hn-rust-hover) !important;
  color:var(--hn-bone) !important;
  transform:none !important;
}
.section-button{ margin-top:var(--hn-l); }
.section-button a{ border:0 !important; text-decoration:none !important; }
/* Theme draws decorative borders/fills behind its buttons */
.mtheme-button::before,
.mtheme-button::after{ display:none !important; }

.hn-btn--secondary{
  background:none !important;
  color:var(--hn-ink) !important;
  border:var(--hn-rule-w) solid var(--hn-ink) !important;
  padding:13px 20px !important;
}
.hn-btn--secondary:hover{
  background:var(--hn-ink) !important;
  color:var(--hn-bone) !important;
}

/* ==========================================================================
   07 — MOTION OFF (preloader, entrance animations, hover zooms)
   ========================================================================== */

.preloader-style-default,
.preloader-style-spinner,
.loading-spinner,
.loading-bar,
.pace{ display:none !important; }

.elementor-invisible{ visibility:visible !important; opacity:1 !important; }
.animated,
.elementor-element.animated{ animation:none !important; }

.elementor-button:hover,
a img:hover,
.gridblock-grid-element img,
.gridblock-grid-element:hover img{
  transform:none !important;
  filter:none !important;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ==========================================================================
   08 — LAYOUT RHYTHM
   ========================================================================== */

/* Flush left, everywhere */
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content p, .hn-display,
.section-heading,
.section-heading .section-title-wrapper,
.section-heading .section-description,
.section-heading .section-button,
.section-heading h5{
  text-align:left !important;
}
.section-align-center .section-heading .section-description-inner,
.section-align-center .section-heading .section-description{
  margin-left:0 !important;
  margin-right:auto !important;
}

.section-heading .section-title-wrapper{ margin-bottom:var(--hn-m); }
.section-heading .section-title{ margin:0; padding:0; }
h5.section-sub-title{ margin:0 0 var(--hn-s); }

/* Blacksilver draws short lines either side of the eyebrow. Not part of the system. */
.section-heading h5.section-sub-title::before,
.section-heading h5.section-sub-title::after,
.headingstyle-subtitle h5::before,
.headingstyle-subtitle h5::after{ display:none !important; }

/* ==========================================================================
   09 — THEME MARKUP (Blacksilver 9.7). Confirm classes after theme updates.
   ========================================================================== */

/* --- 9a. Header: Bone ground, 2px Bluestone rule, no transparency, no shadow --- */

.outer-wrap.stickymenu-zone,
.header-type-overlay .outer-wrap.stickymenu-zone,
.stickymenu-active .outer-wrap.stickymenu-zone{
  background:var(--hn-bone) !important;
  border-bottom:var(--hn-rule-w) solid var(--hn-ink);
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Always the Bluestone wordmark on Bone; the Bone (reversed) mark is for dark grounds */
.outer-wrap .logo img.logo-theme-secondary,
.outer-wrap .logo img.logo-theme-bright{ display:none !important; }
.outer-wrap .logo img.logo-theme-primary,
.outer-wrap .logo img.logo-theme-dark{ display:block !important; opacity:1 !important; visibility:visible !important; }

/* Primary navigation — metadata voice, Stone → Bluestone on hover, rust rule on current */
.homemenu .sf-menu > li > a,
.header-type-overlay .homemenu .sf-menu > li > a,
.stickymenu-active .homemenu .sf-menu > li > a{
  font-family:var(--hn-font) !important;
  font-size:.6875rem !important;
  font-weight:500 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  color:var(--hn-meta) !important;
}
.homemenu .sf-menu > li > a:hover{ color:var(--hn-ink) !important; }
.homemenu .sf-menu > li.current-menu-item > a,
.homemenu .sf-menu > li.current_page_item > a{
  color:var(--hn-ink) !important;
  box-shadow:inset 0 -2px 0 var(--hn-rust) !important;
}
.homemenu .sf-menu > li > a::before,
.homemenu .sf-menu > li > a::after{ display:none !important; }

.social-header-wrap a,
.social-header-wrap i,
.header-type-overlay .social-header-wrap i{ color:var(--hn-ink) !important; }
.social-header-wrap a:hover i{ color:var(--hn-rust) !important; }

/* Hero sections were built to sit under a transparent header. With a solid header
   the extra top padding reads as a gap, so trim it on large screens. */
.header-type-overlay .page-contents-wrap > .elementor > .elementor-section:first-child{
  padding-top:calc(var(--hn-3xl) + 24px) !important;
}

/* --- 9b. Mobile bar and full-screen menu: Bitumen, flush left --- */

.mobile-menu-toggle{
  background:var(--hn-bitumen) !important;
  border-bottom:var(--hn-rule-w) solid var(--hn-bitumen);
}
.mobile-toggle-menu-trigger{ background:transparent !important; }
.mobile-toggle-menu-trigger span,
.mobile-toggle-menu-trigger span::before,
.mobile-toggle-menu-trigger span::after{ background-color:var(--hn-bone) !important; }
.mobile-toggle-menu-trigger span{ color:transparent !important; }
.mobile-toggle-menu-trigger span,
.mobile-toggle-menu-trigger span::before,
.mobile-toggle-menu-trigger span::after{ height:2px !important; }

.responsive-mobile-menu,
.responsive-menu-wrap,
.responsive-mobile-menu .dashboard-columns{
  background:var(--hn-bitumen) !important;
}
.responsive-mobile-menu,
.responsive-mobile-menu a,
.responsive-mobile-menu .mtree a{
  font-family:var(--hn-font) !important;
  color:var(--hn-bone) !important;
  text-align:left !important;
}
.responsive-mobile-menu .mtree > li > a{
  font-size:1.25rem !important;
  font-weight:700 !important;
  letter-spacing:-.01em !important;
  text-transform:none !important;
  padding-left:20px !important;
  padding-right:20px !important;
}
.responsive-mobile-menu .mtree li{ border-color:rgba(237,233,225,.14) !important; }
.responsive-mobile-menu .mtree > li.current-menu-item > a{ box-shadow:inset 3px 0 0 var(--hn-rust) !important; }
.responsive-mobile-menu .mobile-menu-social,
.responsive-mobile-menu .social-header-wrap{ text-align:left !important; padding-left:20px; }
.responsive-mobile-menu .social-header-wrap ul{ justify-content:flex-start !important; }
.responsive-mobile-menu .social-header-wrap i{ color:var(--hn-bone) !important; font-size:18px; }
.responsive-mobile-menu .social-header-wrap a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; min-height:44px;
}
#mobile-searchform input{
  background:transparent !important;
  border:var(--hn-rule-w) solid rgba(237,233,225,.4) !important;
  color:var(--hn-bone) !important;
  font-family:var(--hn-font) !important;
}

/* --- 9c. Footer: Bitumen field, flush left, metadata line --- */

.footer-outer-wrap,
.footer-container,
#copyright{
  background:var(--hn-bitumen) !important;
  color:var(--hn-concrete) !important;
}
#copyright.footer-container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--hn-m) var(--hn-l);
  max-width:none;
  padding:var(--hn-xl) var(--hn-gutter) !important;
  text-align:left !important;
}
#copyright .footer-logo{ margin:0 !important; padding:0 !important; line-height:0; }
#copyright .footer-logo img{ width:200px !important; max-width:60vw; height:auto; }
#copyright .horizontal-footer-copyright{
  margin:0 !important;
  padding:0 !important;
  font-family:var(--hn-font) !important;
  font-size:.6875rem !important;
  font-weight:500 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  line-height:1.8;
  color:var(--hn-stone) !important;
  text-align:left !important;
}
#copyright .horizontal-footer-copyright a{
  color:var(--hn-bone) !important;
  text-decoration:none;
  border-bottom:1px solid var(--hn-rust);
}
#copyright .horizontal-footer-copyright a:hover{ border-bottom-width:2px; }

/* Back-to-top ring: square, quiet */
.progress-wrap{
  border-radius:0 !important;
  box-shadow:inset 0 0 0 2px var(--hn-ink) !important;
  background:var(--hn-bone) !important;
}
.progress-wrap svg.progress-circle path{ stroke:var(--hn-rust) !important; }

/* --- 9d. Portfolio grid: no hover wash, no blur, uniform crops --- */

.has-effect-blur .gridblock-grid-element img,
.gridblock-grid-element:hover img{ filter:none !important; transform:none !important; }
.gridblock-background-hover{ background:transparent !important; }
.gridblock-grid-element:hover .gridblock-background-hover{ background:rgba(22,24,26,.72) !important; }
.boxtitle-hover .work-details h4{
  font-family:var(--hn-font) !important;
  font-weight:700 !important;
  font-size:1rem !important;
  letter-spacing:0 !important;
  color:var(--hn-bone) !important;
  text-align:left !important;
}
.boxtitle-hover .worktype-categories{ color:var(--hn-concrete) !important; text-align:left !important; }

#gridblock-filters .gridblock-filter-categories a{
  font-family:var(--hn-font) !important;
  font-size:.6875rem !important;
  font-weight:500 !important;
  letter-spacing:.18em !important;
  text-transform:uppercase;
  color:var(--hn-meta) !important;
  padding-bottom:6px;
}
#gridblock-filters .gridblock-filter-categories a:hover{ color:var(--hn-ink) !important; }
#gridblock-filters .gridblock-filter-categories .is-active a,
#gridblock-filters .gridblock-filter-categories a.is-active,
#gridblock-filters .gridblock-filter-categories li.active a{
  color:var(--hn-ink) !important;
  box-shadow:inset 0 -2px 0 var(--hn-rust) !important;
}
#gridblock-filters .filter-seperator{ display:none !important; }

/* Lightbox ground */
.lg-backdrop{ background:var(--hn-bitumen) !important; opacity:1 !important; }
.lg-outer .lg-sub-html{ font-family:var(--hn-font); color:var(--hn-bone); background:none !important; }

/* ==========================================================================
   10 — RESPONSIVE RHYTHM
   Section padding runs xl–3xl; gaps inside a section never exceed l.
   Elementor breakpoints: tablet ≤1024px, mobile ≤767px.
   ========================================================================== */

/* Images built as spacer-over-background never exceed a 4:5 portrait of the viewport width */
@media (max-width:1024px){
  .elementor-column .elementor-spacer-inner{
    height:min(var(--spacer-size), 80vw) !important;
  }
}
@media (max-width:767px){
  .elementor-column .elementor-spacer-inner{
    height:min(var(--spacer-size), 72vw) !important;
  }
}

/* Tablet */
@media (max-width:1024px){
  .header-type-overlay .page-contents-wrap > .elementor > .elementor-section:first-child{
    padding-top:var(--hn-2xl) !important;
    padding-bottom:var(--hn-xl) !important;
  }
  .page-contents-wrap .elementor-top-section > .elementor-container{
    padding-left:var(--hn-gutter);
    padding-right:var(--hn-gutter);
  }
}

/* Mobile */
@media (max-width:767px){

  body{ font-size:1rem; }
  .entry-content,
  .section-description,
  .section-description p,
  .entry-title-subheading p{ font-size:1rem; line-height:1.55; }

  /* Heading scale on phones: H1 30px, H2 21px — never larger than the H1 */
  h1, h1.section-title, .section-title h1{ font-size:1.875rem !important; line-height:1.06 !important; }
  h2, h2.section-title{ font-size:1.3125rem !important; line-height:1.14 !important; }
  h3{ font-size:1.0625rem !important; }
  .hn-display{ font-size:clamp(2.25rem, 11vw, 2.75rem) !important; }

  .section-heading .section-title-wrapper{ margin-bottom:var(--hn-s); }
  h5.section-sub-title{ margin-bottom:var(--hn-xs); }
  .section-button{ margin-top:var(--hn-m); }
  .entry-content p,
  .section-description p{ margin-bottom:var(--hn-s); }

  /* Page hero: one controlled block, not a desktop hero squeezed */
  .header-type-overlay .page-contents-wrap > .elementor > .elementor-section:first-child,
  .page-contents-wrap > .elementor > .elementor-section:first-child{
    padding-top:var(--hn-xl) !important;
    padding-bottom:var(--hn-xl) !important;
    min-height:0 !important;
  }
  .page-contents-wrap > .elementor > .elementor-section:first-child > .elementor-container{
    min-height:0 !important;
  }

  /* Every top-level section: gutters of 16px, padding from the scale */
  .page-contents-wrap .elementor-top-section > .elementor-container{
    padding-left:16px;
    padding-right:16px;
  }
  .page-contents-wrap .elementor-top-section .elementor-column > .elementor-widget-wrap,
  .page-contents-wrap .elementor-top-section .elementor-column > .elementor-column-wrap > .elementor-widget-wrap{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  /* Text columns in image/text splits keep a breathing band top and bottom */
  .page-contents-wrap .elementor-top-section .elementor-column:has(.elementor-widget-section-heading) > .elementor-widget-wrap,
  .page-contents-wrap .elementor-top-section .elementor-column:has(.elementor-widget-text-editor) > .elementor-widget-wrap{
    padding-top:var(--hn-l) !important;
    padding-bottom:var(--hn-l) !important;
  }
  /* Image columns are full bleed on phones */
  .page-contents-wrap .elementor-top-section > .elementor-container:has(> .elementor-column .elementor-widget-spacer){
    padding-left:0;
    padding-right:0;
  }
  .page-contents-wrap .elementor-top-section .elementor-column:has(.elementor-widget-spacer):has(.elementor-widget-section-heading, .elementor-widget-text-editor) > .elementor-widget-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }
  .page-contents-wrap .elementor-top-section .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-section-heading):not(:has(.elementor-widget-spacer)) > .elementor-widget-wrap{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  /* Widget stacks inside a column: gaps no larger than l */
  .elementor-widget:not(:last-child){ margin-bottom:var(--hn-m) !important; }

  /* Footer stacks, compact */
  #copyright.footer-container{
    flex-direction:column;
    align-items:flex-start;
    padding:var(--hn-l) 16px !important;
    gap:var(--hn-s);
  }
  #copyright .footer-logo img{ width:176px !important; }
  #copyright .horizontal-footer-copyright{ letter-spacing:.14em !important; }

  .progress-wrap{ right:16px !important; bottom:16px !important; }
}

/* Grid: two up on phones, 12px gutter — an index, not a scroll of full-width squares */
@media (max-width:767px){
  #gridblock-container.gridblock-three .gridblock-element,
  #gridblock-container.gridblock-two .gridblock-element,
  #gridblock-container.gridblock-four .gridblock-element{
    width:50% !important;
    padding:6px !important;
  }
  #gridblock-container{ margin-left:-6px !important; margin-right:-6px !important; }
  #gridblock-filters .gridblock-filter-categories{
    display:flex; flex-wrap:wrap; justify-content:flex-start; gap:var(--hn-2xs) var(--hn-s);
    padding:0 16px; text-align:left;
  }
  #gridblock-filters .gridblock-filter-categories li{ margin:0 !important; }
  #gridblock-filters .gridblock-filter-categories a{ display:inline-flex; min-height:44px; align-items:center; padding:0 !important; }
}

/* Never scroll sideways. clip (not hidden) so body does not become a scroll container. */
html,body{ overflow-x:clip; }