/*
Theme Name:   MLT (Blocksy Child)
Theme URI:    https://www.multilingual-tech.com/
Description:  Code-first child theme for the MultiLingual Technologies website rebuild - replaces the Elementor build with hand-coded templates and a scoped design system. Reuses the MLT Academy design language, extended for corporate + product/app page types.
Author:       MultiLingual Technologies
Template:     blocksy
Version:      0.1.0
License:      GNU General Public License v2 or later
Text Domain:  mlt
*/

/* ===============================================================
   DESIGN SYSTEM - shared with MLT Academy (astra-child), extended
   here for the corporate site's product/app and solution pages.
   Self-hosted Inter/Sora @font-face are added next (font files
   copied from Academy) so we don't hit Google Fonts.
   =============================================================== */
:root {
	/* Brand blues - sampled from the MLT logo */
	--mlt-blue-50:  #E9F6FD;
	--mlt-blue-100: #D4EEFC;
	--mlt-sky:      #53BEEA;
	--mlt-blue:     #1668CC;
	--mlt-blue-700: #1259AE;
	--mlt-blue-900: #143A6B;

	/* Orange accent - CTA + key accents only */
	--mlt-orange:     #F97316;
	--mlt-orange-600: #E8650D;
	--mlt-orange-700: #C2510D;

	/* Neutrals */
	--mlt-white:    #FFFFFF;
	--mlt-bg:       #FCFBF8;
	--mlt-bg-tint:  #F1F7FB;
	--mlt-band-blue: #DBEAFB;
	--mlt-band-line: rgba(22, 104, 204, 0.13);
	--mlt-ink:      #16202B;
	--mlt-ink-soft: #4A5A6A;
	--mlt-line:     #E2E9F0;

	/* Typography */
	--mlt-font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--mlt-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mlt-h1:   clamp(2rem, 1.35rem + 2.9vw, 3.25rem);
	--mlt-h2:   clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem);
	--mlt-h3:   clamp(1.2rem, 1.07rem + 0.6vw, 1.5rem);
	--mlt-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

	/* Spacing scale */
	--mlt-s1: 0.5rem;  --mlt-s2: 1rem;   --mlt-s3: 1.5rem;
	--mlt-s4: 2rem;    --mlt-s5: 3rem;   --mlt-s6: 4rem;

	/* Layout */
	--mlt-container: 1180px;
	--mlt-container-narrow: 820px;
	--mlt-container-wide: 1320px;   /* NEW: wider product/app showcases */
	--mlt-radius: 14px;
	--mlt-radius-sm: 10px;
	--mlt-radius-lg: 22px;          /* NEW: larger product-card radius */
	--mlt-shadow:    0 10px 30px rgba(16, 78, 138, 0.08);
	--mlt-shadow-lg: 0 24px 60px rgba(16, 78, 138, 0.16);
	--mlt-section-y: clamp(3rem, 2rem + 5vw, 6rem);
}

/* Section styles, header/footer, and page-type components are built
   here as the rebuild progresses (see REBUILD-PLAN.md for sequence). */

/* Blocksy sets body{overflow-x:hidden}, which turns body into a scroll container and breaks our full-bleed templates' sticky header. clip contains overflow WITHOUT creating a scroll container, restoring position:sticky. */
html,body{overflow-x:clip !important}
/* keep our sticky header sticky regardless of parent-theme / plugin CSS still on the page */
.header{position:-webkit-sticky;position:sticky !important;top:0}

/* When logged in, the fixed WP admin bar covers a top:0 sticky header. Offset it below the bar so it stays visible (front-end/logged-out is unaffected). */
body.admin-bar .header{top:32px}
@media screen and (max-width:782px){body.admin-bar .header{top:46px}}

