/* ---------------------------------------------------------------------
   Sidans ram runt blandningsguiden.

   Laddas bara på en enskild sida eller ett inlägg där kortkoden
   [exo_blandningsguide] faktiskt står. Ingen annan sida rörs.

   Varför den ligger här och inte i sidans innehåll: WordPress stryker
   <style> ur inlägg när kontot saknar unfiltered_html. Ett inklistrat
   stilblock raderas alltså vid sparning, utan att säga till. En
   stilmall som tillägget köar går inte genom den filtreringen.

   Väljarna är Divis (#left-area, #sidebar, #main-content .container).
   Byts temat matchar de ingenting, och sidan ser ut som temat vill -
   ingenting går sönder.
   --------------------------------------------------------------------- */

/* Sidopanelen tar en tredjedel av bredden på en sida som inte behöver den. */
#sidebar { display: none !important; }

/* Innehållet blir det vita kortet: hela bredden, luft runt texten. */
#left-area {
  width: 100% !important;
  padding: 48px 56px 56px !important;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(32, 52, 124, .06);
}

/* Lite bredare ram än temats standard, men inte hela skärmen. */
#main-content .container { width: 92% !important; max-width: 1240px !important; }

/*
 * Temat drar en lodrät skiljelinje där sidopanelen börjar. Är panelen
 * borta står linjen kvar mitt i den vita ytan och ser ut som ett fel.
 */
#main-content .container::before { display: none !important; }

/*
 * Står sidans titelfält tomt skriver temat ändå ut sin rubrikrad. Den
 * tar då plats högst upp utan att innehålla något, och sidan ser
 * hoptryckt ut under ett tomrum. Finns det en rubrik ritas den som
 * vanligt - regeln träffar bara den tomma.
 */
#left-area .entry-title:empty { display: none !important; }
#left-area .entry-title { margin-bottom: .6em !important; }

/* Läsbar radlängd. Utan tak blir raderna 1100 px och ögat tappar raden. */
#left-area p,
#left-area ul,
#left-area ol { max-width: 68ch; }

/* Avsnitten behöver luft för att läsas som avsnitt. */
#left-area h2 { margin-top: 2.4em; margin-bottom: .5em; }
#left-area h3 { margin-top: 1.8em; margin-bottom: .35em; }
#left-area h2:first-child,
#left-area h3:first-child { margin-top: 0; }

/* Tabellerna: tydliga rader, inga ramar runt varje cell. */
#left-area table { border-collapse: collapse; margin: 1.2em 0 1.8em; max-width: 680px; }
#left-area th,
#left-area td { padding: 9px 16px 9px 0; border-bottom: 1px solid #e9eff7; text-align: left; }
#left-area th { font-weight: 600; color: #20347c; font-size: .92em; }
#left-area td:first-child { font-variant-numeric: tabular-nums; }

/* Guiden är ingen löptext och ska inte klämmas ihop till 68 tecken. */
#left-area .exo-mix,
#left-area .exo-mix p,
#left-area .exo-mix ul,
#left-area .exo-mix ol { max-width: none; }

/* Telefon: kortet får inte ha marginaler kvar, då blir texten en remsa. */
@media (max-width: 980px) {
  #left-area { padding: 26px 20px 34px !important; border-radius: 0; box-shadow: none; }
  #main-content .container { width: 100% !important; }
}