/*
 Theme Name:   Opta WP Child — Abhilash Krishnan
 Theme URI:    https://abhilashkrishnan.com
 Description:  Customized Opta WP child theme. Pulls the shared ak-tokens.css design system from the site root so the WordPress blog at /thoughts/ stays visually consistent with the static homepage and portfolio. Based on the CocoBasic scaffold; rewritten with brand overrides.
 Author:       Abhilash Krishnan
 Author URI:   https://abhilashkrishnan.com
 Tags:         grid-layout, four-columns, custom-colors, featured-images, threaded-comments, translation-ready, theme-options
 Template:     opta-wp
 Text Domain:  opta-wp-child
 Version:      1.0.0
*/

/* =============================================================
   The shared ak-tokens.css is enqueued by functions.php — its
   :root tokens, focus ring, reduced-motion handling, and base
   typography are already in scope by the time this file loads.

   Below: WordPress-specific overrides that map Opta's default
   styling onto the brand system.

   Opta is a heavily styled CocoBasic creative-portfolio theme.
   Its CSS specificity tends to be higher than average. Many rules
   below use !important deliberately; remove them once you've
   confirmed each override wins without it.
   ============================================================= */

/* ---------- Page surfaces ----------
   Opta wraps everything in .body-wrapper (30px white frame) and uses
   .doc-loader as a full-screen preloader (z-index 99999). Both need
   tinting or the page flashes white. Body itself uses 'Roboto, serif'
   (a literal typo in the parent stylesheet) with a 35px line-height
   that's too tall for our type stack. */

body,
body.home,
body.blog,
body.single,
body.archive,
body.page,
.site,
.site-main,
.main-container,
.content-area,
.body-wrapper {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important; /* parent uses absurd 35px — reset */
}

/* Preloader — was full-screen pure white */
.doc-loader {
  background-color: var(--color-bg) !important;
}

/* Opta's global link rule paints all body links pure black.
   Scope our amber-deep link color to content/post areas so nav and
   header links stay neutral, then override the global to use brand text. */
body a {
  color: var(--color-text);
  transition: color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  body a:hover {
    color: var(--color-primary-deep);
  }
}

/* Selection color — Opta uses #fae3b5 (a warm cream). Keep similar but
   align to our tag-bg token. */
.site-wrapper ::selection,
.site-wrapper ::-moz-selection,
::selection {
  background-color: var(--color-tag-bg) !important;
  color: var(--color-text) !important;
}

/* ---------- Entry titles (post and archive) ---------- */

.entry-title,
.entry-title a,
h1.entry-title,
.post-title,
.post-title a,
.single .entry-header h1,
.archive .entry-title a,
.blog-post-title,
.blog-post-title a {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  letter-spacing: -0.015em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

.single .entry-title,
.single .entry-header h1 {
  font-size: clamp(2rem, 5vw, 3.25rem) !important;
}

.archive .entry-title,
.blog .entry-title {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
}

/* ---------- Body copy inside posts ---------- */

.entry-content,
.entry-content p,
.entry-summary,
.entry-summary p,
.post-content,
.post-content p {
  font-family: var(--font-body) !important;
  color: var(--color-text) !important;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.entry-content p {
  max-width: 68ch;
  margin-bottom: 1.25em;
}

/* ---------- In-post headings ---------- */

.entry-content h2,
.entry-content h3,
.post-content h2,
.post-content h3 {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  margin-top: 2.25em;
  margin-bottom: 0.5em;
}

.entry-content h2 { font-size: clamp(1.5rem, 2.6vw, 2rem) !important; font-weight: 600 !important; line-height: 1.2 !important; }
.entry-content h3 { font-size: clamp(1.2rem, 2vw, 1.5rem) !important; font-weight: 500 !important; line-height: 1.25 !important; }

.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  text-transform: none !important;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

/* ---------- Links in body ---------- */

.entry-content a,
.entry-summary a,
.post-content a {
  color: var(--color-primary-deep) !important;
  text-decoration: underline !important;
  text-decoration-color: oklch(80% 0.16 75 / 0.4) !important;
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) ease, text-decoration-color var(--dur-fast) ease;
  border-bottom: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .entry-content a:hover,
  .entry-summary a:hover,
  .post-content a:hover {
    color: var(--color-text) !important;
    text-decoration-color: var(--color-primary) !important;
  }
}

/* ---------- Blockquotes — editorial Playfair italic ---------- */

.entry-content blockquote,
.post-content blockquote,
.wp-block-quote {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem) !important;
  line-height: 1.5 !important;
  color: var(--color-text) !important;
  border-left: none !important; /* side-stripe banned */
  border: none !important;
  background: transparent !important;
  margin: 2em 0 !important;
  padding: 0 0 0 1.5rem !important;
  position: relative;
}

