/*
Theme Name: My Mobile Scoop (iBlog revival)
Theme URI: https://mymobilescoop.com
Description: Twenty Sixteen child theme that restores the look of the original
  PageLines iBlog design My Mobile Scoop ran from 2009-2011. Colours, type and
  layout are taken from the theme's own recovered stylesheet; the framework
  underneath is Twenty Sixteen, so it stays maintained and secure.
Author: recovered from the Internet Archive
Template: twentysixteen
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: mymobilescoop-child
*/

/* ---- palette recovered from iblog/css/theme.css ---------------------- */
:root{
  --ims-bg:#efefef;        /* page background            */
  --ims-card:#ffffff;      /* content card               */
  --ims-ink:#333333;       /* body copy                  */
  --ims-head:#000000;      /* headings                   */
  --ims-link:#0088cc;      /* the original accent blue   */
  --ims-rule:#e5e5e5;
  --ims-muted:#666666;
  /* The menu bar carries the logo's dark. The wordmark PNG measures
     #3c3c3c-#424242, but that is archive anti-aliasing lightening thin type,
     so the bar sits a little under it: a dark charcoal, deliberately not
     black. #333 is also the body-copy ink of the original iBlog stylesheet,
     so the two darks on the page match. Change this one value to retune. */
  --ims-nav:#333333;
  --ims-nav-ink:#eaeaea;   /* menu labels on the dark bar   */
  --ims-nav-rule:#4a4a4a;  /* dividers between menu items   */
  --ims-nav-edge:#262626;  /* the bar's outer border        */
}

/* ---- page frame ------------------------------------------------------ */
body,
body.custom-background{
  background:var(--ims-bg);
  background-image:linear-gradient(#dcdcdc 0, var(--ims-bg) 220px);
  background-repeat:no-repeat;
  color:var(--ims-ink);
  font-family:"Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
  font-size:14px;
  line-height:1.55;
}
.site{
  max-width:1000px;
  margin:0 auto;
  background:transparent;
  box-shadow:none;
}
#content.site-content{
  background:var(--ims-card);
  border:1px solid #ddd;
  border-radius:3px;
  padding:26px 28px;
  margin-top:14px;
}

/* ---- header: logo left, nav across ----------------------------------- */
.site-header{ padding:14px 0 0; max-width:none; }
.site-branding{ margin:0 0 10px; }
.site-title{ font-size:1.6rem; letter-spacing:-.01em; }
.site-title a{ color:var(--ims-head); }
.site-description{ color:var(--ims-muted); font-size:12px; font-style:normal; }

.main-navigation{
  background:var(--ims-nav);
  border:1px solid var(--ims-nav-edge);
  border-radius:3px;
  font-size:13px;
  /* Twenty Sixteen pulls the nav out by -0.875em on each side so the first
     link's TEXT lines up with the content edge -- fine there, because its nav
     has no background. This bar does, so that pull showed up as an 11px
     offset against the content card. Zeroed so the two boxes align. */
  margin:0;
}
.main-navigation .primary-menu{ border:0; }
.main-navigation li{ border:0; }
.main-navigation a{
  padding:11px 18px;
  font-weight:700;
  color:var(--ims-nav-ink);
  text-transform:none;
  letter-spacing:0;
}
.main-navigation a:hover,
.main-navigation a:focus{ color:#fff; background:rgba(255,255,255,.10); }
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a{
  color:#fff;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 -3px 0 var(--ims-link);
}

/* item dividers run vertically across the desktop bar and horizontally once
   the list stacks under the MENU button. */
@media (min-width:56.875em){
  .main-navigation .primary-menu > li{ border-right:1px solid var(--ims-nav-rule); }
  .main-navigation .primary-menu > li:last-child{ border-right:0; }
}
@media (max-width:56.8125em){
  .main-navigation .primary-menu > li{ border-bottom:1px solid var(--ims-nav-rule); }
  .main-navigation .primary-menu > li:last-child{ border-bottom:0; }
}

/* submenus sit inside the bar, so they take the same dark */
.main-navigation ul ul{
  background:var(--ims-nav);
  border-color:var(--ims-nav-rule);
}
.main-navigation ul ul a{ color:var(--ims-nav-ink); }
.main-navigation ul ul li{ border-bottom:1px solid var(--ims-nav-rule); }
.main-navigation ul ul li:last-child{ border-bottom:0; }

/* The MENU button is a sibling of the nav, not a child of it, so it sits on
   the light header and keeps its dark-on-light styling. Only the submenu
   carets are inside the dark bar and need recolouring. */
.main-navigation .dropdown-toggle{
  color:var(--ims-nav-ink);
  background:transparent;
  border-color:rgba(255,255,255,.35);
}
.main-navigation .dropdown-toggle:hover,
.main-navigation .dropdown-toggle:focus{
  color:#fff;
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.6);
}

