/*
Theme Name: Colorful Magazine
Theme URI: https://example.com/colorful-magazine
Author: Your Studio
Author URI: https://example.com
Description: A bold, color-coded news & magazine theme. Every category gets a fixed accent color that carries through cards, eyebrows, and the sidebar rail — color as information, not decoration. Built for fast-moving newsrooms and personal magazines alike.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: colorful-magazine
Tags: news, magazine, blog, one-column, two-columns, right-sidebar, custom-menu, featured-images, full-width-template, theme-options, translation-ready

Colorful Magazine WordPress Theme, Copyright 2026
Colorful Magazine is distributed under the terms of the GNU GPL v2 or later.
*/

/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  /* base */
  --cm-white:      #FFFFFF;
  --cm-ink:        #101114;
  --cm-ink-soft:   #53565F;
  --cm-ink-faint:  #8A8D96;
  --cm-line:       #E6E4DC;
  --cm-paper:      #F6F5F1;

  /* brand chrome (not category-tied) */
  --cm-brand:       #FF3D6E;
  --cm-brand-ink:   #FFFFFF;
  --cm-live:        #FF3B30;

  /* category system — the signature element */
  --cat-politics:      #2451FF;
  --cat-crime:         #FF3B30;
  --cat-money:         #00A86B;
  --cat-entertainment: #A855F7;
  --cat-world:         #FF7A1A;
  --cat-sports:        #E0A800;
  --cat-default:       #2451FF;

  /* type */
  --font-display: 'Archivo Black', 'Arial Black', sans-serif;
  --font-body:    'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  /* scale */
  --step--1: 0.8125rem;
  --step-0:  1rem;
  --step-1:  1.25rem;
  --step-2:  1.75rem;
  --step-3:  2.5rem;
  --step-4:  3.5rem;

  --radius: 2px;
  --container: 1240px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body{
  margin: 0;
  background: var(--cm-white);
  color: var(--cm-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--font-display); line-height: 1.05; margin: 0 0 0.5em; letter-spacing: -0.01em; }
p{ margin: 0 0 1.1em; }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 3px solid var(--cm-brand); outline-offset: 2px; }

.cm-container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.screen-reader-text{
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.cm-topbar{
  background: var(--cm-ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
}
.cm-topbar-inner{
  display: flex;
  align-items: center;
  gap: 18px;
  height: 34px;
  overflow: hidden;
}
.cm-live-dot{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cm-live);
  flex: none;
  text-transform: uppercase;
}
.cm-live-dot::before{
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cm-live);
  animation: cm-pulse 1.6s infinite;
}
@keyframes cm-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.35; }
}
.cm-ticker{
  display: flex;
  gap: 28px;
  white-space: nowrap;
  animation: cm-scroll 28s linear infinite;
}
.cm-topbar:hover .cm-ticker{ animation-play-state: paused; }
@keyframes cm-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.cm-ticker a{ display: inline-flex; align-items: center; gap: 6px; opacity: .9; }
.cm-ticker a:hover{ opacity: 1; text-decoration: underline; }
.cm-ticker-dot{ width: 6px; height: 6px; border-radius: 50%; flex: none; }

.cm-masthead{
  border-bottom: 4px solid var(--cm-ink);
  padding: 22px 0 18px;
}
.cm-masthead-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cm-logo{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  display: inline-flex;
  align-items: center;
  letter-spacing: -0.02em;
}
.cm-logo .bracket{ color: var(--cm-brand); }
.cm-logo .site-name{ padding: 0 6px; }
.cm-logo .accent{ color: var(--cm-brand); }
.cm-masthead-tools{ display: flex; align-items: center; gap: 14px; }
.cm-search-toggle, .cm-menu-toggle{
  border: 2px solid var(--cm-ink);
  background: transparent;
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius);
}
.cm-search-toggle:hover, .cm-menu-toggle:hover{ background: var(--cm-ink); color: #fff; }
.cm-subscribe-btn{
  background: var(--cm-brand);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.cm-subscribe-btn:hover{ background: var(--cm-ink); }

/* primary nav */
.cm-nav-wrap{ background: var(--cm-white); border-bottom: 1px solid var(--cm-line); }
.cm-primary-nav ul{ display: flex; flex-wrap: wrap; gap: 2px; }
.cm-primary-nav a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 3px solid transparent;
}
.cm-primary-nav a:hover,
.cm-primary-nav .current-menu-item > a{
  border-bottom-color: var(--cm-brand);
}
.cm-nav-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--cat-default); }

