/* =========================================
   ROOT & BASE RESET
========================================= */
:root{
  --container-content:1120px;
  --pad-m:0px;   /* mobile padding */
  --pad-t:20px;  /* tablet padding */
  --pad-d:24px;  /* desktop padding */

  --font-base:16px;
  --font-large:20px;

  --color-bg:#f5f5f5;
  --color-surface:#ffffff;
  --color-text:#111111;
  --color-text-muted:#666666;
  --color-border:#e0e0e0;
}

html,
body{
  margin:0;
  padding:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--font-base);
  line-height:1.6;
  background:var(--color-bg);
  color:var(--color-text);
}

/* media defaults */
img,
video,
iframe{
  max-width:100%;
  height:auto;
}

/* =========================================
   MAIN LAYOUT
========================================= */
.site-main{
  padding:16px 0 32px;
}

/* centered container */
.content-inner{
  max-width:var(--container-content);
  width:100%;
  margin:0 auto;
  padding:0 var(--pad-m);
  box-sizing:border-box;
}

/* single post card */
.content-inner .post{
  background:var(--color-surface);
  border-radius:10px;
  border:1px solid var(--color-border);
  padding:16px 14px 20px;
  margin:0 auto 32px;
  box-sizing:border-box;
}

/* =========================================
   HEADER / TITLE / META
========================================= */
.entry-header{
  margin-bottom:16px;
}

.entry-title{
  margin:0 0 8px;
  font-weight:700;
  line-height:1.3;
  font-size:1.45rem; /* mobile */
}

.entry-meta{
  font-size:0.85rem;
  color:var(--color-text-muted);
}

/* =========================================
   FEATURED IMAGE
========================================= */
.entry-featured-image{
  margin-top:16px;
  margin-bottom:16px;
}

.entry-featured-image img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================================
   CONTENT TYPOGRAPHY
========================================= */
.entry-content{
  font-size:1rem;
  line-height:1.7;
}

.entry-content p{
  margin:0 0 1.1em;
}

.entry-content h2{
  font-size:1.25rem;
  margin:1.4em 0 0.6em;
}

.entry-content h3{
  font-size:1.1rem;
  margin:1.2em 0 0.5em;
}

.entry-content ul,
.entry-content ol{
  padding-left:1.3em;
  margin:0 0 1.1em;
}

.entry-content img{
  max-width:100%;
  height:auto;
  margin:1em auto;
  display:block;
}

/* fallback table style (normal tables) */
.entry-content table{
  width:100%;
  border-collapse:collapse;
  margin:1.2em 0;
}
.entry-content th,
.entry-content td{
  border:1px solid var(--color-border);
  padding:8px;
  font-size:0.9rem;
}

/* =========================================
   TABLE OF CONTENTS (TOC)
========================================= */
.entry-content .toc{
  background:#f8f8fb;
  border:1px solid var(--color-border);
  border-radius:10px;
  padding:14px 16px;
  margin:16px 0 24px;
  box-shadow:0 4px 10px rgba(0,0,0,0.03);
}

.entry-content .toc > h2{
  font-size:0.95rem;
  margin:0 0 8px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
}

.entry-content .toc ol{
  margin:0;
  padding-left:18px;
}

.entry-content .toc li{
  margin:4px 0;
  font-size:0.88rem;
}

.entry-content .toc a{
  text-decoration:none;
  color:#1a73e8;
  transition:color .2s ease,padding-left .2s ease;
}

.entry-content .toc a:hover,
.entry-content .toc a:focus{
  color:#0b5ad5;
  padding-left:2px;
}

/* mobile TOC */
@media (max-width:767px){
  .entry-content .toc{
    margin-top:8px;
    margin-bottom:16px;
    padding:10px 12px;
    max-height:220px;
    overflow-y:auto;
    position:relative;
  }

  .entry-content .toc::before{
    content:"Contents";
    position:absolute;
    top:-10px;
    left:12px;
    font-size:11px;
    background:#1a73e8;
    color:#fff;
    padding:2px 8px;
    border-radius:12px;
  }

  .entry-content .toc > h2{
    font-size:14px;
    margin-top:4px;
  }

  .entry-content .toc li{
    font-size:13px;
  }
}