.entry-content blockquote::before,
.post-content blockquote::before,
.wp-block-quote::before {
  content: '\201C';
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(4rem, 6vw, 6rem);
  line-height: 0.8;
  color: var(--color-primary);
  position: absolute;
  left: -0.5rem;
  top: -1rem;
  opacity: 0.85;
  pointer-events: none;
}

.entry-content blockquote p,
.post-content blockquote p,
.wp-block-quote p {
  margin: 0 0 0.5em;
}

.entry-content blockquote cite,
.wp-block-quote cite {
  display: block;
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 0.5em;
}

/* ---------- Core Gutenberg block overrides ---------- */

.wp-block-button__link,
.wp-block-button .wp-block-button__link {
  background-color: var(--color-primary) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  border-radius: 0.6rem !important;
  padding: 0.9rem 1.75rem !important;
  border: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  transition:
    transform var(--dur-press) var(--ease-out-strong),
    box-shadow var(--dur-fast) ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px oklch(80% 0.16 75 / 0.45);
    color: var(--color-text) !important;
  }
}

.wp-block-button__link:active { transform: scale(0.97); }
.wp-block-button__link:focus-visible { outline-offset: 4px; }

.is-style-outline .wp-block-button__link {
  background-color: transparent !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
}

.is-style-outline .wp-block-button__link:hover {
  border-color: var(--color-text) !important;
  background-color: transparent !important;
}

/* Pull-quote */
.wp-block-pullquote {
  border-top: 1px solid var(--color-border) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text);
  padding: 2rem 0 !important;
  background: transparent !important;
}

.wp-block-pullquote p {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.4;
}

/* Code blocks */
.wp-block-code,
.entry-content pre,
.entry-content code,
.post-content pre,
.post-content code {
  background-color: oklch(96% 0.012 80) !important;
  color: var(--color-text) !important;
  border-radius: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.9em;
}

.wp-block-code,
.entry-content pre,
.post-content pre {
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  border: 1px solid var(--color-border);
}

.entry-content code:not(pre code),
.post-content code:not(pre code) {
  padding: 0.1em 0.35em;
}

/* Separator */
.wp-block-separator,
.entry-content hr,
.post-content hr {
  border: none !important;
  border-top: 1px solid var(--color-border) !important;
  margin: 3rem auto;
  max-width: 6rem;
  opacity: 1;
}

/* Captions */
.wp-block-image figcaption,
.wp-caption-text {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-muted) !important;
  text-align: left;
  margin-top: 0.6rem;
}

/* ---------- Meta (date, author, tags) ----------
   Opta uses .entry-info for the meta row (NOT .entry-meta — confirmed
   from loop-index.php and single.php). Default styling is Montserrat
   uppercase 11px with 2px letter-spacing. We soften it to Inter
   sentence-case to align with the brand voice, keeping a small caps
   feel via slight tracking. */

.entry-meta,
.entry-meta a,
.entry-info,
.entry-info a,
.entry-info-left,
.entry-info-right,
.posted-on,
.byline,
.cat-links,
.cat-links a,
.entry-date,
.entry-date.published,
.author-nickname,
.author-nickname a,
.num-comments,
.num-comments a,
.tags-links,
.post-meta,
.post-meta a,
.post-date,
.post-author {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: var(--color-muted) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  line-height: 1.6 !important;
}

