/*
Theme Name: Datify Blog
Theme URI: https://datify.link/blog/
Description: Custom child theme for the Datify affiliate marketing blog. Inherits from GeneratePress and applies the Datify brand visual language extracted from www.datify.link (pure-black canvas, Datify Yellow #FDDB33 accent, Montserrat type, no shadows, dark-only). See blog/tokens/DESIGN.md for the full design system.
Author: Datify Editorial
Author URI: https://datify.link/
Template: generatepress
Version: 0.4.0
Text Domain: datify-blog
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. CSS Custom Properties (single source of truth — kept in sync with
      blog/tokens/design-tokens.json)
   ========================================================================== */
:root {
  /* Palette */
  --dtfy-bg: #000000;
  --dtfy-surface: #1F1F1F;
  --dtfy-primary: #FDDB33;
  --dtfy-primary-hover: #FFE358;
  --dtfy-accent: #EA4355;
  --dtfy-text: #FFFFFF;
  --dtfy-text-muted: rgba(255, 255, 255, 0.675);
  --dtfy-border: rgba(255, 255, 255, 0.08);
  --dtfy-border-strong: #FDDB33;
  --dtfy-input-bg: #FFFFFF;
  --dtfy-input-text: #000000;
  --dtfy-input-border: #767676;
  --dtfy-disabled-bg: #A9A9A9;
  --dtfy-disabled-text: #D3D3D3;

  /* Typography */
  --dtfy-font: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Type scale (blog-tuned, NOT marketing-site cinematic) */
  --dtfy-fs-x-small: 13px;
  --dtfy-fs-small: 14px;
  --dtfy-fs-body: 17px;
  --dtfy-fs-large: 19px;
  --dtfy-fs-h4: 20px;
  --dtfy-fs-h3: 24px;
  --dtfy-fs-h2: 32px;
  --dtfy-fs-h1: 40px;
  --dtfy-fs-hero: 50px;          /* archive / hero only */

  /* Spacing scale (blog-tuned) */
  --dtfy-space-1: 4px;
  --dtfy-space-2: 8px;
  --dtfy-space-3: 12px;
  --dtfy-space-4: 16px;
  --dtfy-space-5: 24px;
  --dtfy-space-6: 32px;
  --dtfy-space-7: 48px;
  --dtfy-space-8: 64px;
  --dtfy-space-section: 64px;    /* NOT 250px from main site */

  /* Radius */
  --dtfy-radius-sm: 4px;
  --dtfy-radius-md: 8px;
  --dtfy-radius-pill: 9999px;
}

/* ==========================================================================
   2. Reset / page chrome
   GeneratePress wraps content in nested white containers (.site, .site-content,
   .inside-article, .footer-widgets). All must be neutralised to keep the dark
   canvas from breaking. !important is intentional — child theme override of
   parent default colors via specificity is unreliable across GP updates.
   ========================================================================== */
html {
  background: var(--dtfy-bg);
}

body,
.site,
.site-content,
.inside-article,
.inside-page-header,
.inside-page-builder-content,
.inside-top-bar,
.inside-header,
.inside-navigation,
.inside-footer-widgets,
.inside-site-info,
.footer-widgets,
.footer-widgets-container,
.site-info,
.entry-content,
.widget,
.sidebar .widget,
.comments-area,
.comment-respond,
#comments,
#nav-below,
#main {
  background-color: var(--dtfy-bg) !important;
  color: var(--dtfy-text);
}

/* Footer credit area gets explicit treatment in case GP wraps it again */
.site-info,
.site-info * {
  background-color: var(--dtfy-bg) !important;
  color: var(--dtfy-text-muted) !important;
}

.site-info a {
  color: var(--dtfy-primary) !important;
}

