/*
Theme Name: RandomRead
Theme URI: https://randomread.net
Author: Asif
Description: A clean, clutter-free reading theme for RandomRead — built for a general-interest blog spanning History, Current Affairs, Nature, Psychology and Pop Culture. Ships with a homepage slider that surfaces random articles, and a set of purpose-built, policy-safe ad slots (widget areas + hooks) designed to work alongside your existing ad plugins.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: randomread
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root{
  /* Paper & ink */
  --rr-paper: #F6F3EC;
  --rr-surface: #FFFFFF;
  --rr-ink: #1E1B16;
  --rr-ink-muted: #6B6558;
  --rr-line: #DEDACD;

  /* Accents — used sparingly and on purpose */
  --rr-accent: #22405A;      /* ink-blue: links, active states, shuffle */
  --rr-accent-warm: #C08A2E; /* ochre: category tags only */

  /* Type */
  --rr-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --rr-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Rhythm */
  --rr-max-width: 1180px;
  --rr-content-width: 68ch;
  --rr-radius: 3px;
  --rr-space-1: 0.5rem;
  --rr-space-2: 1rem;
  --rr-space-3: 1.75rem;
  --rr-space-4: 2.75rem;
  --rr-space-5: 4.5rem;
}

/* ==========================================================================
   2. 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(--rr-paper);
  color: var(--rr-ink);
  font-family: var(--rr-font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: var(--rr-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--rr-accent);
  outline-offset: 2px;
}
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }

h1, h2, h3, h4{
  font-family: var(--rr-font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--rr-ink);
}
h1{ font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); font-weight: 500; }
h2{ font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); }
h3{ font-size: 1.35rem; }
h4{ font-size: 1.1rem; }

.rr-container{
  max-width: var(--rr-max-width);
  margin-inline: auto;
  padding-inline: var(--rr-space-3);
}

.screen-reader-text{
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0;
}
.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--rr-ink); color: #fff; padding: 0.75em 1.25em;
}
.skip-link:focus{ left: var(--rr-space-2); top: var(--rr-space-2); }

/* ==========================================================================
   3. Site header
   ========================================================================== */

.rr-header{
  position: sticky; top: 0; z-index: 40;
  background: var(--rr-paper);
  border-bottom: 1px solid var(--rr-line);
}
.rr-header__bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rr-space-3);
  padding-block: var(--rr-space-2);
}
.rr-logo{
  font-family: var(--rr-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--rr-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.rr-logo:hover{ color: var(--rr-accent); }
.rr-logo img{ max-height: 40px; width: auto; }

.rr-nav{ display: flex; align-items: center; gap: var(--rr-space-3); }
.rr-nav ul{ display: flex; gap: var(--rr-space-3); flex-wrap: wrap; }
.rr-nav a{
  color: var(--rr-ink); text-decoration: none; font-size: 0.95rem;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
}
.rr-nav a:hover, .rr-nav .current-menu-item > a{
  border-bottom-color: var(--rr-accent-warm);
}

.rr-header__actions{ display: flex; align-items: center; gap: var(--rr-space-2); }
.rr-search-toggle, .rr-menu-toggle{
  background: none; border: 1px solid var(--rr-line); border-radius: var(--rr-radius);
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--rr-ink);
}
.rr-search-toggle:hover, .rr-menu-toggle:hover{ border-color: var(--rr-ink); }
.rr-menu-toggle{ display: none; }

.rr-search-panel{
  max-height: 0; overflow: hidden; transition: max-height 0.25s ease;
  border-bottom: 1px solid transparent;
}
.rr-search-panel.is-open{ max-height: 90px; border-bottom-color: var(--rr-line); }
.rr-search-panel form{ display: flex; gap: var(--rr-space-1); padding-block: var(--rr-space-2); }
.rr-search-panel input[type="search"]{
  flex: 1; padding: 0.6em 0.8em; border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius); background: var(--rr-surface); font-size: 1rem;
}
.rr-search-panel button{
  padding: 0.6em 1.2em; background: var(--rr-ink); color: #fff; border: none; border-radius: var(--rr-radius);
}

@media (max-width: 780px){
  .rr-nav{ display: none; }
  .rr-menu-toggle{ display: inline-flex; }
  .rr-nav.is-open{
    display: block; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--rr-paper); border-bottom: 1px solid var(--rr-line);
    padding: var(--rr-space-2) var(--rr-space-3) var(--rr-space-3);
  }
  .rr-nav.is-open ul{ flex-direction: column; gap: var(--rr-space-2); }
}

/* ==========================================================================
   4. Hero slider — random articles
   ========================================================================== */