.entry-meta a:hover,
.entry-info a:hover,
.cat-links a:hover,
.author-nickname a:hover,
.num-comments a:hover,
.posted-on a:hover,
.byline a:hover,
.post-meta a:hover {
  color: var(--color-text) !important;
}

/* Opta's decorative post numeral — keep the typographic moment but
   recolor from #eaeaea grey to the brand primary-deep amber.
   Confirmed selector from style.css lines 534-551. */
.post-num {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--color-primary-deep) !important;
}

.post-num .separator,
.post-num .total-posts {
  color: var(--color-border) !important;
}

.post-num .current-post {
  color: var(--color-primary-deep) !important;
}

/* Featured-image wrapper on blog index — strip hover transform if any */
.blog-item-holder,
.entry-holder {
  background-color: transparent !important;
}

/* Read-more arrow (Opta uses a PNG icon at .read-more-arrow img).
   Leave the icon intact; just space it consistently. */
.read-more-arrow {
  margin-top: 1rem;
}

/* Tags holder — single post bottom of content. Opta outputs raw <a>
   tags here from the_tags(); apply the brand pill treatment. */
.tags-holder {
  margin: 2.5rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.tags-holder a {
  display: inline-block;
  background-color: var(--color-tag-bg) !important;
  color: var(--color-tag-text) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.3rem 0.7rem !important;
  border-radius: 999px !important;
  margin: 0 0.25rem 0.4rem 0;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out-strong);
}

.tags-holder a:hover {
  background-color: oklch(92% 0.06 75) !important;
  color: var(--color-tag-text) !important;
}

.tags-holder a:active {
  transform: scale(0.97);
}

/* Single-post prev/next navigation. Opta uses uppercase 'PREVIOUS STORY'
   labels in <p> tags inside .nav-previous / .nav-next blocks. Soften
   the all-caps and recolor the link itself to brand text. */
.nav-links {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin: 3rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.nav-previous,
.nav-next {
  flex: 1 1 240px;
}

.nav-next { text-align: right; }

.nav-previous p,
.nav-next p {
  font-family: var(--font-body) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--color-muted) !important;
  margin: 0 0 0.4rem !important;
}

.nav-previous a,
.nav-next a {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  text-decoration: none !important;
  letter-spacing: -0.005em !important;
  line-height: 1.3 !important;
  transition: color var(--dur-fast) ease;
}

.nav-previous a:hover,
.nav-next a:hover {
  color: var(--color-primary-deep) !important;
}

/* The "Load More Posts" button — Opta's .more-posts-index has complex
   pseudo-element border animations. Replace the whole treatment with
   a brand button. */
.load-more-posts {
  margin: 3rem 0 !important;
  text-align: center;
}

.more-posts-index {
  display: inline-block !important;
  background-color: var(--color-primary) !important;
  color: var(--color-text) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  padding: 0.9rem 1.75rem !important;
  border: none !important;
  border-radius: 0.6rem !important;
  cursor: pointer;
  transition:
    transform var(--dur-press) var(--ease-out-strong),
    box-shadow var(--dur-fast) ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .more-posts-index:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px oklch(80% 0.16 75 / 0.45);
    color: var(--color-text) !important;
  }
}

.more-posts-index:active { transform: scale(0.97); }

/* Kill the pseudo-element border animations Opta paints on the button */
.more-posts-index:before,
.more-posts-index:after {
  display: none !important;
}

/* ---------- Pagination ---------- */

.nav-links a,
.page-numbers,
.pagination a,
.pagination span {
  font-family: var(--font-body) !important;
  font-size: 0.9rem !important;
  color: var(--color-muted) !important;
  text-decoration: none !important;
  padding: 0.5rem 0.9rem !important;
  border-radius: 0.4rem !important;
  transition: color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover,
  .page-numbers:hover,
  .pagination a:hover {
    background-color: var(--color-tag-bg) !important;
    color: var(--color-primary-deep) !important;
  }
}

