@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&family=Comic+Neue:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap');
/*- === -*/
/*- All Pages -*/
/* ================GOOGLE FONTS================ */
	/*- VARIABLES -*/
:root{
  --color-hero-black: #0C0C0C;
  --color-hero-red: #E0102B;
  --color-hero-orange: #FF6B00;
  --color-hero-yellow: #FFD400;
  --color-hero-green: #00B869;
  --color-hero-blue: #003366;
  --color-hero-indigo: #4B0082;
  --color-hero-violet: #8A2BE2;
	--color-ink-black:#0b0b0b;
	--color-paper-white:#fef9c3;;
	--shadow-3d: 0 6px 0 #000;
}

	/*- GLOBAL -*/
body {	
  background-color: var(--color-hero-white);
  color: var(--color-hero-black);
  margin: 0;
  padding: 0;
}

/*- FONTS -*/
body, p, li {
  font-family: 'Comic Neue', sans-serif;
  font-weight: 400;
  line-height: 1.6;
}
h1, h2, .nav-brand, .comic-title {
  font-family: 'Bangers', cursive;
  letter-spacing: 1px;
  text-transform: uppercase;
}
h3, h4, .tagline {
  font-family: 'Luckiest Guy', cursive;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
nav a, button, label, input {
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/*- HEADER - MAIN - FOOTER -*/
header {
	position: sticky;
}
main{
	
}
footer {
	position: sticky;
		margin-top: 2rem; 
		padding: 1rem; 
		border-top: 4px solid var(--color-hero-black); 
		background: var(--color-paper-yellow);
		color: var(--color-ink);
		text-align: center; 
		font-weight: 700; 	
}

/* Base container: centers content and adds responsive side padding */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(12px, 2.5vw, 24px);
  padding-right: clamp(12px, 2.5vw, 24px);
  /* Sensible default max width for readable lines */
  max-width: 72rem; /* 1152px */
}

/* Size variants */
.container--narrow { max-width: 48rem; }  /* ~768px, great for text-heavy blocks */
.container--wide   { max-width: 90rem; }  /* 1440px, hero bands & galleries */
.container--fluid  { max-width: none; }   /* full-bleed but keeps side padding */

/* Optional: gutter utilities for tighter/looser sections */
.container--gutters-xs { padding-left: 8px;  padding-right: 8px; }
.container--gutters-sm { padding-left: 12px; padding-right: 12px; }
.container--gutters-lg { padding-left: 32px; padding-right: 32px; }
.container--gutters-xl { padding-left: 48px; padding-right: 48px; }

/* Breakpoints: gently expand max-widths on big screens */
@media (min-width: 1280px) {
  .container { max-width: 80rem; } /* 1280px */
  .container--wide { max-width: 96rem; } /* 1536px */
}
/* =====================================================
   THE HANDY MANTHONY — COMIC HERO THEME
   SECTIONS
   ===================================================== */
/* Full-bleed section helper: color bands edge-to-edge with centered content */
.section {
  position: relative;
  width: 100vw;                 /* stretch to viewport width */
  left: 50%;
  right: 50%;
  margin-left: -50vw;           /* cancel parent centering */
  margin-right: -50vw;
  padding-block: clamp(2rem, 6vw, 5rem);
	  overflow: clip; /* contain edges/FX */
}

/* Maintain comic color bands */
/*- HERO -*/
.section--hero{ 
	background: radial-gradient(circle at 40% 40%, var(--color-hero-red) 0 45%, var(--color-hero-yellow) 46% 100%);    
	color: var(--color-paper-white);
	border-bottom: 1px solid var(--color-hero-black); 	
}
	.hero-grid { 
		display: grid; 
		grid-template-columns: 1fr 1.2fr; 
		align-items: center;
		gap: 1.5rem; }	@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
	.hero-figure {
		justify-self: center; 
		width: 50%; 
		height: auto; 
		transform: rotate(-3deg); 
		filter: drop-shadow(12px 12px 0 var(--color-hero-black)); }
	/*- CARDS  -*/
	.hero-card{
		position: relative;
		background: var(--color-paper-white);
		color:	var(--color-ink-black);
		border: 4px solid var(--color-hero-black);
		box-shadow: 6px 6px 0 var(--color-hero-black);
		border-radius: 20px;
		padding: 1rem 1.5rem;
	}
	/* BUTTONS same as NAV*/

.section--white    { 
	background: var(--color-hero-white);    
	color: var(--color-hero-black); }
.section--red    { background: var(--color-hero-red);    color: var(--color-paper-white); }
.section--orange    { background: var(--color-ink-orange);   color: var(--color-paper-black); }
.section--yellow { background: var(--color-hero-yellow); color: var(--color-ink-black); }
.section--green    { background: var(--color-ink-green);   color: var(--color-paper-white); }
.section--blue   { background: var(--color-midnight-blue); color: var(--color-paper-white); }
.section--indigo    { background: var(--color-ink-indigo);   color: var(--color-paper-white); }
.section--violet    { background: var(--color-ink-violet);   color: var(--color-paper-white); }
.section--black    { 
	background: var(--color-ink-black);   
	color: var(--color-paper-white); 
}




/*- HEADER -*/
/* =====================================================
   THE HANDY MANTHONY — COMIC HERO THEME
   HOME PAGE HEADER
   ===================================================== 
	header.hero, div.hero{
		display: grid; 
		
		background: radial-gradient(circle at 40% 40%, var(--color-hero-red) 0 45%, var(--color-hero-yellow) 46% 100%);
		border-bottom: 1px solid var(--color-hero-black); 
		position: relative;
	} */
	

/* HALFTONE BACKGROUND */
.halftone::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--color-hero-black) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.15;
  z-index: 0;
}
	.card { 
		background: var(--color-paper-white); 
		border: 4px solid var(--color-hero-black); 
		box-shadow: 8px 8px 0 var(--color-hero-black);
		border-radius: 20px; padding: 1rem 1.25rem; }
	.grid-3 { 
		display: grid; 
		grid-template-columns: repeat(3, 1fr); 
		gap: 1rem; 
}	@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }






/* SIMPLE FADE-IN ANIMATION */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease-out forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*- CONTACT -*/
/*- === -*/
/*- === -*/
/*- === -*/
/*- === -*/
/*- === -*/
/*- NAVIGATION -*/
/* =====================================================
   THE HANDY MANTHONY — COMIC HERO THEME
   MAIN MENU - NAVIGATION
   ===================================================== */
    .comic-nav {
      position: sticky; 
		top: 0; 
		z-index: 100;
      background: linear-gradient(180deg, var(--color-hero-red) 0%, #8B0000 100%);
      border-bottom: 2px solid var(--color-hero-black);
      /* box-shadow: 0 8px 0 rgba(0,0,0,0.25); */
    }
    .nav-wrap {
      max-width: 1200px; 
		margin: 0 auto; 
		padding: .5rem 1rem;
      display: flex; 
		align-items: center; 
		justify-content: space-between; 
		gap: 1rem;
    }
    .brand {
      display: flex; 
		align-items: center; 
		gap: .6rem; 
		text-decoration: none;
    }
    .brand-star {
      width: 48px; 
		height: 48px; 
		border-radius: 50%;
      background: url("/images/handyman-star.png") center/cover no-repeat;
      border: 3px solid var(--color-hero-black); 
		box-shadow: var(--shadow-3d); 
		transform: rotate(-6deg);
    }
    .brand-title {
      font-family: 'Bangers', cursive; 
		font-size: 1.9rem; 
		color: var(--color-hero-yellow);
      -webkit-text-stroke: 1.5px var(--color-hero-black); 
		text-shadow: 3px 3px 0 var(--color-hero-black);
      letter-spacing: .5px; 
		line-height: 1; 
		white-space: nowrap;
    }
    .menu {
      display: flex; 
		align-items: center; 
		gap: .3rem; 
		list-style: none; 
		padding: 0; 
		margin: 0;
    }
    .menu a, .btn-red-yellow {
      display: inline-block; 
		font-family: 'Bangers', cursive; 
		font-size: 1.1rem; 
		letter-spacing: .5px; 
		text-decoration: none;
      color: var(--color-hero-black); 
		padding: .6rem 1rem; 
		border: 3px solid var(--color-hero-black); 
		background: var(--color-hero-red);
      box-shadow: var(--shadow-3d); 
		transform: skewX(-6deg); 
		transition: all .15s ease;
    }
    .menu a:hover, .menu a:focus-visible , .btn-red-yellow:hover{
      background: var(--color-hero-yellow); 
		color: var(--color-hero-black); 
		transform: translateY(-2px) skewX(-6deg);
      box-shadow: 0 10px 0 var(--color-hero-black);
    }
    .menu a.is-active { 
		background: var(--color-hero-yellow); 
		color: var(--color-hero-black); }
    .menu a.cta { 
		background: var(--color-hero-yellow); 
		color: var(--color-hero-red); }
    .menu a.cta:hover { background: #FFF37A; }
    .hamburger {
      display: none; 
		background: var(--color-hero-yellow); 
		border: 3px solid var(--color-hero-white);
      box-shadow: var(--shadow-3d); 
		padding: .4rem .6rem; 
		font-family: 'Bangers', cursive; 
		font-size: 1rem; transform: skewX(-6deg);
    }
    @media (max-width: 980px) {
      .menu { display: none; position: absolute; left: 0; right: 0; top: 70px; flex-direction: column;
               background: var(--color-hero-red); border-bottom: 4px solid var(--color-hero-white); padding: .75rem; }
      .menu.show { display: flex; } .menu li { width: 100%; } .menu a { display: block; width: 100%; text-align: center; }
      .hamburger { display: inline-block; } .nav-wrap { align-items: center; }
    }
    .menu a:focus-visible, .hamburger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--color-hero-yellow), var(--shadow-3d); }
/*- === -*/
/*- === -*/
/*- === -*/
/*- === -*/

/*- === -*/
/*- === -*/