/* =========================================================================
 * original-inline.css
 * -------------------------------------------------------------------------
 * WP-port equivalent of the per-page inline <style> blocks the ORIGINAL
 * Z-Blog "default" theme emits in each page's <head>. In Z-Blog every page
 * drops a small page-specific <style> on top of main.css + mainfasetch.css;
 * here we consolidate them and SCOPE each block to the matching WP body
 * class so a rule meant for /spotlight/ never leaks into /features/, etc.
 *
 * IMPORTANT: do not add global theme layout rules here. nav-bar / #main-view
 * / .view.page .photo are ALL fully defined in main.css — adding !important
 * overrides was the cause of the "排版错乱".
 *
 * WP body classes used:
 *   .home                 -> the static front page
 *   .category-spotlight   -> /category/spotlight/ archive
 *   .category-features    -> /category/features/  archive
 *   .single, .page, etc.  -> no per-page overrides needed (main.css covers)
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * HOMEPAGE (.home)
 * Replicates the inline block the original homepage emits: flexslider
 * container + carousel dots + .stories1 row sizing at >=1300px.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 1300px){
  body.home .stories1 article {
      width: 20% !important;
      padding: 15% 0 0 0;
  }
  body.home #main-view { margin-top: 78px; }
}
@media only screen and (min-width: 1300px){
  body.home .stories1 article:nth-child(4),
  body.home .stories article:nth-child(5),
  body.home .stories article:nth-child(6) {
       padding: 15% 0 0 0;
  }
}

/* Flexslider banner — original renders at 93% width, centered, 30px bottom pad */
body.home .flexslider {
    position: relative;
    overflow: hidden;
    z-index: 2;
    padding-bottom: 30px;
    width: 93%;
    margin: 0 auto;
}
body.home .slides {
    position: relative;
    z-index: 1;
    padding: 0;
    width: 100%;
    margin: auto auto;
}
body.home .slides:after { content: ''; display: table; clear: both; }
body.home .slides li img { width: 100%; }

body.home .flex-control-nav {
    position: absolute;
    bottom: -12px;
    z-index: 2;
    width: 100%;
    text-align: center;
    padding: 0;
}
body.home .flex-direction-nav { display: none; }
body.home .flex-control-nav li {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    *display: inline;
    zoom: 1;
}
body.home .flex-control-nav a {
    display: inline-block;
    width: 12px;
    height: 12px;
    line-height: 40px;
    overflow: hidden;
    background-color: #e3e3e3;
    cursor: pointer;
    border-radius: 50%;
}
body.home .flex-control-nav .flex-active {
    background-position: 0 0;
    background-color: #b0b0b0;
    border-radius: 50%;
}
body.home .flex-direction-nav {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 45%;
}
body.home .flex-direction-nav li a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
}
body.home .flex-direction-nav li a.flex-prev { left: 40px; display: none; }
body.home .flex-direction-nav li a.flex-next { right: 40px; display: none; }

@media (max-width: 640px){
  body.home .slides li img { width: 100%; }
  body.home .slides { width: 93%; }
}

/* -------------------------------------------------------------------------
 * SHARED — listing + homepage stories container and the .lf_main-content
 * page-title block (replicates the shared parts of each page's inline style).
 * ------------------------------------------------------------------------- */
.view.home .stories {
    position: relative;
    z-index: 2;
    letter-spacing: 2px;
}
.lf_main-content {
    margin: 55px 0 15px 15px;
    letter-spacing: 2px;
}
.lf_main-content h2 {
    font-size: 2em;
    line-height: 1.76471em;
    margin: 0 0 1.76471em;
    color: #191b1c;
}

