/* 
Theme Name: ColorMag Child
Template: colormag
Version: 1.0
*/

/* ============================================================
   GLOBAL – Container rails (sitewide width + responsive padding)
   ============================================================ */
#cm-content > .cm-container,
#cm-content .cm-row,
#cm-primary{
  max-width:100% !important;
  width:100% !important;
  margin:0 auto !important;
  float:none !important;
}

#cm-content > .cm-container{
  padding-left:24px !important;
  padding-right:24px !important;
}

@media (max-width:768px){
  #cm-content > .cm-container{
    padding-left:16px !important;
    padding-right:16px !important;
  }
}

@media (max-width:480px){
  #cm-content > .cm-container{
    padding-left:12px !important;
    padding-right:12px !important;
  }
}

/* ============================================================
   GLOBAL – Shared variables
   ============================================================ */
:root{
  --dfl-content-max:1200px;
  --dfl-gutter:24px;
}
@media (max-width:768px){
  :root{ --dfl-gutter:16px; }
}
@media (max-width:480px){
  :root{ --dfl-gutter:12px; }
}

/* ============================================================
   GLOBAL – Shared icons (SVG)
   ============================================================ */
.dfl-icon{
  width:18px;
  height:18px;
  display:inline-block;
  flex:0 0 auto;
  stroke:currentColor;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}

/* ============================================================
   GLOBAL – Shared meta icons row (views/comments)
   ============================================================ */
.dfl-meta-icons{
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--dfl-accent);
  font-weight:600;
  opacity:.85;
}

