/*
Theme Name: Starter Block Theme v4
Theme URI: https://jakson.co/
Author: https://jakson.co/
Author URI: https://jakson.co/
Description: A bare bones, blank canvas starter theme for building WordPress Block Themes using the Full Site Editor. It includes only the templates and essential settings you need to create sites fast! 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: starter-block-theme-v4
Tags: Block editor patterns, Block editor styles, Block themes, Template editing

/*  Smooth Scroll */
html {
  scroll-behavior: smooth;
}

/*  Reduced motion prefs  */
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*  Navigation Block Breakpoint. Credit: https://wpdocs.io/ */
body .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: block !important;
}

body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none !important;
}

/* Change the width to the breakpoint of the Nav */
@media (min-width: 782px) {
  body .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
  }
}

/* end nav break point */

@font-face {
  font-family: 'Alata';
  src: url('./assets/fonts/Alata/Alata-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* Nicely wrapped headlines */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* I've no idea why when you add a background color to a column, WP by default adds padding to it... so weird - this gets rid of that */
:where(.wp-block-columns.has-background) {
  padding: initial;
}

/* Pull Quote */
.wp-block-pullquote blockquote {
  display: grid;
  gap: 20px;
}

.wp-block-pullquote cite {
  font-size: 80%;
  font-weight: 600;
}

/* Search Block */
.wp-block-search__input {
  border: 1px solid;
}

.wp-block-search__button {
  box-shadow: none;
  border: 1px solid var(--wp--preset--color--custom-off-black);
  border-radius: 0;
  color: white;
  padding: 0.4rem 1rem 0.5rem 1rem;
  font-weight: 500;
}

/* Comments */
.comment-form-cookies-consent {
  font-size: 14px;
  line-height: 2;
}

/* Keeps our titles link as the off black color in things like the query loop*/
.wp-block-post-title :where(a) {
  color: var(--wp--preset--color--custom-off-black);
}

/* Button hover state  - core button block still does not have this and it can't be done in theme.json! */

.wp-block-button__link,
a {
  transition: 0.3s;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover,
#commentform .form-submit.wp-block-button input:hover {
  background: var(--wp--preset--color--custom-white);
  color: var(--wp--preset--color--custom-off-black);
}

.wp-block-button .wp-block-button__link:hover {
  background: var(--wp--preset--color--custom-custom-white);
  color: var(--wp--preset--color--off-black);
  border-color: var(--wp--preset--color--custom-off-black);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--wp--preset--color--custom-off-black);
  color: var(--wp--preset--color--custom-white);
  border-color: var(--wp--preset--color--custom-off-black);
}

a:hover:not(.wp-block-site-title a, .wp-block-button__link.wp-element-button) {
  text-decoration: underline !important;
}


/* ===== CPT TEMPLATE STYLES ===== */

.channel-template-wrapper {
  max-width: var(--wp--custom--layout--content-size, 1200px);
  margin: 0 auto;
  padding: var(--space-40, 2.5rem);
}

/* ================== 80/20 GRID ================== */
.channel-layout-grid {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: var(--space-40, 2.5rem);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
    /* Stack columns on mobile */
  }
}

.channel-main-content {
  /* This is the 67% column */
}

.channel-sidebar {
  /* This is the 33% column */
}

/* ================== HEADER LAYOUT ================== */
.channel-profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-20, 1.25rem);
  margin-bottom: var(--space-30, 2rem);

  .channel-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    /*border: 3px solid var(--wp--preset--color--custom-white);  Assuming you have this color 
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);*/
  }

  .profile-meta-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-10, 0.5rem);
  }

}

.channel-title {
  font-size: 2.5rem;
  margin: 0 0 10px 0;
  line-height: 1.2;
}

