/*
Theme Name: JetskiTopSpeed
Theme URI: https://jetskitopspeed.com
Author: JetskiTopSpeed Editorial Team
Author URI: https://jetskitopspeed.com
Description: High-performance, SEO-optimized, accessible custom WordPress editorial theme dedicated to personal watercraft (PWC), top speed records, comparisons, reviews, and engineering specifications. Built natively with semantic HTML5, modern Tailwind CSS, and progressive TypeScript.
Version: 1.6.2
Requires at least: 6.2
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: jetskitopspeed
Tags: editorial, news, automotive, performance, speed, pwc, clean, custom-menu, featured-images, full-site-editing-compatible, block-patterns
*/

/* 
  Primary compiled styling resides in assets/css/app.css.
  Below are foundational high-contrast typographic and branding rules.
*/

:root {
  --brand-blue: #25519a;
  --brand-blue-hover: #1c386a;
  --brand-red: #d73b3c;
  --brand-red-hover: #b42829;
  --color-slate-950: #020617;
  --color-slate-900: #0f172a;
  --color-slate-800: #1e293b;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748b;
  --color-slate-100: #f1f5f9;
  --color-slate-50: #f8fafc;
}

body {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--color-slate-800);
  background-color: var(--color-slate-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-slate-900);
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* Custom Logo Support */
.site-custom-logo img,
.custom-logo-link img {
  max-height: 52px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Navigation Segmented Bar Container */
.site-nav-container {
  display: flex !important;
  align-items: center !important;
  background-color: rgba(241, 245, 249, 0.95) !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 1.125rem !important;
  padding: 0.3rem 0.5rem !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

/* Primary Navigation Menu */
.primary-nav-menu,
#site-navigation ul {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.primary-nav-menu > li,
#site-navigation ul > li {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  list-style: none !important;
  margin: 0 2px !important;
  padding: 0 !important;
}

.primary-nav-menu > li > a,
#site-navigation ul > li > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.55rem 1.15rem !important;
  margin: 2px 3px !important;
  border-radius: 0.75rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  color: var(--color-slate-800) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  line-height: 1.25 !important;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.primary-nav-menu > li > a:hover,
#site-navigation ul > li > a:hover {
  color: var(--brand-blue) !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
}

.primary-nav-menu > li.current-menu-item > a,
.primary-nav-menu > li.current_page_item > a,
.primary-nav-menu > li.current-menu-ancestor > a,
#site-navigation ul > li.current-menu-item > a {
  background-color: var(--brand-blue) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 3px 10px rgba(37, 81, 154, 0.32) !important;
}

/* Submenu Dropdowns */
.primary-nav-menu .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
}

.primary-nav-menu .menu-item-has-children:hover > a::after {
  transform: rotate(-135deg) translateY(-1px);
}

.primary-nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 14rem;
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 0.5rem;
  box-shadow: 0 16px 32px -4px rgba(15, 23, 42, 0.12), 0 6px 12px -2px rgba(15, 23, 42, 0.05);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.2s ease-in-out;
  z-index: 50;
  list-style: none;
  margin: 0;
}

.primary-nav-menu .menu-item-has-children:hover > .sub-menu,
.primary-nav-menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav-menu .sub-menu li {
  list-style: none;
  margin: 0;
}

.primary-nav-menu .sub-menu li a {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 0.625rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-slate-700) !important;
  text-decoration: none;
  transition: all 0.15s ease;
}

.primary-nav-menu .sub-menu li a:hover,
.primary-nav-menu .sub-menu li.current-menu-item a {
  background-color: var(--color-slate-100) !important;
  color: var(--brand-blue) !important;
}

/* Mobile Nav Drawer Links */
#mobile-menu-drawer nav ul li a {
  display: block;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: 0.925rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  transition: all 0.15s ease;
}

#mobile-menu-drawer nav ul li a:hover,
#mobile-menu-drawer nav ul li.current-menu-item a {
  background-color: var(--brand-blue);
  color: #ffffff;
}

/* Ensure Hero section headlines are always crystal clear */
.hero-section h1,
.hero-section h1 a {
  color: var(--color-slate-950) !important;
  font-weight: 900;
}

.hero-section p {
  color: var(--color-slate-700) !important;
}

/* Brand Button Styling */
.btn-primary {
  background-color: var(--brand-blue);
  color: #ffffff !important;
}

.btn-accent {
  background-color: var(--brand-red);
  color: #ffffff !important;
}

.btn-outline {
  border-color: var(--brand-blue);
  color: var(--brand-blue) !important;
}

/* Floating Back to Top Button */
#back-to-top {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 40 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 0.875rem !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  background: linear-gradient(135deg, #25519a 0%, #152b52 100%) !important;
  box-shadow: 0 10px 25px -5px rgba(37, 81, 154, 0.4), 0 4px 10px -2px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#back-to-top:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 14px 28px -4px rgba(37, 81, 154, 0.5), 0 6px 12px -2px rgba(0, 0, 0, 0.15) !important;
  background: linear-gradient(135deg, #1c386a 0%, #0d1b34 100%) !important;
}

