/*
Theme Name: Notebook Theme
Theme URI: https://example.com/notebook-theme
Author: Custom Build
Author URI: https://example.com
Description: A custom journal-inspired block theme with notebook-style posts.
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: notebook-theme
Tags: blog, custom-background, full-site-editing
*/

:root {
  --cover: #1b5870;
  --cover-deep: #113e52;
  --cover-mid: #2f6f89;
  --notebook-line-height: 2.05rem;
  --paper-white: #f4f0e4;
  --ink: #1c2932;
  --overlay-bg: #fbfcfe;
  --overlay-ink: #1b2a36;
  --ink-strong: #15222d;
  --link: #0b4f78;
  --link-hover: #083b5b;
  --link-visited: #5d2f86;
  --header-text: #f6f9fa;
  --header-nav: #f4f0e4;
  --focus-ring: #f7c948;
  --rule-blue: rgba(47, 94, 160, 0.2);
  --rule-red: rgba(201, 76, 76, 0.35);
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.08), transparent 20%),
    radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.06), transparent 18%),
    linear-gradient(135deg, #041a1e, var(--cover) 32%, var(--cover-mid) 62%, var(--cover-deep)) !important;
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  min-height: 100vh;
}

a {
  color: var(--link);
}

a:visited {
  color: var(--link-visited);
}

a:hover,
a:active {
  color: var(--link-hover);
}

a:focus-visible,
button:focus-visible,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

.wp-site-blocks {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.08), transparent 20%),
    radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.06), transparent 18%),
    linear-gradient(135deg, #041a1e, var(--cover) 32%, var(--cover-mid) 62%, var(--cover-deep)) !important;
}

.site-masthead {
  padding: 2.75rem 1rem 1.25rem;
  text-align: center;
}

.wp-block-site-title,
.site-masthead .wp-block-site-title {
  margin: 0;
  font-family: "Kalam", "Patrick Hand", cursive;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--header-text);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.site-masthead .wp-block-site-title a {
  color: inherit;
  text-decoration: none;
}

.site-masthead .wp-block-navigation {
  margin-top: 1rem;
}

.site-masthead .wp-block-navigation .wp-block-navigation-item__content {
  font-family: "Special Elite", "Courier New", monospace;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--header-nav);
}

.site-masthead .wp-block-navigation .wp-block-navigation-item__content:visited {
  color: var(--header-nav);
}

.site-masthead .wp-block-navigation .wp-block-navigation-item__content:hover {
  color: #ffffff;
}

.site-masthead .wp-block-navigation__responsive-container-open,
.site-masthead .wp-block-navigation__responsive-container-close {
  color: var(--header-text);
}

.site-masthead .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--overlay-bg);
  color: var(--overlay-ink);
}

.site-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:visited {
  color: var(--overlay-ink);
}

.site-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-masthead .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active {
  color: #0b4f78;
}

.paper-stage {
  width: min(1080px, calc(100% - 2rem));
  margin: 1rem auto 3rem;
  background: var(--paper-white);
  border-radius: 0.5rem;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.26);
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.notebook-query {
  width: min(1080px, calc(100% - 2rem));
  margin: 1rem auto 3rem;
  display: grid;
  gap: 1.25rem;
}

.journal-post {
  position: relative;
  background:
    linear-gradient(to right, rgba(31, 56, 79, 0.08), rgba(31, 56, 79, 0.03) 9px, transparent 9px),
    radial-gradient(rgba(18, 40, 58, 0.035) 0.6px, transparent 0.7px) 0 0 / 3px 3px,
    linear-gradient(180deg, rgba(244, 240, 228, 0.98), rgba(244, 240, 228, 0.94)),
    var(--paper-white);
  border: 1px solid #e7edf4;
  border-radius: 0.4rem;
  padding: 1.5rem 1.5rem 1.5rem 1.15rem !important;
  box-shadow:
    0 8px 22px rgba(11, 20, 30, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 12px 0 14px -12px rgba(7, 34, 39, 0.35);
}

.journal-post::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule-red);
}

.journal-post::after {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 6px;
  background: radial-gradient(circle at center, rgba(25, 39, 52, 0.35) 2px, transparent 2.5px);
  background-size: 6px 20px;
  opacity: 0.28;
  pointer-events: none;
}

.journal-title,
.journal-title {
  font-family: "Kalam", "Patrick Hand", cursive;
  font-size: clamp(1.7rem, 3.4vw, 2.2rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-strong);
  margin-bottom: 0.15rem;
  padding-right: 9rem;
}

.journal-title a {
  color: var(--ink-strong);
  text-decoration: none;
}

.journal-date {
  font-family: "Kalam", "Patrick Hand", cursive;
  font-size: 1.1rem;
  color: #2b3b4b;
  position: absolute;
  top: 1.1rem;
  right: 1.25rem;
  margin: 0;
  line-height: 1;
}

.journal-content,
.journal-content p,
.journal-post .wp-block-post-content {
  font-family: "Merriweather", "Source Serif 4", Georgia, serif;
  font-size: 1.188rem;
  line-height: var(--notebook-line-height);
  color: #1e2b36;
}

.journal-content {
  margin-top: 0.7rem;
  background: transparent;
}

.journal-content p {
  margin: 0;
}

.single .paper-stage .wp-block-post-title,
.single .paper-stage .wp-block-post-title a {
  font-family: "Kalam", "Patrick Hand", cursive;
  color: var(--ink-strong);
  text-decoration: none;
}

.single .paper-stage .wp-block-post-date {
  font-family: "Kalam", "Patrick Hand", cursive;
  color: #2b3b4b;
}

.single .paper-stage .wp-block-post-content,
.single .paper-stage .wp-block-post-content p {
  font-family: "Merriweather", "Source Serif 4", Georgia, serif;
  font-size: 1.188rem;
  line-height: var(--notebook-line-height);
  color: #1e2b36;
}

.page .paper-stage .wp-block-post-title,
.page .paper-stage .wp-block-post-title a {
  font-family: "Special Elite", "Courier New", monospace;
  color: var(--ink-strong);
  text-decoration: none;
}

.page .paper-stage .wp-block-post-content,
.page .paper-stage .wp-block-post-content p {
  font-family: "Merriweather", "Source Serif 4", Georgia, serif;
  font-size: 1.188rem;
  line-height: var(--notebook-line-height);
  color: #1e2b36;
}

.wp-block-query-pagination {
  margin-top: 1.5rem;
  font-family: "Special Elite", "Courier New", monospace;
}

@media (max-width: 980px) {
  .journal-post {
    padding-left: 1.3rem !important;
  }

  .journal-post::before {
    left: 1.1rem;
  }
}

@media (max-width: 740px) {
  .site-masthead {
    padding-top: 2rem;
  }

  .site-masthead .wp-block-navigation__responsive-container-open {
    color: var(--header-text);
  }

  .paper-stage {
    width: calc(100% - 1rem);
    padding: 1rem;
  }

  .notebook-query {
    width: calc(100% - 1rem);
    margin: 0.75rem auto 2rem;
  }

  .journal-post {
    padding: 1rem 1rem 1rem 1.45rem !important;
  }

  .journal-post::before {
    left: 1.2rem;
  }

  .journal-title,
  .journal-title {
    padding-right: 7rem;
  }

  .journal-date {
    top: 0.85rem;
    right: 0.85rem;
    font-size: 1rem;
  }
}