.cm-search-panel{ max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.cm-search-panel.is-open{ max-height: 120px; padding-bottom: 18px; }
.cm-search-form{ display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--cm-line); }
.cm-search-form input[type="search"]{
  flex: 1; border: 2px solid var(--cm-ink); padding: 12px 14px; font-family: var(--font-body); font-size: 1rem; border-radius: var(--radius);
}
.cm-search-form button{
  background: var(--cm-ink); color: #fff; border: 0; padding: 0 20px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
}

/* mobile nav */
.cm-menu-toggle{ display: none; }
@media (max-width: 860px){
  .cm-menu-toggle{ display: inline-flex; }
  .cm-nav-wrap{ display: none; }
  .cm-nav-wrap.is-open{ display: block; }
  .cm-primary-nav ul{ flex-direction: column; }
  .cm-primary-nav a{ width: 100%; border-bottom: 1px solid var(--cm-line); border-left: 3px solid transparent; }
  .cm-primary-nav a:hover, .cm-primary-nav .current-menu-item > a{ border-bottom-color: var(--cm-line); border-left-color: var(--cm-brand); }
}

/* =========================================================
   CATEGORY EYEBROW / BADGES  (the signature system)
   ========================================================= */
.cm-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cat-c, var(--cat-default));
  margin-bottom: 10px;
}
.cm-eyebrow::before{
  content: "";
  width: 8px; height: 8px;
  background: var(--cat-c, var(--cat-default));
  border-radius: 50%;
  flex: none;
}
.cm-card{ border-top: 4px solid var(--cat-c, var(--cat-default)); padding-top: 16px; }
.cm-card--stacked{ display: flex; flex-direction: column; height: 100%; }

/* =========================================================
   LAYOUT / HERO
   ========================================================= */