body {
  font-family: var(--dtfy-font);
  font-size: var(--dtfy-fs-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Article wrapper: kill the white card look — we want flat dark articles */
.inside-article {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

::selection {
  background: var(--dtfy-primary);
  color: #000;
}

/* ==========================================================================
   3. Accessibility — global focus ring (a11y gap on source site fixed here)
   ========================================================================== */
:focus-visible {
  outline: 2px solid var(--dtfy-primary);
  outline-offset: 2px;
  border-radius: var(--dtfy-radius-sm);
}

/* ==========================================================================
   4. Headings — Montserrat heavy display, no letter-spacing
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title, .site-title {
  font-family: var(--dtfy-font);
  color: var(--dtfy-text);
  letter-spacing: normal;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.2;
}

h1,
.entry-title,
.entry-title a,
.entry-title a:visited,
h2.entry-title,
h2.entry-title a,
h2.entry-title a:visited {
  color: var(--dtfy-text) !important;
  font-size: var(--dtfy-fs-h1);
  font-weight: 900;
  text-decoration: none;
}

.entry-title a:hover {
  color: var(--dtfy-primary) !important;
}

h2 {
  font-size: var(--dtfy-fs-h2);
  font-weight: 800;
}

h3 {
  font-size: var(--dtfy-fs-h3);
  font-weight: 600;
}

h4 {
  font-size: var(--dtfy-fs-h4);
  font-weight: 600;
}

/* Hero (archive page banner / single-post above-the-fold) */
.dtfy-hero h1,
.page-header-image-single + .entry-title {
  font-size: var(--dtfy-fs-hero);
  font-weight: 900;
  line-height: 1.05;
}

@media (max-width: 768px) {
  h1, .entry-title { font-size: 30px; }
  h2 { font-size: 24px; }
  .dtfy-hero h1 { font-size: 30px; }
}

/* ==========================================================================
   5. Body copy + links
   ========================================================================== */
.entry-content p,
.entry-content li,
.entry-content blockquote {
  color: var(--dtfy-text);
}

.entry-content p {
  margin-bottom: var(--dtfy-space-5);
}

a, .entry-content a {
  color: var(--dtfy-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

a:hover,
.entry-content a:hover {
  color: var(--dtfy-primary-hover);
  border-bottom-color: var(--dtfy-primary-hover);
}

.entry-content blockquote {
  border-left: 3px solid var(--dtfy-primary);
  padding: var(--dtfy-space-4) var(--dtfy-space-5);
  margin: var(--dtfy-space-6) 0;
  background: var(--dtfy-surface);
  font-style: normal;
  color: var(--dtfy-text-muted);
}

/* ==========================================================================
   5b. Author card (emitted by writer at top of every article — kills the
   anonymous Datify Editorial byline). Distinctive surface so readers see
   "a real person wrote this" before they start scrolling.
   ========================================================================== */
.dtfy-author-card {
  background: var(--dtfy-surface);
  border: 1px solid var(--dtfy-border);
  border-left: 3px solid var(--dtfy-primary);
  padding: var(--dtfy-space-4) var(--dtfy-space-5);
  margin: var(--dtfy-space-5) 0 var(--dtfy-space-6);
  border-radius: var(--dtfy-radius-md);
}

.dtfy-author-card p {
  margin: 0;
  color: var(--dtfy-text);
  font-size: var(--dtfy-fs-body);
  line-height: 1.55;
}

.dtfy-author-card strong {
  color: var(--dtfy-primary);
  font-weight: 700;
}

/* ==========================================================================
   6. Buttons (primary CTA = yellow fill / black text; secondary = yellow outline)
   ========================================================================== */
.wp-block-button__link,
.button,
button:not(.menu-toggle):not(.search-submit),
input[type="submit"],
input[type="button"],
.comment-form .submit,
.search-form .search-submit {
  background: var(--dtfy-primary) !important;
  color: #000 !important;
  font-family: var(--dtfy-font);
  font-weight: 600;
  font-size: var(--dtfy-fs-body);
  padding: 12px 24px;
  border: 0;
  border-radius: var(--dtfy-radius-sm);
  cursor: pointer;
  transition: background 120ms ease;
}

.wp-block-button__link:hover,
.button:hover,
button:not(.menu-toggle):not(.search-submit):hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.comment-form .submit:hover,
.search-form .search-submit:hover {
  background: var(--dtfy-primary-hover) !important;
  color: #000 !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--dtfy-primary);
  border: 2px solid var(--dtfy-primary);
}

/* ==========================================================================
   7. Inputs (white-on-dark, high contrast — matches main site auth card)
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
  background: var(--dtfy-input-bg);
  color: var(--dtfy-input-text);
  border: 1.6px solid var(--dtfy-input-border);
  border-radius: var(--dtfy-radius-sm);
  padding: 10px 14px;
  font-family: var(--dtfy-font);
  font-size: var(--dtfy-fs-body);
}

/* ==========================================================================
   8. Surface (cards, tiles, dropdowns) — NO shadows, hairline border
   ========================================================================== */
.wp-block-group.has-surface-background-color,
.dtfy-card,
.widget {
  background: var(--dtfy-surface);
  border: 1px solid var(--dtfy-border);
  border-radius: var(--dtfy-radius-md);
  padding: var(--dtfy-space-5);
}

/* ==========================================================================
   9. Header / nav (dark, sticky, brand-aligned)
   ========================================================================== */
.site-header,
.inside-header {
  background: var(--dtfy-bg) !important;
  border-bottom: 1px solid var(--dtfy-border);
}

.site-title,
.site-title a,
.main-title,
.main-title a {
  color: var(--dtfy-text) !important;
  font-family: var(--dtfy-font);
  font-weight: 800;
  font-size: var(--dtfy-fs-h3);
  text-decoration: none;
}

.site-description,
.site-tagline {
  color: var(--dtfy-text-muted) !important;
}

.main-navigation,
.main-navigation a,
.menu-toggle {
  background: var(--dtfy-bg) !important;
  color: var(--dtfy-text) !important;
  font-weight: 500;
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--dtfy-primary) !important;
}

/* ==========================================================================
   10. Footer
   ========================================================================== */
.site-footer {
  background: var(--dtfy-bg);
  color: var(--dtfy-text-muted);
  border-top: 1px solid var(--dtfy-border);
  padding: var(--dtfy-space-7) 0;
}

.site-footer h2,
.site-footer h3,
.site-footer h4 {
  color: var(--dtfy-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--dtfy-fs-large);
}

/* --- Datify footer nav (injected via the generate_footer hook, priority 5) --- */
.dtfy-footer {
  background: var(--dtfy-bg);
  border-top: 1px solid var(--dtfy-border);
  padding: var(--dtfy-space-7) 0 var(--dtfy-space-5);
}

.dtfy-footer__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--dtfy-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dtfy-space-6) var(--dtfy-space-7);
}

.dtfy-footer__brand {
  flex: 1 1 260px;
  max-width: 360px;
}

.dtfy-footer__logo {
  display: inline-block;
  color: var(--dtfy-text) !important;
  font-size: var(--dtfy-fs-h3);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
}

.dtfy-footer__logo span {
  color: var(--dtfy-primary);
}

.dtfy-footer__tagline {
  margin: var(--dtfy-space-3) 0 0;
  max-width: 40ch;
  color: var(--dtfy-text-muted);
  font-size: var(--dtfy-fs-small);
  line-height: 1.6;
}

.dtfy-footer__col {
  flex: 0 0 auto;
  min-width: 140px;
}

.dtfy-footer__heading {
  margin: 0 0 var(--dtfy-space-4);
  color: var(--dtfy-primary);
  font-size: var(--dtfy-fs-x-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dtfy-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--dtfy-space-3);
}

.dtfy-footer__list a {
  color: var(--dtfy-text-muted);
  font-size: var(--dtfy-fs-small);
  text-decoration: none;
  transition: color 0.15s ease;
}

.dtfy-footer__list a:hover,
.dtfy-footer__list a:focus-visible {
  color: var(--dtfy-primary);
}

/* GeneratePress copyright bar, aligned to the same container as the columns */
.site-info {
  border-top: 1px solid var(--dtfy-border);
}

.inside-site-info {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--dtfy-space-5);
  display: block;
  text-align: left;
  font-size: var(--dtfy-fs-x-small);
}

.dtfy-footer a:focus-visible,
.site-info a:focus-visible {
  outline: 2px solid var(--dtfy-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .dtfy-footer__inner {
    gap: var(--dtfy-space-6);
  }
  .dtfy-footer__brand {
    flex: 1 1 100%;
    max-width: none;
  }
  .dtfy-footer__col {
    flex: 1 1 40%;
  }
}

/* ==========================================================================
   11. Featured image / block image
   ========================================================================== */
.wp-block-image img,
.featured-image img,
.post-image img {
  border-radius: var(--dtfy-radius-md);
  border: 1px solid var(--dtfy-border);
  display: block;
  height: auto;
  max-width: 100%;
}

.wp-block-image figcaption,
.entry-content figcaption {
  color: var(--dtfy-text-muted);
  font-size: var(--dtfy-fs-small);
  margin-top: var(--dtfy-space-2);
  text-align: center;
}

/* ==========================================================================
   12. Code blocks (technical tutorials use these heavily)
   ========================================================================== */
.entry-content code,
.entry-content pre {
  background: var(--dtfy-surface);
  color: var(--dtfy-primary);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  border-radius: var(--dtfy-radius-sm);
}

.entry-content code {
  padding: 2px 6px;
}

.entry-content pre {
  padding: var(--dtfy-space-5);
  overflow-x: auto;
  border: 1px solid var(--dtfy-border);
}

.entry-content pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

/* ==========================================================================
   13. Tables
   Wide tables overflow viewports on mobile — scope an x-scroll wrapper
   automatically by giving the table a min-width and letting its parent
   block scroll. Articles wrap their tables in a <figure class="wp-block-table">
   in modern Gutenberg; we cover plain <table> too.
   ========================================================================== */
.entry-content figure.wp-block-table,
.entry-content .table-wrap,
.entry-content > table,
.entry-content p > table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: var(--dtfy-space-6) 0;
}

.entry-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  font-size: var(--dtfy-fs-small);
}

