/*
Theme Name: TopDzair
Description: TopDzair listing theme – mobile first & RTL
Author: Zafer Sari & GPT
Version: 41.0 (Ultra Premium Future UI – 10 Categories)
Text Domain: topdzair
*/

/*
 * This stylesheet defines global colour variables and logo overrides for the
 * TopDzair theme.  The majority of component styles are included inline
 * within the template files themselves.  Adjusting the values below will
 * propagate throughout the site thanks to the usage of CSS custom
 * properties.  Feel free to tweak these values to fine‑tune the look and
 * feel of your installation.
 */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

/* ------------------------------------------------------------------------
   Global palette
   ------------------------------------------------------------------------ */

:root {
    /* TopDzair primary palette */
    --primary: #006633;          /* main brand green */
    --primary-dark: #004d26;     /* darker shade for hovers */
    --primary-light: #e6f6eb;    /* light background tint */
    --accent: #F59E0B;           /* accent colour used in gradients */

    /* Category colours (10 sectors) */
    --color-vehicle: #EF4444;    /* vehicles */
    --color-estate:  #F59E0B;    /* real estate */
    --color-job:     #6366F1;    /* jobs */
    --color-animal:  #06B6D4;    /* animals */
    --color-shop:    #8B5CF6;    /* shopping */
    --color-service: #3B82F6;    /* services */
    --color-helper:  #EC4899;    /* helpers */
    --color-equip:   #F97316;    /* equipment */
    --color-part:    #14B8A6;    /* parts */
    --color-lesson:  #10B981;    /* lessons */
}

/* ------------------------------------------------------------------------
   Logo overrides
   ------------------------------------------------------------------------ */

/*
 * The brand-logo and brand-logo-lg selectors define small background
 * icons that accompany the TopDzair wordmark in the header.  Replace
 * the URL below with the path to your own logo if you wish to change
 * the image.  The path is relative to the theme root.
 */

.brand-logo::before,
.brand-logo-lg::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 6px;
    background-image: url('assets/images/logo-2.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* Slightly larger icon on desktop */
.brand-logo-lg::before {
    width: 22px;
    height: 22px;
}