/*
 Theme Name:   Tornadoes Kick
 Theme URI:    https://bricksbuilder.io/
 Description:  The Storm Chasing Website Theme by Tony Laubach
 Author:       Tony Laubach
 Author URI:   https://tonylaubach.net
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

.tl-excerpt-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* CHASE HEADER: hero sizing + consistent media behavior */
/* HERO: true 16:9 box, always */
.chase-header__hero {
  width: 100%;
  overflow: hidden;
  border-radius: 0;
  position: relative;
}

/* CHASE LOG TARGET REGION HEADER */
.chase-left__region {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 600;
  margin: 0;
  margin-top: 0.25rem;
  margin-bottom: 0.75rem;
}

.chase-header__below {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}

/* Make BOTH the video wrapper and image behave like a "cover" hero */
.chase-hero__media,
.chase-hero__media--image img,
.chase-hero__media--video iframe {
  width: 100%;
  height: 100%;
}

/* Images should crop nicely */
.chase-hero__media--image img {
  object-fit: cover;
  display: block;
}

/* oEmbed iframes should fill and crop like a hero too */
.chase-hero__media--video iframe {
  display: block;
}

/* BELOW HERO: two-column layout */
.chase-header__below {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start; /* if Bricks complains, use flex-start */
}

/* MOBILE: stack SPC under stats (hard guarantee) */
@media (max-width: 900px) {

  /* Force the two-column area to become a vertical stack */
  .chase-single .chase-header__below {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  /* Remove desktop “drop” spacing on mobile */
  .chase-single .chase-header__right {
    padding-top: 0;
    display: flex;
    justify-content: center;
  }

  /* Center the SPC wrapper and keep it from being gigantic */
  .chase-single .chase-spc {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .chase-single .chase-spc img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* If your SPC image is wrapped in a figure, kill default margins */
  .chase-single .chase-header__right figure {
    margin: 0;
  }
}


/* Bricks validator-safe */
.chase-header__below { align-items: flex-start; }

.chase-spc__img,
.chase-spc__img img {
  width: 100%;
  height: auto;
  display: block;
}


/* Align SPC with TARGET REGION */
.chase-header__right {
  padding-top: 0.75rem; /* tweak to match H2 optical baseline */
  display: flex;
  justify-content: flex-end;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
  .chase-header__below {
    grid-template-columns: 1fr;
  }
}

/* TWISTEX category archive: swap accent → twistex */
body.category-twistex-era {
  --accent: var(--twistex);
}


/* Default Wordpress Captions */
.wp-caption,
.wp-caption-text,
.wp-element-caption,
.brxe-image figcaption,
.brxe-image .bricks-caption,
.brxe-image .brxe-caption,
.brxe-image .bricks-image-caption,
.brxe-image .bricks-image__caption {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.2rem !important;
  text-align: left !important;
  font-size: 1.2rem;
  font-style: italic !important;
  color: var(--text-2) !important;
  position: static !important;
}

/* When an image has a caption, stop auto-centering the image */
figure.wp-block-image.aligncenter img,
.wp-block-image.aligncenter img,
figure.aligncenter img {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: block; /* keep block layout, remove auto-centering */
}

/* --- LINK AND HOVER COLOR OVERWRITES --- */

html[data-tl-theme] a {
  color: var(--text);
}

html[data-tl-theme] a:hover,
html[data-tl-theme] a:focus {
  color: var(--accent);
}

.site-header__clock {
  white-space: nowrap;
}

/* --- LINKS ON ACCENT BACKGROUNDS --- */

/* Base link color on accent backgrounds */
.accent-bg a {
  color: var(--acctext);
}

/* Hover/focus state on accent backgrounds */
.accent-bg a:hover,
.accent-bg a:focus {
  color: #9B9B9B;
}

/* Links inside accent background sections */
html[data-tl-theme] .accent-bg a {
  color: var(--acctext);
}

html[data-tl-theme] .accent-bg a:hover,
html[data-tl-theme] .accent-bg a:focus {
  color: #9B9B9B;
}