/*
Theme Name: Shalanda Hunt
Theme URI:
Author:
Author URI:
Description: A custom theme for Hunt for Mayor.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shalandahunt
Tags:

 * Responsive Stylesheet for WordPress
 * Breakpoints optimized for Desktop, Tablet, and Mobile
 * Compatible with WordPress 6.x (Block Editor / Classic)
 *
 * Breakpoints:
 *   Mobile       : < 600px
 *   Mobile-L     : 600px – 767px
 *   Tablet       : 768px – 1024px
 *   Tablet-L     : 1025px – 1199px
 *   Desktop      : 1200px – 1440px
 *   Desktop-L    : > 1440px
 */

/* ============================================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================================ */
:root {
  /* Spacing scale */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */

  /* Typography scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-md:    1.125rem;  /* 18px */
  --text-lg:    1.25rem;   /* 20px */
  --text-xl:    1.5rem;    /* 24px */
  --text-2xl:   2rem;      /* 32px */
  --text-3xl:   2.5rem;    /* 40px */
  --text-4xl:   3rem;      /* 48px */

  /* Container widths */
  --container-sm:   540px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-2xl:  1440px;

  /* Layout */
  --content-padding:  var(--space-xl);
  --sidebar-width:    300px;
  --nav-height:       70px;

  /* Grid */
  --grid-cols:    12;
  --grid-gap:     var(--space-lg);

  /* Colors */
  --color-blue: #11374f;
  --color-red: #ae4031;
  --color-yellow: #e7c339;
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: var(--text-base);
  background-color: var(--color-blue);
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   WORDPRESS CORE ELEMENT OVERRIDES
   ============================================================ */

/* Alignments */
.alignleft  { float: left;  margin-right: var(--space-lg); margin-bottom: var(--space-md); }
.alignright { float: right; margin-left:  var(--space-lg); margin-bottom: var(--space-md); }
.aligncenter {
  display: block;
  margin-left:  auto;
  margin-right: auto;
  margin-bottom: var(--space-md);
}
.alignfull  { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }
.alignwide  { width: calc(100% + var(--space-2xl)); margin-left: calc(var(--space-2xl) / -2); }

/* WordPress captions */
.wp-caption {
  max-width: 100%;
}
.wp-caption-text {
  font-size: var(--text-sm);
  margin-top: var(--space-xs);
}

/* Screen-reader text */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}

/* Sticky post */
.sticky {
  display: block;
}

/* Galleries */
.gallery {
  display: grid;
  gap: var(--space-sm);
}

.gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   LAYOUT CONTAINERS
   ============================================================ */
.container,
.wp-site-blocks > *,
.wp-block-group {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--content-padding);
  padding-right: var(--content-padding);
}

.container--narrow { max-width: var(--container-md); }
.container--wide   { max-width: var(--container-2xl); }
.container--full   { max-width: 100%; }

/* ============================================================
   GRID SYSTEM
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--grid-gap);
}

/* Column spans — desktop default */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header,
#masthead {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

.nav-menu {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-md);
  align-items: center;
}

.nav-menu li {
  list-style-type: none;
  display: inline-flex;
}

.nav-menu li a {
  display: block;
  text-decoration: none;
  color: #fff;
}

/* Mobile nav toggle — hidden on desktop */
.menu-toggle {
  display: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-sm);
}

/* ============================================================
   SIDEBAR & CONTENT LAYOUT
   ============================================================ */
.content-sidebar-wrap,
.site-main-wrap {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: var(--space-xl);
  align-items: start;
}

.full-width-content .content-sidebar-wrap {
  grid-template-columns: 1fr;
}

/* ============================================================
   WORDPRESS BLOCK EDITOR (GUTENBERG) OVERRIDES
   ============================================================ */
.wp-block {
  max-width: 100%;
}

/* Cover block */
.wp-block-cover {
  min-height: 400px;
}

