/*!
Theme Name: dieselindex
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: dieselindex
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

dieselindex is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* ═══════════════════════════════════════════════════
    RESET & TOKENS
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black:      #000000;
  --ink:        #1a1714;
  --pearlwhite: #ffffff;
  --white:      #f9f8f6;
  --pure:       #ffffff;
  --red:        #ed2024;
  --red-l:      #ff4040;
  --blue:       #005bbb;
  --blue-l:     #2277d4;
  --yellow:     #f0c200;
  --g100:       #f9f8f6;
  --g200:       #f2f4f7;
  --g300:       #ccc7bb;
  --g500:       #8a857a;
  --g700:       #3e3a34;
  --g900:       #1a1714;
  --border:     #b8b9b9;
  --FD:        'Archivo Narrow', sans-serif;
  --FB:        'Lato', sans-serif;
  --r:         10px;
  --max:        1280px;
  --art:        720px;
	
}
html { scroll-behavior: smooth; }
body { background: var(--white); color: var(--black); font-family: var(--FB); font-size: 16px; line-height: 1.65; overflow-x: hidden; }

/* ═══════════════════════════════════════════════════
    HEADER
═══════════════════════════════════════════════════ */
header {
  background: var(--white);
  position: sticky; top: 0; z-index: 200;
  border-bottom: 3px solid var(--red);
}
.header-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 0px;
  display: flex; align-items: center; justify-content: space-between; height: 62px;
  position: relative; /* Added to anchor the mobile dropdown */
}
.logo { display: flex; align-items: baseline; text-decoration: none; }
.logo-d { font-family: var(--FD); font-weight: 900; font-size: 27px; letter-spacing: -0.5px; color: var(--black); }
.logo-i { font-family: var(--FD); font-weight: 900; font-size: 27px; letter-spacing: -0.5px; color: var(--red); }
.logo-t { font-family: var(--FD); font-weight: 600; font-size: 17px; color: var(--g500); }
nav { display: flex; align-items: center; gap: 28px; }
nav a { font-family: var(--FD); font-weight: 600; font-size: 14px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--g300); text-decoration: none; transition: color .2s; }
nav a:hover { color: var(--white); }
.nav-cta { background: var(--red) !important; color: var(--white) !important; padding: 7px 16px; border-radius: 4px; }
.nav-cta:hover { background: var(--red-l) !important; }

/* Hide mobile elements by default on desktop */
.menu-toggle, .hamburger { display: none; }

/* ═══════════════════════════════════════════════════
    BIGGER FOOTER
═══════════════════════════════════════════════════ */
footer { background: var(--g900); padding: 0; }
.footer-top { max-width: 1280px; margin: 0 auto; padding: 56px 0 40px; display: grid; grid-template-columns: 260px 1fr; gap: 64px; border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-brand-logo { font-family: var(--FD); font-weight: 900; font-size: 28px; text-decoration: none; display: inline-block; margin-bottom: 12px; }
.footer-brand-logo span:first-child { color: var(--g300); }
.footer-brand-logo span:nth-child(2) { color: var(--red); }
.footer-brand-logo span:last-child   { color: var(--g700); font-size: 18px; }
.footer-brand-desc { font-size: 13px; line-height: 1.65; color: var(--g500); margin-bottom: 20px; }
.footer-brand-source { font-size: 11px; color: var(--g700); font-style: italic; line-height: 1.5; }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.footer-col-title { font-family: var(--FD); font-weight: 700; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--g500); margin-bottom: 14px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-col ul li a { font-size: 13px; font-weight: 400; color: var(--g300); text-decoration: none; transition: color .15s; display: flex; align-items: center; gap: 6px; }
.footer-col ul li a:hover { color: var(--white); }
.footer-col ul li a .ext { font-size: 10px; color: var(--g700); }
.footer-untrr-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 6px; padding: 10px 14px; font-size: 13px; color: var(--g300); margin-top: 20px; text-decoration: none; transition: background .15s; }
.footer-untrr-badge:hover { background: rgba(255,255,255,.09); color: var(--white); }
.footer-untrr-badge strong { color: var(--white); font-weight: 700; }
.footer-bottom { max-width: 1280px; margin: 0 auto; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 12px; color: var(--g700); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12px; color: var(--g500); text-decoration: none; transition: color .15s; }
.footer-legal a:hover { color: var(--g300); }

/* ═══════════════════════════════════════════════════
    RESPONSIVE
═══════════════════════════════════════════════════ */


/* --- Responsive Mobile Styles --- */
@media (max-width: 768px) {
  /* Display the hamburger icon */
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    cursor: pointer;
    z-index: 210;
  }
  .hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: var(--black);
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Transform navigation into a vertical mobile dropdown menu */
  nav {
    display: none; /* Hide menu by default on mobile */
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: 62px; /* Placed exactly below the header height */
    left: 0;
    width: 100%;
    background: var(--white);
    border-bottom: 3px solid var(--red);
    padding: 16px 24px;
    box-sizing: border-box;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }

  /* Make links full width and spaced out nicely */
  nav a {
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0; /* Soft divider between items */
    color: var(--black); /* Adjusting text color for readability on light mobile bg */
  }
  
  nav a:hover {
    color: var(--red);
  }

  /* Handle the CTA button formatting on mobile */
  .nav-cta {
    margin-top: 12px;
    text-align: center;
    border-bottom: none;
  }

  /* CSS Logic: When hidden checkbox is checked, display the nav menu */
  .menu-toggle:checked ~ nav {
    display: flex;
  }

  /* Optional: Animate hamburger into an 'X' when open */
  .menu-toggle:checked ~ .hamburger span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle:checked ~ .hamburger span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }	
	.header-inner	{
		padding: 0 24px;
	}

	.footer-top {
		padding: 56px 24px 40px;
	}
	.footer-bottom {
		padding: 20px 24px;
	}
	
	  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
	
	
	
	
	
}