/*
Theme Name: CalMediation Three-Column
Theme URI: https://example.com/themes/calmediation-three-column
Author: Aftab Javed
Author URI: https://www.aftabjaved.com
Description: Classic three-column TypePad-style layout with persistent left/right sidebars, centered header title and menu. Mobile: posts → left → right. Times New Roman, headings 20px.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: calmediation
Tags: three-columns, blog, custom-menu, sticky-sidebar, archives
*/

/* =========================
   Variables
   ========================= */
:root{
  --shell-max: 1430px;        /* ~30% wider than 1100px */
  --col-side: 300px;          /* sidebar width */
  --gap: 24px;                /* column gap */
}

/* =========================
   Base
   ========================= */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: #0f2536;
  font-family: 'Times New Roman', Times, serif;
  color: #1b2b34;
  line-height: 1.5;
}
a{ color:#0a5ca0; text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; }

/* =========================
   Header (striped bg + centered title, menu with lines)
   ========================= */
.site-header{
  background: repeating-linear-gradient(135deg, #1b3345 0 14px, #162b3b 14px 28px);
  color:#fff;
  border-bottom:4px solid #0a5ca0;
  width:100%;
}
.topbar{
  width:100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: 14px 18px 10px;
}
.header-inner{
  max-width: var(--shell-max);
  margin: 0 auto;
  text-align: center;
}
.site-title{
  margin: 0;
  font-family: 'Times New Roman', Times, serif !important;
  font-size: 20px !important;       /* per request */
  font-weight: 800;
  line-height: 1.3;
  max-width: 32ch;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.site-title a{ color:#fff; text-decoration:none; }
.top-divider,
.bottom-divider{
  height:1px;
  background: rgba(255,255,255,.3);
  margin: 8px 0;
}
.top-nav ul{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.top-nav li{ flex:0 1 auto; }
.top-nav a{
  color:#dbeeff;
  font-weight:600;
  padding:6px 8px;
  border-radius:6px;
  display:inline-block;
  text-decoration:none;
  line-height:1.2;
}
.top-nav a:hover{ background:rgba(255,255,255,.12); text-decoration:none; }

/* =========================
   Layout
   ========================= */
.shell{
  max-width: var(--shell-max);
  margin: 24px auto;
  padding: 0 24px 48px;
}
.grid{
  display: grid;
  grid-template-columns: var(--col-side) minmax(0,1fr) var(--col-side);
  gap: var(--gap);
  position: relative;
}
/* dotted separators */
.grid:before,
.grid:after{
  content:'';
  position:absolute;
  top:0; bottom:0;
  width:0;
  border-left:1px dotted #d7e2ea;
  pointer-events:none;
}
.grid:before{ left: var(--col-side); transform: translateX(12px); }
.grid:after { right: var(--col-side); transform: translateX(-12px); }

/* Columns */
.leftbar, .content, .rightbar{
  background:#fff;
  border-radius:10px;
  box-shadow:0 2px 8px rgba(1,24,46,.08);
  padding:18px;
}

/* =========================
   Widgets / Left
   ========================= */
.leftbar .widget{ margin-bottom:20px; }
.widget-title{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#58758a;
  margin:0 0 10px;
}
.menu-about-container ul, .widget ul{ list-style:none; margin:0; padding:0; }
.widget ul li{ margin:.35rem 0; }
.count{ color:#788d9b; }

/* Search form */
.search-form{ display:flex; gap:6px; }
.search-form input[type=search]{ flex:1; padding:8px 10px; border:1px solid #cfe0ea; border-radius:6px; }
.search-form button{ padding:8px 12px; border:0; border-radius:6px; background:#0a5ca0; color:#fff; cursor:pointer; }
.search-form button:hover{ filter:brightness(1.1); }

/* =========================
   Content
   ========================= */
.post{ margin-bottom:28px; border-bottom:1px solid #eef3f7; padding-bottom:22px; }
.post:last-child{ border-bottom:0; }

/* Headings: force 20px everywhere as requested */
h1,h2,h3,h4,h5,h6,
.post-title,.widget-title,.site-title{
  font-family:'Times New Roman', Times, serif;
}
.post-title,
h1,h2,h3,h4,h5,h6{
  font-size:20px !important;
  line-height:1.35;
}
.meta{ color:#6a8293; font-size:13px; margin-bottom:10px; }
.read-more{ display:inline-block; margin-top:6px; }

/* Pagination */
.pagination{ display:flex; justify-content:space-between; margin-top:18px; }
.page-numbers{ padding:8px 10px; border-radius:6px; border:1px solid #e2ecf3; }
.page-numbers.current{ background:#0a5ca0; border-color:#0a5ca0; color:#fff; }

/* =========================
   Right bar link sections
   ========================= */
.rightbar .linklist{ margin:0 0 18px; }
.rightbar .linklist ul{ list-style:none; margin:0; padding:0; }
.rightbar .linklist li{ margin:.35rem 0; }

/* Archives compact list */
.archives-small ul{ list-style:none; margin:0; padding:0; }
.archives-small li{ margin:.25rem 0; }

/* =========================
   Footer
   ========================= */
.site-footer{ max-width: var(--shell-max); margin:0 auto 40px; padding:0 16px; color:#98b4c6; }
.copy{ background:transparent; text-align:center; margin-top:12px; }

/* =========================
   Comments (responsive form)
   ========================= */
.comments-area,
.comment-respond{ width:100%; }
.comment-respond label{ display:block; margin:12px 0 6px; }
.comment-form textarea,
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"]{
  display:block;
  width:100%;
  max-width:100%;
  padding:10px 12px;
  border:1px solid #cfe0ea;
  border-radius:6px;
  background:#fff;
}
.comment-form textarea{ min-height: 180px; resize: vertical; }
.comment-form .form-submit input[type="submit"]{
  margin-top:12px;
  background:#0a5ca0;
  color:#fff;
  border:0;
  border-radius:6px;
  padding:10px 14px;
  cursor:pointer;
}
.comment-form .form-submit input[type="submit"]:hover{ filter:brightness(1.1); }

/* Ensure long content never causes horizontal scroll in the content card */
.content{ overflow-wrap:anywhere; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .shell{ padding: 0 16px 32px; }
  .grid{
    display:flex;
    flex-direction:column;        /* posts first, then left, then right */
  }
  .content{ order:1; }
  .leftbar{ order:2; }
  .rightbar{ order:3; }
  .grid:before, .grid:after{ display:none; }
}
@media (max-width: 768px){
  .top-divider, .bottom-divider{ margin:6px 0; }
  .top-nav ul{ gap:12px; }
}
@media (max-width: 480px){
  .header-inner{ padding: 10px 12px 8px; }
  .site-title{ max-width: 28ch; }
  .top-nav ul{ gap:10px; }
  .top-nav a{ font-size: clamp(13px, 3.6vw, 15px); padding:6px 6px; }
}
/* ===== Desktop header refinements ===== */
@media (min-width: 981px){
  /* Bigger, single-line title on desktop */
  .site-header .site-title{
    font-size: 26px !important;   /* tweak to 24–28 if you like */
    white-space: nowrap;           /* keep in one line */
  }

  /* Hide the full-width dividers we used for mobile/overall */
  .top-divider, .bottom-divider{ display:none; }

  /* Make the menu an inline-block so we can draw lines sized to the menu itself */
  .top-nav{ display: inline-block; }

  /* Add the lines above and below the menu, width = menu width */
  .top-nav::before,
  .top-nav::after{
    content:'';
    display:block;
    height:1px;
    background: rgba(255,255,255,.30);
    margin:8px 0;
  }
}