/* ---- posts ------------------------------------------------------------ */
.entry-title{
  font-family:"Myriad Pro","Lucida Grande",Trebuchet MS,Arial,sans-serif;
  font-weight:400;
  color:var(--ims-head);
  font-size:1.9rem;
  line-height:1.25;
  margin-bottom:.3em;
}
.entry-title a{ color:var(--ims-head); }
.entry-title a:hover{ color:var(--ims-link); }
.entry-content{ font-size:14px; line-height:1.62; }
.entry-content a{ color:var(--ims-link); text-decoration:none; }
.entry-content a:hover{ text-decoration:underline; }
.entry-footer, .entry-meta, .byline, .posted-on{ font-size:12px; color:var(--ims-muted); }
.entry-footer a{ color:var(--ims-muted); }
.entry-footer a:hover{ color:var(--ims-link); }
hr, .entry-header{ border-color:var(--ims-rule); }
article.post{ border-bottom:1px solid var(--ims-rule); padding-bottom:22px; }

/* the recovery note on excerpt-only posts */
p.recovery-note{
  background:#fdf5e2; border:1px solid #d9c68b; border-radius:4px;
  padding:10px 12px; font-size:12.5px;
}

/* ---- sidebar: 300px, right ------------------------------------------- */
.sidebar{ font-size:13px; }
.widget{
  background:var(--ims-card);
  border:1px solid #ddd;
  border-radius:3px;
  padding:14px 16px;
  margin-bottom:14px;
}
.widget .widget-title{
  font-family:"Myriad Pro","Lucida Grande",Trebuchet MS,Arial,sans-serif;
  font-size:14px; font-weight:700; text-transform:none; letter-spacing:0;
  color:var(--ims-head); border-bottom:1px solid var(--ims-rule);
  padding-bottom:7px; margin-bottom:10px;
}
.widget a{ color:var(--ims-link); }
.widget li{ border:0; padding:3px 0; }

/* ---- footer ----------------------------------------------------------- */
.site-footer{ font-size:12px; color:var(--ims-muted); padding:18px 0 30px; }
.site-footer a{ color:var(--ims-muted); }


/* ---- header: logo on its own line, nav bar beneath (as iBlog had it) --- */
.site-header-main{ display:block; }
.site-branding{ float:none; max-width:none; margin:0 0 12px; padding:0; }
.site-branding .custom-logo{ max-height:48px; width:auto; }
.site-header-menu{ float:none; margin:0; width:100%; }
.main-navigation{ clear:both; width:100%; }
/* Everything that makes the menu a full-width row is desktop-only. Below
   56.875em Twenty Sixteen hides .site-header-menu behind the MENU button and
   reveals it with a .toggled-on class, so a plain `display:block` here would
   pin the list permanently open on phones. */
@media (min-width:56.875em){
  .site-header-menu{ display:block; }
  .main-navigation .primary-menu{ display:flex; flex-wrap:wrap; }
  .main-navigation .primary-menu > li{ float:none; }
}


/* Twenty Sixteen builds its columns with a negative margin-right on
   .content-area and a matching margin-left on .sidebar. Overriding either one
   collapses both to the same x-position and the sidebar lands on top of the
   article, so its column maths is left completely alone here. */


/* iBlog ran the byline beneath the title with the text full width. Twenty
   Sixteen instead floats .entry-content to 70% with the meta in a left gutter,
   from a rule more specific than a plain child override, so these four
   properties are forced. Deliberately narrow: only the post column geometry,
   nothing else. */
@media (min-width:56.875em){
  .site-main .entry-header,
  .site-main .entry-content,
  .site-main .entry-summary,
  .site-main .entry-footer{
    float:none !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  .site-main .entry-footer{
    margin-top:1.4em !important;
    padding-top:.8em;
    border-top:1px solid var(--ims-rule);
  }
  .site-main .entry-content{ font-size:14.5px; }
}