/* ===== accessibility hardening (WCAG 2.2 AA) - site-wide ===== */
:focus-visible{outline:3px solid #F97316;outline-offset:2px;border-radius:3px}
:focus:not(:focus-visible){outline:none}
html{scroll-padding-top:96px} /* sticky header: anchor jumps + SC 2.4.11 focus-not-obscured */
.util a{min-height:24px;display:inline-flex;align-items:center;gap:6px} /* SC 2.5.8 target size */
.footer-col a,.footer-bot a{display:inline-block;padding-block:3px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===== self-hosted fonts (WOFF2, latin subset) ===== */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/inter-latin-var.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:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url('assets/fonts/sora-latin-var.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;}

/* ===== skip link (WCAG 2.4.1 bypass blocks) ===== */
.skip-link{position:absolute;left:8px;top:-52px;z-index:9999;background:#143A6B;color:#fff;padding:10px 16px;border-radius:8px;font-weight:700;text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:8px}
main:focus{outline:none}

/* image slots: a loaded image covers its placeholder label */
.img-slot > img{z-index:2}

/* real MLT logo image (replaces the inline-SVG approximation) */
.logo .logo-img{height:52px;width:auto;display:block}
.header .logo .logo-img{height:52px}
.footer .logo .logo-img{height:48px}
@media(max-width:640px){.logo .logo-img{height:44px}}
/* mobile header: keep the logo proportional (never flex-crunched) + fit the row on small phones */
.header .logo{flex:0 0 auto}
.header .logo-img{flex:none;max-width:none}
@media(max-width:560px){.header .wrap{gap:12px !important}}
@media(max-width:380px){.header .logo .logo-img{height:40px}}
/* on phones the header "Get a Quote" is redundant (it's in the drawer + hero + sticky CTA) and it crowds the logo; drop it so the logo sits full-size */
@media(max-width:600px){.header .header-cta .btn-primary{display:none}}
/* Client Login shown in the mobile drawer (secondary button) */
.mobile-nav .btn-login{background:#fff;color:#143A6B;border:1px solid #d9e2ec;margin-top:14px}
.mobile-nav .btn-login:hover{border-color:#53BEEA}

/* Light-hero pages (generic content, blog): keep the header in its readable/solid
   state at the top too, since there's no dark hero behind it. Higher specificity than
   the per-page `.header:not(.solid)` rules, so it wins regardless of the scroll toggle. */
body.hdr-solid .header{background:rgba(252,251,248,.92);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
body.hdr-solid .header .nav-link{color:var(--ink)}
body.hdr-solid .header .nav-link:hover{background:var(--blue-50);color:var(--blue)}
body.hdr-solid .header .hamburger{background:#fff;border-color:var(--line)}
body.hdr-solid .header .hamburger svg{stroke:var(--blue-900)}

/* Gravity Forms restyled to the MLT design (contact, upload, feedback, incident) */
.gform_wrapper form{max-width:660px}
.gform_wrapper .gform_fields{display:grid;gap:18px}
.gform_wrapper .gfield_label,.gform_wrapper legend.gfield_label{font-weight:600;font-size:.9rem;color:#143A6B;margin-bottom:6px;display:block}
.gform_wrapper .ginput_container input[type=text],.gform_wrapper .ginput_container input[type=email],
.gform_wrapper .ginput_container input[type=tel],.gform_wrapper .ginput_container input[type=number],
.gform_wrapper .ginput_container input[type=date],.gform_wrapper .ginput_container input[type=url],
.gform_wrapper .ginput_container select,.gform_wrapper .ginput_container textarea,
.gform_wrapper input.large,.gform_wrapper input.medium,.gform_wrapper select.large,.gform_wrapper textarea.textarea{
  width:100%;padding:12px 14px !important;border:1px solid #d6e0ea !important;border-radius:10px !important;
  font:inherit;font-size:1rem;color:#16202B;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.gform_wrapper .ginput_container input:focus,.gform_wrapper .ginput_container select:focus,.gform_wrapper .ginput_container textarea:focus{
  outline:none;border-color:#1668CC !important;box-shadow:0 0 0 3px rgba(22,104,204,.15)}
.gform_wrapper textarea{min-height:130px;resize:vertical}
.gform_wrapper .ginput_container_fileupload input[type=file]{padding:11px !important;border:1px dashed #c3d2e0 !important;background:#f7fafd;border-radius:10px}
.gform_wrapper .gfield_required{color:#F97316}
.gform_wrapper .gform_footer{margin-top:22px;padding:0}
.gform_wrapper .gform_button,.gform_wrapper input[type=submit],.gform_wrapper button.gform_button{
  background:#F97316 !important;color:#fff !important;border:0 !important;border-radius:12px !important;
  padding:.9em 1.9em !important;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:0 8px 22px rgba(249,115,22,.34);transition:background .2s,transform .16s}
.gform_wrapper .gform_button:hover,.gform_wrapper input[type=submit]:hover{background:#ea580c !important;transform:translateY(-2px)}
.gform_wrapper .gform_validation_errors{border-radius:10px}
.gform_wrapper .validation_message,.gform_wrapper .gfield_validation_message{color:#c0392b;font-size:.85rem}

/* utility-page form fallback (upload / feedback before Gravity Forms is wired) */
.mlt-form-fallback{display:flex;align-items:center;gap:14px;background:var(--mlt-blue-50,#E9F6FD);border:1px solid #d6e4f6;border-radius:14px;padding:20px 22px;margin:8px 0 28px;color:var(--mlt-blue-900,#143A6B)}
.mlt-form-fallback svg{flex:none;color:#1668CC}
.mlt-form-fallback p{margin:0;font-weight:600;font-size:.98rem}
.btn-pay{font-size:1.05rem;padding:.95em 1.9em}

/* footer social icons */
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social a{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);transition:background .2s,transform .2s,border-color .2s}
.footer-social a:hover{background:#1668CC;border-color:#1668CC;transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px;fill:#cfe0f5;transition:fill .2s}
.footer-social a:hover svg{fill:#fff}