/*
Theme Name:   NezaGenesis
Theme URI:    https://bruneza.com
Description:  A powerful child theme for Hello Elementor with enhanced functionality and modern design utilities
Author:       Bruce Mugwaneza
Author URI:   https://bruneza.com
Template:     hello-elementor
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready, custom-colors, custom-header, custom-logo, custom-menu, featured-images, flexible-header, full-width-template, post-formats, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain:  neza
Requires at least: 5.0
Tested up to: 6.4
Requires PHP: 7.4
*/
/* =========================================================
   Responsive pad utilities
   Intent:
   - Class names encode literal values (e.g. 80-20 = 80px block, 20px inline)
   - Desktop: exact values as authored
   - Mobile: collapse ALL block padding to 40px, keep inline at 20px
   ========================================================= */

/* Core tokens */
:root {
  --pad-inline: 20px;
  --pad-mobile-block: 40px;
  --bp-sm: 768px;
}

/* =========================================================
   Block x Inline padding (literal, consistent)
   ========================================================= */

.pad-0-20    { padding: 0 var(--pad-inline); }

.pad-20-20   { padding: 20px var(--pad-inline); }
.pad-40-20   { padding: 40px var(--pad-inline); }
.pad-60-20   { padding: 60px var(--pad-inline); }
.pad-80-20   { padding: 80px var(--pad-inline); }

.pad-100-20  { padding: 100px var(--pad-inline); }
.pad-120-20  { padding: 120px var(--pad-inline); }
.pad-140-20  { padding: 140px var(--pad-inline); }
.pad-160-20  { padding: 160px var(--pad-inline); }
.pad-180-20  { padding: 180px var(--pad-inline); }

/* =========================================================
   Bottom-only padding (block-end)
   ========================================================= */

.pad-40b-20  { padding: 0 var(--pad-inline) 40px; }
.pad-60b-20  { padding: 0 var(--pad-inline) 60px; }
.pad-80b-20  { padding: 0 var(--pad-inline) 80px; }
.pad-100b-20 { padding: 0 var(--pad-inline) 100px; }

/* =========================================================
   Top-only padding (block-start)
   ========================================================= */

.pad-t40-20  { padding: 40px var(--pad-inline) 0; }
.pad-t60-20  { padding: 60px var(--pad-inline) 0; }
.pad-t80-20  { padding: 80px var(--pad-inline) 0; }

/* =========================================================
   Visibility helpers
   ========================================================= */

.hide-mobile { display: revert; }
.show-mobile { display: none; }

/* =========================================================
   Mobile normalization
   ========================================================= */

@media (max-width: 768px) {

  /* Block x Inline → 40-20 */
  .pad-20-20,
  .pad-40-20,
  .pad-60-20,
  .pad-80-20,
  .pad-100-20,
  .pad-120-20,
  .pad-140-20,
  .pad-160-20,
  .pad-180-20 {
    padding: var(--pad-mobile-block) var(--pad-inline);
  }

  /* Bottom-only → 40-20 */
  .pad-40b-20,
  .pad-60b-20,
  .pad-80b-20,
  .pad-100b-20 {
    padding: 0 var(--pad-inline) var(--pad-mobile-block);
  }

  /* Top-only → 40-20 */
  .pad-t40-20,
  .pad-t60-20,
  .pad-t80-20 {
    padding: var(--pad-mobile-block) var(--pad-inline) 0;
  }

  .hide-mobile { display: none !important; }
  .show-mobile { display: block !important; }

  br { display: none; }
}