/*==================================================================*/
/* Miscellaneous CSS code for this custom WordPress Theme*/
/*==================================================================*/


/*==================================================================*/
/*    Remove Padding for a Group  */
/*------------------------------------------------------------------*/
/* add "no-padding-group" as the custom css tag */
/* this is primarily most useful when I want the inner layout to use the content width but I do NOT want the default padding/margins that come with it */
/* this can also be manually set in the UI, the tag is just an optional way to override it all in one go */
.no-padding-group.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 0;
}
/*------------------------------------------------------------------*/
/*==================================================================*/


/*==================================================================*/
/*    Remove Root Padding for Media & Text Blocks  */
/*------------------------------------------------------------------*/
/* This removes the extra text padding that WP normally adds to the LEFT of a Media & Text block when the image is on the right. */

.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
    padding-left: 0 !important;
    /*padding-right: 0 !important;*/
}
/* Note, there is not an equivalent tag to only affect the media & text case where the media is on the left and text is on the right */
/* This removes the padding for ALL Media & Text blocks */
/* Note, this can NOT be overridden in the UI */

.wp-block-media-text__content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/*------------------------------------------------------------------*/
/*==================================================================*/


/*==================================================================*/
/*     Hide / Show elements specifically on Desktop or on Mobile (e.g. dependent on screen size)                   */
/*------------------------------------------------------------------*/
/*  NOTE: they recommend that the two px values differ by 1 (hide-on-desktop would be 1 greater) to avoid glitches, 
    but my testing suggests it behaves better when set to the same value  */
/*  Taken from: https://wordpress.com/support/make-your-website-mobile-friendly/edit-the-mobile-version/ */
/*  Instructions: Add the appropriate CSS tag to the element(s) to hide */

/* hide elements on mobile*/
@media (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
}
/* hide elements on desktop*/
@media (min-width: 768px) {
  .hide-on-desktop { display: none !important; }
}
/*------------------------------------------------------------------*/
/*==================================================================*/