.channel-action-btn {
  background: #ff006e;
  /* Example color, use your CSS variables */
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  display: inline-block;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.channel-action-btn:hover {
  transform: translateY(-3px);
  background: #e50064;
}

/* ================== SECTION STYLES ================== */
.channel-banner-container {
  width: 100%;
  height: 350px;
  overflow: hidden;
  margin-bottom: var(--space-30, 2rem);

  .channel-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.channel-description-section,
.channel-dynamic-features {
  background: var(--wp--preset--color--custom-white);
  /* Example */
  padding: 30px;
  border-radius: 10px;
  margin-bottom: 40px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
  margin-top: 0;
  font-size: 1.8rem;
  border-bottom: 2px solid var(--wp--preset--color--secondary);
  /* Example */
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.channel-body-content {
  font-size: 1.1rem;
  line-height: 1.8;
}

/* ================== SIDEBAR STYLES ================== */
.channel-sidebar {
  position: sticky;
  top: 80px;
  /* Adjust based on your header height */
  height: fit-content;
}

.channel-sidebar-box {
  background: var(--wp--preset--color--light-gray);
  /* Example */
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.sidebar-title {
  margin-top: 0;
  font-size: 1.5rem;
}

.sidebar-badge {
  display: inline-block;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 15px;
}

/* Tier-specific badges (use colors from your theme.json) */
.tier-basic {
  background: #f0f0f0;
  color: #333;
}

.tier-vip {
  background: #d4af37;
  color: #000;
}

/* Gold for VIP */
.tier-pro {
  background: #003366;
  color: #fff;
}

/* Professional blue */
.tier-premier {
  background: #808080;
  color: #fff;
}

/* Silver */
.tier-prestige {
  background: #ffd700;
  color: #000;
}

/* Platinum/Gold */


/* Responsive Adjustments */
@media (max-width: 768px) {
  /*.channel-layout-grid {
        grid-template-columns: 1fr;  Stack on mobile 
    }*/

}

/* Upgrade CTA Container Box */
.upgrade-cta-box {
  background-color: var(--wp--preset--color--light-gray, #f9f9f9);
  border: 1px solid var(--wp--preset--color--border-color, #e0e0e0);
  border-radius: var(--border-radius, 8px);
  padding: var(--space-20, 1.25rem);
}

.upgrade-heading {
  font-size: var(--font-size-24, 1.5rem);
  margin-bottom: var(--space-15, 1rem);
  color: var(--wp--preset--color--primary-dark, #111111);
}

.upgrade-text {
  font-size: var(--font-size-16, 1rem);
  line-height: 1.6;
  margin-bottom: var(--space-25, 1.5rem);
}

/* Button Row Layout */
.upgrade-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-20, 1.25rem);
  margin-bottom: var(--space-20, 1.25rem);

  @media (max-width: 576px) {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-15, 1rem);
  }
}

/* Big Action Button */
.btn-upgrade-primary a {
  width: 100%;
  padding: 0.5rem 0.5rem !important;
}

/* Simple Text Link Button */
.btn-upgrade-secondary {
  color: var(--wp--preset--color--text-muted, #666666);
  font-weight: 500;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;

  &:hover {
    color: var(--wp--preset--color--primary-dark, #111111);
  }
}

/* Tiny Terms Text */
.upgrade-terms-text {
  font-size: var(--font-size-12, 0.75rem);
  color: var(--wp--preset--color--text-muted, #777777);
  line-height: 1.4;
  margin: 0;
}

/* ================== VIDEO DETAIL GRID ================== */
.video-info-grid {
  display: grid;
  grid-template-columns: 4fr 1fr;
  gap: var(--space-40, 2.5rem);
  margin-top: var(--space-30, 2rem);
  margin-bottom: var(--space-30, 2rem);

  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
}

.video-main-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-20, 1.25rem);
}

.video-title {
  font-size: 2.5rem;
  margin: 0;
  line-height: 1.2;
  color: var(--wp--preset--color--custom-off-black, #111111);
}

/* ================== COLLAPSIBLE DESCRIPTION ================== */
.video-description-collapse {
  background-color: var(--wp--preset--color--light-gray, #f9f9f9);
  border: 1px solid var(--wp--preset--color--border-color, #e0e0e0);
  border-radius: var(--border-radius, 8px);
  padding: var(--space-20, 1.25rem);
  transition: all 0.3s ease-in-out;
}

.video-description-collapse summary {
  font-size: var(--font-size-18, 1.1rem);
  font-weight: bold;
  cursor: pointer;
  outline: none;
  user-select: none;
  color: var(--wp--preset--color--primary-dark, #111111);
}

.video-description-collapse[open] summary {
  margin-bottom: var(--space-15, 1rem);
  border-bottom: 1px solid var(--wp--preset--color--border-color, #e0e0e0);
  padding-bottom: 0.5rem;
}

.video-description-content {
  font-size: var(--font-size-16, 1rem);
  line-height: 1.6;
  color: var(--wp--preset--color--text-muted, #555555);
}

.video-conditional-placeholder {
  margin-top: var(--space-40, 2.5rem);
}

/* ================== RESPONSIVE EMBEDS ================== */
.wp-block-embed__wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* Channel Card Links */
.channel-title-link {
  color: inherit;
  text-decoration: none;
}

.channel-title-link:hover {
  text-decoration: underline !important;
}