/*
Theme Name: Zero One Logic
Theme URI: FIXME: https://github.com/something/fixme or https://wordpress.org/themes/twentytwentyfive/
Author: Zero One Logic
Author URI: https://01lgc.com
Description: FIXME: A short description of the theme
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: zero-one-logic
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
Template: twentytwentyfive
*/

/*----------------------------------------------------------------*/
/* Custom Styles for Zero One Logic Child Theme
/*----------------------------------------------------------------*/

/* Fix for gap above the footer template part */
footer.wp-block-template-part {
    margin-block-start: 0; /* Removes top margin from the footer wrapper */
}

/* Optional but recommended: Ensure custom content blocks have zero bottom margin */
/* This reinforces the setting from your style JSON files */
.wp-block-group[class*="is-style-zero-one-logic-content-"] {
    margin-block-end: 0; /* Ensures bottom margin is zero */
}

/* Add any other custom CSS rules below this line */


/* ==========================================================================
   Table of Contents - CSS Reordering Approach (Approach B) - HARDCODED MQ
   ========================================================================== */

/* --- CONFIGURATION --- */
/* !! Define your breakpoint value here !! */
/* !! Manually update the max-width/min-width values below if you change this !! */
/* !! Replace 40px offset as needed. Adjust desktop sidebar width as needed. !! */
:root {
  --toc-breakpoint: 768px; /* The width where layout changes */
  --toc-sticky-offset: 0px; /* Space between top of viewport and sticky TOC */
}

/* ==========================================================================
   BASE & SCREEN STYLES
   ========================================================================== */

/* --- Container for Reordering --- */
.toc-reorder-container {
  display: flex; /* Base display */
  flex-wrap: wrap; /* Allow wrapping */
}

/* --- Mobile: Stack columns and reorder (BELOW breakpoint) --- */
/* Hardcoded max-width (1px less than --toc-breakpoint) */
@media screen and (max-width: 767px) {

  .toc-reorder-container {
    /* Force stacking */
    display: flex !important;
    flex-direction: column !important;
  }

  /* Main Content Column */
  .wp-block-columns.toc-reorder-container > .wp-block-column.toc-main-content {
    order: 2; /* Appears second */
    width: 100%;
  }

  /* Sidebar Column (with TOC) */
  .wp-block-columns.toc-reorder-container > .wp-block-column.toc-sidebar-column {
    order: 1; /* Appears first */
    position: static !important; /* Override sticky */
    width: 100% !important;     /* Take full width */
    margin-bottom: 1.5em;     /* Add space below */
    height: auto !important;     /* Override potential fixed height */
    align-self: auto !important; /* Override potential desktop alignment */
    /* Reset desktop flex properties */
    flex-grow: initial !important;
    flex-shrink: initial !important;
    flex-basis: auto !important;
  }
}

/* --- Desktop: Side-by-side columns, sidebar sticky (AT OR ABOVE breakpoint) --- */
/* Hardcoded min-width (using --toc-breakpoint value directly) */
@media screen and (min-width: 768px) {

  .toc-reorder-container {
    flex-direction: row; /* Ensure side-by-side */
    flex-wrap: nowrap; /* Prevent wrapping */
    /* align-items: flex-start; */ /* Optional: uncomment if needed */
  }

  /* Main Content Column */
  .wp-block-columns.toc-reorder-container > .wp-block-column.toc-main-content {
    order: 1; /* Reset order */
    width: auto; /* Allow flexbox to control width */
    /* Define width using flexbox if needed, e.g.: */
    flex-grow: 1;
    flex-basis: 0; /* Let it grow from 0 */
    /* Or: flex-basis: 70%; flex-grow: 0; */
  }

  /* Sidebar Column (with TOC) */
  .wp-block-columns.toc-reorder-container > .wp-block-column.toc-sidebar-column {
    order: 2; /* Reset order */
    position: sticky; /* Apply sticky */
    top: var(--toc-sticky-offset); /* var() should work fine for property values */
    height: fit-content; /* Fit content height */
    align-self: flex-start; /* Align to top */
    /* Define width - adjust flex-basis as needed! */
    flex-grow: 0;       /* Don't grow */
    flex-shrink: 0;     /* Don't shrink */
    flex-basis: 300px;  /* Example: fixed width 300px */
    width: 300px;       /* Fallback width */
    margin-bottom: 0; /* Reset mobile margin */
  }
}


/* ==========================================================================
   PRINT STYLES
   ========================================================================== */
@media print {
  /* Force simple block layout for container */
  .toc-reorder-container {
    display: block !important;
  }

  /* TOC Sidebar Column appears FIRST */
  .wp-block-columns.toc-reorder-container > .wp-block-column.toc-sidebar-column {
    order: 1; /* Conceptually first */
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 2em;
    page-break-after: avoid;
    /* Reset flex properties */
    flex-grow: initial !important;
    flex-shrink: initial !important;
    flex-basis: auto !important;
    align-self: auto !important;
  }

  /* Main Content Column appears SECOND */
  .wp-block-columns.toc-reorder-container > .wp-block-column.toc-main-content {
    order: 2; /* Conceptually second */
    display: block !important;
    width: 100% !important;
    /* Reset flex properties */
    flex-grow: initial !important;
    flex-shrink: initial !important;
    flex-basis: auto !important;
    align-self: auto !important;
  }

  /* Optional but Recommended: General print cleanup */
  body, .wp-site-blocks, .wp-block-post-content {
     position: static !important;
     overflow: visible !important;
     width: 100% !important;
     max-width: none !important;
  }
   /* Ensure OTHER columns blocks also stack */
   .wp-block-columns:not(.toc-reorder-container) {
     display: block !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
  }
   .wp-block-columns:not(.toc-reorder-container) > .wp-block-column {
     width: 100% !important;
     flex-basis: auto !important;
     margin-left: 0 !important;
     margin-right: 0 !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
  }
   /* Hide elements not useful for print (optional examples) */
   /* .wp-block-post-navigation-link, .wp-block-post-comments, .site-header, .site-footer { display: none !important; } */
}