/*
Theme Name: WP SEO Theme
Theme URI: https://xenrion.com/
Author: XENRON
Author URI: https://xenrion.com/
Description: A fast, SEO-focused WordPress theme with a white-label header & footer for agency/plugin marketing sites. Classic theme built to be driven by Gutenberg and Elementor in the body area, with a cyan/teal brand palette, dark-mode aware styling, and Elementor-ready full-width & canvas page templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wp-seo-theme
Tags: business, portfolio, blog, custom-logo, custom-menu, featured-images, full-width-template, block-styles, wide-blocks, editor-style, threaded-comments, translation-ready
*/

/*
 * The full marketing stylesheet lives in assets/css/styles.css and is
 * enqueued from functions.php. This file only carries the required theme
 * header above plus a few WordPress-specific helpers below.
 */

/* WordPress core alignment / caption helpers */
.alignleft   { float: left; margin: .3em 1.5em 1em 0; }
.alignright  { float: right; margin: .3em 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption  { max-width: 100%; }
.wp-caption-text { font-size: .9rem; color: var(--text-muted); text-align: center; }
.sticky, .bypostauthor { display: block; }

.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
  position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--surface); color: var(--accent); clip: auto; clip-path: none;
  display: block; height: auto; width: auto; left: 5px; top: 5px; z-index: 100000;
  padding: 12px 20px; border-radius: 8px; box-shadow: var(--shadow);
}

/* Admin-bar offset so the fixed header never hides under it */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

/* ---- Header top bar (login / account strip) ----
   Rendered as the first row inside .site-header (see header.php), so the fixed
   header simply grows taller by --wpst-topbar-h. Every fixed-header offset in
   this file adds that variable to the base 70px header row. */
:root { --wpst-topbar-h: 38px; }

.top-bar {
  height: var(--wpst-topbar-h);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  font-size: .82rem;
}
/* Auth cluster sits in the top-right corner in both states, sharing one look. */
.top-bar-inner {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; height: 100%;
}
.top-bar-greet {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-muted); font-weight: 600; white-space: nowrap;
}
.top-bar-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 650; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  transition: color .15s, background .15s;
}
.top-bar-link:hover { color: var(--heading); background: var(--cyan-soft); }
.tb-ico { width: 15px; height: 15px; flex: none; display: block; }

/* ---- Desktop theme toggle (dark/light) ----
   Sits in .header-actions before the CTA. Hidden on mobile, which follows the
   OS colour scheme automatically. */