.dfl-meta-metric{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* ============================================================
   GLOBAL – Byline (EXACT stacked format)
   by Name
   UPDATED DEC 11, 2025
   ============================================================ */
.dfl-byline{
  display:block !important;
  text-align:left !important;
  margin:6px 0 10px;
}

.dfl-byline-author{
  display:block !important;
  margin:0 0 7px 0;
  font-size:14px;
  line-height:1.2;
  color:#000;
  padding-top:5px;
}

.dfl-byline-prefix{ font-weight:400; }
.dfl-byline-author-name{ font-weight:600; }

.dfl-byline-date{
  display:block !important;
  margin:0;
  font-size:14px;
  line-height:1.3;
  font-weight:400;
  color:#000;
  letter-spacing:.04em;
  opacity:.75;
}

/* ============================================================
   Dig For Liberty – CATEGORY STRIP (4 cards)
   ============================================================ */
.dfl-cat-strip{
  margin:5px 0;
  padding-top:16px;
  border-top:3px solid #EBEDEF;
}

.dfl-cat-strip-heading{
  margin:0 0 16px;
  font-size:2rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.dfl-cat-strip-inner{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px;
  width:100%;
}

.dfl-cat-card{
  box-sizing:border-box;
  min-width:0;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  min-height:250px;
}

.dfl-cat-card-media{
  overflow:hidden;
  margin:0 0 8px;
}

.dfl-cat-card-media img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
  transition:transform .25s ease;
}

.dfl-cat-card-media-link:hover img{ transform:scale(1.03); }

.dfl-cat-card-title{
  margin:0;
  padding:8px 0;
  font-size:1.75rem;
  font-weight:900;
  line-height:1.25;
  letter-spacing:.025em;
}

.dfl-cat-card-title a{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-decoration:none;
}
.dfl-cat-card-title a:hover{ text-decoration:underline; }

/* Meta (line 1 uses global .dfl-byline format) */
.dfl-cat-card-meta{ align-self:end; }
.dfl-cat-card-meta--line1{ margin:0 0 5px; }

/* Line 2: icons + numbers */
.dfl-cat-card-meta--line2{
  display:flex;
  align-items:center;
  margin:0;
  font-weight:700;
  color:var(--dfl-accent);
  justify-content:flex-start;
  gap:14px;
}

.dfl-cat-card-metric{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.dfl-cat-strip + .dfl-cat-strip{ margin-top:28px; }

/* Responsive */
@media (max-width:1024px){
  .dfl-cat-strip-inner{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px;
  }
  .dfl-cat-card{ min-height:320px; }
  .dfl-cat-card-media img{ height:150px; }
  .dfl-cat-strip-heading{ font-size:1.4rem; }
}
@media (max-width:480px){
  .dfl-cat-strip-inner{ gap:10px; }
  .dfl-cat-card{ min-height:300px; }
  .dfl-cat-card-media img{ height:120px; }
  .dfl-cat-card-title{ font-size:1.3rem; line-height:1.2; }
  .dfl-icon{ width:16px; height:16px; }
}

/* ============================================================
   Dig For Liberty – HOME BLOCK (Recent / Featured / Trending)
   Shortcode: [dfl_home_block]
   Scoped to homepage (page-id-1300) only
   ============================================================ */
body.page-id-1300 .dfl-home-block{ margin:28px 0 40px; }

body.page-id-1300 .dfl-home-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:30px;
  align-items:start;
}

/* Headings */
body.page-id-1300 .dfl-home-heading{
  margin:0 0 14px;
  font-size:1.7rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#E74C3C;
}

/* Desktop order: Recent > Featured > Trending */
body.page-id-1300 .dfl-home-col-recent{ order:1; }
body.page-id-1300 .dfl-home-col-featured{ order:2; }
body.page-id-1300 .dfl-home-col-trending{ order:3; }

/* Featured column */
body.page-id-1300 .dfl-featured-stack{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  padding-top:16px;
}
body.page-id-1300 .dfl-featured-card{
  padding:0 0 15px;
  border-bottom:3px solid #EBEDEF;
}
body.page-id-1300 .dfl-featured-card:last-child{
  border-bottom:0;
  padding-bottom:0;
}
body.page-id-1300 .dfl-featured-media{
  display:block;
  overflow:hidden;
  margin:0 0 12px;
  border:3px solid #EBEDEF;
}
body.page-id-1300 .dfl-featured-media img{
  width:100%;
  height:300px;
  object-fit:cover;
  display:block;
}
body.page-id-1300 .dfl-featured-title{
  margin:0;
  font-size:2.1rem;
  line-height:1.25;
  font-weight:800;
}
body.page-id-1300 .dfl-featured-title a{ text-decoration:none; }
body.page-id-1300 .dfl-featured-title a:hover{ text-decoration:underline; }

/* Lists (Recent + Trending) */
body.page-id-1300 .dfl-list{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

/* Recent list item: text left, thumb right */
body.page-id-1300 .dfl-list-item-recent{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 0;
  border-bottom:3px solid #EBEDEF;
}
body.page-id-1300 .dfl-list-item-recent:last-child{ border-bottom:0; }

body.page-id-1300 .dfl-list-text{
  min-width:0;
  flex:1 1 auto;
}

body.page-id-1300 .dfl-list-title{
  margin:0 0 6px;
  font-size:1.6rem;
  font-weight:900;
  line-height:1.25;
}
body.page-id-1300 .dfl-list-title a{ text-decoration:none; }
body.page-id-1300 .dfl-list-title a:hover{ text-decoration:underline; }

body.page-id-1300 .dfl-list-thumb{
  flex:0 0 auto;
  width:138px;
  height:138px;
  overflow:hidden;
  border-radius:8px;
}
body.page-id-1300 .dfl-list-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Trending list item: bigger thumb left, text right */
body.page-id-1300 .dfl-list-item-trending{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px 0;
  border-bottom:3px solid #EBEDEF;
}
body.page-id-1300 .dfl-list-item-trending:last-child{ border-bottom:0; }

body.page-id-1300 .dfl-trend-thumb{
  flex:0 0 auto;
  width:148px;
  height:148px;
  overflow:hidden;
  border-radius:10px;
}
body.page-id-1300 .dfl-trend-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Tablet/mobile layout rules */
@media (max-width:1024px){
  body.page-id-1300 .dfl-home-grid{
    grid-template-columns:1fr;
    gap:26px;
  }

  /* Order on tablet/mobile: Featured, Recent, Trending */
  body.page-id-1300 .dfl-home-col-featured{ order:1; }
  body.page-id-1300 .dfl-home-col-recent{ order:2; }
  body.page-id-1300 .dfl-home-col-trending{ order:3; }

  body.page-id-1300 .dfl-featured-media img{ height:200px; }

  /* Recent 2 across */
  body.page-id-1300 .dfl-home-col-recent .dfl-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }
  body.page-id-1300 .dfl-home-col-recent .dfl-list-item-recent{
    border-bottom:0;
    padding:0;
  }

  /* Trending 2 across */
  body.page-id-1300 .dfl-home-col-trending .dfl-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:14px;
  }
  body.page-id-1300 .dfl-home-col-trending .dfl-list-item-trending{
    border-bottom:0;
    padding:0;
  }
}

