/*
Theme Name: Two Buck Trucks Theme
Theme URI: https://example.com/tbt-theme
Author: Two Buck Trucks
Author URI: https://example.com
Description: Tema personalizado para Two Buck Trucks, un estacionamiento para trailers y camiones. Este tema utiliza los colores corporativos (amarillo #F7E020, gris oscuro #58575F, negro #000000 y blanco #FFFFFF) y la tipografía Raleway para ofrecer una apariencia moderna y robusta. Incluye plantillas para las páginas de inicio, servicios, registro y contacto.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: custom, responsive, negocio, estacionamiento
Text Domain: tbt-theme
*/

/* Importación de la fuente Raleway desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

/* Variables de color para facilitar cambios futuros */
:root {
  --tbt-yellow: #F7E020;
  --tbt-gray: #58575F;
  --tbt-black: #000000;
  --tbt-white: #FFFFFF;
}

/*
 * Set up the base styles for the entire site.  In addition to the font and colors,
 * the body element now uses the supplied LogoBackground as a subtle backdrop.
 * The image is large, centered and fixed so that it stays put while the
 * page scrolls.  A fallback background color ensures readability if the
 * image fails to load.  The opacity effect for the background is achieved
 * through the graphic itself; if a different level of transparency is
 * desired, adjust the source image accordingly.
 */
body {
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
  color: var(--tbt-gray);
  background-color: var(--tbt-white);
  line-height: 1.6;
  /* Use the diffused background image for all pages */
  background-image: url('assets/img/LogoBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

a {
  color: var(--tbt-yellow);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

header {
  background-color: var(--tbt-black);
  color: var(--tbt-white);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-logo img {
  max-height: 60px;
}

nav.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

nav.primary-nav ul li {
  margin: 0;
}

nav.primary-nav ul li a {
  color: var(--tbt-white);
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: background-color 0.3s ease;
}

nav.primary-nav ul li a:hover {
  background-color: var(--tbt-yellow);
  color: var(--tbt-black);
  border-radius: 4px;
}

/* Estilos generales de secciones */
.section {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.hero {
  background-color: var(--tbt-yellow);
  color: var(--tbt-black);
  padding: 4rem 2rem;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.button-primary {
  background-color: var(--tbt-black);
  color: var(--tbt-white);
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
  display: inline-block;
}

.button-primary:hover {
  background-color: var(--tbt-gray);
}

/* Tarjetas de servicios */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

.service-card {
  background-color: var(--tbt-white);
  border: 2px solid var(--tbt-gray);
  border-radius: 6px;
  padding: 1.5rem;
  text-align: center;
}

.service-card h3 {
  margin-top: 0;
  color: var(--tbt-black);
}

.service-card .price {
  font-size: 2rem;
  color: var(--tbt-yellow);
  margin: 0.5rem 0;
}

.service-card p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: var(--tbt-gray);
}

/* Formulario de registro */
.registration-form {
  max-width: 600px;
  margin: 0 auto;
  background-color: var(--tbt-white);
  border: 2px solid var(--tbt-gray);
  border-radius: 6px;
  padding: 2rem;
}

.registration-form label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.registration-form input,
.registration-form select,
.registration-form textarea {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--tbt-gray);
  border-radius: 4px;
}

.registration-form button {
  display: block;
  width: 100%;
  padding: 0.75rem;
  background-color: var(--tbt-yellow);
  color: var(--tbt-black);
  border: none;
  border-radius: 4px;
  font-weight: 700;
  cursor: pointer;
}

.registration-form button:hover {
  background-color: var(--tbt-gray);
  color: var(--tbt-white);
}

/* Estilos para la página de contacto */
.contact-info {
  max-width: 600px;
  margin: 0 auto;
  border: 2px solid var(--tbt-gray);
  border-radius: 6px;
  padding: 2rem;
  background-color: var(--tbt-white);
}

.contact-info h3 {
  margin-top: 0;
  color: var(--tbt-black);
}

.contact-info p {
  margin: 0.5rem 0;
}

.social-links a {
  margin-right: 1rem;
  font-weight: 700;
}

footer {
  background-color: var(--tbt-black);
  color: var(--tbt-white);
  text-align: center;
  padding: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2rem;
  }
  .hero p {
    font-size: 1rem;
  }
}

/* ======================================================
 * Custom layouts for the updated theme pages
 *
 * These styles implement the structures drawn by the client for
 * the home, services and location pages.  Each section uses
 * responsive flex or grid layouts to remain readable on small
 * screens.
 * ====================================================== */

/* Home page hero section with content and optional media */
.hero-home {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 4rem 2rem;
  background-color: var(--tbt-yellow);
  color: var(--tbt-black);
  border-radius: 6px;
  margin-bottom: 2rem;
}

.hero-home-content {
  flex: 1 1 300px;
  padding-right: 1rem;
}

.hero-home-content h1 {
  font-size: 2.75rem;
  margin: 0 0 1rem;
  color: var(--tbt-black);
}

.hero-home-content p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: var(--tbt-black);
}

.hero-home-media {
  flex: 1 1 300px;
  text-align: center;
}

.hero-home-media img,
.hero-home-media video {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Features section on home page */
.features-section {
  padding: 3rem 1rem;
}

.features {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.feature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
}

/* Alternate direction for every even feature to create a zig-zag effect */
.feature:nth-child(even) {
  flex-direction: row-reverse;
}

.feature img {
  flex: 1 1 300px;
  max-width: 400px;
  width: 100%;
  border-radius: 8px;
}

.feature-content {
  flex: 1 1 300px;
}

.feature-content h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--tbt-yellow);
  font-size: 1.75rem;
}

.feature-content p {
  margin: 0;
  color: var(--tbt-gray);
}

/* Services page: site map grid */
.site-map {
  padding: 3rem 1rem;
  text-align: center;
}

.site-map h2 {
  margin-bottom: 1.5rem;
  color: var(--tbt-black);
}

.site-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 0.5rem;
  max-width: 600px;
  margin: 0 auto;
}

.site-map-grid div {
  background-color: var(--tbt-white);
  color: var(--tbt-black);
  border: 1px solid var(--tbt-gray);
  padding: 0.5rem;
  border-radius: 4px;
}

/* Location page styles */
.location-section {
  padding: 3rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}

.location-section h1 {
  color: var(--tbt-black);
  margin-bottom: 1rem;
}

.location-section p.address {
  font-weight: 600;
  color: var(--tbt-black);
  margin-bottom: 2rem;
}

.location-map {
  width: 100%;
  height: 400px;
  border: 0;
  margin-bottom: 2rem;
}

.routes-container {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

.route {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.route img {
  width: 100%;
  max-width: 400px;
  height: auto;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.route p {
  color: var(--tbt-gray);
}

/* Responsive adjustments for new components */
@media (max-width: 768px) {
  .hero-home {
    flex-direction: column;
    text-align: center;
  }
  .hero-home-content {
    padding-right: 0;
  }
  .hero-home-content h1 {
    font-size: 2rem;
  }
  .hero-home-content p {
    font-size: 1rem;
  }
  .features {
    gap: 1.5rem;
  }
  .feature {
    flex-direction: column;
    text-align: center;
  }
  .feature:nth-child(even) {
    flex-direction: column;
  }
}