/*
Theme Name: Bechlo
Theme URI: https://bechlo.store/
Author: Muhammad Qasim
Author URI: https://bechlo.store/
Description: Bechlo is a modern, lightweight, and customizable WordPress theme built for eCommerce and business websites.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bechlo
Tags: custom-background, custom-logo, custom-menu, e-commerce, featured-images, full-width-template, theme-options, translation-ready
*/

/* ------------------------------
   CSS Variables (Design System)
------------------------------- */
:root {
  /* Brand Colors */
  --color-primary: #009688;   /* Teal Primary */
  --color-primary-dark: #00796B; /* Teal Dark */
  --color-accent: #FFC107;   /* Yellow Accent */
  --color-white: #FFFFFF;

  /* Neutral Colors */
  --color-text-dark: #333333;   /* Primary text */
  --color-text-medium: #666666; /* Secondary text */
  --color-text-light: #999999;  /* Muted text */
  --color-border: #e0e0e0;      /* Borders */
  --color-bg: #f5f5f5;          /* Surfaces */

  /* Typography */
  --font-family: 'Inter', sans-serif;

  --display-heading: 700 40px/1.2 var(--font-family);
  --main-heading: 600 32px/1.3 var(--font-family);
  --sub-heading: 500 24px/1.3 var(--font-family);
  --small-heading: 500 20px/1.4 var(--font-family);

  --body-large: 400 18px/1.6 var(--font-family);
  --body-regular: 400 16px/1.6 var(--font-family);
  --body-small: 400 14px/1.6 var(--font-family);
}




/* ------------------------------
   Reset & Base Styles
------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: var(--body-regular);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  overflow-x: hidden !important;
}

/* ------------------------------
   Typography
------------------------------- */
h1 {
  font: var(--display-heading);
  color: var(--color-text-dark);
}

h2 {
  font: var(--main-heading);
  color: var(--color-text-dark);
}

h3 {
  font: var(--sub-heading);
  color: var(--color-text-dark);
}

h4 {
  font: var(--small-heading);
  color: var(--color-text-dark);
}

p {
  font: var(--body-regular);
  /* margin-bottom: 15px; */
  color: var(--color-text-medium);
}

.small-text {
  font: var(--body-small);
  color: var(--color-text-light);
}

.text-center {
  text-align: center;
}

/* ------------------------------
   Links & Buttons
------------------------------- */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary-dark);
}

button,
.btn, input[type="submit"] {
  background: var(--color-primary);
  color: var(--color-white);
  font: var(--body-regular);
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover,
.btn:hover {
  background: var(--color-primary-dark);
}

.btn-yellow, input[type="submit"] {
    background: var(--color-accent);
}
.btn-yellow:hover, input[type="submit"]:hover {
    color: var(--color-white) ;
    background: var(--color-accent);
    filter: brightness(98%); 
}

.btn-border {
    background: var(--color-white);
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-border:hover {
    background: var(--color-primary);
    color: var(--color-white);
}



/* ------------------------------
   Layout Utilities
------------------------------- */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}



/* ------------------------------
   Navigation
------------------------------- */
nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

nav ul li a {
  color: var(--color-text-dark);
  font: var(--body-regular);
  font-weight: 500;
}

nav ul li a:hover {
  color: var(--color-primary);
}

/* ------------------------------
   Form Elements (Inputs & Search)
------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font: var(--body-regular);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-light);
  font: var(--body-small);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 150, 136, 0.15); 
}


/* ------------------------------
   Pagination
------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  margin: 30px 0;
  gap: 10px;
}

.pagination a,
.pagination span {
  padding: 8px 15px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  text-decoration: none;
  color: var(--color-text-dark);
  transition: all 0.3s ease;
}

.pagination a:hover {
  background: var(--color-primary);
  color: #fff;
}

.pagination .current {
  background: var(--color-primary);
  color: #fff;
  font-weight: bold;
}


/* ------------------------------
   Footer
------------------------------- */
footer {
  background: var(--color-bg);
  text-align: center;
  padding: 20px;
  border-top: 1px solid var(--color-border);
  font: var(--body-small);
  color: var(--color-text-medium);
}