/* MGH theme – small additions needed by the WordPress version (forms, states, accessibility, generic pages). */

/* Elements toggled by the script must really hide even when they carry inline display styles. */
.mgh-lead[hidden],.mgh-lead-ok[hidden],.mgh-form-error[hidden],.mgh-nl-msg[hidden]{display:none!important}

/* Honeypot field (spam protection) */
.mgh-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none}

/* Flip cards: keep the card flipped while a link inside it has keyboard focus */
.flip:focus-within .flip-in,.x-flip:focus-within .x-flip-in,.tm-flip:focus-within .tm-in{transform:rotateY(180deg)}
[dir=rtl] div.flip,[dir=rtl] div.x-flip,[dir=rtl] div.tm-flip{text-align:right!important}
/* These cards were <button> elements in the design: keep the button text metrics */
div.flip,div.x-flip,div.tm-flip{line-height:normal;font-size:13.3333px;display:inline-block;outline-offset:4px}
.svc-track > div.flip,.ab-team-run > div.x-flip{display:block}

/* Pagination arrows / buttons when there is no page to go to */
.is-disabled{cursor:default!important;pointer-events:none}
a.pf-page,a.tm-page,a.ex-pg,a.pf-chip,a.sx-tab{text-decoration:none}
/* These were <button>s in the design: buttons size their border inside the given height */
a.pf-chip,a.sx-tab,a.ex-pg,a.pf-page,a.tm-page,span.tm-page,a.pf-arrow,span.pf-arrow{box-sizing:border-box}
a.pf-arrow,span.pf-arrow,a.ex-nav,span.ex-nav{text-decoration:none}

/* Hero "Recent work" box: animate with transforms only so the box never changes size on hover
   (changing margins made it resize/wrap under the cursor and flicker). */
.h-recent{will-change:transform}
.h-recent:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px}
.h-recent img,.h-recent span[aria-hidden]{transition:transform .3s ease!important}
.h-recent:hover img{margin-left:-34px!important}
.h-recent:hover img:first-child{margin-left:0!important;transform:rotate(0deg) translateX(-6px)!important}
.h-recent:hover img:nth-child(2){transform:translateX(0)!important}
.h-recent:hover img:nth-child(3){transform:rotate(0deg) translateX(6px)!important}
.h-recent:hover span[aria-hidden]{transform:translateX(6px)}
[dir=rtl] .h-recent:hover img:first-child{transform:rotate(0deg) translateX(6px)!important}
[dir=rtl] .h-recent:hover img:nth-child(3){transform:rotate(0deg) translateX(-6px)!important}
[dir=rtl] .h-recent:hover span[aria-hidden]{transform:translateX(-6px)}

/* Form messages */
.mgh-form-error{margin:0;padding:12px 16px;border-radius:12px;background:#FDECEC;color:#8A1C1C;font-size:14px;font-weight:600}
.mgh-nl-msg{margin:0;font-size:13px;font-weight:600}
.mgh-nl-msg.is-ok{color:#ECC951}
.mgh-nl-msg.is-err{color:#F3A6A6}
.mgh-lead button[disabled],.mgh-nl button[disabled]{opacity:.7;cursor:wait}

/* Links inside contact cards keep the card colours */
.ct-d a{color:inherit}

/* Generic pages (Privacy Policy, Terms, blog…) */
.mgh-content{color:#003366;font-size:16px;line-height:1.75}
.mgh-content > *{max-width:860px}
.mgh-content h2,.mgh-content h3,.mgh-content h4{line-height:1.25;margin:1.6em 0 .6em;font-weight:800}
.mgh-content h2{font-size:30px;letter-spacing:-.5px}
.mgh-content h3{font-size:22px}
.mgh-content p,.mgh-content ul,.mgh-content ol{margin:0 0 1.1em}
.mgh-content a{color:#003366;text-decoration:underline;text-decoration-color:#ECC951;text-underline-offset:3px}
.mgh-content img{max-width:100%;height:auto}
.mgh-content blockquote{margin:1.4em 0;padding:16px 22px;border-left:4px solid #ECC951;background:#F7F9FC;border-radius:12px}
[dir=rtl] .mgh-content blockquote{border-left:0;border-right:4px solid #ECC951}
.mgh-list .mgh-list-item{margin-bottom:18px}
.mgh-list .mgh-list-item a{text-decoration:none}
.mgh-content .nav-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.mgh-content .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 12px;border-radius:999px;border:1.5px solid #D5DEE8;text-decoration:none;font-weight:800;box-sizing:border-box}
.mgh-content .page-numbers.current{background:#ECC951;border-color:#ECC951}

/* Screen-reader text (WordPress core class) */
.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}

/* Anchored sections (e.g. /about/#projects) land with a little breathing room */
#projects,#explorer,#team,#contact-form{scroll-margin-top:24px}

/* Inner-page heroes: the moving keyword strip follows the hero content directly
   (no forced full-screen height, no big empty gap above the strip). */
.hero-fit{min-height:0!important}
.hero-fit>section{margin-top:104px!important;margin-bottom:0!important}
@media (min-width:641px) and (max-width:899px){.hero-fit>section{margin-top:168px!important}}
@media (max-width:640px){.hero-fit>section{margin-top:160px!important}}
@media (min-width:641px){
.hero-fit>section:not([style*="24px 0;"]){padding-bottom:64px!important}
}

/* Fluent Forms – contact consultation form */
.mgh-ff .frm-fluent-form .ff-el-group{margin-bottom:16px}
.mgh-ff .frm-fluent-form .ff-t-container{gap:16px}
.mgh-ff .frm-fluent-form .ff-el-input--label label{font-size:13px;font-weight:700;color:#003366}
.mgh-ff .frm-fluent-form .ff-el-form-control{height:48px;box-sizing:border-box;border:1px solid #B7C3D0;border-radius:12px;padding:0 14px;font-family:inherit;font-size:15px;color:#003366;background:#fff;box-shadow:none}
.mgh-ff .frm-fluent-form textarea.ff-el-form-control{height:auto;padding:12px 14px;resize:vertical}
.mgh-ff .frm-fluent-form .ff-el-form-control:focus{border-color:#003366;outline:0;box-shadow:0 0 0 3px rgba(236,201,81,.35)}
.mgh-ff .frm-fluent-form .ff-btn-submit{width:100%;height:54px;border:0;border-radius:999px;background:#ECC951;color:#003366;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer}
.mgh-ff .frm-fluent-form .ff-btn-submit:hover{background:#E3BC38;color:#003366}
.mgh-ff .ff-message-success{border:0;border-radius:16px;background:#FBF3D3;color:#003366;box-shadow:none;padding:24px;font-size:16px;font-weight:700}
.mgh-ff .text-danger{font-size:13px}

/* The WordPress admin bar (logged-in users only) sits above the fixed site header. */
body.admin-bar header{top:32px}
@media (max-width:782px){body.admin-bar header{top:46px}}

/* Footer: subtle dotted pattern with a soft golden glow */
.mgh-footer{background-image:radial-gradient(circle at 85% 0%,rgba(236,201,81,.14),transparent 45%),radial-gradient(circle at 0% 100%,rgba(79,100,123,.25),transparent 40%),radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:auto,auto,22px 22px}