/* Basic CSS for the CouponTime Blog */

/*
 * Define CSS custom properties (variables) used throughout the stylesheet. These
 * variables are set to sensible defaults here but can be overridden by the
 * selected theme file and the colours chosen in the admin settings. The
 * variables are applied to primary UI elements, secondary areas, and
 * accent/hover states.
 */
:root {
    --primary: #1e90ff;
    --secondary: #333333;
    --accent: #0a73c0;
    --body-bg: #f7f7f7;
    --text-color: #333333;
}
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--body-bg);
    color: var(--text-color);
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}

/*
 * The site header provides a consistent bar across all frontend and admin pages.
 * It contains a container element which handles the flex layout and spacing of
 * the branding (logo/title) and navigation. The header itself only defines
 * colours and padding while the inner container defines the flex alignment.
 */
.site-header {
    background: var(--primary);
    color: #fff;
    /* Increase vertical padding for better breathing room (approx 16px top/bottom) */
    padding: 1rem 0;
}

/*
 * The header container uses flex to position the branding and navigation side by side.
 * On wider screens they sit on one row; on narrow screens they wrap neatly. Gap
 * provides consistent spacing between the two blocks. Flex wrap allows the
 * navigation to flow to a new line when space is constrained.
 */
.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

/*
 * Branding block within the header. The branding contains the optional logo
 * image and the site name with tagline stacked neatly. It ensures the
 * logo and text are aligned horizontally and vertically centered.
 */
.site-header .branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-header .branding-logo img {
    /* Restrict logo height for consistent header sizing. Use different
       heights for desktop and mobile. */
    max-height: 36px;
    width: auto;
}

@media (max-width: 768px) {
    .site-header .branding-logo img {
        max-height: 30px;
    }
}

.site-header .site-name {
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
    display: block;
    line-height: 1.2;
    /* Prevent the site name from wrapping under the logo on wider screens */
    white-space: nowrap;
}

.site-header .site-tagline {
    display: block;
    font-size: 0.8rem;
    color: #f5f5f5;
    margin-top: 0.1rem;
}

/* Style for admin header logo link */
.site-header .logo a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
}

/* Reset default margin on h1/logo elements inside the header to prevent
   unintended extra space. */
.site-header .logo,
.site-header h1.logo {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/*
 * Navigation lists use flexbox so items appear on a single row when there is
 * sufficient horizontal space. When space is limited the items wrap onto
 * additional rows. Column and row gaps provide consistent horizontal and
 * vertical spacing between items.
 */
.navigation ul,
.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 1rem;
    row-gap: 0.5rem;
}

/* navigation items */
/* Reset default list item margin; spacing is handled by gaps on the parent list. */
.navigation li,
.footer-nav li {
    margin: 0;
    list-style: none;
    white-space: nowrap;
}

.navigation a,
.footer-nav a {
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
}

/* Highlight the active navigation link by making it bold and adding an
   underline/border indicator. This class is applied from PHP when the
   current URL matches the link destination. */
.navigation a.active {
    font-weight: bold;
    border-bottom: 2px solid var(--accent);
}

.navigation a:hover,
.footer-nav a:hover {
    text-decoration: underline;
}

.site-content {
    padding: 1rem 0;
}

.site-footer {
    background: var(--secondary);
    color: #fff;
    padding: 1rem 0;
    margin-top: 2rem;
}

.site-footer a {
    color: #fff;
    text-decoration: none;
}

/* Grid styles for brands and categories */
/* Generic grid for responsive card layouts */
.grid, .brand-grid {
    display: grid;
    gap: 1rem;
}

/* Category grid: fit as many as possible */
.grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Brand grid: larger cards */
.brand-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Card component used on homepage and other places */
.card,
.brand-card,
.category-card {
    background: #fff;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    text-align: center;
}