.page-numbers.current {
  background-color: var(--color-text) !important;
  color: var(--color-surface) !important;
}

/* ---------- Comments ---------- */

.comments-area {
  font-family: var(--font-body) !important;
}

.comments-title,
.comment-reply-title {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  font-weight: 600 !important;
  text-transform: none !important;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.4rem !important;
  padding: 0.65rem 0.9rem !important;
  font-family: var(--font-body) !important;
  transition: border-color var(--dur-fast) ease;
}

.comment-form input:focus-visible,
.comment-form textarea:focus-visible {
  border-color: var(--color-primary) !important;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.comment-form .submit {
  background-color: var(--color-primary) !important;
  color: var(--color-text) !important;
  border: none !important;
  border-radius: 0.6rem !important;
  padding: 0.7rem 1.4rem !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition:
    transform var(--dur-press) var(--ease-out-strong),
    box-shadow var(--dur-fast) ease;
}

.comment-form .submit:active { transform: scale(0.97); }

/* ---------- Sidebar widgets ---------- */

.widget-title,
.wp-block-heading,
.sidebar h3,
.widget h3 {
  font-family: var(--font-display) !important;
  color: var(--color-text) !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

.widget a,
.sidebar a {
  color: var(--color-text) !important;
}

.widget a:hover,
.sidebar a:hover {
  color: var(--color-primary-deep) !important;
}

/* ---------- Tag cloud / categories ---------- */

.tagcloud a,
.wp-block-tag-cloud a {
  background-color: var(--color-tag-bg) !important;
  color: var(--color-tag-text) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 0.3rem 0.65rem !important;
  border-radius: 999px !important;
  border: none !important;
  display: inline-block;
  margin: 0 0.25rem 0.4rem 0;
  transition: background-color var(--dur-fast) ease, transform var(--dur-press) var(--ease-out-strong);
}

.tagcloud a:hover {
  background-color: oklch(92% 0.06 75) !important;
}

.tagcloud a:active {
  transform: scale(0.97);
}

/* ---------- Search form ---------- */

.search-form input[type="search"] {
  background-color: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 0.9rem !important;
  font-family: var(--font-body) !important;
}

.search-form button {
  background-color: var(--color-text) !important;
  color: var(--color-surface) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.6rem 1rem !important;
  font-family: var(--font-body) !important;
  cursor: pointer;
}

/* ---------- Opta-specific surfaces ----------
   CocoBasic themes often use these wrappers. Override if they fight
   the body tokens above. */

.cb-content,
.cb-main,
.cb-inner,
.cb-wrap,
.cb-page-content,
.opta-wrapper,
.opta-content {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* Opta's signature page-transition / preloader overlay — don't paint
   it dark if the theme uses pure black. Tint slightly. */
.cb-preloader,
.cb-preloader-inner,
.opta-preloader {
  background-color: var(--color-bg) !important;
}

/* ---------- Strip Opta's harsh defaults ---------- */

.post-card[style*="border-left"],
.post-item[style*="border-left"],
.cb-card[style*="border-left"] {
  border-left: none !important;
}

[style*="background-color: #000"],
[style*="background: #000"] {
  background-color: var(--color-text) !important;
}

.post-card,
.post-item,
.cb-card,
.entry-summary {
  box-shadow: none !important;
}

/* ---------- Animate fallback ----------
   Opta's main.js uses a pattern: .animate elements start at opacity 0
   with translateY(70px), then JS adds .show-it to reveal them. If our
   reduced-motion override pins transition-duration to 1ms (it does),
   that's fine because the class still gets added and content snaps in.
   But if the JS fails to fire (slow connection, blocked script, etc.),
   content stays invisible. Safety net: under reduced-motion we just
   force everything visible regardless of .show-it. */
@media (prefers-reduced-motion: reduce) {
  .animate,
  .animate:not(.show-it) {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- Print ---------- */

@media print {
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
  .doc-loader { display: none !important; }
}