/*
Theme Name: Popcorn Weekly
Theme URI: https://example.com/popcorn-weekly
Author: Popcorn Weekly Studio
Author URI: https://example.com
Description: A clean, card-based magazine theme for movie and TV review sites. Ships with a fully customizable homepage (adjust how many boxes appear in every grid straight from the Customizer), a built-in color system with live preview, a critic scores meta box, custom post types for critics, and widgetized footer. Built to match the "Popcorn Weekly" homepage design.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: popcorn-weekly
Tags: blog, news, entertainment, custom-colors, custom-menu, featured-images, grid-layout, threaded-comments, translation-ready
*/

/* =========================================================
   0. COLOR SYSTEM (CSS custom properties)
   All values below are overridden inline by the Customizer
   (see inc/customizer.php -> pw_customizer_css()), so editors
   get true live-preview without a page reload.
   ========================================================= */
:root{
  --pw-bg:            #efece4;   /* page background */
  --pw-surface:       #ffffff;   /* card / module background */
  --pw-surface-muted: #efece7;   /* placeholder / thumbnail boxes */
  --pw-border:        #e3e0d8;
  --pw-text:          #1f2320;
  --pw-text-muted:    #6b6f6a;
  --pw-accent:        #3b6fe0;   /* links, ratings, badge text */
  --pw-accent-2:      #ef7d3b;   /* warm accent: fun factor, mid-tier reviews */
  --pw-accent-3:      #1f9d6e;   /* green accent: rewatch score, top-tier reviews */
  --pw-badge-bg:      #dbe7fb;   /* "this week's main drop" pill */
  --pw-badge-text:    #2f5bc4;
  --pw-pill-bg:       #efece7;   /* craft 8 / fun factor 7 pills */
  --pw-pill-text:     #3a3d38;
  --pw-newsletter-bg: #dbe9fb;
  --pw-newsletter-text: #2f5bc4;
  --pw-button-bg:     #ffffff;
  --pw-button-text:   #1f2320;
  --pw-radius:        14px;
  --pw-radius-sm:     8px;
  --pw-container:     1080px;
  --pw-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --pw-font-display: Georgia, "Times New Roman", serif;
}

/* =========================================================
   1. RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--pw-bg);
  color:var(--pw-text);
  font-family:var(--pw-font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-weight:600; }
button, input, textarea{ font-family:inherit; }

.screen-reader-text{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap;
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--pw-accent);
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* =========================================================
   2. LAYOUT SHELL
   ========================================================= */
.pw-shell{
  max-width: calc(var(--pw-container) + 40px);
  margin:24px auto;
  background:var(--pw-surface);
  border-radius:20px;
  padding:0 0 8px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
body.pw-layout-full .pw-shell{
  background:transparent;
  box-shadow:none;
  max-width:none;
  margin:0;
}
body.pw-layout-full .pw-site-header,
body.pw-layout-full .pw-container{
  max-width:var(--pw-container);
  margin-left:auto;
  margin-right:auto;
}
.pw-container{
  max-width:var(--pw-container);
  margin:0 auto;
  padding:0 28px;
}

/* =========================================================
   3. HEADER
   ========================================================= */
.pw-site-header{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 28px 18px;
  border-bottom:1px solid var(--pw-border);
}
.pw-logo{
  font-size:19px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--pw-text);
}
.pw-logo a{ color:inherit; }

/* punk flyer-style badge logo (Appearance -> Customize -> Theme Options -> Logo) */
.pw-punk-logo{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  text-decoration:none;
}
.pw-punk-logo-badges{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 14px;
  border-radius:8px;
  transform-origin:left center;
}
.pw-punk-badge{
  display:inline-block;
  padding:4px 12px 6px;
  font-family:'Anton', Impact, 'Arial Narrow', sans-serif;
  font-weight:400;
  font-size:24px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:-.01em;
  border-radius:2px;
  white-space:nowrap;
  box-shadow:0 2px 0 rgba(0,0,0,.25);
}
.pw-punk-badge:nth-child(1){ transform:rotate(-4deg); }
.pw-punk-badge:nth-child(2){ transform:rotate(3deg); margin-left:-2px; }
.pw-punk-badge:nth-child(3){ transform:rotate(-3deg); font-size:0.78em; align-self:flex-start; margin-top:-4px; }
.pw-punk-tagline{
  font-family:'Space Mono', 'Courier New', monospace;
  font-size:11.5px;
  letter-spacing:.01em;
  line-height:1.5;
  padding-left:4px;
}
@media (max-width:480px){
  .pw-punk-badge{ font-size:19px; }
  .pw-punk-logo-badges{ padding:10px 12px; }
}