.rr-slider{
  position: relative;
  border-bottom: 1px solid var(--rr-line);
  background: var(--rr-surface);
}
.rr-slider__track{ position: relative; min-height: 420px; }
.rr-slide{
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.15fr;
  opacity: 0; visibility: hidden; transition: opacity 0.5s ease;
}
.rr-slide.is-active{ position: relative; opacity: 1; visibility: visible; }
.rr-slide__text{
  display: flex; flex-direction: column; justify-content: center; gap: var(--rr-space-2);
  padding: var(--rr-space-4) var(--rr-space-4);
}
.rr-slide__tag{
  display: inline-block; align-self: flex-start;
  font-size: 0.78rem; color: var(--rr-accent-warm);
  border: 1px solid var(--rr-accent-warm); border-radius: 999px;
  padding: 0.2em 0.85em;
}
.rr-slide__title{ margin: 0; }
.rr-slide__title a{ color: var(--rr-ink); text-decoration: none; }
.rr-slide__title a:hover{ color: var(--rr-accent); }
.rr-slide__excerpt{ color: var(--rr-ink-muted); max-width: 46ch; }
.rr-slide__meta{ color: var(--rr-ink-muted); font-size: 0.9rem; }
.rr-slide__figure{ position: relative; margin: 0; overflow: hidden; background: var(--rr-paper); }
.rr-slide__figure img{ width: 100%; height: 100%; object-fit: cover; }
.rr-slide__figure.rr-fallback{
  display: flex; align-items: center; justify-content: center;
  font-family: var(--rr-font-display); font-size: 3rem; color: var(--rr-surface);
}

.rr-slider__controls{
  display: flex; align-items: center; gap: var(--rr-space-2);
  padding: var(--rr-space-2) var(--rr-space-4);
  border-top: 1px solid var(--rr-line);
}
.rr-slider__arrow{
  background: none; border: 1px solid var(--rr-line); border-radius: 50%;
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--rr-ink);
}
.rr-slider__arrow:hover{ border-color: var(--rr-ink); }
.rr-slider__dots{ display: flex; gap: 6px; margin-inline: var(--rr-space-1); }
.rr-slider__dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--rr-line); border: none; padding: 0;
}
.rr-slider__dot.is-active{ background: var(--rr-accent); }
.rr-slider__shuffle{
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.5em;
  background: var(--rr-ink); color: #fff; border: none; border-radius: var(--rr-radius);
  padding: 0.55em 1.1em; font-size: 0.9rem;
}
.rr-slider__shuffle:hover{ background: var(--rr-accent); }
.rr-slider__shuffle[disabled]{ opacity: 0.6; cursor: progress; }
.rr-slider__shuffle .rr-shuffle-icon{ transition: transform 0.4s ease; }
.rr-slider__shuffle.is-loading .rr-shuffle-icon{ animation: rr-spin 0.6s linear infinite; }
@keyframes rr-spin{ to{ transform: rotate(360deg); } }

@media (max-width: 780px){
  .rr-slide{ grid-template-columns: 1fr; }
  .rr-slide__figure{ min-height: 200px; order: -1; }
  .rr-slide__text{ padding: var(--rr-space-3); }
  .rr-slider__track{ min-height: unset; }
  .rr-slider__controls{ padding: var(--rr-space-2) var(--rr-space-3); flex-wrap: wrap; }
}

/* ==========================================================================
   5. Ad slots — reserved space, honestly labelled, never disguised
   ========================================================================== */

.rr-ad-slot{
  margin: var(--rr-space-4) auto;
  max-width: var(--rr-max-width);
  padding-inline: var(--rr-space-3);
}
.rr-ad-slot__inner{
  background: var(--rr-surface);
  border: 1px solid var(--rr-line);
  border-radius: var(--rr-radius);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4em;
  overflow: hidden;
}
.rr-ad-slot__label{
  font-size: 0.7rem; color: var(--rr-ink-muted); letter-spacing: 0.02em;
  padding-top: 0.6em;
}
.rr-ad-slot--header .rr-ad-slot__inner{ min-height: 90px; }
.rr-ad-slot--in-content .rr-ad-slot__inner{ min-height: 250px; }
.rr-ad-slot--in-feed .rr-ad-slot__inner{ min-height: 200px; }
.rr-ad-slot--sidebar .rr-ad-slot__inner{ min-height: 250px; }
.rr-ad-slot--footer .rr-ad-slot__inner{ min-height: 120px; }
.rr-ad-slot--in-content, .rr-ad-slot--in-feed{ padding-inline: 0; max-width: var(--rr-content-width); }
article .rr-ad-slot--in-content{ max-width: 100%; }

/* ==========================================================================
   6. Post grid & cards
   ========================================================================== */