@media (max-width:480px){
  body.page-id-1300 .dfl-home-heading{ font-size:1.4rem; }
  body.page-id-1300 .dfl-featured-title{ font-size:1.8rem; }
  body.page-id-1300 .dfl-list-title{ font-size:1.4rem; }
  body.page-id-1300 .dfl-list-thumb{ width:64px; height:64px; }
  body.page-id-1300 .dfl-trend-thumb{ width:120px; height:76px; }
}

/* ============================================================
   HOME (page-id-1300): "VIEW ALL" links beside headings
   ============================================================ */
body.page-id-1300 .dfl-home-heading-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  margin:0 0 14px;
}

body.page-id-1300 .dfl-home-heading-row .dfl-home-heading{ margin:0; }

body.page-id-1300 .dfl-home-viewall{
  font-size:1.4rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-decoration:none;
  color:#2E86C1;
}
body.page-id-1300 .dfl-home-viewall:hover{ text-decoration:underline; }

/* ============================================================
   SINGLE POST – match homepage rails + responsive gutters
   ============================================================ */
body.single-post.cm-normal-container #cm-content > .cm-container{
  max-width:var(--dfl-content-max) !important;
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:var(--dfl-gutter) !important;
  padding-right:var(--dfl-gutter) !important;
}

/* ============================================================
   SINGLE POST – category badge + remove theme meta row
   ============================================================ */
.single-post .cm-post-categories a{
  display:inline-block;
  background-color:#2E86C1 !important;
  color:#fff;
  padding:10px 12px;
  font-size:1.85rem;
  font-weight:600;
  text-transform:uppercase;
  line-height:1;
  border-radius:3px;
  border:1px solid #000;
}
.single-post .cm-post-categories a:hover{
  background-color:#2E86C1;
  color:#fff;
}
.single-post .cm-below-entry-meta{ display:none !important; }

/* Kill the duplicate author/date that exists under the image (keep icons) */
body.single-post .dfl-post-meta .dfl-byline{ display:none !important; }

/* ============================================================
   SINGLE POST – remove gray boxed container + match image width
   ============================================================ */
body.single-post #cm-primary .cm-posts,
body.single-post #cm-primary .cm-posts > article,
body.single-post #cm-primary .cm-post-content,
body.single-post #cm-primary .cm-featured-image{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

body.single-post #cm-primary .cm-featured-image{
  margin:0 0 16px 0 !important;
  padding:0 !important;
}

body.single-post #cm-primary .cm-featured-image img{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
}

/* ============================================================
   SINGLE POST – custom meta line (views/comments right)
   ============================================================ */
.single-post .dfl-post-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 0 15px;
}

.single-post .dfl-meta-icons{
  justify-content:flex-end;
  margin:0;
  font-size:1.1em;
  font-weight:600;
  color:var(--dfl-accent);
  opacity:.65;
}

/* ============================================================
   SINGLE POST – top byline block (the one under the title)
   ============================================================ */
body.single-post .dfl-single-byline{
  display:block;
  text-align:left !important;
  margin:6px 0 18px;
}

/* Prevent theme centering from overriding the byline */
body.single-post .cm-entry-header-meta,
body.single-post .cm-entry-header-meta *{
  text-align:left;
}

/* ============================================================
   SINGLE POST – force 75/25 layout with sidebar (responsive)
   ============================================================ */
@media (min-width:1024px){
  body.single-post #cm-content .cm-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }

  body.single-post #cm-primary{
    flex:0 0 75%;
    max-width:75%;
    width:75%;
  }

  body.single-post #cm-secondary{
    flex:0 0 25%;
    max-width:25%;
    width:25%;
  }
}

@media (max-width:1023px){
  body.single-post #cm-content .cm-row{ display:block; }

  body.single-post #cm-primary,
  body.single-post #cm-secondary{
    width:100%;
    max-width:100%;
  }

  body.single-post #cm-secondary{ margin-top:24px; }
}