/* Columns block */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.wp-block-column {
  flex: 1 1 0%;
  min-width: 0;
}

/* Group block */
.wp-block-group__inner-container {
  max-width: var(--container-xl);
  margin: 0 auto;
}

/* ============================================================
   TYPOGRAPHY — DESKTOP DEFAULT
   ============================================================ */
h1, .h1 { font-size: var(--text-4xl); line-height: 1.15; }
h2, .h2 { font-size: var(--text-3xl); line-height: 1.2; }
h3, .h3 { font-size: var(--text-2xl); line-height: 1.25; }
h4, .h4 { font-size: var(--text-xl);  line-height: 1.3; }
h5, .h5 { font-size: var(--text-lg);  line-height: 1.4; }
h6, .h6 { font-size: var(--text-md);  line-height: 1.5; }

p { font-size: var(--text-base); }

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* ------------------------------------------------------------
   LARGE DESKTOP  —  min-width: 1441px
   ------------------------------------------------------------ */
@media screen and (min-width: 1441px) {
  :root {
    --content-padding: var(--space-3xl);
    --grid-gap: var(--space-xl);
  }

  body {
    background-image: url('assets/images/back_new.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-color: var(--color-blue);
  }

  .container,
  .wp-site-blocks > * {
    max-width: var(--container-2xl);
  }

  h1, .h1 { font-size: 3.5rem; }
  h2, .h2 { font-size: 2.75rem; }

  .wp-block-cover {
    min-height: 550px;
  }
  .wrapper {
      margin: 0 auto;
      width: 100vw;
  }

  main {
    width: 60vw;
    padding: 20px;
    background-color: #fff;
    margin: 0 auto;
  }

  .header {
    width: 60vw;
    margin: 0 auto;
  }
}

/* ------------------------------------------------------------
   DESKTOP  —  1200px – 1440px  (default styles above apply)
   ------------------------------------------------------------ */
/* This range uses the root/default values defined above. */

/* ------------------------------------------------------------
   TABLET LANDSCAPE  —  1025px – 1199px
   ------------------------------------------------------------ */
@media screen and (max-width: 1199px) {
  :root {
    --content-padding: var(--space-xl);
    --sidebar-width:   260px;
    --nav-height:      64px;
  }

  body {
    background-image: url('assets/images/back_new.png');
    background-repeat: no-repeat;
    background-size: cover;
  }

  .container,
  .wp-site-blocks > * {
    max-width: var(--container-lg);
  }

  h1, .h1 { font-size: var(--text-3xl); }
  h2, .h2 { font-size: var(--text-2xl); }

  .alignwide {
    width: calc(100% + var(--space-xl));
    margin-left: calc(var(--space-xl) / -2);
  }

  main {
    width: 60vw;
    padding: 20px;
    background-color: #fff;
    margin: 0 auto; 
  }
  .header {
    width: 60vw;
    margin: 0 auto;
  }

}

/* ------------------------------------------------------------
   TABLET  —  768px – 1024px
   ------------------------------------------------------------ */
@media screen and (max-width: 1024px) {
  :root {
    --content-padding: var(--space-lg);
    --sidebar-width:   240px;
    --grid-gap:        var(--space-md);
  }

  /* Stack sidebar below content */
  .content-sidebar-wrap,
  .site-main-wrap {
    grid-template-columns: 1fr;
  }

  /* Gutenberg columns: allow wrapping */
  .wp-block-columns {
    flex-wrap: wrap;
  }

  .wp-block-column {
    flex-basis: calc(50% - var(--space-md));
  }

  /* Galleries: reduce columns */
  .gallery-columns-5,
  .gallery-columns-6 { grid-template-columns: repeat(4, 1fr); }

  /* Grid cols adjustments */
  .col-1, .col-2, .col-3 { grid-column: span 4; }
  .col-4, .col-5, .col-6 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 8; }
  .col-10, .col-11       { grid-column: span 10; }

  /* alignwide becomes full on tablet */
  .alignwide {
    width: 100%;
    margin-left: 0;
  }

  h1, .h1 { font-size: var(--text-2xl); }
  h2, .h2 { font-size: var(--text-xl); }
  h3, .h3 { font-size: var(--text-lg); }
}