.rr-section-heading{
  display: flex; align-items: baseline; justify-content: space-between;
  margin-block: var(--rr-space-4) var(--rr-space-2);
}
.rr-section-heading h2{ margin: 0; }
.rr-section-heading a{ font-size: 0.9rem; text-decoration: none; white-space: nowrap; }

.rr-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rr-space-4) var(--rr-space-3);
  padding-block: var(--rr-space-2);
}
.rr-grid--feature .rr-card:first-child{ grid-column: span 2; grid-row: span 2; }
.rr-grid--feature .rr-card:first-child .rr-card__title{ font-size: 1.6rem; }
.rr-grid--feature .rr-card:first-child .rr-card__figure{ aspect-ratio: 16/9; }

.rr-card{
  border-top: 1px solid var(--rr-line);
  padding-top: var(--rr-space-2);
  display: flex; flex-direction: column; gap: 0.6em;
}
.rr-card__figure{ margin: 0; aspect-ratio: 4/3; overflow: hidden; background: var(--rr-line); border-radius: var(--rr-radius); }
.rr-card__figure img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.rr-card:hover .rr-card__figure img{ transform: scale(1.03); }
.rr-card__figure.rr-fallback{ display: flex; align-items: center; justify-content: center; font-family: var(--rr-font-display); color: var(--rr-surface); font-size: 1.8rem; }
.rr-card__tag{ font-size: 0.78rem; color: var(--rr-accent-warm); }
.rr-card__title{ font-size: 1.15rem; margin: 0; }
.rr-card__title a{ color: var(--rr-ink); text-decoration: none; }
.rr-card__title a:hover{ color: var(--rr-accent); }
.rr-card__excerpt{ color: var(--rr-ink-muted); font-size: 0.95rem; margin: 0; }
.rr-card__meta{ color: var(--rr-ink-muted); font-size: 0.82rem; }

@media (max-width: 900px){
  .rr-grid{ grid-template-columns: repeat(2, 1fr); }
  .rr-grid--feature .rr-card:first-child{ grid-column: span 2; }
}
@media (max-width: 600px){
  .rr-grid{ grid-template-columns: 1fr; }
  .rr-grid--feature .rr-card:first-child{ grid-column: span 1; }
}

/* ==========================================================================
   7. Layout: content + sidebar
   ========================================================================== */

.rr-layout{
  display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: var(--rr-space-5);
  align-items: start;
  padding-block: var(--rr-space-4);
}
.rr-layout--no-sidebar{ grid-template-columns: minmax(0,1fr); max-width: var(--rr-content-width); margin-inline: auto; }
.rr-layout--full{ grid-template-columns: minmax(0,1fr); }
.rr-main{ min-width: 0; }
.rr-sidebar{ display: flex; flex-direction: column; gap: var(--rr-space-4); position: sticky; top: 90px; }
.rr-sidebar .widget-title{ font-family: var(--rr-font-display); font-size: 1.1rem; margin: 0 0 0.75em; }
@media (max-width: 900px){
  .rr-layout{ grid-template-columns: 1fr; }
  .rr-sidebar{ position: static; }
}

/* ==========================================================================
   8. Single post
   ========================================================================== */

.rr-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--rr-accent-warm); z-index: 50; transition: width 0.1s linear;
}
.rr-article-header{ max-width: var(--rr-content-width); margin: var(--rr-space-4) auto var(--rr-space-3); padding-inline: var(--rr-space-3); }
.rr-article-header .rr-slide__tag{ margin-bottom: var(--rr-space-2); }
.rr-article-header h1{ margin-bottom: var(--rr-space-2); }
.rr-article-meta{ color: var(--rr-ink-muted); font-size: 0.92rem; }
.rr-article-figure{ max-width: var(--rr-max-width); margin: 0 auto var(--rr-space-3); padding-inline: var(--rr-space-3); }
.rr-article-figure img{ border-radius: var(--rr-radius); width: 100%; }
.rr-article-figure figcaption{ color: var(--rr-ink-muted); font-size: 0.85rem; margin-top: 0.5em; }

.rr-entry-content{ max-width: var(--rr-content-width); margin-inline: auto; padding-inline: var(--rr-space-3); }
.rr-entry-content p, .rr-entry-content ul, .rr-entry-content ol{ margin: 0 0 1.4em; }
.rr-entry-content ul, .rr-entry-content ol{ padding-left: 1.4em; list-style: revert; }
.rr-entry-content h2{ margin-top: 1.6em; }
.rr-entry-content h3{ margin-top: 1.4em; }
.rr-entry-content blockquote{
  margin: var(--rr-space-3) 0; padding-left: var(--rr-space-3);
  border-left: 3px solid var(--rr-accent-warm);
  font-family: var(--rr-font-display); font-style: italic; font-size: 1.2rem; color: var(--rr-ink);
}
.rr-entry-content img{ border-radius: var(--rr-radius); margin-block: 0.5em; }
.rr-entry-content a{ text-decoration-line: underline; }
.rr-entry-content pre{ background: var(--rr-surface); border: 1px solid var(--rr-line); padding: 1em; border-radius: var(--rr-radius); overflow-x: auto; }
.rr-entry-content code{ background: var(--rr-surface); padding: 0.15em 0.4em; border-radius: 3px; }