@media (min-width:1024px){
  body.single-post #cm-primary{ padding-top:20px; }
}

/* ============================================================
   SIDEBAR – What’s Trending (vertical stack)
   ============================================================ */
.dfl-sidebar-trending{ margin:0 0 26px; }

.dfl-sidebar-trending-heading{
  margin:0 0 12px;
  font-size:1.75rem;
  font-weight:500;
  letter-spacing:.08em;
  color:#2E86C1;
  padding-top:0;
}

/* Category archive only (your tuned padding) */
body.category .dfl-sidebar-trending-heading{
  padding-top:16px;
}

/* Single posts only (your tuned padding) */
body.single-post .dfl-sidebar-trending-heading{
  padding-top:153px;
}

.dfl-sidebar-trending-list{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
}

.dfl-side-card{ padding:0 0 10px; }
.dfl-side-card:last-child{ padding-bottom:0; }

.dfl-side-card-media{
  display:block;
  overflow:hidden;
  margin:0 0 10px;
}
.dfl-side-card-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* ... many other stylesheet rules unaffected ... */

/* ============================================================
   COMMENTS — DigForLiberty (Clean + YouTube-style thread)
   Scope: #comments only (does NOT affect homepage cards)
   Works with: comments.php + dfl_comment() callback
   ============================================================ */

#comments.comments-area{
  margin-top: 48px;
  padding: 24px 0 28px;
  color: #111;
}

/* Title row: "Comments" + count badge */
#comments .dfl-comments-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 14px;
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: .02em;
  color:#111;
}

#comments .dfl-comment-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: #2E86C1;
  color: #fff;
  font-size: 1.50rem;
  font-weight: 900;
  line-height: 1;
}

/* ============================================================
   Comment form (top) - clean (no "Add a comment", no gray rule)
   ============================================================ */
#comments #respond{
  margin: 0 0 18px;
  padding: 0 0 18px;
  border: 0; /* remove gray divider */
}

/* If the theme still outputs a title element, kill it */
#comments #respond .comment-reply-title{
  display:none;
}

/* Label + inputs */
#comments #respond label{
  display:block;
  margin: 10px 0 6px;
  font-weight: 800;
  opacity: .9;
}

/* Adjusted font-size per your request (1.5rem for both textarea + comment body) */
#comments #respond textarea,
#comments #respond input[type="text"],
#comments #respond input[type="email"]{
  width: 100%;
  max-width: 840px;
  font-size: 1.5rem;
  padding: 12px 14px;
  border: 1px solid #EBEDEF;
  border-radius: 12px;
}

#comments #respond textarea{ min-height: 150px; }

/* Placeholder styling */
#comments #respond textarea::placeholder{
  color: #424949;
  font-size: 1.25rem;
  opacity: 1;
}

#comments #respond input[type="submit"]{
  margin-top: 14px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 900;
}

/* ============================================================
   Comment list + replies
   ============================================================ */
#comments .dfl-comment-list{
  list-style:none;
  margin:0;
  padding:0;
}

#comments .dfl-comment-list > li{
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid #EBEDEF;
}

/* Nested replies indent */
#comments .dfl-comment-list .children{
  list-style:none;
  margin: 14px 0 0 56px;
  padding: 0;
}

/* ============================================================
   YouTube-style comment layout (from dfl_comment callback)
   ============================================================ */
#comments .dfl-comment-body{ padding:0; }

#comments .dfl-comment-layout{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

#comments .dfl-comment-avatar img.avatar{
  width:44px;
  height:44px;
  border-radius:999px;
  display:block;
}

#comments .dfl-comment-main{
  flex:1;
  min-width:0;
}

/* Header row: name • date */
#comments .dfl-comment-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 6px;
}

#comments .dfl-comment-author,
#comments .dfl-comment-author a{
  color:#F44336;
  font-size: 1.25rem;
  font-weight:700;
  text-decoration:none;
}

#comments .dfl-comment-author a:hover{
  text-decoration:underline;
}

#comments .dfl-comment-dot,
#comments .dfl-comment-time{
  color:#777;
  font-size:1.1rem;
  text-decoration:none;
}