.pw-primary-nav ul{
  display:flex;
  gap:26px;
}
.pw-primary-nav a{
  font-size:14.5px;
  color:var(--pw-text-muted);
  transition:color .15s ease;
}
.pw-primary-nav a:hover,
.pw-primary-nav .current-menu-item a{
  color:var(--pw-text);
}
.pw-menu-toggle{
  display:none;
  background:none;
  border:1px solid var(--pw-border);
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
}
@media (max-width:720px){
  .pw-menu-toggle{ display:block; }
  .pw-primary-nav{
    display:none;
    width:100%;
    order:3;
    padding-top:14px;
  }
  .pw-primary-nav.is-open{ display:block; }
  .pw-primary-nav ul{ flex-direction:column; gap:14px; }
  .pw-site-header{ flex-wrap:wrap; }
}

/* header layout variants */
.pw-header-actions{ display:flex; align-items:center; gap:8px; }
.pw-search-toggle{
  background:none;
  border:1px solid var(--pw-border);
  border-radius:8px;
  padding:8px 10px;
  cursor:pointer;
  font-size:15px;
  line-height:1;
}
.pw-header-search{
  display:none;
  width:100%;
  order:4;
  padding-top:14px;
}
.pw-header-search.is-open{ display:block; }
.pw-header-search form{ display:flex; gap:8px; margin:0 !important; }
.pw-header-search input[type=search]{
  flex:1;
  border:1px solid var(--pw-border);
  border-radius:8px;
  padding:9px 12px;
}

.pw-header-logo-center{ flex-wrap:wrap; justify-content:center; text-align:center; }
.pw-header-logo-center .pw-logo{ width:100%; margin-bottom:10px; }
.pw-header-logo-center .pw-primary-nav{ order:2; }
.pw-header-logo-center .pw-header-actions{ order:3; position:absolute; right:28px; top:26px; }
@media (max-width:720px){
  .pw-header-logo-center .pw-header-actions{ position:static; }
}

.pw-header-sticky{
  position:sticky;
  top:0;
  z-index:80;
  background:var(--pw-surface);
}
body.pw-layout-full .pw-header-sticky{ background:var(--pw-bg); }

/* =========================================================
   4. SECTION HEADINGS
   ========================================================= */
.pw-section{ padding:34px 28px 6px; }
.pw-section-title{
  font-size:14.5px;
  color:var(--pw-text-muted);
  margin-bottom:16px;
}
.pw-section-title strong{ color:var(--pw-text); font-weight:600; }
[data-pw-section] .pw-section-title{ display:flex; align-items:center; gap:8px; }
[data-pw-section] .pw-section-title::before{
  content:'';
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}
[data-pw-section="streaming"] .pw-section-title::before{ background:var(--pw-accent); }
[data-pw-section="airing"] .pw-section-title::before{ background:var(--pw-accent-2); }
[data-pw-section="reviews"] .pw-section-title::before{ background:var(--pw-accent-3); }
[data-pw-section="critics"] .pw-section-title::before{ background:var(--pw-accent); }

/* =========================================================
   5. HERO / "MAIN DROP"
   ========================================================= */
.pw-hero{ padding:28px 28px 8px; }
.pw-hero-card{
  border:1px solid var(--pw-border);
  border-radius:var(--pw-radius);
  overflow:hidden;
}
.pw-hero-media{
  display:block;
  aspect-ratio:16/8.5;
  background:linear-gradient(135deg, var(--pw-accent) 0%, var(--pw-accent-2) 50%, var(--pw-accent-3) 100%);
  overflow:hidden;
}
/* Real, optimized <img> tags output by pw_thumb_img() — always fills its
   box via object-fit rather than stretching or leaving gaps (see also
   .pw-entry-thumb img for the single-post equivalent). */
