:root{
  --mgu-navy:#123653;
  --mgu-blue:#247fc1;
  --mgu-blue-dark:#176aa6;
  --mgu-line:#d7e8f3;
  --mgu-text:#173d5d;
  --mgu-muted:#71899c;
}

/* =========================================================
   SAFE GLOBAL NORMALIZATION
   Never hide page content. Never replace WP templates.
   ========================================================= */
html,body{width:100%;max-width:none;margin:0;padding:0;overflow-x:hidden}
body.mgu-global-site{background:#fff;color:var(--mgu-text);font-family:Arial,Helvetica,sans-serif}
body.mgu-global-site *{box-sizing:border-box}
body.mgu-global-site img{max-width:100%;height:auto}
body.mgu-global-site a{transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease}

/* Make the WordPress shell full-width without changing the actual content. */
body.mgu-global-page .wp-site-blocks,
body.mgu-global-page .wp-site-blocks main,
body.mgu-global-page main,
body.mgu-global-page .site-main,
body.mgu-global-page .entry-content,
body.mgu-global-page .wp-block-post-content{
  width:100%;
  max-width:none;
}

/* Keep content readable when a page does not have its own container. */
body.mgu-global-page .wp-block-post-content > .wp-block-group.alignwide,
body.mgu-global-page .wp-block-post-content > .wp-block-columns.alignwide,
body.mgu-global-page .entry-content > .wp-block-group.alignwide,
body.mgu-global-page .entry-content > .wp-block-columns.alignwide{
  width:min(1480px,calc(100% - 64px));
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Standard Gutenberg buttons. */
body.mgu-global-page .wp-block-button__link{
  border-radius:14px!important;
  background:#247fc1!important;
  color:#fff!important;
  padding:14px 23px!important;
  font-weight:700!important;
  text-decoration:none!important;
  box-shadow:none;
}
body.mgu-global-page .wp-block-button__link:hover{
  background:#176aa6!important;
  transform:translateY(-1px);
}

/* =========================================================
   EXISTING SITE HEADER — desktop/tablet/mobile
   These rules style the header already present on the site.
   ========================================================= */
.mgu-site-header{
  width:100%;
  background:#fff;
  border-bottom:4px solid transparent;
  border-image:linear-gradient(90deg,#143c5b,#2c8dca,#d9edf8) 1;
  box-shadow:0 8px 28px rgba(25,77,113,.08);
  position:relative;
  z-index:50;
}
.mgu-site-header-inner{
  width:min(1540px,calc(100% - 64px));
  min-height:98px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:30px;
}
.mgu-site-brand{
  display:flex;
  align-items:center;
  gap:14px;
  color:#153b59!important;
  text-decoration:none!important;
  min-width:365px;
}
.mgu-brand-mark{
  width:68px;height:68px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,#173f60,#2b8dcc);
  color:#fff;font-size:31px;
  box-shadow:0 10px 25px rgba(24,77,115,.16);
  flex:0 0 auto;
}
.mgu-brand-text{min-width:0}
.mgu-brand-text strong{display:block;font-size:23px;letter-spacing:.02em;line-height:1.05}
.mgu-brand-text small{display:block;margin-top:5px;color:#6d879a;font-size:13px}
.mgu-site-nav{
  display:flex;align-items:center;justify-content:center;
  gap:30px;flex:1;min-width:0;
}
.mgu-site-nav a{
  color:#173e5c!important;text-decoration:none!important;
  font-size:15px;font-weight:700;white-space:nowrap;
}
.mgu-site-nav a:hover{color:#2583c5!important}
.mgu-site-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.mgu-header-telegram,.mgu-header-account{
  min-height:50px;padding:0 18px;border-radius:15px;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none!important;font-weight:800;font-size:13px;
  white-space:nowrap;
}
.mgu-header-telegram{border:1px solid #cfe8f6;background:#f4fbff;color:#1682c4!important}
.mgu-header-account{background:#2479b5;color:#fff!important;box-shadow:0 10px 22px rgba(36,121,181,.16)}

/* =========================================================
   EXISTING SITE FOOTER
   ========================================================= */
.mgu-site-footer{margin-top:70px;background:#102f49;color:#fff;position:relative}
.mgu-footer-inner{
  width:min(1440px,calc(100% - 56px));
  margin:0 auto;padding:54px 0 38px;
  display:grid;grid-template-columns:1.45fr .75fr .85fr 1.25fr;gap:40px;
}
.mgu-footer-brand-link{color:#fff!important;min-width:0}
.mgu-footer-brand-link .mgu-brand-mark{background:rgba(255,255,255,.1);box-shadow:none}
.mgu-footer-brand-link .mgu-brand-text strong{color:#fff}
.mgu-footer-brand-link .mgu-brand-text small{color:#b9cee4}
.mgu-footer-brand p{color:#b9cee4;line-height:1.65;max-width:470px;margin:18px 0}
.mgu-footer-buttons{display:flex;gap:10px;flex-wrap:wrap}
.mgu-footer-buttons a{border:1px solid rgba(255,255,255,.2);color:#fff!important;text-decoration:none;padding:11px 14px;border-radius:11px;font-weight:800}
.mgu-footer-col{display:flex;flex-direction:column;gap:11px}
.mgu-footer-col h3{margin:0 0 9px;color:#fff;font-size:16px}
.mgu-footer-col a,.mgu-footer-col span{color:#b9cee4;text-decoration:none;font-size:14px;line-height:1.45}
.mgu-footer-col a:hover,.mgu-footer-bottom a:hover{color:#fff}
.mgu-footer-info{display:flex;flex-direction:column;gap:12px}
.mgu-footer-info div{padding:14px 15px;border:1px solid rgba(255,255,255,.13);border-radius:13px;background:rgba(255,255,255,.035)}
.mgu-footer-info strong,.mgu-footer-info span{display:block}
.mgu-footer-info strong{font-size:14px}
.mgu-footer-info span{font-size:13px;color:#b9cee4;margin-top:4px;line-height:1.4}
.mgu-footer-bottom{
  width:min(1440px,calc(100% - 56px));margin:0 auto;
  border-top:1px solid rgba(255,255,255,.12);
  padding:18px 0 22px;display:flex;justify-content:space-between;
  gap:20px;color:#91abc6;font-size:12px;
}
.mgu-footer-bottom a{color:#91abc6;text-decoration:none;margin-left:24px}

/* Existing custom header/footer variants used on some ordinary pages. */
.mgu-site-header + main,
.mgu-site-header ~ main{width:100%}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width:1100px){
  .mgu-site-header-inner{width:calc(100% - 40px);min-height:92px;flex-wrap:wrap;padding:14px 0;gap:16px}
  .mgu-site-brand{min-width:0;flex:1}
  .mgu-site-nav{
    order:3;width:100%;flex-basis:100%;
    overflow-x:auto;overflow-y:hidden;justify-content:flex-start;
    gap:22px;padding:2px 2px 7px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .mgu-site-nav::-webkit-scrollbar{display:none}
  .mgu-site-nav a{font-size:14px}
  .mgu-footer-inner{grid-template-columns:1fr 1fr;gap:30px}
  .mgu-footer-info{grid-column:1/-1}
  body.mgu-global-page .wp-block-post-content > .wp-block-group.alignwide,
  body.mgu-global-page .wp-block-post-content > .wp-block-columns.alignwide,
  body.mgu-global-page .entry-content > .wp-block-group.alignwide,
  body.mgu-global-page .entry-content > .wp-block-columns.alignwide{
    width:calc(100% - 40px);
  }
}

/* =========================================================
   PHONE
   ========================================================= */
@media (max-width:700px){
  .mgu-site-header-inner{
    width:calc(100% - 28px);
    min-height:0;
    padding:12px 0 10px;
    gap:12px;
  }
  .mgu-site-brand{gap:10px;flex:1;min-width:0}
  .mgu-brand-mark{width:50px;height:50px;border-radius:15px;font-size:24px}
  .mgu-brand-text strong{font-size:15px;letter-spacing:0;line-height:1.12;white-space:normal}
  .mgu-brand-text small{font-size:10px;margin-top:3px}
  .mgu-site-actions{gap:7px;width:auto}
  .mgu-header-telegram{display:none!important}
  .mgu-header-account{min-height:43px;padding:0 12px;border-radius:12px;font-size:11px}
  .mgu-site-nav{gap:18px;padding:3px 0 6px}
  .mgu-site-nav a{font-size:13px}

  /* Give every ordinary Gutenberg page comfortable phone gutters. */
  body.mgu-global-page .wp-block-post-content > .wp-block-group.alignwide,
  body.mgu-global-page .wp-block-post-content > .wp-block-columns.alignwide,
  body.mgu-global-page .entry-content > .wp-block-group.alignwide,
  body.mgu-global-page .entry-content > .wp-block-columns.alignwide{
    width:calc(100% - 24px);
  }
  body.mgu-global-page .wp-block-columns{display:block}
  body.mgu-global-page .wp-block-column{width:100%!important;margin:0 0 20px!important}
  body.mgu-global-page h1{font-size:clamp(32px,9vw,48px);line-height:1.08}
  body.mgu-global-page h2{font-size:clamp(26px,7vw,38px);line-height:1.12}
  body.mgu-global-page h3{font-size:clamp(21px,6vw,30px);line-height:1.18}
  body.mgu-global-page p,
  body.mgu-global-page li{font-size:15px;line-height:1.65}
  body.mgu-global-page .wp-block-button{max-width:100%}
  body.mgu-global-page .wp-block-button__link{max-width:100%;white-space:normal;text-align:center}

  .mgu-footer-inner{width:calc(100% - 28px);grid-template-columns:1fr;padding:38px 0 28px;gap:28px}
  .mgu-footer-info{grid-column:auto}
  .mgu-footer-bottom{width:calc(100% - 28px);display:block;padding-bottom:20px}
  .mgu-footer-bottom > span{display:block;line-height:1.55}
  .mgu-footer-bottom a{display:inline-block;margin:8px 18px 0 0}
  .mgu-footer-brand p{font-size:14px}
}

@media (max-width:420px){
  .mgu-site-header-inner{width:calc(100% - 20px)}
  .mgu-header-account{padding:0 9px;font-size:10px}
  .mgu-brand-mark{width:46px;height:46px;font-size:22px}
  .mgu-brand-text strong{font-size:13px}
  .mgu-brand-text small{font-size:9px}
  .mgu-site-nav{gap:16px}
  .mgu-site-nav a{font-size:12px}
  body.mgu-global-page .wp-block-post-content > .wp-block-group.alignwide,
  body.mgu-global-page .wp-block-post-content > .wp-block-columns.alignwide,
  body.mgu-global-page .entry-content > .wp-block-group.alignwide,
  body.mgu-global-page .entry-content > .wp-block-columns.alignwide{
    width:calc(100% - 20px);
  }
}