/* -------------------------------------------------------------------------
 * SPOTLIGHT listing (.category-spotlight)
 * Image wall: 3 columns of large figures at >=1000px, 1 column on mobile.
 * The CRITICAL override is .features-left { width:100% } at >=1000px and
 * <=700px — main.css alone sets it to 30%, which would shrink every wall
 * image to a tiny thumbnail. The original spotlight.html had this in its
 * own inline <style> block; we replicate it here, scoped to the category
 * body class so FEATURES (which needs 30%) is unaffected.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 700px){
  body.category-spotlight .stories article .article-inner { padding: 0 0.3em; }
}
@media only screen and (min-width: 1000px){
  body.category-spotlight .stories article { width: 33.33%; padding: 0 !important; }
  body.category-spotlight .features-left { width: 100%; }
}
@media (max-width: 700px){
  body.category-spotlight .features-left { width: 100%; }
}
body.category-spotlight .stories article figure img {
    width: 100%;
    padding: 1% 0;
}

/* -------------------------------------------------------------------------
 * FEATURES listing (.category-features)
 * Single-column list of full-width rows: figure 30% (from main.css) left,
 * title 70% right, with the .bortb red top/bottom border on each article.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 1000px){
  body.category-features .stories article { width: 100%; padding: 0 !important; }
}
body.category-features .article-title-block1 {
    margin-top: 7%;
    float: left;
    width: 70%;
}
body.category-features .article-title-block1 h2 {
    text-indent: 20px;
    vertical-align: middle;
    font-size: 2em !important;
}
body.category-features .bortb {
    border-top: 2px solid #c82506;
    border-bottom: 2px solid #c82506;
    margin-top: -2px;
}
body.category-features .stories article figure img {
    width: 100%;
    padding: 5% 0;
}
@media (max-width: 700px){
  body.category-features .article-title-block1 {
      width: 100%;
      float: none;
      margin-top: 7%;
  }
  body.category-features .article-title-block1 h2 {
      font-size: 1.25em !important;
      text-align: center;
  }
  body.category-features .features-left { width: 100%; }
}

/* =========================================================================
 * LEFT NAV-BAR — DESKTOP LAYOUT FIX (>=1300px)
 *
 * Goal: SHARE (nav-dropdown) sticks to the very bottom of the viewport
 * on every page, while keeping the LEFT column visually integrated with
 * the page (no hard border seam between nav-bar and main content).
 *
 * Main.css has two quirks at >=1300 (line 136 + 140):
 *   - h1 has position:relative + height:119px → pushes nav down to y=119
 *     (so nav's "100%" becomes y=1019, off-screen by 119 px)
 *   - nav-dropdown has bottom:120px (line 116) → 120 px gap from bottom
 *
 * Fix:
 *   - Make h1 absolute so it does NOT contribute to layout flow. nav
 *     can then flow from y=0.
 *   - Override nav-dropdown bottom:120 → bottom:0 so SHARE touches y=900.
 *   - Drop border-right (nav-bar's 1px seam is now in the way because
 *     the newsletter/footer are full-width fixed bg elements).
 * ========================================================================= */
@media only screen and (min-width: 1300px){
    header.nav-bar {
        background: #fff !important;
    }
    header.nav-bar h1 {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 119px !important;
    }
    header.nav-bar nav {
        background: #fff !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
    }
    header.nav-bar nav .menu-main-navigation-container {
        padding-top: 119px !important;   /* account for absolute-positioned logo h1 */
    }
    header.nav-bar nav .menu-main-navigation-container ul { margin-top: 0 !important; }
    /* Pin SHARE (nav-dropdown) to the very bottom of the viewport.
     * nav-bar is position:fixed + height:100%, so absolute bottom:0 here
     * anchors to the viewport bottom. This also makes the click-to-open
     * .height249 (64->249px) animation grow upward (slide-up). */
    header.nav-bar nav .nav-dropdown {
        bottom: 0 !important;            /* override main.css @media bottom:120px */
    }
    /* Keep the search-input area (in nav-content) inside the dropdown's
     * own bounds so it doesn't get clipped by overflow:hidden. */
    header.nav-bar nav .nav-dropdown .nav-content { padding-bottom: 0.5em; }
}

/* -------------------------------------------------------------------------
 * CONTACT page (page-id-94) — replicates the inline <style> block the
 * original contact.html emits in <head> to style the contact form
 * (.contact__wrap floated labels + gray inputs + button).
 * ------------------------------------------------------------------------- */
body.page-id-94 .main-content .contact__wrap { line-height: 35px; margin-bottom: 10px; }
body.page-id-94 .main-content .contact__wrap label { float: left; line-height: 28px !important; }
body.page-id-94 .main-content .contact__wrap input {
    border: 0; margin-left: 10px; width: 169px !important;
    background-color: #dbdcdc; line-height: 25px; padding: 0 5px;
    height: 28px !important; font-size: 12px !important;
}
body.page-id-94 .main-content .f_text {
    width: 100px; color: #535353; display: inline-block;
    text-align: right; vertical-align: top; line-height: 38px;
}
body.page-id-94 .main-content textarea {
    border: 0; margin-left: 10px; width: 340px !important; resize: none;
    background: #dbdcdc; min-height: 100px; font-size: 12px !important;
    line-height: 18px !important; border: 1px solid #dbdcdc;
}
body.page-id-94 .main-content .button1 {
    background: #986b4d; color: #fff; border: 0; padding: 10px 24px;
    font-family: 'carisma'; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; margin-top: 10px;
}