.cm-main{ padding: 34px 0 60px; }
.cm-hero{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--cm-line);
  margin-bottom: 40px;
}
.cm-hero-lead .cm-thumb{
  aspect-ratio: 16/10;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--cm-paper);
  position: relative;
}
.cm-hero-lead .cm-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.cm-hero-lead h1, .cm-hero-lead h2{ font-size: clamp(1.9rem, 3.4vw, 2.9rem); }
.cm-hero-lead .cm-dek{ font-size: 1.08rem; color: var(--cm-ink-soft); }
.cm-hero-side{ display: flex; flex-direction: column; gap: 22px; }
.cm-hero-side .cm-video-slot{
  background: var(--cm-ink);
  color: #fff;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.cm-hero-side .cm-video-slot img{ width:100%; height:100%; object-fit:cover; opacity:.55; position:absolute; inset:0; }
.cm-play-btn{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cm-brand);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.cm-hero-side h3{ font-size: 1.05rem; margin-top: 10px; }
.cm-mini-list{ display: flex; flex-direction: column; gap: 16px; }
.cm-mini-list li{ padding-bottom: 16px; border-bottom: 1px solid var(--cm-line); }
.cm-mini-list li:last-child{ border-bottom: 0; padding-bottom: 0; }
.cm-mini-list h4{ font-size: 1rem; margin: 0; font-family: var(--font-body); font-weight: 700; }

/* trending grid */
.cm-section-head{
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
}
.cm-section-head h2{
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.cm-section-head .cm-rule{ height: 3px; background: var(--cm-ink); flex: 1; }

.cm-content-columns{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}
.cm-trending-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 46px;
}
.cm-trending-grid .cm-thumb{ aspect-ratio: 4/3; overflow: hidden; margin-bottom: 14px; background: var(--cm-paper); }
.cm-trending-grid .cm-thumb img{ width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.cm-trending-grid a:hover .cm-thumb img{ transform: scale(1.045); }
.cm-trending-grid h3{ font-size: 1.05rem; font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }

.cm-feed-row{
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--cm-line);
}
.cm-feed-row .cm-thumb{ aspect-ratio: 4/3; overflow: hidden; background: var(--cm-paper); }
.cm-feed-row .cm-thumb img{ width:100%; height:100%; object-fit:cover; }
.cm-feed-row h3{ font-size: 1.2rem; font-family: var(--font-body); font-weight: 700; }
.cm-feed-row .cm-dek{ color: var(--cm-ink-soft); font-size: 0.95rem; margin: 6px 0 0; }
@media (max-width: 540px){
  .cm-feed-row{ grid-template-columns: 1fr; }
}

/* sidebar */
.cm-sidebar{ padding-top: 4px; }
.cm-sidebar-title{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 3px solid var(--cm-ink);
  margin-bottom: 16px;
}
.cm-rail-item{
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cm-line);
}
.cm-rail-item:first-child{ padding-top: 0; }
.cm-rail-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--cat-c, var(--cat-default)); margin-top: 6px; }
.cm-rail-item h4{ font-size: 0.98rem; font-family: var(--font-body); font-weight: 700; margin: 0 0 4px; }
.cm-rail-item .cm-eyebrow{ margin-bottom: 4px; font-size: 0.66rem; }
.cm-widget{ margin-bottom: 40px; }
.cm-newsletter-box{
  background: var(--cm-ink);
  color: #fff;
  padding: 26px 22px;
  margin-bottom: 40px;
}
.cm-newsletter-box h3{ font-size: 1.15rem; margin-bottom: 8px; }
.cm-newsletter-box p{ color: rgba(255,255,255,.75); font-size: .92rem; }
.cm-newsletter-box form{ display: flex; gap: 8px; margin-top: 14px; }
.cm-newsletter-box input[type="email"]{
  flex: 1; border: 0; padding: 12px; font-family: var(--font-mono); font-size: .8rem; border-radius: var(--radius);
}
.cm-newsletter-box button{
  background: var(--cm-brand); color: #fff; border: 0; padding: 0 16px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .05em;
}