.brand-card h3,
.category-card h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.brand-card p,
.category-card p {
    margin: 0;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    /* Ensure cards take full width on small screens */
    .grid,
    .brand-grid {
        grid-template-columns: 1fr;
    }
}

.article {
    background: #fff;
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.article h1 {
    margin-top: 0;
}

.coupon-table,
.savings-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.coupon-table th, .coupon-table td,
.savings-table th, .savings-table td {
    border: 1px solid #ddd;
    padding: 0.75rem;
}

.coupon-table th,
.savings-table th {
    background: #f0f0f0;
    text-align: left;
}

.btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn:hover {
    background: var(--accent);
}

/* Responsive table wrapper */
.responsive-table {
    width: 100%;
    overflow-x: auto;
}

/* Improved coupon/savings tables */
.coupon-table,
.savings-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0;
}

.coupon-table th,
.savings-table th {
    background: var(--primary);
    color: #fff;
    text-align: left;
    padding: 0.75rem;
}

.coupon-table td,
.savings-table td {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 0.75rem;
}

.coupon-table tr:hover td,
.savings-table tr:hover td {
    background: #f9f9f9;
}

/* Badges for discount levels */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    color: #fff;
    font-size: 0.8rem;
}
.badge-high {
    background: #e74c3c;
}
.badge-medium {
    background: #f39c12;
}
.badge-low {
    background: #27ae60;
}

/* Copy button for coupons */
.copy-btn {
    padding: 0.25rem 0.5rem;
    background: var(--secondary);
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}
.copy-btn:hover {
    background: var(--accent);
}

/* Dashboard layout for admin */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

@media (max-width: 992px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}
.dashboard-card {
    background: #fff;
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: center;
}

/* Navigation responsive menu */
.navigation .menu-toggle {
    /* Hidden on desktop; visible on mobile via media query */
    display: none;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 1.6rem;
    cursor: pointer;
    margin-right: 0;
    /* Remove default button appearance */
    background: none;
    border: none;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 900px) {
    /* On small screens the navigation becomes a dropdown.  The nav
       container is positioned relative so the absolutely positioned
       dropdown is anchored to it.  The menu toggle button is shown,
       while the nav links are hidden until the nav has the `open`
       class. */
    .navigation {
        position: relative;
    }
    .navigation ul {
        display: none;
        flex-direction: column;
        background: var(--primary);
        margin: 0;
        padding: 0.5rem 0;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
    }
    .navigation.open ul {
        display: flex;
    }
    .navigation .menu-toggle {
        display: flex;
    }
}

/* Responsive Styles */
@media (max-width: 900px) {
    .navigation ul,
    .footer-nav ul {
        flex-direction: column;
    }
    .navigation li,
    .footer-nav li {
        margin-bottom: 0.5rem;
    }
    .navigation li a {
        display: block;
        padding: 0.75rem 1rem;
        font-size: 1rem;
        min-height: 44px;
    }
}

/*
 * Homepage custom content sections.  These blocks render content
 * configured in the admin panel under "Homepage Sections".  Each
 * section includes a title bar with a golden gradient and a content
 * area.  On smaller screens the typography and padding are reduced
 * for better readability.
 */
.home-section {
    margin: 40px auto;
    max-width: 1100px;
    padding: 0 1rem;
    box-sizing: border-box;
}

/*
 * The title bar for homepage sections uses the site's primary and
 * accent colours instead of a fixed gold gradient.  This ensures
 * consistency with the selected theme.  Adjust the gradient stops
 * here if you prefer a different transition between the primary and
 * accent hues.
 */
.home-section-title {
    background: linear-gradient(90deg, var(--primary), var(--accent));
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.home-section-content {
    margin-top: 20px;
    font-size: 17px;
    line-height: 1.7;
    color: #555;
}

@media (max-width: 768px) {
    .home-section-title {
        font-size: 20px;
        padding: 12px 16px;
    }
    .home-section-content {
        font-size: 15px;
    }
}