.header-actions { gap: 20px; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.theme-toggle .tt-ico { display: block; }
@media (max-width: 760px) { .theme-toggle { display: none; } }

/* Push page content below the now-taller fixed header (base styles.css sets
   body padding-top:70px and html scroll-padding-top:84px for the 70px row). */
body { padding-top: calc(70px + var(--wpst-topbar-h)); }
html { scroll-padding-top: calc(84px + var(--wpst-topbar-h)); }

/* Auth link injected into the primary nav (header.php / wpst_nav_auth_link):
   hidden on desktop — the top bar handles auth there — and revealed only inside
   the mobile dropdown menu. */
.main-nav .nav-auth,
.main-nav .nav-auth-item { display: none; }

@media (max-width: 760px) {
  /* No top bar on mobile; auth moves into the menu. Zeroing the variable
     collapses every calc() header offset above back to its base value. */
  :root { --wpst-topbar-h: 0px; }
  .top-bar { display: none; }
  /* Mobile nav dropdown opens flush below the header (base inset:70px). */
  .main-nav { top: 70px; }
  /* Reveal the auth link as the last item in the mobile menu. */
  .main-nav .nav-auth,
  .main-nav .nav-auth-item { display: block; }
}

/* WordPress-generated post content wrapper */
.entry-content { margin-top: 1.5rem; }

/* ---- Full-width homepage ----
   front-page.php / the Full Width template render content in a wrapper that is
   ALREADY the full viewport width (no boxing .container). So marketing sections
   just fill it with width:100% — no viewport math, which means no first-paint
   reflow / flash of boxed content. */
.wpst-entry-full { width: 100%; }

.wpst-entry-full > .hero,
.wpst-entry-full > .trust,
.wpst-entry-full > .section,
.wpst-entry-full > .guarantee,
.wpst-entry-full > .cta-band,
.wpst-entry-full > .alignfull {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Loose (non-section) blocks on a full-width page stay readable */
.wpst-entry-full > :not(.hero):not(.trust):not(.section):not(.guarantee):not(.cta-band):not(.alignfull):not(.alignwide):not(.elementor) {
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 24px;
}
.wpst-entry-full > .alignwide { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }

/* Let Elementor sections control their own width edge-to-edge */
.wpst-entry-full > .elementor,
.wpst-front .elementor,
.wpst-canvas .elementor { max-width: none; padding-inline: 0; }

/* Fallback ONLY for the default page template (content sits inside a boxed
   .container): break sections out to the viewport so their backgrounds still
   span full width. The front page above never hits this, so its first paint is
   clean. */
.entry-content:not(.wpst-entry-full) > .hero,
.entry-content:not(.wpst-entry-full) > .trust,
.entry-content:not(.wpst-entry-full) > .section,
.entry-content:not(.wpst-entry-full) > .guarantee,
.entry-content:not(.wpst-entry-full) > .cta-band,
.entry-content:not(.wpst-entry-full) > .alignfull {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: 0;
}
html { overflow-x: clip; }

/* ---- Tighten the top of the homepage ----
   The body already offsets the fixed header, so the hero doesn't need the big
   top padding the standalone site used. Also drop the generic entry-content
   top margin on the front page so the hero sits right under the header. */
.wpst-front .entry-content,
.wpst-entry-full { margin-top: 0; }
.wpst-entry-full > .hero:first-child { margin-top: 0; }
.hero { padding-top: clamp(20px, 3vw, 44px); }

/* ---- Footer spacing fixes ----
   1) Desktop: if the homepage pattern is used on the DEFAULT page template,
      the .wpst-page wrapper's 48/64px padding leaves a white gap above the
      footer (and below the header). The marketing sections provide their own
      spacing, so drop the wrapper padding when such sections are present. */
.wpst-page:has(.hero),
.wpst-page:has(.cta-band),
.wpst-page:has(.stack-section) { padding: 0; }

/* 2) Mobile: the standalone site reserved 72px at the bottom for a sticky
      mobile CTA bar. This theme only renders that bar on the front page for
      logged-out visitors (body.wpst-has-mobile-cta — see footer.php), so the
      reserved space and raised back-to-top button apply only then. Everywhere
      else the space is removed and the button sits in the corner. */
@media (max-width: 760px) {
  body { padding-bottom: 0; }
  .to-top { bottom: 16px; }
  body.wpst-has-mobile-cta { padding-bottom: 72px; }
  body.wpst-has-mobile-cta .to-top { bottom: 86px; }
}

/* ---- Page / single spacing ---- */
.wpst-page { padding: 48px 0 64px; }
.wpst-single .wpst-featured { margin: 0 0 2rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.wpst-single .wpst-featured img { width: 100%; height: auto; }
.wpst-tags { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.wpst-tags a {
  font-size: .85rem; padding: .3em .8em; border-radius: 999px;
  background: var(--cyan-soft); color: var(--accent); border: 1px solid var(--border);
}

/* ---- Blog / archive grid ---- */
.wpst-post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 2rem;
}
.wpst-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.wpst-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.wpst-card-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.wpst-card-media img { width: 100%; height: 100%; object-fit: cover; }
.wpst-card-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.wpst-card-meta { font-size: .82rem; color: var(--text-muted); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.wpst-card-title { font-size: 1.2rem; margin: 0; }
.wpst-card-title a:hover { color: var(--accent); }
.wpst-card-excerpt { color: var(--text-muted); margin: 0; }
.wpst-card-link { margin-top: auto; color: var(--accent); font-weight: 650; }

/* ---- Pagination ---- */
.wpst-pagination { margin-top: 3rem; }
.wpst-pagination .nav-links { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.wpst-pagination a, .wpst-pagination .current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--heading); font-weight: 600;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.wpst-pagination a:hover { border-color: var(--accent); color: var(--accent); }
.wpst-pagination .current { background: var(--accent); color: #fff; border-color: transparent; }

/* ---- Post navigation (single) ---- */
.post-navigation { margin: 3rem 0; display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.post-navigation .nav-links { display: contents; }
.post-navigation a {
  display: block; padding: 16px 20px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
  color: var(--heading); font-weight: 650; transition: border-color .2s ease;
}
.post-navigation a:hover { border-color: var(--accent); }
.post-navigation .nav-next { text-align: right; }
.post-navigation .nav-sub { display: block; font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }

/* ---- Search form ---- */
.wpst-search { display: flex; gap: .5rem; max-width: 480px; margin: 1.5rem auto; }
.wpst-search-field {
  flex: 1; padding: .7em 1.1em; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 1rem;
}
.wpst-search-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(8,145,178,.15); }

/* ---- Empty state ---- */
.wpst-none { text-align: center; padding: 3rem 0; }

/* ---- Widgets / sidebar ---- */
.widget { margin-bottom: 2rem; }
.widget-title { font-size: 1.05rem; margin-bottom: .8rem; }

/* ---- Comments ---- */
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.comment-respond { margin-top: 2rem; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%; padding: .7em 1em; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 1rem; margin-top: .3rem;
}

.page-title { font-size: clamp(1.9rem, 4vw, 2.6rem); }

@media (max-width: 600px) {
  .post-navigation { grid-template-columns: 1fr; }
  .post-navigation .nav-next { text-align: left; }
  .wpst-search { flex-direction: column; }
}

/* =========================================================
   Homepage block-pattern support
   Styles the editable Gutenberg homepage pattern. These rules
   are template-independent (not scoped to a page template) so
   the pattern looks right whether it is used on the front page,
   the Full Width template, or a default page.
   ========================================================= */

/* Feature cards (editable 3-up grid, replaces the scroll-stack) */
.wpst-fcard {
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}
.wpst-fcard h3 { margin-bottom: .45em; }
.wpst-fcard p { color: var(--text-muted); margin: 0; }
.wpst-ftag {
  display: inline-block; margin: 0 0 14px;
  font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--cyan-soft);
  padding: 6px 13px; border-radius: 999px;
}
.wpst-fchips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wpst-fchips li {
  font-size: .8rem; font-weight: 650; color: var(--text);
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 999px; padding: 7px 13px;
}

/* The grid containers are plain Group blocks carrying the theme grid class
   (.feature-grid, .persona-grid, .steps, .report-sections, .price-grid,
   .outcomes). Neutralise Gutenberg's flow spacing so the CSS grid controls
   layout and cards don't overlap or gain stray vertical margins. */
.feature-grid, .persona-grid, .steps, .report-sections, .price-grid, .outcomes, .integ-grid { margin-block: 0; }
/* Higher specificity than WordPress's flow-layout child margins so grid gap alone spaces the cards */
.feature-grid > .wp-block-group,
.persona-grid > .wp-block-group,
.steps > .wp-block-group,
.report-sections > .wp-block-group,
.price-grid > .wp-block-group,
.outcomes > .wp-block-group,
.integ-grid > .wp-block-group { margin-block: 0; }

/* FAQ rendered with the core Details block has no .faq-body wrapper — give the
   answer blocks the same padding the original markup applied. */
.faq-item.wp-block-details > *:not(summary) { padding: 0 22px 20px; margin: 0; color: var(--text-muted); }
.faq-item.wp-block-details > summary + * { padding-top: 4px; }
.faq-item.wp-block-details[open] > summary::after { transform: rotate(45deg); }

/* Outcome cards use a <strong> as their heading */
.outcome p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.outcome p:first-child { margin-bottom: 7px; }
.outcome strong { display: block; font-size: 1.08rem; color: var(--heading); font-weight: 700; }

/* Section inner container (Group with .container) keeps normal blocks centered */
.section > .container, .hero > .container, .trust > .container, .cta-band > .container { margin-inline: auto; }

/* ---- Marketing buttons ----
   Rendered as core Button blocks; the variant class sits on the .wp-block-button
   wrapper and we style the inner link. Works on any template. */
.wp-block-button.btn-primary > .wp-block-button__link,
.wp-block-button.btn-ghost   > .wp-block-button__link,
.wp-block-button.btn-light   > .wp-block-button__link,
.wp-block-button.btn-outline > .wp-block-button__link {
  border-radius: var(--radius-btn);
  font-weight: 650;
  font-size: 1rem;
  padding: .82em 1.6em;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.wp-block-button.btn-primary > .wp-block-button__link {
  background: linear-gradient(180deg, var(--cyan-500), var(--cyan-700));
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(8, 145, 178, .8);
}
.wp-block-button.btn-primary > .wp-block-button__link:hover { box-shadow: 0 14px 28px -10px rgba(8, 145, 178, .9); }
.wp-block-button.btn-ghost > .wp-block-button__link {
  background: var(--surface); color: var(--heading);
  border-color: var(--border); box-shadow: var(--shadow-sm);
}
.wp-block-button.btn-ghost > .wp-block-button__link:hover { border-color: var(--cyan-500); color: var(--accent); }
.wp-block-button.btn-light > .wp-block-button__link { background: #fff; color: var(--cyan-700); }
.wp-block-button.btn-light > .wp-block-button__link:hover { background: var(--cyan-soft); }
.wp-block-button.btn-outline > .wp-block-button__link { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.wp-block-button.btn-outline > .wp-block-button__link:hover { background: rgba(255, 255, 255, .12); }
.wp-block-button > .wp-block-button__link:hover { transform: translateY(-2px); }

/* Button group spacing / alignment */
.hero-cta.wp-block-buttons { gap: 14px; margin-top: 8px; }
.cta-band .wp-block-buttons { justify-content: center; gap: 14px; }

/* ---- Fixed-header offset when the WP admin bar is present ----
   Header is 70px + the top bar tall and fixed; the admin bar adds 32px
   (46px on mobile). Without this the hero's top is hidden under the bar +
   header. */
.admin-bar { padding-top: calc(102px + var(--wpst-topbar-h)); }
@media screen and (max-width: 782px) {
  .admin-bar { padding-top: calc(116px + var(--wpst-topbar-h)); }
}

/* Give in-page anchor targets breathing room below the fixed header */
:target { scroll-margin-top: calc(90px + var(--wpst-topbar-h)); }

/* Let full-width sections fill the default page template's container too */
.entry-content > .alignfull { max-width: none; }