#comments .dfl-comment-time:hover{
  text-decoration:underline;
}

/* Body text (1.5rem per request) */
#comments .dfl-comment-content{
  margin:0 0 10px;
  font-size: 1.5rem;
  line-height: 1.6;
  color:#111;
}

#comments .dfl-comment-content p{ margin: 0 0 10px; }
#comments .dfl-comment-content p:last-child{ margin-bottom: 0; }

/* Ensure long links wrap nicely */
#comments .dfl-comment-content a,
#comments .dfl-comment-content p {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Actions */
#comments .dfl-comment-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:8px;
}

#comments .dfl-comment-actions .dfl-action a{
  color: #2E86C1;
  font-size:1.25rem;
  font-weight:500;
  text-decoration:none;
}

#comments .dfl-comment-actions .dfl-action a:hover{
  text-decoration:underline;
}

/* Optional: hide edit link on front-end */
#comments .dfl-comment-actions .comment-edit-link{ display:none !important; }

/* HARD KILL: any theme "Add a comment" title + boxed wrapper */
#comments .comment-respond,
#comments #respond,
#comments form.comment-form,
#comments .comment-form-comment{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Ensure the theme title never appears */
#comments .comment-reply-title{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove any theme separator rules near the form */
#comments hr,
#comments .comment-respond:before,
#comments .comment-respond:after{
  display:none !important;
  content:none !important;
}

/* ============================================================
   Embedded images + unfurl preview styles
   ============================================================ */
#comments .dfl-comment-media{
  margin: 12px 0 0;
}

#comments .dfl-comment-media-link{
  display:block;
  max-width:100%;
  border-radius:8px;
  overflow:hidden;
  display:inline-block;
}

#comments .dfl-comment-media-img{
  display:block;
  width:100%;
  height:auto;
  max-height:420px;
  object-fit:contain;
  border-radius:8px;
  border:1px solid #EBEDEF;
}

/* Unfurl preview card */
#comments .dfl-comment-unfurl{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:12px 0 0;
  padding:10px;
  border:1px solid #EBEDEF;
  border-radius:8px;
  background:#fff;
}

#comments .dfl-unfurl-thumb{
  flex:0 0 120px;
  width:120px;
  height:80px;
  overflow:hidden;
  border-radius:6px;
}
#comments .dfl-unfurl-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#comments .dfl-unfurl-body{
  flex:1;
  min-width:0;
}

#comments .dfl-unfurl-title{
  margin:0 0 6px;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.2;
}
#comments .dfl-unfurl-title a{
  color:#111;
  text-decoration:none;
}
#comments .dfl-unfurl-title a:hover{ text-decoration:underline; }

#comments .dfl-unfurl-desc{
  margin:0 0 6px;
  font-size:1rem;
  color:#333;
}

#comments .dfl-unfurl-domain{
  font-size:0.95rem;
  color:#2E86C1;
}

/* ============================================================
   Tidy up for responsiveness
   ============================================================ */
@media (max-width:600px){
  #comments .dfl-comment-unfurl{
    flex-direction:column;
  }
  #comments .dfl-unfurl-thumb{
    width:100%;
    height:220px;
  }
}

/* DFL: comment toolbar + preview styles */
.dfl-comment-toolbar-wrapper {
  margin-top: 12px;
}

.dfl-comment-toolbar-bar {
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 12px;
  background:#f0f0f2;
  border-radius:8px;
  border:1px solid #e6e6e8;
  color:#222;
}

.dfl-comment-toolbar-bar .dfl-toolbar-btn{
  background:transparent;
  border:0;
  font-size:18px;
  padding:6px;
  cursor:pointer;
}

.dfl-comment-preview {
  margin-top:10px;
}

.dfl-comment-preview img.dfl-comment-media-img {
  border-radius:8px;
  border:1px solid #EBEDEF;
  max-width:220px;
  height:auto;
  display:block;
}

.dfl-emoji-popup {
  margin-top:8px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid #eee;
  padding:8px;
  border-radius:6px;
}

.dfl-emoji-popup button.dfl-emoji {
  background:transparent;
  border:0;
  font-size:20px;
  padding:6px;
  cursor:pointer;
}

.dfl-uploading {
  font-size:14px;
  color:#666;
}