/*
Theme Name: YonMing AATF
Theme URI: https://yonmingaatf.com
Author: YonMing AATF
Author URI: https://yonmingaatf.com
Description: A modern WordPress theme for Authorized Automotive Treatment Facilities
Version: 4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yonming-aatf
*/

/*
 ============================================================
 style.css — Theme stylesheet

 LOAD ORDER:
   1. assets/css/tailwind.css  — Tailwind utility classes (compiled)
   2. style.css (this file)    — Fonts + WordPress overrides + custom fixes

 HOW THIS FILE IS ORGANISED:
   1. Font face declarations  (local Montserrat .ttf files)
   2. General base styles     (body, links, images)
   3. Logo styles
   4. Pagination styles
   5. WordPress block styles
   6. Accessibility
   7. Print styles
   8. Responsive utilities
   9. Header & footer fixes
   10. Mobile menu
   11. Hero gradient override
 ============================================================
*/


/* ============================================================
   1. FONT FACE DECLARATIONS
   Local Montserrat font files from assets/fonts/montserrat/

   Only 6 weights loaded (the ones actually used in the theme):
     400 = Regular  — body text
     500 = Medium   — slightly heavier body
     600 = SemiBold — labels, nav items
     700 = Bold     — headings (h1–h6)
     800 = ExtraBold — hero titles
     900 = Black    — banner / display text

   To add italic: duplicate the block, change font-style to italic
   and point src to the matching *Italic.ttf file.
   ============================================================ */

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400; /* Regular — used for body paragraphs */
    font-style: normal;
    font-display: swap; /* swap = show fallback font until Montserrat loads */
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium — slightly heavier than regular */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold — navigation items, labels */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700; /* Bold — h1–h6 headings */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800; /* ExtraBold — hero section titles */
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/montserrat/Montserrat-Black.ttf') format('truetype');
    font-weight: 900; /* Black — banner / display text */
    font-style: normal;
    font-display: swap;
}


/* ============================================================
   2. GENERAL BASE STYLES
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* System font stack as fallback before Montserrat loads */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

/* Apply Montserrat to all headings and the .font-montserrat helper class */
h1, h2, h3, h4, h5, h6,
.font-montserrat {
    font-family: 'Montserrat', sans-serif;
}

a {
    color: #0626a9;         /* Brand blue — change here to update all link colours */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #041c7a;         /* Darker blue on hover — adjust to match brand */
}

img {
    max-width: 100%;
    height: auto;
}


/* ============================================================
   3. CUSTOM LOGO
   The logo image is uploaded via Appearance → Customize → Site Identity
   max-height controls how tall the logo appears in the header
   To change logo height: edit the max-height value below
   ============================================================ */

.custom-logo {
    max-height: 48px !important; /* Change this to resize the header logo */
    width: auto !important;
    border-radius: 8px !important;
    display: none !important;    /* Hidden — logo is rendered differently in header.php */
}


/* ============================================================
   4. PAGINATION
   Shown on archive pages (all-news, parts list)
   To change pagination colours: edit the #0626a9 values below
   ============================================================ */

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 2rem 0;
}

.pagination li {
    display: inline-block;
}

.pagination a,
.pagination span {
    display: block;
    padding: 0.5rem 1rem;       /* Adjust to change button size */
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    color: #0626a9;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: #0626a9;  /* Hover fill colour */
    color: #fff;
    border-color: #0626a9;
}

.pagination .current {
    background-color: #0626a9;  /* Active page fill colour */
    color: #fff;
    border-color: #0626a9;
}


/* ============================================================
   5. WORDPRESS BLOCK STYLES
   Styles for blocks inserted via the Gutenberg editor
   ============================================================ */

.wp-block-image {
    margin: 1rem 0;
}

.wp-block-image img {
    border-radius: 8px; /* Change to 0 for sharp corners on editor images */
}

/* Image alignment classes used by the WordPress editor */
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* ============================================================
   6. ACCESSIBILITY
   Screen reader text — hidden visually but readable by screen readers
   Do not remove or modify these styles
   ============================================================ */

.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}


/* ============================================================
   7. PRINT STYLES
   Hides navigation, footer, and buttons when printing
   ============================================================ */

@media print {
    .no-print,
    header,
    footer,
    .wp-block-button {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
}


/* ============================================================
   8. RESPONSIVE UTILITIES
   Helper classes to show/hide elements at breakpoints
   Use in HTML: class="hide-mobile" or class="hide-desktop"
   ============================================================ */

@media (max-width: 768px) {
    .hide-mobile {
        display: none !important; /* Hidden on phones */
    }
}

@media (min-width: 769px) {
    .hide-desktop {
        display: none !important; /* Hidden on tablets and desktops */
    }
}


/* ============================================================
   9. HEADER & FOOTER FIXES
   Overrides to correct colour visibility issues
   ============================================================ */

/* Ensures "Get Quote" button text stays white regardless of Tailwind resets */
header a[class*="bg-primary"] {
    color: white !important;
}

header a[class*="bg-primary"]:hover {
    color: white !important;
}

/* Footer links — white with slight transparency, fully white on hover */
footer a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
}

footer a:hover {
    color: rgba(255, 255, 255, 1) !important;
}


/* ============================================================
   10. MOBILE MENU
   Controls the hamburger menu dropdown on small screens
   The .active class is toggled by theme.js when burger is tapped
   To change mobile breakpoint: update max-width below and in Tailwind
   ============================================================ */

@media (max-width: 768px) {
    #primary-navigation {
        display: none; /* Hidden by default on mobile */
    }

    #primary-navigation.active {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;              /* Drops directly below the header */
        left: 0;
        right: 0;
        background: white;
        border-top: 1px solid #e5e7eb;
        padding: 1rem;          /* Inner spacing of dropdown — adjust to taste */
        z-index: 50;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }
}


/* ============================================================
   11. HERO GRADIENT OVERRIDE
   Forces the hero / banner section to use a blue gradient
   instead of the default green Tailwind utility.

   To change gradient colours: edit the hex values in
   .gradient-hero below. Use a tool like coolors.co to pick.

   Other options to try (uncomment one and comment out the active one):

   Option A — Light to dark blue:
     background: linear-gradient(135deg, #3b82f6, #2563eb, #1d4ed8) !important;

   Option B — Navy to royal blue:
     background: linear-gradient(135deg, #1e3a8a, #1e40af, #3b82f6) !important;

   Option C — Solid primary brand gradient:
     background: linear-gradient(135deg, #0626a9, #041c7a, #0626a9) !important;
   ============================================================ */

.gradient-hero {
    /* ACTIVE: Primary blue → royal blue → cornflower blue */
    background: linear-gradient(135deg, #0626a9, #1e40af, #4169e1) !important;
}

/* Force all text inside the hero gradient to be white */
.gradient-hero * {
    color: white !important;
}