/*
Theme Name: Bhaav Bharat Global Events
Theme URI: https://bbglobalevents.com/
Author: Bhaav Bharat Global Events
Description: Custom brutalist-Indian editorial theme for Bhaav Bharat Global Events. Built from a Tailwind CSS static design, converted into a WordPress theme for use with the Blocksy-style workflow requested. Step 1 of the build: static content wrapped into proper WordPress template structure.
Version: 1.4
Requires PHP: 7.4
Text Domain: bbglobal
*/

/* Custom Brutalist & Indian styles (moved here from the original static build) */
.brutal-border {
  border: 2px solid #1A1715;
}
.brutal-shadow {
  box-shadow: 4px 4px 0px 0px #1A1715;
}
.brutal-shadow-lg {
  box-shadow: 8px 8px 0px 0px #1A1715;
}
.brutal-shadow-hover:hover {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px 0px 0px #1A1715;
}
.brutal-shadow-hover-sm:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px 0px #1A1715;
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.animate-spin-slow {
  animation: spin-slow 20s linear infinite;
}

/* Preloader seal image spin. Plain CSS (not a Tailwind-generated utility)
   so it always works without needing a Tailwind rebuild. The preloader
   itself is now on screen for ~2s (see initPreloader in animations.js),
   so a 2s rotation completes one clean, clearly visible turn. */
@keyframes preloader-seal-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.preloader-seal-spin {
  animation: preloader-seal-spin 2s linear infinite;
}

/* Mobile-only compositing hint, isolated behind a media query so it can
   NEVER touch desktop rendering. (Two earlier attempts to "fix" mobile by
   editing the base rule above broke the desktop spin instead — this time
   the base rule is untouched and identical to the original working CSS.) */
@media (max-width: 767px) {
  .preloader-seal-spin {
    will-change: transform;
  }
}

.indian-arch-clip {
  clip-path: polygon(50% 0%, 100% 25%, 100% 100%, 0% 100%, 0% 25%);
}

.dome-clip {
  clip-path: path('M 0,200 C 0,80 50,40 100,0 C 150,40 200,80 200,200 L 200,300 L 0,300 Z');
}

body.loading {
  overflow: hidden;
  height: 100vh;
}

/* ==========================================================================
   City/Country "Description" rich-text field — image grid + callout styles.
   Scoped under .bb-dest-content (the wrapper the taxonomy templates already
   put around the wpautop'd description) and kept as PLAIN CSS classes here
   in style.css rather than an inline <style> block inside the field itself,
   because wp_kses_post() strips <style> tags on save and TinyMCE can mangle
   unrecognized markup in the Visual tab. Class attributes on div/figure/img
   are allowed by wp_kses_post, so content typed into the Text tab using
   ONLY these class names will survive saving and editing reliably.
   ========================================================================== */
.bb-dest-content {
  color: #1A1715;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.bb-dest-content p { margin: 0 0 20px; line-height: 1.8; overflow-wrap: break-word; word-break: break-word; }
.bb-dest-content pre,
.bb-dest-content table { max-width: 100%; overflow-x: auto; display: block; }
.bb-dest-content h2, .bb-dest-content h3 { font-family: "Cormorant Garamond", serif; font-weight: 700; color: #1A1715; }
.bb-dest-content h2 { font-size: 28px; margin: 40px 0 14px; }
.bb-dest-content h3 { font-size: 21px; margin: 30px 0 10px; }

.bb-dest-content .bb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}
.bb-dest-content .bb-grid.bb-grid-2 { grid-template-columns: repeat(2, 1fr); }
.bb-dest-content .bb-grid figure {
  margin: 0;
  border: 2px solid #1A1715;
  box-shadow: 4px 4px 0px 0px #1A1715;
  overflow: hidden;
  background: #F6F3EB;
}
.bb-dest-content .bb-grid figure img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.bb-dest-content .bb-grid figure:hover img { transform: scale(1.06); }
.bb-dest-content .bb-grid figcaption {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1A1715;
  text-align: center;
  padding: 10px 6px;
  border-top: 2px solid #1A1715;
  background: #FDFBF7;
}

.bb-dest-content .bb-callout {
  background: #F6F3EB;
  border: 2px solid #1A1715;
  box-shadow: 4px 4px 0px 0px #C95A49;
  padding: 20px 24px;
  margin: 30px 0;
  font-size: 15px;
}
.bb-dest-content .bb-callout strong { color: #5C1D24; }

@media (max-width: 780px) {
  .bb-dest-content .bb-grid,
  .bb-dest-content .bb-grid.bb-grid-2 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .bb-dest-content .bb-grid figure img { height: 220px; }
  .bb-dest-content h2 { font-size: 23px; }
  .bb-dest-content h3 { font-size: 18px; }
}

/* ==========================================================================
   Signature Destinations bento grid — a handful of Tailwind utility
   classes used by inc/homepage-cities-grid.php that aren't in the
   pre-built assets/tailwind.css (that file is a static compiled output;
   it only contains classes Tailwind saw in use the last time it was
   built, so brand-new class names in PHP templates don't do anything
   until it's rebuilt). Hand-added here instead so the hero card + the
   Hampi/Jaipur/Jaisalmer cluster's Flexbox stretch-to-match-height
   layout actually applies without needing a Tailwind rebuild.
   ========================================================================== */
.aspect-\[3\/4\] { aspect-ratio: 3/4; }
.aspect-\[16\/9\] { aspect-ratio: 16/9; }

@media (min-width: 1024px) {
  .lg\:flex-1 { flex: 1 1 0%; }
  .lg\:flex-row { flex-direction: row; }
  .lg\:min-w-0 { min-width: 0px; }
  .lg\:col-span-4 { grid-column: span 4 / span 4; }
}

.custom-cursor {
  width: 20px;
  height: 20px;
  border: 2px solid #1A1715;
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width 0.2s, height 0.2s, background-color 0.2s;
}

.custom-cursor-dot {
  width: 4px;
  height: 4px;
  background-color: #1A1715;
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
}

/* Marquee animation (used by the running text strip) */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
.animate-marquee {
  animation: marquee 25s linear infinite;
  display: inline-flex;
}

/* ==========================================================================
   CUSTOM SCROLLBAR (Bhaav Bharat brand styling)
   Replaces the default OS/browser scrollbar with a slim, brand-toned one:
   sand track, terracotta-to-maroon gradient thumb, gold on hover — with a
   thin charcoal keyline so it still reads as part of the brutalist system.
   ========================================================================== */

html {
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #C95A49 #F6F3EB;
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #F6F3EB; /* brand-sand */
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #C95A49 0%, #5C1D24 100%); /* terracotta -> maroon */
  border: 2px solid #F6F3EB;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #D4AF37 0%, #C95A49 100%); /* gold -> terracotta */
}

::-webkit-scrollbar-corner {
  background: #F6F3EB;
}

/* ==========================================================================
   ARTICLE BODY CONTENT (single-bbglobal_dest.php AND single.php)
   Scoped styling for admin-authored block-editor content (the_content()) on
   both the dynamic Destination single page and the standard blog post
   single page, since the Tailwind Play CDN here doesn't load the
   @tailwindcss/typography plugin. Keeps arbitrary heading/paragraph/quote/
   image/list markup on-brand without needing utility classes hand-added
   inside the block editor. Shared by both templates on purpose — same
   article-body treatment either way.
   ========================================================================== */

.bb-dest-content {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: rgba(26, 23, 21, 0.8);
  font-size: 1rem;
  line-height: 1.75;
}

.bb-dest-content > *:first-child {
  margin-top: 0;
}

.bb-dest-content p {
  margin: 0 0 1.5rem;
}

.bb-dest-content h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.75rem;
  color: #1A1715;
  margin: 2.5rem 0 0.75rem;
}

.bb-dest-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: #1A1715;
  margin: 2rem 0 0.5rem;
}

