/* ================================================================
   APEC Fencing — WordPress additions.
   main.css is the untouched mockup stylesheet. Everything WordPress
   needs on top of it lives here: menu breakpoint fix, sub menus,
   logo image, blog, Gravity Forms, core WP classes.
   ================================================================ */

/* ---------- nav: the 7-link menu wraps between 1081 and ~1250px ---------- */
.nav__links{flex-wrap:nowrap}
.nav__links a{white-space:nowrap}
@media(max-width:1240px){
  .nav__links,.nav__phone{display:none}
  .burger{display:flex}
  .nav__cta .btn{display:none}
}

/* ---------- WP menu classes map to the mockup active state ---------- */
.nav__links .current-menu-item > a,
.nav__links .current-menu-ancestor > a,
.nav__links .current_page_parent > a{opacity:1;color:var(--brand);font-weight:600}
.mnav .current-menu-item > a,
.mnav .current-menu-ancestor > a{color:var(--accent)}

/* ---------- desktop sub menus ---------- */
.nav__links li{position:relative;display:flex;align-items:center;gap:2px}
.nav__links .sub-menu{
  position:absolute;top:100%;left:-18px;z-index:5;min-width:230px;
  list-style:none;margin:0;padding:8px 0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 18px 40px rgba(17,17,17,.12);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.nav__links li:hover > .sub-menu,
.nav__links li:focus-within > .sub-menu,
.nav__links li.is-open > .sub-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nav__links .sub-menu li{display:flex;align-items:center}
.nav__links .sub-menu li > a{flex:1}
.nav__links .sub-menu a{display:block;padding:10px 18px;font-size:.84rem;white-space:normal}
.nav__links .sub-menu .sub-menu{top:-9px;left:100%}
/* deeper levels open to the right and point right; at the right edge of the bar they open to the left */
.nav__links .sub-menu .sub-toggle{padding:8px 12px 8px 4px}
.nav__links .sub-menu .sub-toggle svg,
.nav__links .sub-menu .is-open > .sub-toggle svg{transform:rotate(-90deg)}
.nav__links > li:nth-last-child(-n+2) .sub-menu .sub-menu,
.nav__links .sub-menu .sub-menu.is-flipped{left:auto;right:100%}
.nav__links > li:nth-last-child(-n+2) .sub-menu .sub-toggle svg,
.nav__links > li:nth-last-child(-n+2) .sub-menu .is-open > .sub-toggle svg,
.nav__links .sub-menu li:has(> .sub-menu.is-flipped) > .sub-toggle svg{transform:rotate(90deg)}
.sub-toggle{
  display:inline-grid;place-items:center;background:none;border:0;cursor:pointer;
  color:inherit;padding:8px 4px;opacity:.7;transition:opacity .2s,transform .2s
}
.sub-toggle svg{width:12px;height:12px;transition:transform .2s}
.sub-toggle:hover{opacity:1}
.menu-item.is-open > .sub-toggle svg{transform:rotate(180deg)}

/* ---------- mobile menu list (same Primary menu) ---------- */
.mobile-menu nav .mnav{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.mobile-menu nav a{font-size:clamp(1.05rem,3.4vw,1.35rem)}
.mnav > li{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line-dark)}
.mnav > li > a{flex:1;border-bottom:0}
.mnav .sub-toggle{color:#fff;padding:12px 16px;opacity:.85}
.mnav .sub-toggle svg{width:18px;height:18px}
.mnav .sub-menu{flex-basis:100%;display:none;list-style:none;margin:0 0 12px;padding:0 0 0 18px}
.mnav li.is-open > .sub-menu{display:block}
.mnav .sub-menu li{display:flex;flex-wrap:wrap;align-items:center}
.mnav .sub-menu li > a{flex:1}
.mobile-menu nav .sub-menu a{
  font-family:var(--body);font-weight:500;font-size:1.05rem;text-transform:none;letter-spacing:0;
  padding:10px 0;border-bottom:0;color:var(--muted-2)
}
.mobile-menu nav .sub-menu a:hover{color:#fff}

/* ---------- uploaded logos (Customize > Site Identity) ----------
   Exported at 3x. Widths equal the mockup lockup widths (header 207/168px, footer 360px,
   mobile menu = footer logo with a 42px mark); height follows the aspect ratio and
   max-width:100% shrinks the logo proportionally on very narrow screens. */
.lock--img{max-width:100%;min-width:0}
.lock--img img{display:block;width:207px;max-width:100%;height:auto;transition:width .3s ease}
.nav--solid .lock--img img{width:168px}
.lock--light.lock--img img{width:235px}
.lock--lg.lock--img img{width:360px}
@media(max-width:620px){.lock--img img{width:168px}.lock--light.lock--img img{width:189px}.lock--lg.lock--img img{width:360px}}
.nav__brand{min-width:0}

/* ---------- team photo when supplied ---------- */
.member__photo.has-img{border:0;display:block}
.member__photo.has-img img{width:100%;height:100%;object-fit:cover}

/* ---------- narrow text container (privacy, posts) ---------- */
.container--narrow{max-width:calc(70ch + var(--gutter) * 2)}

/* ---------- blog ---------- */
.phero--post h1{font-size:clamp(1.7rem,4.4vw,3.6rem)}
.post-card .imgwrap{display:block}
.post-card h3 a:hover{color:var(--brand)}
.post-card__excerpt{margin:16px 0 0}
.entry__meta{margin:0 0 1.6rem}
.entry__tags{margin-top:34px}

.entry{font-size:inherit}
.entry{overflow-wrap:break-word}
.entry > *{margin:0 0 1.2rem}
.entry > *:first-child,.entry > h2:first-child,.entry > h3:first-child{margin-top:0}
.entry > *:last-child{margin-bottom:0}
.entry h2,.entry h3,.entry h4{font-family:var(--display);font-weight:800;text-transform:uppercase;line-height:1.1;letter-spacing:-.01em;margin:2.2rem 0 .9rem}
.entry h2{font-size:clamp(1.5rem,3vw,2.2rem)}
.entry h3{font-size:clamp(1.25rem,2.4vw,1.7rem)}
.entry h4{font-size:1.1rem}
.entry a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.entry a:hover{color:var(--brand-600)}
.entry ul,.entry ol{padding-left:1.3em}
.entry li{margin-bottom:.4em}
.entry blockquote{margin:1.8rem 0;padding:4px 0 4px 22px;border-left:3px solid var(--brand);font-family:var(--display);font-size:1.25rem;line-height:1.4;color:var(--muted)}
.entry blockquote p{margin:0}
.entry img{height:auto;border-radius:var(--r)}
.entry figure{margin:1.8rem 0}
.entry figcaption,.wp-caption-text,.wp-element-caption{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--muted);margin-top:10px}
.entry hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.entry table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:.95rem}
.entry th,.entry td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.entry th{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.entry pre{background:var(--ink);color:var(--paper);padding:18px 20px;border-radius:var(--r);overflow:auto;font-size:.9rem}
.entry code{background:var(--paper-2);padding:.1em .35em;border-radius:3px;font-size:.92em}
.entry pre code{background:none;padding:0}
.entry .wp-block-button__link{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:var(--brand);color:#fff;border-radius:var(--r);padding:15px 26px;text-decoration:none}
.entry .wp-block-button__link:hover{background:var(--brand-600);color:#fff}
.entry .wp-block-embed iframe{max-width:100%}
.alignwide{margin-inline:calc(50% - min(var(--maxw),100vw - var(--gutter) * 2) / 2);max-width:none;width:min(var(--maxw),100vw - var(--gutter) * 2)}
.alignfull{margin-inline:calc(50% - 50vw);max-width:100vw;width:100vw}
.alignleft{float:left;margin:4px 24px 16px 0}
.alignright{float:right;margin:4px 0 16px 24px}
.aligncenter{display:block;margin-inline:auto}
.wp-caption{max-width:100%}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;word-wrap:normal!important}
.screen-reader-text:focus{clip:auto;clip-path:none;width:auto;height:auto;left:0;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 20px}
.sticky .proj__tag::after{content:" · Featured"}
.bypostauthor .comment-author::after{content:" (author)";font-size:.8em;color:var(--muted)}
.gallery-caption{font-family:var(--mono);font-size:.72rem;color:var(--muted)}

/* pagination + post navigation */
.pagination{margin-top:clamp(28px,3.4vw,44px)}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-width:46px;min-height:46px;padding:0 16px;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:var(--r);color:var(--ink);transition:background .2s,color .2s
}
.pagination .page-numbers svg{width:14px;height:14px}
.pagination .page-numbers:hover,.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .page-numbers.dots{border:0;min-width:0}
.pagination .screen-reader-text{display:none}
.postnav{margin-top:clamp(34px,4vw,54px);border-top:1px solid var(--line)}
.postnav .nav-links{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line)}
.postnav .nav-links > *{background:var(--paper);padding:22px 0}
.postnav .nav-next{text-align:right}
.postnav a{display:flex;flex-direction:column;gap:6px}
.postnav .fh{margin:0}
.postnav__title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:1.05rem;line-height:1.15;transition:color .2s}
.postnav a:hover .postnav__title{color:var(--brand)}
@media(max-width:560px){.postnav .nav-links{grid-template-columns:1fr}.postnav .nav-next{text-align:left}}