.entry-content th,
.entry-content td {
  border: 1px solid var(--dtfy-border);
  padding: var(--dtfy-space-3);
  text-align: left;
}

.entry-content th {
  background: var(--dtfy-surface);
  color: var(--dtfy-primary);
  font-weight: 600;
}

/* ==========================================================================
   14. Sidebar — hidden by default for the blog (we use full-width content).
   GeneratePress shows a right sidebar by default; we kill it globally.
   Re-enable on specific templates via body class if needed.
   ========================================================================== */
.sidebar,
#right-sidebar,
#left-sidebar {
  display: none !important;
}

.content-area,
#primary {
  width: 100% !important;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  float: none !important;
}

/* ==========================================================================
   15. Section padding (blog-tuned, NOT marketing 250px)
   ========================================================================== */
.site-main,
.content-area,
.inside-article {
  padding-top: var(--dtfy-space-section);
  padding-bottom: var(--dtfy-space-section);
}

@media (max-width: 768px) {
  .site-main,
  .content-area,
  .inside-article {
    padding-top: var(--dtfy-space-6);
    padding-bottom: var(--dtfy-space-6);
  }
}

/* ==========================================================================
   16. PRIMARY menu — top-level links, desktop dropdown, mobile panel
   GeneratePress 'primary' location. Restyles SURFACES + COLOR + the
   resting/current/hover states only. GP owns the structural layout (flex bar,
   .sub-menu absolute positioning + reveal, .menu-toggle show/hide breakpoint,
   hamburger animation) — we do NOT re-declare those, and never display:none /
   pointer-events:none any load-bearing class. Targets: .main-navigation .menu,
   .main-navigation .sub-menu, .menu-item-has-children, .dropdown-menu-toggle,
   .menu-toggle, .main-navigation.toggled (the class lands on #site-navigation).
   ========================================================================== */