.pw-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pw-hero-body{ padding:22px 24px 26px; }
.pw-badge{
  display:inline-block;
  background:var(--pw-badge-bg);
  color:var(--pw-badge-text);
  font-size:12.5px;
  font-weight:600;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:14px;
}
.pw-hero-title{
  font-size:26px;
  line-height:1.25;
  margin-bottom:8px;
  font-family:var(--pw-font-display);
}
.pw-hero-title a{ color:var(--pw-text); }
.pw-hero-hook{
  color:var(--pw-text-muted);
  font-size:15px;
  margin-bottom:16px;
}
.pw-scorepills{ display:flex; flex-wrap:wrap; gap:8px; }
.pw-pill{
  background:var(--pw-pill-bg);
  color:var(--pw-pill-text);
  font-size:12.5px;
  font-weight:700;
  padding:5px 12px;
  border-radius:999px;
}
.pw-scorepills .pw-pill:nth-child(1),
.pw-scorebox .pw-pill:nth-child(1){ color:var(--pw-accent); }
.pw-scorepills .pw-pill:nth-child(2),
.pw-scorebox .pw-pill:nth-child(2){ color:var(--pw-accent-2); }
.pw-scorepills .pw-pill:nth-child(3),
.pw-scorebox .pw-pill:nth-child(3){ color:var(--pw-accent-3); }

/* =========================================================
   6. GRIDS (streaming guide / now airing / reviews)
   Column count is driven by an inline CSS var --pw-cols
   which the Customizer sets per-section (see functions.php).
   ========================================================= */
.pw-grid{
  display:grid;
  grid-template-columns:repeat(var(--pw-cols, 5), 1fr);
  gap:16px;
}
@media (max-width:900px){ .pw-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:600px){ .pw-grid{ grid-template-columns:repeat(2,1fr); } }

.pw-tile{
  aspect-ratio:1/1;
  background:var(--pw-surface-muted);
  border-radius:var(--pw-radius-sm);
  position:relative;
  overflow:hidden;
}
.pw-tile:nth-of-type(3n+1){ background:linear-gradient(135deg, var(--pw-accent), var(--pw-accent-3)); }
.pw-tile:nth-of-type(3n+2){ background:linear-gradient(135deg, var(--pw-accent-2), var(--pw-accent)); }
.pw-tile:nth-of-type(3n+3){ background:linear-gradient(135deg, var(--pw-accent-3), var(--pw-accent-2)); }
.pw-tile-label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:22px 10px 8px;
  background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
  color:#fff;
}
.pw-tile-label strong{
  display:block;
  font-size:12.5px;
  font-weight:700;
  line-height:1.3;
}
.pw-tile-label small{
  display:block;
  font-size:11px;
  font-weight:400;
  opacity:.85;
  margin-top:2px;
  line-height:1.3;
}