/* comments (blog only) */
.comments{padding-block:var(--sp);border-top:1px solid var(--line)}
.comment-list{list-style:none;margin:0 0 30px;padding:0}
.comment-list .comment{padding:20px 0;border-bottom:1px solid var(--line)}
.comment-list .children{list-style:none;margin:0;padding-left:24px}
.comment-author{font-family:var(--mono);font-size:.8rem;font-weight:600;display:flex;align-items:center;gap:10px}
.comment-author img{border-radius:100px}
.comment-metadata{font-family:var(--mono);font-size:.7rem;color:var(--muted);letter-spacing:.06em}
.comment-content p{margin:.6rem 0 0}
.comment-reply-link{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.comment-form{display:grid;gap:18px}
.comment-form label{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:8px}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{
  width:100%;font-family:var(--body);font-size:1rem;padding:14px 16px;min-height:52px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--ink)
}
.comment-form .comment-form-cookies-consent label{display:inline;text-transform:none;letter-spacing:0}

/* search form */
.searchform__row{display:flex;gap:10px;flex-wrap:wrap}
.searchform__row input{flex:1;min-width:200px}

/* ---------- Gravity Forms: match the mockup form ---------- */
.form--gf .gform_wrapper .gform_heading{display:none}
.form--gf .gform_wrapper .gform_fields{row-gap:18px}
.form--gf .gform_wrapper .gfield_label,
.form--gf .gform_wrapper legend.gfield_label,
.form--gf .gform_wrapper .gfield_label_before_complex{
  font-family:var(--mono)!important;font-size:.7rem!important;font-weight:600!important;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)!important;margin-bottom:8px
}
.form--gf .gform_wrapper .gfield_required{color:var(--brand)!important;padding-left:2px}
.form--gf .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.form--gf .gform_wrapper textarea,
.form--gf .gform_wrapper select{
  font-family:var(--body)!important;font-size:1rem!important;padding:14px 16px!important;min-height:52px;width:100%;
  border:1px solid var(--line)!important;border-radius:var(--r)!important;background:var(--white)!important;color:var(--ink)!important;
  box-shadow:none;transition:border .2s,box-shadow .2s
}
.form--gf .gform_wrapper input:focus,.form--gf .gform_wrapper textarea:focus,.form--gf .gform_wrapper select:focus{
  outline:none;border-color:var(--brand)!important;box-shadow:0 0 0 3px var(--brand-tint)!important
}
.form--gf .gform_wrapper textarea{resize:vertical;min-height:120px!important}
.form--gf .gform_wrapper .gfield_description{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.6;padding-top:6px}
.form--gf .gform_wrapper .gform_footer{margin:4px 0 0;padding:0}
.form--gf .gform_wrapper .gform_validation_errors{
  background:var(--brand-tint);border:0;border-left:3px solid #A8341F;border-radius:0 var(--r) var(--r) 0;
  padding:14px 18px;box-shadow:none;margin-bottom:18px
}
.form--gf .gform_wrapper .gform_validation_errors h2{font-family:var(--mono);font-size:.85rem;font-weight:600;margin:0}
.form--gf .gform_wrapper .gfield_error input,.form--gf .gform_wrapper .gfield_error textarea,.form--gf .gform_wrapper .gfield_error select{border-color:#A8341F!important}
.form--gf .gform_wrapper .validation_message,.form--gf .gform_wrapper .gfield_validation_message{
  font-family:var(--mono);font-size:.72rem;color:#A8341F;background:none;border:0;padding:6px 0 0;margin:0
}
.form--gf .gform_wrapper .gform_required_legend{display:none}
.form--gf .gform_wrapper .gfield_checkbox label,.form--gf .gform_wrapper .gfield_radio label{font-family:var(--body);font-size:.95rem;text-transform:none;letter-spacing:0;color:var(--ink)}
.formmsg.ok a{display:inline-block;padding-block:4px}

/* --- Gravity Forms 2.9 "Orbital" overrides: match the mockup .field / .btn exactly --- */
.form--gf .gform_wrapper.gform-theme--framework{--gf-ctrl-btn-bg-color-primary:var(--brand);--gf-ctrl-btn-bg-color-hover-primary:var(--brand-600)}
/* the asterisk itself is Gravity Forms' own "Required field indicator: Asterisk"; its inner span only inherits the outer style */
.form--gf .gform_wrapper .gfield_required .gfield_required{font:inherit;padding:0;margin:0}
.form--gf .gform_wrapper .gfield_label{display:block}
.form--gf .gform_wrapper input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.form--gf .gform_wrapper select{line-height:1.3!important;height:auto!important;min-height:52px!important}
.form--gf .gform_wrapper textarea{line-height:1.5!important}
.form--gf .gform_wrapper select{
  -webkit-appearance:menulist!important;-moz-appearance:menulist!important;appearance:menulist!important;
  background-image:none!important;padding-block:14px!important;cursor:pointer
}
.form--gf .gform_wrapper .gform_footer,
.form--gf .gform_wrapper .gform_page_footer{display:block!important;margin:18px 0 0!important;padding:0!important}
.form--gf .gform_wrapper .gform_footer .gform_button.btn,
.form--gf .gform_wrapper .gform_footer button.btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:.65em;width:100%!important;
  min-height:56px!important;padding:18px 32px!important;margin:0!important;
  font-family:var(--mono)!important;font-size:.82rem!important;font-weight:500!important;
  letter-spacing:.12em!important;text-transform:uppercase!important;line-height:1.62!important;
  background:var(--brand)!important;color:#fff!important;border:1px solid var(--brand)!important;border-radius:var(--r)!important;
  box-shadow:none!important;cursor:pointer;
  transition:transform .25s ease,background .25s ease,border-color .25s ease
}
.form--gf .gform_wrapper .gform_footer .gform_button.btn:hover{background:var(--brand-600)!important;border-color:var(--brand-600)!important;transform:translateY(-2px)}
.form--gf .gform_wrapper .gform_footer .gform_button.btn svg{width:15px;height:15px;flex:0 0 auto;transition:transform .25s ease}
.form--gf .gform_wrapper .gform_footer .gform_button.btn:hover svg{transform:translateX(3px)}
.form--gf .gform_wrapper .gform_ajax_spinner{display:none}
iframe.gform_ajax_frame{display:none;width:0;height:0}
/* reCAPTCHA is a fixed 304px widget: on very narrow screens it is scaled down to the width of its field (unchanged from 360px up) */
.form--gf .gfield--type-captcha{container-type:inline-size}
.form--gf .gfield--type-captcha .ginput_recaptcha{--rc:min(1,tan(atan2(100cqi,304px)));transform:scale(var(--rc));transform-origin:0 0;margin-bottom:calc(-78px*(1 - var(--rc)))}