/* ------------------------------------------------------------
   MOBILE LANDSCAPE  —  600px – 767px
   ------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  :root {
    --content-padding: var(--space-md);
    --grid-gap:        var(--space-md);
    --nav-height:      56px;
  }

  body {
    background-image: url('assets/images/back_new.png');
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* Show hamburger, hide desktop nav */
  .menu-toggle {
    display: block;
  }

  .nav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
  }

  .nav-menu.is-open {
    display: flex;
  }

  /* Float alignments become full-width */
  .alignleft,
  .alignright {
    float: none;
    margin-left: 0;
    margin-right: 0;
    display: block;
    width: 100%;
  }

  /* Gutenberg columns stack */
  .wp-block-column {
    flex-basis: 100%;
  }

  /* Gallery: max 2 cols */
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6 { grid-template-columns: repeat(2, 1fr); }

  /* Grid: most cols become full */
  .col-1, .col-2, .col-3,
  .col-4, .col-5, .col-6 { grid-column: span 6; }
  .col-7, .col-8, .col-9,
  .col-10, .col-11, .col-12 { grid-column: span 12; }

  /* Cover block */
  .wp-block-cover {
    min-height: 280px;
  }

  h1, .h1 { font-size: var(--text-xl); }
  h2, .h2 { font-size: var(--text-lg); }
  h3, .h3 { font-size: var(--text-md); }
  h4, .h4 { font-size: var(--text-base); }

  /* Tables: allow horizontal scroll */
  .wp-block-table,
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------
   MOBILE  —  < 600px
   ------------------------------------------------------------ */
@media screen and (max-width: 599px) {
  :root {
    --content-padding: var(--space-md);
    --grid-gap:        var(--space-sm);
  }

  body {
    background-image: url('assets/images/back_new.png');
    background-repeat: no-repeat;
    background-size: contain;
  }

  /* All grid columns become full-width */
  .col-1, .col-2, .col-3, .col-4,
  .col-5, .col-6, .col-7, .col-8,
  .col-9, .col-10, .col-11, .col-12 {
    grid-column: span 12;
  }

  /* Galleries: single column */
  .gallery-columns-2,
  .gallery-columns-3,
  .gallery-columns-4,
  .gallery-columns-5,
  .gallery-columns-6 { grid-template-columns: repeat(1, 1fr); }

  /* Full-width embeds */
  .wp-block-embed__wrapper iframe {
    width: 100% !important;
  }

  /* Cover block min height */
  .wp-block-cover {
    min-height: 220px;
  }

  /* Alignments: strip everything */
  .alignfull {
    margin-left: calc(var(--content-padding) * -1);
    margin-right: calc(var(--content-padding) * -1);
    width: calc(100% + var(--content-padding) * 2);
  }

  h1, .h1 { font-size: var(--text-lg); }
  h2, .h2 { font-size: var(--text-md); }
  h3, .h3 { font-size: var(--text-base); }
}

/* ============================================================
   UTILITY — RESPONSIVE VISIBILITY HELPERS
   ============================================================ */
.hide-mobile  { display: block; }
.show-mobile  { display: none;  }
.hide-tablet  { display: block; }
.hide-desktop { display: none;  }

@media screen and (max-width: 1024px) {
  .hide-tablet  { display: none;  }
  .show-tablet  { display: block; }
}

@media screen and (max-width: 767px) {
  .hide-mobile  { display: none;  }
  .show-mobile  { display: block; }
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .site-header,
  .site-footer,
  .widget-area,
  .nav-menu,
  .menu-toggle,
  .wp-block-buttons {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  .container {
    max-width: 100%;
    padding: 0;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }
}