/*
Theme Name: WEEU 830
Author: WEEU Development Team
Description: Professional WordPress theme for WEEU 830 AM radio station with customizable colors and typography
Version: 2.86.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: weeu830
Tags: radio, broadcasting, media, custom-colors, custom-logo, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks

WEEU 830 is a modern, fully customizable WordPress theme designed specifically for radio stations.
All colors, fonts, and styling can be customized through the WordPress Customizer.
*/

/* ==========================================================================
   Gradient Tokens
   Color tokens (--color-*) are emitted by weeu830_design_tokens_css() in PHP;
   these composite gradients are defined here on top of them.
   ========================================================================== */

:root {
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    --gradient-overlay-dark: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0.25) 100%);
}

/* ==========================================================================
   CSS Reset
   ========================================================================== */

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

/* ==========================================================================
   Base Typography
   ========================================================================== */

body {
    font-family: var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
    font-size: var(--font-size-base, 16px);
    line-height: var(--line-height-base, 1.6);
    font-weight: var(--font-weight-body, 400);
    color: var(--color-text, #333);
    background-color: var(--color-background, #fff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading, inherit);
    font-weight: var(--font-weight-heading, 700);
    line-height: var(--line-height-heading, 1.3);
    margin-bottom: 1rem;
    color: var(--color-heading, #1a1a1a);
}

h1 { font-size: var(--font-size-h1, 2.5rem); }
h2 { font-size: var(--font-size-h2, 2rem); }
h3 { font-size: var(--font-size-h3, 1.75rem); }
h4 { font-size: var(--font-size-h4, 1.5rem); }
h5 { font-size: var(--font-size-h5, 1.25rem); }
h6 { font-size: var(--font-size-h6, 1rem); }

/* A heading linked to by its anchor (the cookie notice's "Learn more" goes
   to the privacy policy's #cookies) stops below the fixed header instead of
   under it. By then the header is in its 50px compact state; 96px also
   clears the admin bar for staff. */
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
    scroll-margin-top: 96px;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--color-primary, #F80000);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover, a:focus {
    color: var(--color-primary-hover, #dc0000);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-content {
    flex: 1;
}

.container {
    max-width: var(--container-width, 1400px);
    margin: 0 auto;
    padding: 0 var(--container-padding, 20px);
    width: 100%;
}

/* ==========================================================================
   WordPress Core
   ========================================================================== */

.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

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

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

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.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;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* ==========================================================================
   Images
   ========================================================================== */

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

/* ==========================================================================
   Buttons (the Button block)
   ==========================================================================

   A Button added in the editor, on any page, is the brand's button: red,
   white text, the heading font. Without this the block fell back to
   WordPress's own grey, and the red that content links get (".content-card
   a", "a") outranked WordPress's white text: a grey button with red words.

   Only the colours a button has not been given. A background or text
   colour picked in the editor (has-background / has-text-color, set by the
   palette's own classes) still wins, and the advertising pages and the
   homepage keep their own styles (".adv-section .wp-block-button__link"
   and the like).

   The selectors are pitched between the two: "div a.wp-block-button__link"
   outweighs ".content-card a" and "a", but not a section's own
   ".something .wp-block-button__link"; the :where() parts add nothing, so
   the "not given a colour" test costs no weight. */

div a.wp-block-button__link {
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

div a.wp-block-button__link:where(:not(.has-background)) {
    background-color: var(--color-primary);
}

div a.wp-block-button__link:where(:not(.has-text-color)) {
    color: var(--color-on-primary, #fff);
}

/* Hover: still the button (".content-card a:hover" would fade and underline
   it). */
div a.wp-block-button__link:hover,
div a.wp-block-button__link:focus {
    text-decoration: none;
    opacity: 1;
}

div a.wp-block-button__link:where(:not(.has-background)):hover,
div a.wp-block-button__link:where(:not(.has-background)):focus {
    background-color: var(--color-primary-hover, #dc0000);
}

div a.wp-block-button__link:where(:not(.has-text-color)):hover,
div a.wp-block-button__link:where(:not(.has-text-color)):focus {
    color: var(--color-on-primary, #fff);
}

/* The Outline style: red outline and red words on no fill; filled red on
   hover. */
div.is-style-outline > a.wp-block-button__link:where(:not(.has-background)) {
    background-color: transparent;
    border: 2px solid currentColor;
}

div.is-style-outline > a.wp-block-button__link:where(:not(.has-text-color)) {
    color: var(--color-primary);
}

div.is-style-outline > a.wp-block-button__link:where(:not(.has-background)):hover,
div.is-style-outline > a.wp-block-button__link:where(:not(.has-background)):focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

div.is-style-outline > a.wp-block-button__link:where(:not(.has-text-color)):hover,
div.is-style-outline > a.wp-block-button__link:where(:not(.has-text-color)):focus {
    color: var(--color-on-primary, #fff);
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* All responsive styles and component styles are loaded via enqueued CSS files */