/* =========================================
   COMPARISON TABLE SLIDER
   HTML:
   <div class="table-slider">
     <div class="table-inner">
       <table>...</table>
     </div>
   </div>
========================================= */
.entry-content .table-slider{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:#ffffff;
  margin:16px 0 24px;
  position:relative;
  scroll-snap-type:x mandatory;
}

.entry-content .table-inner{
  min-width:650px; /* force slide on small screens */
  scroll-snap-align:start;
}

/* scrollbar */
.entry-content .table-slider::-webkit-scrollbar{
  height:6px;
}
.entry-content .table-slider::-webkit-scrollbar-track{
  background:transparent;
}
.entry-content .table-slider::-webkit-scrollbar-thumb{
  background:#c2c6d6;
  border-radius:10px;
}

/* table inside slider */
.entry-content .table-slider table{
  width:100%;
  border-collapse:collapse;
  font-size:0.9rem;
}

.entry-content .table-slider th,
.entry-content .table-slider td{
  padding:10px 12px;
  white-space:nowrap;
  text-align:left;
}

.entry-content .table-slider th{
  background:#f4f6fc;
  font-weight:600;
  border-bottom:1px solid #eceff5;
}

.entry-content .table-slider td{
  border-bottom:1px solid #eceff5;
}

.entry-content .table-slider tr:nth-child(even) td{
  background:#fafbff;
}

.entry-content .table-slider td:first-child,
.entry-content .table-slider th:first-child{
  font-weight:600;
}

/* hover highlight desktop/tablet */
@media (min-width:768px){
  .entry-content .table-slider tbody tr:hover td{
    background:#eef3ff;
  }
}

/* mobile adjustments */
@media (max-width:767px){
  .entry-content .table-slider{
    margin-left:-14px;  /* match post padding */
    margin-right:-14px;
    border-left:none;
    border-right:none;
    border-radius:0;
  }

  .entry-content .table-slider th,
  .entry-content .table-slider td{
    padding:8px 10px;
    font-size:0.82rem;
  }
}

/* swipe hint */
.entry-content .table-slider::after{
  content:"← swipe →";
  position:absolute;
  bottom:6px;
  right:10px;
  background:#1a73e8;
  color:#fff;
  font-size:10px;
  padding:3px 6px;
  border-radius:10px;
  opacity:0.8;
}

/* =========================================
   ADS (non-AMP)
========================================= */
.ad-slot{
  margin:24px 0;
  text-align:center;
}

.ad-slot ins.adsbygoogle{
  margin:0 auto;
  display:block;
  max-width:100%;
}

.inarticle-unit,
.inarticle-unit-2{
  display:block;
}

/* =========================================
   COMMENTS
========================================= */
.comments-area{
  margin-top:32px;
  padding-top:20px;
  border-top:1px solid var(--color-border);
}

/* =========================================
   MEDIA QUERIES
========================================= */

/* TABLET (>= 600px) */
@media (min-width:600px){

  .site-main{
    padding:20px 0 36px;
  }

  .content-inner{
    padding:0 var(--pad-t);
  }

  .content-inner .post{
    padding:20px 20px 24px;
    margin-bottom:36px;
  }

  .entry-title{
    font-size:1.7rem;
  }

  .entry-meta{
    font-size:0.9rem;
  }

  .ad-slot{
    margin:28px 0;
  }
}

/* DESKTOP (>= 960px) */
@media (min-width:960px){

  .site-main{
    padding:24px 0 40px;
  }

  .content-inner{
    padding:0 var(--pad-d);
  }

  .content-inner .post{
    padding:24px 28px 28px;
    margin-bottom:40px;
  }

  .entry-title{
    font-size:2rem;
  }

  .entry-content{
    font-size:1.02rem;
  }

  .ad-slot{
    margin:32px 0;
  }

  .ad-slot ins.adsbygoogle{
    max-width:728px;
  }
}

/* LARGE DESKTOP (>= 1200px) */
@media (min-width:1200px){

  .content-inner .post{
    border-radius:14px;
  }

  .entry-title{
    font-size:2.15rem;
  }
}