.bb-dest-content a {
  color: #C95A49;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bb-dest-content ul,
.bb-dest-content ol {
  margin: 0 0 1.5rem 1.25rem;
}

.bb-dest-content ul {
  list-style: disc;
}

.bb-dest-content ol {
  list-style: decimal;
}

.bb-dest-content li {
  margin-bottom: 0.5rem;
}

.bb-dest-content blockquote {
  border-left: 4px solid #D4AF37;
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #1A1715;
}

.bb-dest-content img {
  width: 100%;
  height: auto;
  border: 2px solid #1A1715;
  margin: 2rem 0;
}

.bb-dest-content figure {
  margin: 2rem 0;
}

.bb-dest-content figcaption {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.75rem;
  color: rgba(26, 23, 21, 0.6);
  margin-top: 0.5rem;
}

.bb-dest-content hr {
  border: none;
  border-top: 2px solid rgba(26, 23, 21, 0.1);
  margin: 2.5rem 0;
}

/* ==========================================================================
   PAGINATION (travel-blog.php)
   Minimal reset for paginate_links() output; the brutalist button classes
   themselves are added inline via str_replace() in the template.
   ========================================================================== */

.bb-pagination span.dots {
  padding: 0 0.25rem;
  color: rgba(26, 23, 21, 0.4);
}

.bb-pagination .current {
  background: #1A1715 !important;
  color: #FDFBF7 !important;
}

/* ==========================================================================
   COMMENTS (single.php)
   Light-touch styling for the default WordPress comment list + form output
   from comments_template(), so it reads as part of the brand system without
   needing a fully custom comments template.
   ========================================================================== */

.bb-comments {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1A1715;
}

.bb-comments h2,
.bb-comments h3 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 700;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.bb-comments ol.comment-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.bb-comments .comment-body {
  border: 2px solid rgba(26, 23, 21, 0.1);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.bb-comments .comment-author .fn {
  font-weight: 700;
  font-style: normal;
}

.bb-comments .comment-metadata {
  font-size: 0.75rem;
  color: rgba(26, 23, 21, 0.5);
  margin-bottom: 0.5rem;
}

.bb-comments .comment-reply-link {
  color: #C95A49;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.bb-comments .comment-form input[type="text"],
.bb-comments .comment-form input[type="email"],
.bb-comments .comment-form input[type="url"],
.bb-comments .comment-form textarea {
  width: 100%;
  border: 2px solid #1A1715;
  padding: 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  margin-bottom: 1rem;
  background: #F6F3EB;
}

.bb-comments .comment-form label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}

.bb-comments .form-submit input[type="submit"] {
  background: #C95A49;
  color: #FDFBF7;
  border: 2px solid #1A1715;
  box-shadow: 4px 4px 0px 0px #1A1715;
  padding: 0.75rem 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.bb-comments .form-submit input[type="submit"]:hover {
  background: #D4AF37;
  color: #1A1715;
}

/* ==========================================================================
   FAQ ACCORDION (faq.php)
   Native <details>/<summary> accordion — no JS needed. Hides the default
   disclosure triangle since the theme draws its own plus/rotate icon.
   ========================================================================== */

.bb-faq-item summary::-webkit-details-marker {
  display: none;
}

.bb-faq-item summary {
  -webkit-tap-highlight-color: transparent;
}

.bb-faq-item[open] summary span:first-child {
  color: #C95A49;
}