.rr-tags{ max-width: var(--rr-content-width); margin: var(--rr-space-3) auto; padding-inline: var(--rr-space-3); display: flex; gap: 0.5em; flex-wrap: wrap; }
.rr-tags a{
  font-size: 0.82rem; color: var(--rr-ink-muted); text-decoration: none;
  border: 1px solid var(--rr-line); border-radius: 999px; padding: 0.3em 0.9em;
}
.rr-tags a:hover{ border-color: var(--rr-ink); color: var(--rr-ink); }

.rr-author-box{
  max-width: var(--rr-content-width); margin: var(--rr-space-4) auto; padding: var(--rr-space-3);
  border-top: 1px solid var(--rr-line); border-bottom: 1px solid var(--rr-line);
  display: flex; gap: var(--rr-space-2); align-items: center;
}
.rr-author-box img{ border-radius: 50%; width: 56px; height: 56px; }
.rr-author-box h3{ margin: 0 0 0.2em; font-size: 1rem; }
.rr-author-box p{ margin: 0; color: var(--rr-ink-muted); font-size: 0.9rem; }

.rr-related{ max-width: var(--rr-max-width); margin: var(--rr-space-5) auto; padding-inline: var(--rr-space-3); }

/* ==========================================================================
   9. Comments
   ========================================================================== */

.rr-comments{ max-width: var(--rr-content-width); margin: var(--rr-space-4) auto; padding-inline: var(--rr-space-3); }
.rr-comments ol{ list-style: none; margin: 0; padding: 0; }
.rr-comments .comment{ border-top: 1px solid var(--rr-line); padding-block: var(--rr-space-2); }
.rr-comments .comment-author{ font-weight: 600; font-size: 0.92rem; }
.rr-comments .comment-metadata{ font-size: 0.8rem; color: var(--rr-ink-muted); }
.rr-comments .children{ margin-left: var(--rr-space-3); }
.comment-form input, .comment-form textarea{
  width: 100%; padding: 0.7em; border: 1px solid var(--rr-line); border-radius: var(--rr-radius);
  font-family: inherit; margin-bottom: 0.8em; background: var(--rr-surface);
}
.comment-form textarea{ min-height: 120px; }
.comment-form .form-submit input{
  width: auto; background: var(--rr-ink); color: #fff; border: none; padding: 0.7em 1.6em;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */

.rr-footer{ border-top: 1px solid var(--rr-line); margin-top: var(--rr-space-5); padding-block: var(--rr-space-4); }
.rr-footer__grid{ display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--rr-space-4); }
.rr-footer__about p{ color: var(--rr-ink-muted); max-width: 42ch; }
.rr-footer h4{ font-size: 0.95rem; margin-bottom: 0.8em; }
.rr-footer ul{ display: flex; flex-direction: column; gap: 0.5em; }
.rr-footer a{ color: var(--rr-ink-muted); text-decoration: none; font-size: 0.92rem; }
.rr-footer a:hover{ color: var(--rr-accent); }
.rr-footer__bottom{ margin-top: var(--rr-space-4); padding-top: var(--rr-space-2); border-top: 1px solid var(--rr-line); color: var(--rr-ink-muted); font-size: 0.85rem; }
@media (max-width: 700px){ .rr-footer__grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   11. Misc: pagination, 404, search
   ========================================================================== */

.rr-pagination{ display: flex; gap: 0.6em; justify-content: center; padding-block: var(--rr-space-4); }
.rr-pagination a, .rr-pagination span{
  border: 1px solid var(--rr-line); border-radius: var(--rr-radius); padding: 0.5em 0.9em; text-decoration: none; color: var(--rr-ink);
}
.rr-pagination .current{ background: var(--rr-ink); color: #fff; border-color: var(--rr-ink); }

.rr-empty{ max-width: var(--rr-content-width); margin: var(--rr-space-5) auto; padding-inline: var(--rr-space-3); text-align: left; }
.rr-empty form{ display: flex; gap: 0.5em; margin-top: var(--rr-space-2); max-width: 420px; }
.rr-empty input[type="search"]{ flex: 1; padding: 0.7em; border: 1px solid var(--rr-line); border-radius: var(--rr-radius); }
.rr-empty button{ padding: 0.7em 1.4em; background: var(--rr-ink); color: #fff; border: none; border-radius: var(--rr-radius); }