/* AIT-279 — EN inner-page responsive shim (iqresume.com /en/*.html content pages).
   Purpose: make the legacy fixed-width 990px layout reflow on phones/tablets so the
   device-width viewport (set in include/header.php for $p!="") is a genuine improvement
   instead of causing horizontal scroll. NO redesign — same visual identity, just fluid.
   Scope: loaded ONLY for inner content pages. Homepage redesign and the generator are
   served by separate head paths and are NOT affected. Desktop (>1010px) is untouched. */

@media (max-width: 1010px) {

  html, body { overflow-x: hidden; }

  /* Header band: release the fixed 220/225px heights + overflow clipping so the
     stacked logo/nav/buttons get the vertical room they need. */
  #topwrapper  { height: auto; overflow: visible; }
  #topwrapper2 { height: auto; background-size: cover; background-position: center top; }
  #top {
    width: auto;
    max-width: 100%;
    padding: 16px 14px;
    margin: 0 auto;
    box-sizing: border-box;
  }

  /* Navigation: stop floating right + nowrap; wrap and centre the menu items. */
  #menu        { height: auto; line-height: 1.4; }
  #menu ul     { float: none; white-space: normal; text-align: center; padding: 6px 0; }
  #menu li     { float: none; display: inline-block; }
  #menu li a   { display: inline-block; }

  #logo img    { max-width: 180px; height: auto; }

  /* These are absolutely/right-floated in the desktop band — neutralise so they flow. */
  #socialicons { position: static; float: none; text-align: center; margin: 6px 0; }
  #topwrapper #func,
  #topwrapper a.smallbutton,
  #topwrapper .facebook { float: none; }
  #func        { text-align: center; height: auto; line-height: 1.4; }
  #func .facebook { max-width: 100%; }
  #langselector, #lang, .langselector { float: none; text-align: center; }
  #subpage     { text-align: center; margin: 10px 0; }
  #subpage a.bigbutton, .bigbutton, .smallbutton { display: inline-block; max-width: 100%; box-sizing: border-box; }

  /* Main content column: fluid instead of 990px fixed. */
  #main {
    width: auto;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 14px;
    box-sizing: border-box;
  }
  #content { width: auto; max-width: 100%; box-sizing: border-box; }

  /* Media + tables: never exceed the viewport. Wide tables scroll inside themselves. */
  #content img, #content iframe { max-width: 100%; height: auto; }
  #content table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Multi-column blocks → single column on small screens. */
  #content .tretinywrapper { width: auto; max-width: 100%; }
  #content .tretiny        { width: auto; max-width: 100%; }
  #content .tretina        { float: none; width: auto; max-width: 100%; margin: 0 0 16px 0; box-sizing: border-box; }
  #content .box            { box-sizing: border-box; max-width: 100%; }

  /* Faces strip + legacy partner bar. */
  #faceswrapper #faces, #faces { width: auto; max-width: 100%; background-size: cover; }
  #dobraprace { width: auto; max-width: 100%; }

  /* Footer. */
  #ftr  { width: auto; max-width: 100%; box-sizing: border-box; padding: 0 14px; }
  #footer { box-sizing: border-box; }
}

/* Phone-specific fine-tuning. */
@media (max-width: 600px) {
  #menu li a { font-size: 13px; padding: 4px 8px; }
  #content h1 { font-size: 24px; line-height: 1.25; }
  #content h2 { font-size: 19px; line-height: 1.3; }
  #content p.big { font-size: 15px; }
}