/* now airing cards */
.pw-card-grid{
  display:grid;
  grid-template-columns:repeat(var(--pw-cols, 3), 1fr);
  gap:16px;
}
@media (max-width:760px){ .pw-card-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pw-card-grid{ grid-template-columns:1fr; } }
.pw-airing-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--pw-surface-muted);
  border-radius:var(--pw-radius-sm);
  border-left:4px solid var(--pw-accent);
  padding:14px 16px;
}
.pw-airing-card:nth-of-type(3n+2){ border-left-color:var(--pw-accent-2); }
.pw-airing-card:nth-of-type(3n+3){ border-left-color:var(--pw-accent-3); }
.pw-airing-thumb{
  display:block;
  width:60px; height:60px;
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  background:linear-gradient(135deg, var(--pw-accent), var(--pw-accent-3));
}
.pw-airing-card:nth-of-type(3n+2) .pw-airing-thumb{ background:linear-gradient(135deg, var(--pw-accent-2), var(--pw-accent)); }
.pw-airing-card:nth-of-type(3n+3) .pw-airing-thumb{ background:linear-gradient(135deg, var(--pw-accent-3), var(--pw-accent-2)); }
.pw-airing-body{ min-width:0; }
.pw-airing-card h3{ font-size:15.5px; margin-bottom:4px; color:var(--pw-text); }
.pw-airing-card p{ margin:0; font-size:13.5px; color:var(--pw-text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* latest reviews */
.pw-review-card figure{
  aspect-ratio:1/1;
  background:var(--pw-surface-muted);
  border-radius:var(--pw-radius-sm);
  overflow:hidden;
  margin:0 0 10px;
}
.pw-review-card:nth-of-type(3n+1) figure{ background:linear-gradient(135deg, var(--pw-accent-3), var(--pw-accent)); }
.pw-review-card:nth-of-type(3n+2) figure{ background:linear-gradient(135deg, var(--pw-accent), var(--pw-accent-2)); }
.pw-review-card:nth-of-type(3n+3) figure{ background:linear-gradient(135deg, var(--pw-accent-2), var(--pw-accent-3)); }
.pw-review-card h3{ font-size:15px; margin-bottom:4px; color:var(--pw-text); }
.pw-review-excerpt{
  font-size:12.5px;
  line-height:1.45;
  color:var(--pw-text-muted);
  margin:0 0 6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.pw-review-card .pw-score{
  font-weight:700;
  color:var(--pw-accent);
  font-size:14px;
}

/* =========================================================
   7. NEWSLETTER
   ========================================================= */
.pw-newsletter{
  margin:30px 28px 6px;
  background:linear-gradient(120deg, var(--pw-newsletter-bg) 0%, var(--pw-badge-bg) 100%);
  border-radius:var(--pw-radius-sm);
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.pw-newsletter-copy strong{
  display:block;
  color:var(--pw-newsletter-text);
  font-size:14.5px;
  margin-bottom:2px;
}
.pw-newsletter-copy span{
  color:var(--pw-newsletter-text);
  opacity:.85;
  font-size:13.5px;
}
.pw-newsletter form{ display:flex; gap:8px; }
.pw-newsletter input[type=email]{
  border:1px solid rgba(47,91,196,.25);
  border-radius:8px;
  padding:9px 12px;
  font-size:13.5px;
  min-width:180px;
  background:#fff;
}
.pw-btn{
  background:var(--pw-button-bg);
  color:var(--pw-button-text);
  border:1px solid var(--pw-border);
  border-radius:8px;
  padding:9px 16px;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .15s ease;
}
.pw-btn:hover{ box-shadow:0 2px 8px rgba(0,0,0,.08); }
.pw-btn:active{ transform:translateY(1px); }

/* =========================================================
   8. CRITICS
   ========================================================= */
.pw-critics{ display:flex; gap:22px; flex-wrap:wrap; padding:26px 28px 34px; }
.pw-critic{ display:flex; align-items:center; gap:10px; }
.pw-critic-avatar{
  display:block;
  width:34px; height:34px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg, var(--pw-accent), var(--pw-accent-3));
}
.pw-critic:nth-of-type(3n+2) .pw-critic-avatar{ background:linear-gradient(135deg, var(--pw-accent-2), var(--pw-accent)); }
.pw-critic:nth-of-type(3n+3) .pw-critic-avatar{ background:linear-gradient(135deg, var(--pw-accent-3), var(--pw-accent-2)); }
.pw-critic-name{ font-size:14px; font-weight:500; }

/* =========================================================
   9. SINGLE / PAGE / ARCHIVE
   ========================================================= */
.pw-content{ padding:30px 28px 50px; }
.pw-entry-header{ margin-bottom:20px; }
.pw-entry-title{
  font-family:var(--pw-font-display);
  font-size:32px;
  line-height:1.2;
  margin-bottom:10px;
}
.pw-entry-meta{ color:var(--pw-text-muted); font-size:13.5px; }
.pw-entry-meta a{ color:var(--pw-accent); }
.pw-entry-thumb{
  aspect-ratio:16/8.5;
  border-radius:var(--pw-radius);
  overflow:hidden;
  margin:18px 0 24px;
  background:var(--pw-surface-muted);
}
.pw-entry-thumb img,
.pw-entry-thumb img.wp-post-image{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block;
  margin:0;
}
.pw-entry-content{ font-size:16.5px; line-height:1.7; }
.pw-entry-content p{ margin:0 0 20px; }
.pw-entry-content h2{ font-size:22px; margin:32px 0 14px; }
.pw-entry-content h3{ font-size:18px; margin:26px 0 12px; }
.pw-entry-content img{ border-radius:var(--pw-radius-sm); }
.pw-entry-content blockquote{
  border-left:3px solid var(--pw-accent);
  margin:24px 0; padding:4px 0 4px 18px;
  color:var(--pw-text-muted);
  font-style:italic;
}
.pw-scorebox{
  display:flex; gap:10px; flex-wrap:wrap;
  margin:18px 0 28px;
}
.pw-archive-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
@media (max-width:760px){ .pw-archive-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pw-archive-grid{ grid-template-columns:1fr; } }
.pw-pagination{
  display:flex; gap:8px; margin-top:30px; flex-wrap:wrap;
}
.pw-pagination a, .pw-pagination span{
  border:1px solid var(--pw-border);
  border-radius:8px;
  padding:6px 12px;
  font-size:13.5px;
  color:var(--pw-text-muted);
}
.pw-pagination .current{ color:var(--pw-text); font-weight:600; }

/* =========================================================
   9b. SIDEBAR LAYOUT
   ========================================================= */
.pw-layout-wrap{
  display:flex;
  gap:36px;
  align-items:flex-start;
  padding:0 28px 10px;
}
.pw-layout-wrap .pw-content{ flex:1; min-width:0; padding:30px 0 50px; }
.pw-sidebar{
  width:280px;
  flex-shrink:0;
  padding-top:30px;
}
.pw-sidebar-left{ flex-direction:row-reverse; }
.pw-sidebar .widget{
  background:var(--pw-surface-muted);
  border-radius:var(--pw-radius-sm);
  padding:18px 20px;
  margin-bottom:18px;
}
.pw-sidebar .widget-title{ font-size:14px; margin-bottom:10px; }
@media (max-width:820px){
  .pw-layout-wrap{ flex-direction:column; }
  .pw-sidebar-left{ flex-direction:column; }
  .pw-sidebar{ width:100%; padding-top:0; }
}

/* comments */
.pw-comments{ margin-top:40px; border-top:1px solid var(--pw-border); padding-top:26px; }
.comment-list{ margin:0 0 24px; }
.comment-list .comment{ margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--pw-border); }
.comment-form input, .comment-form textarea{
  width:100%;
  border:1px solid var(--pw-border);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:12px;
}

/* =========================================================
   10. FOOTER
   ========================================================= */
.pw-site-footer{
  border-top:1px solid var(--pw-border);
  padding:26px 28px 30px;
  margin-top:10px;
}
.pw-footer-widgets{
  display:grid;
  grid-template-columns:repeat(var(--pw-footer-cols, 3), 1fr);
  gap:24px;
  margin-bottom:20px;
}
@media (max-width:700px){
  .pw-footer-widgets{ grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); }
}
.pw-footer-widgets .widget-title{ font-size:13.5px; margin-bottom:10px; }
.pw-social-links{
  display:flex;
  gap:10px;
  margin:0 0 18px;
}
.pw-social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--pw-surface-muted);
  color:var(--pw-text);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  transition:background .15s ease;
}
.pw-social-links a:hover{ background:var(--pw-badge-bg); color:var(--pw-badge-text); }
.pw-footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:13px; color:var(--pw-text-muted);
}
.pw-footer-bottom nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}
.pw-footer-bottom nav a{ color:var(--pw-text-muted); transition:color .15s ease; }
.pw-footer-bottom nav a:hover{ color:var(--pw-text); }

/* =========================================================
   11. EMPTY STATES
   ========================================================= */
.pw-empty{
  color:var(--pw-text-muted);
  font-size:14px;
  padding:20px 0;
}

/* Alignment helpers used by core blocks / editor content */
.alignwide{ margin-left:calc(50% - 50vw + 1px); margin-right:calc(50% - 50vw + 1px); }
.alignfull{ width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.alignleft{ float:left; margin:6px 20px 10px 0; }
.alignright{ float:right; margin:6px 0 10px 20px; }
.aligncenter{ display:block; margin-left:auto; margin-right:auto; }