/*!
 Theme Name: gripp
 Theme URI: http://underscores.me/
 Author: Underscores.me
 Description: GRIPP custom theme styles
 Version: 1.0.0
 Text Domain: gripp
*/

/*--------------------------------------------------------------
1. Generic
  1.1 Box Sizing
--------------------------------------------------------------*/
*, *::before, *::after {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
2. Base
  2.1 Typography
  2.2 Elements
  2.3 Links
--------------------------------------------------------------*/
:root {
  /* Typography */
  --font-heading: 'Erika One', cursive;
  --font-body: 'Inter', sans-serif;

  /* Colors */
  --color-black: #1E1B29;
  --color-white: #FFFFFF;
  --color-accent: #e62700;

  /* Grid & Spacing */
  --grid-gap: 1rem;
  --max-width: 75rem;

  /* Padding presets */
  --pad-2: 2em;
  --pad-4: 4em;
  --pad-6: 6em;
  --pad-10: 10em;

  /* Breakpoints */
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1440px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  line-height: 1.2;
}

p {
  margin-bottom: 1.5em;
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-black);
}

/*--------------------------------------------------------------
3. Layouts
  3.1 Container
  3.2 Grid
--------------------------------------------------------------*/
.container {
  max-width: var(--max-width);
  margin: var(--container-padding-lr) auto;
  padding: 0 var(--container-padding-tb);
}
.container.full {
  width: 100%;
  max-width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gap);
}

/*--------------------------------------------------------------
4. Components
  4.1 Buttons
  4.2 Hero
--------------------------------------------------------------*/
.btn {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 0.25rem;
  font-family: var(--font-heading);
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn:hover {
  background: var(--color-black);
}

.hero-section {
  position: relative;
  background-size: cover;
  background-position: center;
}
.hero-content {
  padding: var(--pad-4);
}
.hero-align-left { justify-self: start; }
.hero-align-right { justify-self: end; }

/*--------------------------------------------------------------
5. Utilities
  5.1 Section Padding
  5.2 Full Height
  5.3 Grid Spans
--------------------------------------------------------------*/
.section-pad-2 { padding-block: var(--pad-2); }
.section-pad-4 { padding-block: var(--pad-4); }
.section-pad-6 { padding-block: var(--pad-6); }
.section-pad-10 { padding-block: var(--pad-10); }

.full-height {
  height: 100dvh;
}

.col-span-1 { grid-column: span 1 / span 1; }
.col-span-2 { grid-column: span 2 / span 2; }
.col-span-3 { grid-column: span 3 / span 3; }
.col-span-4 { grid-column: span 4 / span 4; }
.col-span-5 { grid-column: span 5 / span 5; }
.col-span-6 { grid-column: span 6 / span 6; }
.col-span-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }