/*
Theme Name:   Greenbar Child
Description:  Child theme for Paper by Bird Themes. Replaces the
              notebook-paper background with 1980s greenbar computer paper,
              keeps the typewriter font and binder clip, and replaces the
              white sidebar notepad with a rotated Post-It widget.
Version:      1.0.0
Template:     paper

NOTE: "Template:" must match the exact folder name of the Paper parent theme
in wp-content/themes/. If yours differs (e.g. "paper-theme"), update it here.
*/

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED DESIGN TOKENS — keep these values in sync with
   greenbar-ghost/assets/css/screen.css (:root block at the top)
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --band-height:        48px;      /* 2 lines × 24 px per line             */
  --color-beige:        #f3f1ec;   /* nearly-white, low-saturation warm cream */
  --color-green:        #d4e8d0;   /* pale sage — classic greenbar green   */
  --color-outer:        #2a2a38;   /* dark "desk surface" behind the paper */
  --color-nav:          #f5f0c0;   /* yellow header/footer bar             */
  --color-nav-border:   #e0d870;
  --color-highlight:    #ffe84a;   /* yellow highlighter on headings       */
  --color-postit:       #feff9c;   /* Post-It body                         */
  --color-postit-strip: #eaeb80;   /* slightly darker adhesive strip       */
  --color-quote-bar:    #7aaecf;   /* blue left border on blockquotes      */
  --font-typewriter:    'Special Elite', 'Courier New', Courier, monospace;
  --sprocket-width:     38px;
  --sprocket-pitch:     48px;
  --sprocket-radius:    5px;
  --sprocket-ring:      rgba(75, 65, 55, 0.4);
}


/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT WIDTH — override Paper parent theme's max-width
   ═══════════════════════════════════════════════════════════════════════════ */
#page,
.site,
#content,
.site-content,
.container {
  max-width: 960px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BINDER CLIP — hide the Paper parent theme's binder clip element
   ═══════════════════════════════════════════════════════════════════════════ */
.binder-clip,
.paper-clip,
.clip {
  display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   OUTER BACKGROUND — dark desk behind the paper column
   ═══════════════════════════════════════════════════════════════════════════ */
html,
body {
  background-color: var(--color-outer) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GREENBAR PATTERN — applied to every element Paper uses as the page surface
   ═══════════════════════════════════════════════════════════════════════════ */
#page,
.site,
#content,
.site-content,
#main,
.content-area,
.hentry {
  background-image: repeating-linear-gradient(
    to bottom,
    var(--color-beige) 0px,
    var(--color-beige) var(--band-height),
    var(--color-green) var(--band-height),
    var(--color-green) calc(var(--band-height) * 2)
  ) !important;
  background-attachment: local !important;
  background-color: transparent !important;
}

/* Transparent pass-through so the gradient above shows through */
.entry-content,
.entry-summary,
.page-content,
.post-thumbnail,
#secondary,
.site-main,
#main.site-main,
.hentry,
article.post,
article.page,
.entry-header,
.post-content,
.comments-area,
.comment-list .comment-body,
.wp-block-group,
.wp-block-columns,
.wp-block-column {
  background: transparent !important;
  box-shadow: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Special Elite typewriter font throughout
   ═══════════════════════════════════════════════════════════════════════════ */
body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.site-title, .site-description,
.nav-menu a, .main-navigation a,
.widget-title,
.entry-title, .entry-meta, .entry-footer,
.comment-metadata {
  font-family: var(--font-typewriter) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HEADINGS — yellow highlighter effect
   ═══════════════════════════════════════════════════════════════════════════ */
.entry-title,
.entry-title a,
.page-title {
  background-color: var(--color-highlight) !important;
  display: inline !important;
  padding: 1px 6px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  text-decoration: none !important;
  color: #1a1a1a !important;
}

.entry-title a:hover {
  background-color: #ffd700 !important;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  background-color: var(--color-highlight) !important;
  display: inline !important;
  padding: 0 4px !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HEADER / NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════════════════ */
#masthead,
.site-header {
  background-color: var(--color-nav) !important;
  border-bottom: 2px solid var(--color-nav-border) !important;
  box-shadow: none !important;
}

.site-title a,
.site-description {
  color: #2a2a2a !important;
}

.main-navigation a,
.nav-menu a {
  color: #2a2a2a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.main-navigation a:hover {
  background-color: var(--color-highlight) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */
#colophon,
.site-footer {
  background-color: var(--color-nav) !important;
  border-top: 2px solid var(--color-nav-border) !important;
  color: #555 !important;
}

.site-footer a {
  color: #3a6a9e !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCKQUOTE
   ═══════════════════════════════════════════════════════════════════════════ */
blockquote {
  border-left: 4px solid var(--color-quote-bar) !important;
  background: rgba(255, 255, 255, 0.35) !important;
  padding-left: 1rem !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   POST-IT WIDGET
   Replaces the white notepad widget with a rotated yellow Post-It square.
   All content inside rotates with the container — this is intentional.
   ═══════════════════════════════════════════════════════════════════════════ */
#secondary .widget,
.widget-area .widget {
  background: var(--color-postit) !important;
  border: none !important;
  box-shadow:
    3px 4px 8px  rgba(0, 0, 0, 0.20),
    6px 10px 24px rgba(0, 0, 0, 0.15) !important;
  transform: rotate(-15deg) !important;
  transform-origin: top center !important;
  padding: 36px 18px 22px !important;
  width: 190px !important;
  height: 190px !important;
  margin-bottom: 52px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Adhesive strip at the top — slightly darker band like a real Post-It */
#secondary .widget::before,
.widget-area .widget::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: var(--color-postit-strip);
  pointer-events: none;
}

.widget-title {
  font-family: var(--font-typewriter) !important;
  font-size: 0.85rem !important;
  text-transform: lowercase !important;
  color: #444 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15) !important;
  padding-bottom: 6px !important;
  margin-bottom: 10px !important;
  background: transparent !important;
}

#secondary .widget p,
#secondary .widget ul,
#secondary .widget li,
.widget-area .widget p,
.widget-area .widget ul,
.widget-area .widget li {
  font-family: var(--font-typewriter) !important;
  font-size: 0.82rem !important;
  color: #333 !important;
  line-height: 1.5 !important;
}

#secondary .widget a,
.widget-area .widget a {
  color: #2a5a8e !important;
  text-decoration: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SPROCKET HOLES — decorative edge strips on the paper column
   ═══════════════════════════════════════════════════════════════════════════ */
#page,
.site {
  position: relative !important;
}

#page::before,
#page::after,
.site::before,
.site::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--sprocket-width);
  background-color: rgba(0, 0, 0, 0.03);
  background-image: radial-gradient(
    circle at 50% 50%,
    var(--color-outer) var(--sprocket-radius),
    var(--sprocket-ring) var(--sprocket-radius),
    var(--sprocket-ring) calc(var(--sprocket-radius) + 2px),
    transparent calc(var(--sprocket-radius) + 2.5px)
  );
  background-size: var(--sprocket-width) var(--sprocket-pitch);
  background-repeat: repeat-y;
  background-position: center 0;
  pointer-events: none;
  z-index: 1;
}

#page::before,
.site::before {
  left: 0;
  border-right: 1px dotted rgba(0, 0, 0, 0.18);
}

#page::after,
.site::after {
  right: 0;
  border-left: 1px dotted rgba(0, 0, 0, 0.18);
}

@media (max-width: 860px) {
  #page::before,
  #page::after,
  .site::before,
  .site::after {
    display: none;
  }
}