#back-to-top svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #ffffff;
  transition: transform 0.2s ease;
}

#back-to-top:hover svg {
  transform: translateY(-2px);
}

/* YouTube & Video Embeds - Aligned flush with editorial content column */
.prose-editorial .wp-block-embed,
.prose-editorial figure.wp-block-embed,
.prose-editorial .wp-block-embed-youtube,
.prose-editorial .wp-block-embed.alignwide,
.prose-editorial .wp-block-embed.alignfull,
.prose-editorial .wp-block-embed.aligncenter,
.prose-editorial .wp-block-embed.alignleft,
.prose-editorial .wp-block-embed.alignright,
.single-article .prose-editorial .wp-block-embed,
.single-article .prose-editorial figure.wp-block-embed,
.single-article .prose-editorial .wp-block-embed-youtube,
.single-article .prose-editorial .wp-block-embed.alignwide,
.single-article .prose-editorial .wp-block-embed.alignfull {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  box-sizing: border-box !important;
  clear: both !important;
}

.prose-editorial .wp-block-embed__wrapper,
.single-article .prose-editorial .wp-block-embed__wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 1rem !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #0f172a !important;
}

.prose-editorial .wp-block-embed__wrapper::before,
.single-article .prose-editorial .wp-block-embed__wrapper::before {
  display: none !important;
  content: none !important;
}

.prose-editorial .wp-block-embed__wrapper iframe,
.single-article .prose-editorial .wp-block-embed__wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  border: 0 !important;
  border-radius: 1rem !important;
}

.prose-editorial iframe:not(.wp-block-embed__wrapper iframe),
.single-article .prose-editorial iframe:not(.wp-block-embed__wrapper iframe),
.prose-editorial .embed-youtube iframe {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
  border-radius: 1rem !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.06) !important;
  box-sizing: border-box !important;
}

/* AdSense High-CPC Placement Containers - Centered & Aligned Flush with Content */
.ad-placement-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  clear: both !important;
  text-align: center !important;
}

.prose-editorial .ad-placement-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ad-placement-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.ad-placement-label {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  letter-spacing: 0.18em !important;
  font-size: 10px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  margin-bottom: 0.5rem !important;
}

.ad-code-wrapper {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  overflow: hidden !important;
  min-height: 80px;
  border-radius: 1rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04);
  padding: 0.5rem;
  box-sizing: border-box !important;
}

/* Force Google AdSense ins and iframe to center perfectly */
.ad-code-wrapper ins.adsbygoogle {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  max-width: 100% !important;
}

.ad-code-wrapper ins.adsbygoogle iframe,
.ad-code-wrapper iframe {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  max-width: 100% !important;
}

/* AMP Specific Component Enhancements */
amp-sidebar#mobile-menu-drawer {
  width: 320px;
  max-width: 85vw;
  background-color: #ffffff;
  color: #0f172a;
  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.15);
  border-left: 1px solid #e2e8f0;
}

amp-sidebar .amp-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

amp-ad {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  max-width: 100% !important;
}

amp-youtube {
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 4px 10px -2px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  margin: 2rem 0;
}

/* Table of Contents (TOC) Responsive Styling */
.toc-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 2rem 0 !important;
  clear: both !important;
}

.toc-card {
  border-radius: 1rem !important;
  border: 2px solid #e2e8f0 !important;
  background-color: #f8fafc !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease-in-out !important;
}

.toc-card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, 0.06) !important;
}

.toc-header {
  list-style: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 1rem 1.25rem !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #f1f5f9 !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: background-color 0.15s ease !important;
}

.toc-header::-webkit-details-marker {
  display: none !important;
}

.toc-header:hover {
  background-color: #f8fafc !important;
}

.toc-body {
  padding: 1.25rem 1.5rem !important;
  background-color: rgba(248, 250, 252, 0.75) !important;
  max-height: 480px !important;
  overflow-y: auto !important;
}

.toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.toc-item {
  list-style: none !important;
  margin: 0.4rem 0 !important;
}

.toc-level-2 {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}

.toc-level-3 {
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  margin-left: 1.5rem !important;
}

.toc-link {
  display: inline-flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  color: #334155 !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  transition: color 0.15s ease !important;
}

.toc-link:hover {
  color: #25519a !important;
}

.toc-number {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.75rem !important;
  font-weight: 900 !important;
  color: #d73b3c !important;
  background-color: #fdf3f3 !important;
  border: 1px solid #facdce !important;
  border-radius: 0.375rem !important;
  padding: 0.1rem 0.4rem !important;
  flex-shrink: 0 !important;
}

/* Offset headings on scroll so fixed header doesn't cover text */
.scroll-mt-24,
.prose-editorial h2,
.prose-editorial h3 {
  scroll-margin-top: 5.5rem !important;
}