.apec-admin-note{color:#A8341F}

/* ---------- Coming soon / admin bar offset ---------- */
body.admin-bar .topbar{top:32px}
@media(max-width:782px){body.admin-bar .topbar{top:46px}}
body.admin-bar .mobile-menu{top:32px}
@media(max-width:782px){body.admin-bar .mobile-menu{top:46px}}
/* Logged-in admins only: below 600px WordPress lets the admin bar scroll away, which left a gap above the fixed header. Keeping the bar fixed keeps the 46px offsets above correct. */
@media(max-width:600px){body.admin-bar #wpadminbar{position:fixed}}

/* ---------- Layout classes (templates carry no inline styles) ---------- */

/* scroll lock while the mobile menu or the lightbox is open (set by app.js) */
body.no-scroll{overflow:hidden}

/* hero photos are <img> elements that cover their section */
.hero__bg,.phero__bg{object-fit:cover;object-position:center}
.phero__bg{width:100%;height:100%}

/* row of buttons */
.btnrow{display:flex;flex-wrap:wrap;gap:14px}
.btnrow--hero{margin-top:2.2rem}

/* section head: intro column sits on the bottom line of the heading */
.sechead__intro{align-self:end}

/* headings sized per context (stronger than h2.display / h3.display) */
.display.display--feature{font-size:clamp(1.3rem,2.4vw,1.9rem)}
.display.display--build{font-size:clamp(1.4rem,2.6vw,2.1rem)}
.display.display--panel{font-size:clamp(1.4rem,2.6vw,2rem)}
.display.display--form{font-size:clamp(1.5rem,3vw,2.2rem);margin-bottom:16px}
.display.display--faq{font-size:clamp(1.5rem,3vw,2.3rem);margin-bottom:24px}

/* spacing above a block */
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.mt-22{margin-top:22px}
.mt-24{margin-top:24px}
.mt-26{margin-top:26px}
.mt-28{margin-top:28px}
.mt-30{margin-top:30px}
.mt-34{margin-top:34px}

/* paragraph right after a heading */
.lead-in{margin:18px 0 0}
.lead-in--tight{margin:16px 0 0}

/* small print under a feature list */
.footnote{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--line)}

/* two column grid without the hairline background, with its own gap */
.grid--open{background:transparent}
.grid--gap-24{gap:24px}
.grid--gap-28{gap:28px}
.grid--gap-md{gap:clamp(24px,3vw,44px)}
.grid--gap-lg{gap:clamp(28px,4vw,60px)}

/* spec sheet, service card grid */
.spec--spaced{margin-bottom:clamp(34px,4vw,54px)}
.svcwrap{border-block:1px solid var(--line)}
.svcwrap--spaced{margin-top:clamp(30px,4vw,48px)}

/* price card on the dark section */
.pricecard.pricecard--raised{background:var(--ink-2)}
.eyebrow.eyebrow--tight{margin-bottom:1rem}
.eyebrow.eyebrow--group{margin-top:56px}

/* containers */
.container.container--narrow{max-width:1000px}
.container.container--areas{margin-top:clamp(34px,4vw,54px)}
.section.section--flush-bottom{padding-bottom:0}

/* service areas: suburb lists */
.areas__region{font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.taglist.taglist--flush{margin:0}

/* contact page */
.form-intro{margin:0 0 30px;max-width:52ch}
.cinfo{container-type:inline-size}
/* all four cards share one fluid size, so the email fits its card on one line on desktop */
.cinfo a,.cinfo p{font-size:max(.9rem,min(1.02rem,7.3cqi))}

/* faq question heading wraps the button */
.faq__h{margin:0}

/* call to action band */
.ctaband__text{max-width:48ch;margin:16px 0 0;color:rgba(255,255,255,.92)}
.ctaband__actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}

/* footer */
.footer__logo{display:block;width:fit-content;max-width:100%}
.footer__brand .footer__extra{margin-top:16px}
.footer__owner{font-size:.8rem}

/* blog search field */
.post-search{max-width:520px;margin-top:20px}

/* Customizer preview only: keep the edit pencil of the full-width band on screen */
.ctaband .customize-partial-edit-shortcut button{left:12px;top:12px}

/* ---------- Back to top (first item of the floating dock) ----------
   Dark disc with a gold ring and gold arrow: the disc stands out on the light
   sections, the ring on the dark footer and dark sections, so it never blends in. */
.dock .totop{
  align-self:flex-end;margin-right:4px;width:48px;height:48px;padding:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:var(--ink);color:var(--accent);border:2px solid var(--accent);
  box-shadow:0 10px 30px rgba(17,17,17,.3);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s,background .25s ease,color .25s ease
}
.dock .totop.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.dock .totop svg{width:20px;height:20px}
.dock .totop:hover{background:var(--accent);color:var(--ink)}
.dock .totop.is-visible:hover{transform:translateY(-2px)}
.dock .totop:focus-visible{outline:3px solid var(--paper);outline-offset:2px;box-shadow:0 0 0 6px var(--ink),0 10px 30px rgba(17,17,17,.3)}
@media (prefers-reduced-motion:reduce){.dock .totop{transition:none;transform:none}}

/* ---------- Count-up numbers (app.js) ----------
   While the number runs, the running value is shown and the final value is kept for screen readers only. */
.count.is-counting .count__end{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}