.cm-cat-chip-list{ display: flex; flex-wrap: wrap; gap: 8px; }
.cm-cat-chip{
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
  padding: 8px 12px; border: 2px solid var(--cat-c, var(--cat-default)); color: var(--cat-c, var(--cat-default));
  border-radius: var(--radius);
}
.cm-cat-chip:hover{ background: var(--cat-c, var(--cat-default)); color: #fff; }

/* =========================================================
   SINGLE POST
   ========================================================= */
.cm-single-head{ max-width: 820px; margin: 0 auto 30px; text-align: left; }
.cm-single-head h1{ font-size: clamp(2rem, 4vw, 3rem); }
.cm-single-dek{ font-size: 1.15rem; color: var(--cm-ink-soft); font-style: italic; }
.cm-byline{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: .78rem; color: var(--cm-ink-soft);
  padding: 16px 0; border-top: 1px solid var(--cm-line); border-bottom: 1px solid var(--cm-line); margin: 18px 0 30px;
}
.cm-single-thumb{ margin-bottom: 30px; }
.cm-single-thumb img{ width: 100%; }
.cm-single-thumb figcaption{ font-family: var(--font-mono); font-size: .74rem; color: var(--cm-ink-faint); padding-top: 8px; }
.cm-article-body{ max-width: 720px; margin: 0 auto; font-size: 1.15rem; }
.cm-article-body p{ margin-bottom: 1.3em; }
.cm-article-body h2{ font-size: 1.6rem; margin-top: 1.6em; }
.cm-article-body h3{ font-size: 1.3rem; margin-top: 1.4em; }
.cm-article-body blockquote{
  border-left: 4px solid var(--cat-c, var(--cm-brand));
  margin: 1.8em 0; padding: 0.2em 0 0.2em 22px;
  font-family: var(--font-display); font-size: 1.3rem; line-height: 1.35;
}
.cm-article-body img{ margin: 1.8em 0; }
.cm-article-body a{ color: var(--cat-c, var(--cm-brand)); text-decoration: underline; text-underline-offset: 3px; }
.cm-tag-list{ display: flex; flex-wrap: wrap; gap: 8px; max-width: 720px; margin: 40px auto 0; }
.cm-tag-list a{
  font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase;
  border: 1px solid var(--cm-line); padding: 7px 12px; border-radius: var(--radius);
}
.cm-tag-list a:hover{ border-color: var(--cm-ink); }

.cm-related{ max-width: 960px; margin: 60px auto 0; padding-top: 40px; border-top: 4px solid var(--cm-ink); }

/* =========================================================
   ARCHIVE / CATEGORY
   ========================================================= */
.cm-archive-head{ padding: 30px 0 26px; border-bottom: 4px solid var(--cat-c, var(--cm-ink)); margin-bottom: 36px; }
.cm-archive-head .cm-eyebrow{ font-size: .85rem; }
.cm-archive-head h1{ font-size: clamp(1.8rem, 3.6vw, 2.6rem); }
.cm-archive-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.cm-pagination{ display: flex; gap: 8px; margin-top: 40px; font-family: var(--font-mono); font-size: .82rem; }
.cm-pagination a, .cm-pagination span{
  border: 1px solid var(--cm-line); padding: 10px 14px; border-radius: var(--radius);
}
.cm-pagination .current{ background: var(--cm-ink); color: #fff; border-color: var(--cm-ink); }

/* =========================================================
   COMMENTS / NO RESULTS
   ========================================================= */
.cm-comments{ max-width: 720px; margin: 50px auto 0; }
.cm-comment-list{ margin: 20px 0; }
.cm-comment-list .comment-body{ padding: 18px 0; border-bottom: 1px solid var(--cm-line); }
.cm-comment-list .comment-author{ font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.cm-comment-list .comment-metadata{ font-family: var(--font-mono); font-size: .72rem; color: var(--cm-ink-faint); margin-bottom: 8px; }
.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea{
  width: 100%; border: 2px solid var(--cm-line); padding: 12px; margin-bottom: 14px; font-family: var(--font-body); font-size: 1rem; border-radius: var(--radius);
}
.comment-respond textarea{ min-height: 130px; }
.comment-respond .form-submit input{
  background: var(--cm-brand); color: #fff; border: 0; padding: 12px 22px; border-radius: var(--radius);
  font-family: var(--font-mono); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em;
}
.cm-no-results{ max-width: 600px; padding: 40px 0; }
.cm-no-results h2{ font-size: 1.6rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.cm-footer{ background: var(--cm-ink); color: #fff; margin-top: 60px; padding: 50px 0 24px; }
.cm-footer-grid{ display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 34px; margin-bottom: 40px; }
.cm-footer h4{ font-family: var(--font-mono); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-brand); margin-bottom: 16px; }
.cm-footer ul li{ margin-bottom: 10px; }
.cm-footer a{ color: rgba(255,255,255,.78); }
.cm-footer a:hover{ color: #fff; text-decoration: underline; }
.cm-footer-logo{ font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 12px; }
.cm-footer-logo .accent{ color: var(--cm-brand); }
.cm-footer-bottom{
  border-top: 1px solid rgba(255,255,255,.15); padding-top: 20px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-family: var(--font-mono); font-size: .72rem; color: rgba(255,255,255,.55);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  .cm-hero{ grid-template-columns: 1fr; }
  .cm-content-columns{ grid-template-columns: 1fr; }
  .cm-trending-grid{ grid-template-columns: repeat(2,1fr); }
  .cm-archive-grid{ grid-template-columns: 1fr; }
  .cm-footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .cm-trending-grid{ grid-template-columns: 1fr; }
  .cm-footer-grid{ grid-template-columns: 1fr; }
  .cm-masthead-tools .cm-subscribe-btn{ display: none; }
}