/*
Theme Name: School Bus Help
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Template: twentytwentyfive
Author: Greg Muri
Author URI: http://sbhstaging.gregmuri.com
Description: This is the style sheet for the child theme based on the twentytwentyfive WP theme. It is being used to customize the school bus driver academy website
Version: 2.2.34
Added: 2026-02-06 05:34:24
Last Update: 2026-02-06 21:48:52

*/

/* =============================================================================
   SBDA COMMENTING STANDARD (CSS)
   -----------------------------------------------------------------------------
   FORMAT (use for new sections/components)
   ID:      SBDA-CSS-<area>-<thing>    (short, stable)
   PURPOSE: <what this block does>
   SCOPE:   <selectors this block targets>
   USAGE:   <where to add classes / any setup notes>
   ADDED:   2026-02-20 GM
   UPDATED: 2026-02-20 GM - <one-line change note>   (add new line; keep last ~3)
   ============================================================================= */

/* RULES
   - NEW feature: create a new block header + ADDED line.
   - UPDATE: add/append an UPDATED line with date + 5–10 word summary.
   - Keep comments factual (no narratives). If it took >15 minutes, note "why".
   - Debug code must be labeled DEBUG and disabled by default.
*/



/* =============================================================================
   ID:      SBDA-CSS-pretrip-layout
   PURPOSE: Page-scoped layout + components for Pre-Trip lesson pages.
   SCOPE:   .pretrip-page, .pretrip-panel, .pretrip-cols, .pretrip-col-right, .pretrip-prevnext
   USAGE:   Add classes noted below to your reusable block patterns.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ID:      SBDA-CSS-pretrip-page-scope
   PURPOSE: Scopes all Pre-Trip layout rules so they don't affect other pages.
   SCOPE:   .pretrip-page (empty hook class)
   USAGE:   Add class to OUTER wrapper Group on every Pre-Trip page.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   -------------------------------------------------------------------------- */
.pretrip-page{}


/* -----------------------------------------------------------------------------
   ID:      SBDA-CSS-pretrip-panel
   PURPOSE: Consistent bordered/shadowed content panel for inspection/script.
   SCOPE:   .pretrip-panel
   USAGE:   Add class to the Group that wraps the inspection/script content.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   -------------------------------------------------------------------------- */
.pretrip-panel{
  border: 1px solid var(--wp--preset--color--dark-gray);
  border-radius: 14px;
  padding-left: var(--wp--preset--spacing--20);
  padding-right: var(--wp--preset--spacing--20);
  box-shadow: var(--wp--preset--shadow--natural);
}


/* -----------------------------------------------------------------------------
   ID:      SBDA-CSS-pretrip-cols-desktop
   PURPOSE: Desktop 2-column pattern: content + fixed 160px centered image column.
   SCOPE:   .pretrip-page .wp-block-columns.pretrip-cols (+ right col class)
   USAGE:   Columns: add class pretrip-cols. Right Column: add class pretrip-col-right.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   -------------------------------------------------------------------------- */
.pretrip-page .wp-block-columns.pretrip-cols{
  align-items: flex-start;
}

.pretrip-page .wp-block-columns.pretrip-cols > .wp-block-column.pretrip-col-right{
  flex: 0 0 160px;
  width: 160px;
  /* Center contents of the right column */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* -----------------------------------------------------------------------------
   ID:      SBDA-CSS-pretrip-mobile
   PURPOSE: Mobile behavior for Pre-Trip pages (stack columns; keep nav row).
   SCOPE:   @media (max-width: 781px) within .pretrip-page
   USAGE:   Automatic once .pretrip-page is present.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   -------------------------------------------------------------------------- */
@media (max-width: 781px){
  .pretrip-page .wp-block-columns{
    flex-wrap: wrap !important;
  }

  .pretrip-page .wp-block-column{
    flex-basis: 50% !important;
    width: 50% !important;
  }

  /* Make sure the image column behaves nicely when stacked */
  .pretrip-page .wp-block-columns.pretrip-cols > .wp-block-column.pretrip-col-right{
    flex: 0 0 auto !important;
    width: 100% !important;
    align-items: center;
  }
  
    /* --- EXCEPTION: Keep Prev/Next buttons on one row --- */
  .pretrip-page .wp-block-columns.pretrip-prevnext{
    flex-wrap: nowrap !important;
  }

  .pretrip-page .wp-block-columns.pretrip-prevnext > .wp-block-column{
    flex-basis: 50% !important;
    width: 50% !important;
  }
  
  /* If 50% + 50% overflows because of gap/padding, tighten it */
  .pretrip-page .wp-block-columns.pretrip-prevnext{
	gap: 8px !important;
}

  

}

/* DEBUG (disabled by default)
   ID:      SBDA-CSS-debug-outline
   PURPOSE: Temporary visual outline to confirm .pretrip-page scope on mobile.
   ENABLE:  Uncomment to use during troubleshooting.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Disabled debug outline
*/
/*
@media (max-width: 781px){
  .pretrip-page { outline: 6px solid red !important; }
}
*/


/* =============================================================================
   ID:      SBDA-CSS-buttons
   PURPOSE: Button style variants and Prev/Next helpers.
   SCOPE:   .is-style-pretrip-nav, .pretrip-prevnext*, .is-disabled
   USAGE:   Apply block style 'PreTrip Nav Button' to core/button blocks.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   ============================================================================= */

/* -----------------------------------------------------------------------------
   ID:      SBDA-CSS-pretrip-nav-button
   PURPOSE: Visual style for Pre-Trip Prev/Next buttons.
   SCOPE:   .wp-block-button.is-style-pretrip-nav > .wp-block-button__link
   USAGE:   In editor, pick block style: 'PreTrip Nav Button'.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-pretrip-nav > .wp-block-button__link.wp-element-button{
  padding: 0 var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--tiny);
  line-height: 1.3;
  width: auto;
  background: var(--wp--preset--color--brand-navy);
  color: var(--wp--preset--color--bus-yellow-soft);
}


.pretrip-prevnext-row{
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.pretrip-prevnext-col{
  flex: 1;
}

.pretrip-prevnext-left{
  text-align: left;
}

.pretrip-prevnext-right{
  text-align: right;
}

.wp-block-button__link.is-disabled{
  opacity: .35;
  pointer-events: none;
}

.wp-block-buttons.is-content-justification-right {
    display: flex !important;
	justify-content: right;
}

/* -----------------------------------------------------------------------------
   ID:      SBDA-CSS-singlepage-panel
   PURPOSE: Generic bordered/shadowed panel for non-Pre-Trip pages.
   SCOPE:   .singlepage-panel
   USAGE:   Add class to Group that wraps page content.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   -------------------------------------------------------------------------- */
.singlepage-panel{
  border: 2px solid var(--wp--preset--color--border-gray);
  border-radius: 14px;
  padding-left: var(--wp--preset--spacing--20);
  padding-right: var(--wp--preset--spacing--20);
  box-shadow: var(--wp--preset--shadow--natural);
}

/* -----------------------------------------------------------------------------
   ID:      SBDA-CSS-section-heading
   PURPOSE: Standard section header treatment (yellow bg + navy text).
   SCOPE:   .section-heading
   USAGE:   Add class to Heading blocks used as section dividers.
   ADDED:   2026-02-06 GM
   UPDATED: 2026-02-20 GM - Standardized comment format
   -------------------------------------------------------------------------- */
.section-heading{
	background: var(--wp--preset--color--bus-yellow-soft);
	color: var(--wp--preset--color--bus-brand-navy);
}