/* --- 16a. Top-level row: muted resting -> yellow on hover/current --- */
.main-navigation .main-nav > ul > li > a,
.main-navigation .menu > li > a {
  color: var(--dtfy-text-muted) !important;
  font-family: var(--dtfy-font);
  font-weight: 600;
  font-size: var(--dtfy-fs-small);
  letter-spacing: 0.01em;
  padding-block: var(--dtfy-space-3);
  line-height: 1.2;
  transition: color 120ms ease;
}

.main-navigation .main-nav > ul > li > a {
  border-bottom: 2px solid transparent;
}

.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li > a:focus,
.main-navigation .main-nav > ul > li.sfHover > a {
  color: var(--dtfy-primary) !important;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
  color: var(--dtfy-primary) !important;
}
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
  border-bottom-color: var(--dtfy-primary);
}

/* --- 16b. "Topics" parent caret (the dropdown-menu-toggle GP injects) --- */
.main-navigation .menu-item-has-children > a .dropdown-menu-toggle,
.main-navigation .dropdown-menu-toggle {
  color: inherit;
  opacity: 0.85;
}
.main-navigation .menu-item-has-children > a:hover .dropdown-menu-toggle {
  color: var(--dtfy-primary);
}

/* --- 16c. Desktop dropdown panel (.sub-menu) --- */
.main-navigation .sub-menu {
  background-color: var(--dtfy-surface) !important;
  border: 1px solid var(--dtfy-border);
  border-radius: var(--dtfy-radius-md);
  box-shadow: none !important;
  padding-block: var(--dtfy-space-2);
  overflow: hidden;
}

.main-navigation .sub-menu li > a {
  color: var(--dtfy-text-muted) !important;
  font-family: var(--dtfy-font);
  font-weight: 500;
  font-size: var(--dtfy-fs-small);
  line-height: 1.3;
  padding: var(--dtfy-space-3) var(--dtfy-space-4);
  border-bottom: 0;
  transition: color 120ms ease, background-color 120ms ease;
}

.main-navigation .sub-menu li > a:hover,
.main-navigation .sub-menu li > a:focus,
.main-navigation .sub-menu li.current-menu-item > a {
  color: var(--dtfy-primary) !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* --- 16d. Mobile hamburger panel (.main-navigation.toggled) --- */
.menu-toggle {
  font-family: var(--dtfy-font);
  font-weight: 600;
  font-size: var(--dtfy-fs-small);
  color: var(--dtfy-text) !important;
}

.main-navigation.toggled {
  background-color: var(--dtfy-bg) !important;
  border-top: 1px solid var(--dtfy-border);
}

.main-navigation.toggled .main-nav ul li a,
.main-navigation.toggled .menu li a {
  display: block;
  width: 100%;
  padding: var(--dtfy-space-4) var(--dtfy-space-5);
  border-bottom: 1px solid var(--dtfy-border) !important;
  color: var(--dtfy-text) !important;
  font-size: var(--dtfy-fs-body);
}

.main-navigation.toggled .main-nav ul li a:hover,
.main-navigation.toggled .main-nav ul li.current-menu-item > a,
.main-navigation.toggled .main-nav ul li.current-menu-ancestor > a {
  color: var(--dtfy-primary) !important;
}

.main-navigation.toggled .sub-menu {
  background-color: var(--dtfy-bg) !important;
  border: 0;
  border-radius: 0;
  padding-block: 0;
}

.main-navigation.toggled .sub-menu li a {
  padding-left: var(--dtfy-space-7) !important;
  color: var(--dtfy-text-muted) !important;
  font-size: var(--dtfy-fs-small);
}

.main-navigation.toggled .sub-menu li a:hover,
.main-navigation.toggled .sub-menu li.current-menu-item > a {
  color: var(--dtfy-primary) !important;
}

.main-navigation.toggled .dropdown-menu-toggle {
  padding: var(--dtfy-space-4);
  color: var(--dtfy-text) !important;
}