/* Web 2.0 Theme Stylesheet - Glossy, Glassy, Gradient-Rich 2000s Aesthetic */

body.theme-web20 {
    --web20-bg: #e4eef6;
    --web20-text: #2c3e50;
    --web20-primary: #0099ff;
    --web20-primary-dark: #0066cc;
    --web20-accent: #ff8800; /* Vibrant Orange */
    --web20-accent-dark: #e65c00;
    --web20-green: #7fd200; /* Web 2.0 Lime Green */
    --web20-panel-bg: #ffffff;
    --web20-border: #bce0fd;
    --web20-font: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Outfit", sans-serif;

    /* Theme Overrides */
    --background: var(--web20-bg) !important;
    --primary: var(--web20-primary) !important;
    --secondary: var(--web20-accent) !important;
    --image-bg: #ffffff !important;
    --grey-light: var(--web20-border) !important;
    --grey-lightest: #f0f7fd !important;

    /* Typography Overrides */
    --font-serif: var(--web20-font) !important;
    --font-body: var(--web20-font) !important;
    --font-sans: var(--web20-font) !important;

    background-color: var(--web20-bg) !important;
    /* Soft vertical sky gradient combined with diagonal scanline pattern */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 600px),
        repeating-linear-gradient(45deg, rgba(0, 102, 204, 0.02) 0px, rgba(0, 102, 204, 0.02) 2px, transparent 2px, transparent 4px) !important;
    background-attachment: fixed !important;
    color: var(--web20-text) !important;
    font-family: var(--font-body) !important;
}

/* Force global text colors in Web 2.0 theme */
body.theme-web20,
body.theme-web20 p,
body.theme-web20 li,
body.theme-web20 span,
body.theme-web20 time,
body.theme-web20 label,
body.theme-web20 select,
body.theme-web20 option,
body.theme-web20 cite,
body.theme-web20 div:not(.glossy-overlay) {
    color: var(--web20-text);
}

/* Headings with rounded letters, subtle text-shadows */
body.theme-web20 h1,
body.theme-web20 h2,
body.theme-web20 h3,
body.theme-web20 h4,
body.theme-web20 h5,
body.theme-web20 h6 {
    font-family: var(--font-serif) !important;
    color: #1a4f80 !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 0 #ffffff !important;
    letter-spacing: -0.03em !important;
}

/* Highlight main titles with reflection or orange accents */
body.theme-web20 h1 {
    font-size: 2.6rem !important;
}

/* Link styling - bright blue with underline on hover */
body.theme-web20 a {
    color: #0077dd;
    text-decoration: none;
    font-weight: 500;
}

body.theme-web20 a:hover {
    color: var(--web20-accent-dark);
    text-decoration: underline;
}

/* Navigation - Glossy blue top header with vertical fade from lighter blue to original blue */
body.theme-web20 .site-header {
    background: linear-gradient(to bottom, #4faeff 0%, #1582ec 100%) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    border-bottom: 2px solid #003d82 !important;
    position: relative;
    overflow: hidden;
}

/* Hide header gloss reflection */
body.theme-web20 .site-header::before {
    display: none !important;
}

/* Header Text elements turned white for contrast on blue background */
body.theme-web20 .site-header a,
body.theme-web20 .site-header .site-title,
body.theme-web20 .site-header .logo-path {
    color: #ffffff !important;
    fill: #ffffff !important;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.5) !important;
}

body.theme-web20 #primary-nav .primary-nav__link {
    font-weight: bold !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
    padding: 0.6rem 1.4rem !important;
    border-radius: 20px !important;
    background: linear-gradient(
        to bottom,
        #38b6ff 0%,
        #0084ff 50%,
        #0062e3 50%,
        #0047bf 100%
    ) !important;
    border: 1px solid #002e8c !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.15) !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease !important;
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

/* Semi-circular/Glossy top cap exactly like the spin button */
body.theme-web20 #primary-nav .primary-nav__link::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 50% !important;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%) !important;
    pointer-events: none !important;
    z-index: 11 !important;
}

body.theme-web20 #primary-nav .primary-nav__link::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.6),
        transparent
    ) !important;
    transition: 0.65s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 12 !important;
}

body.theme-web20 #primary-nav .primary-nav__link:hover::before {
    left: 150% !important;
}

body.theme-web20 #primary-nav .primary-nav__link:hover {
    background: linear-gradient(
        to bottom,
        #60c5ff 0%,
        #1a94ff 50%,
        #0073fa 50%,
        #0057e0 100%
    ) !important;
    border-color: #0045c2 !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 4px 8px rgba(0, 0, 0, 0.25) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

body.theme-web20 #primary-nav .primary-nav__link:active {
    background: linear-gradient(to bottom, #0050d4 0%, #003aa1 100%) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4),
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* Active navigation item has bubble look - Orange version of the spin button style */
body.theme-web20 #primary-nav .is-active .primary-nav__link {
    background: linear-gradient(
        to bottom,
        #ffa347 0%,
        #ff8800 50%,
        #e65c00 50%,
        #cc4400 100%
    ) !important;
    color: #ffffff !important;
    border: 1px solid #9c2a00 !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 2px 4px rgba(0, 0, 0, 0.2) !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4) !important;
}

/* Sticky navigation bar */
body.theme-web20 .site-navigation-wrapper.is-sticky {
    background: linear-gradient(to bottom, #1582ec 0%, #006be1 100%) !important;
    border-bottom: 2px solid #004694 !important;
}

/* Cards / Tiles - Rounded boxes with soft drop shadows and silver glossy borders */
body.theme-web20 .tile {
    background: #ffffff !important;
    border: 2px solid #bce0fd !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(0, 70, 150, 0.08) !important;
    overflow: hidden !important;
    position: relative;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Highlight hover effect */
body.theme-web20 .tile:hover {
    transform: translateY(-5px) scale(1.01) !important;
    border-color: #0099ff !important;
    box-shadow: 0 12px 28px rgba(0, 70, 150, 0.15) !important;
}

/* Card images get a beautiful glassy shine overlay */
body.theme-web20 .tile__image {
    position: relative;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: hidden;
}

body.theme-web20 .tile__image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.05) 50%, transparent 50.1%) !important;
    pointer-events: none;
    z-index: 2;
}

body.theme-web20 .tile__image img {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    transition: transform 0.4s ease !important;
}

/* Shiny Buttons (Aqua / Glass Pill buttons) */
body.theme-web20 button,
body.theme-web20 input[type="submit"],
body.theme-web20 .wp-block-button__link,
body.theme-web20 .btn {
    background: linear-gradient(to bottom, #94e800 0%, #70cd00 50%, #5ba700 50%, #4a8700 100%) !important;
    border: 1px solid #3c6e00 !important;
    color: #ffffff !important;
    font-family: var(--font-body) !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    padding: 0.6rem 1.8rem !important;
    border-radius: 30px !important; /* Fully pill-shaped */
    cursor: pointer !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.5), 
        0 4px 6px rgba(0, 0, 0, 0.15) !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease !important;
}

/* Shiny overlay reflecting light on the buttons */
body.theme-web20 button::before,
body.theme-web20 input[type="submit"]::before,
body.theme-web20 .btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.05) 100%);
    pointer-events: none;
}

body.theme-web20 button:hover,
body.theme-web20 input[type="submit"]:hover,
body.theme-web20 .btn:hover {
    background: linear-gradient(to bottom, #b3ff1a 0%, #90e600 50%, #7abf00 50%, #619900 100%) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.6), 
        0 6px 10px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(-1px);
}

body.theme-web20 button:active,
body.theme-web20 input[type="submit"]:active,
body.theme-web20 .btn:active {
    background: linear-gradient(to bottom, #5ba700 0%, #4a8700 100%) !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.4), 
        0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(1px);
}

/* Alternate buttons (e.g. orange version) */
body.theme-web20 .btn--alt,
body.theme-web20 .wp-block-button__link {
    background: linear-gradient(to bottom, #ffa347 0%, #ff8800 50%, #e65c00 50%, #cc4400 100%) !important;
    border-color: #9c2a00 !important;
}

body.theme-web20 .btn--alt:hover,
body.theme-web20 .wp-block-button__link:hover {
    background: linear-gradient(to bottom, #ffbe7a 0%, #ff9e29 50%, #f56d0d 50%, #e64c00 100%) !important;
}

/* Forms & Select Dropdown Styling */
body.theme-web20 select,
body.theme-web20 input[type="text"],
body.theme-web20 input[type="email"],
body.theme-web20 input[type="search"],
body.theme-web20 textarea {
    background: #ffffff !important;
    border: 2px solid #bce0fd !important;
    color: var(--web20-text) !important;
    font-family: var(--font-body) !important;
    border-radius: 12px !important;
    padding: 0.6rem 1rem !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.2s ease !important;
}

body.theme-web20 select:focus,
body.theme-web20 input:focus,
body.theme-web20 textarea:focus {
    outline: none !important;
    border-color: #0099ff !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), 0 0 8px rgba(0, 153, 255, 0.3) !important;
}

/* Badges / Category Tags (Vibrant, glossy bubble pills) */
body.theme-web20 .tool-tag,
body.theme-web20 .tag,
body.theme-web20 a.tag {
    background: linear-gradient(to bottom, #ffffff 0%, #eef6fc 100%) !important;
    border: 1px solid #add5f7 !important;
    color: #006be1 !important;
    font-family: var(--font-sans) !important;
    font-weight: bold !important;
    font-size: 0.75rem !important;
    padding: 5px 12px !important;
    border-radius: 15px !important;
    box-shadow: 0 2px 4px rgba(0, 70, 150, 0.05) !important;
    transition: all 0.2s ease !important;
    text-shadow: 0 1px 0 #ffffff !important;
}

body.theme-web20 .tool-tag:hover,
body.theme-web20 .tag:hover,
body.theme-web20 a.tag:hover {
    background: linear-gradient(to bottom, #4faeff 0%, #006be1 100%) !important;
    color: #ffffff !important;
    border-color: #0056b8 !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2) !important;
    text-decoration: none !important;
}

/* Tilted "BETA" badge effect injected on the logo or navigation */
body.theme-web20 .logo::after {
    content: "BETA" !important;
    position: absolute;
    top: -12px;
    right: -24px;
    background: linear-gradient(to bottom, #ff6600, #cc3300) !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: bold !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    transform: rotate(15deg) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid #ffffff !important;
    letter-spacing: 0.05em !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.2) !important;
}

/* Subhero bar - RSS style layout */
body.theme-web20 .subhero {
    background: linear-gradient(to bottom, #f0f7fd 0%, #e4eef6 100%) !important;
    border: 2px solid #bce0fd !important;
    border-radius: 12px !important;
    padding: 1rem 1.5rem !important;
    box-shadow: 0 4px 10px rgba(0, 102, 204, 0.05) !important;
}

body.theme-web20 .subhero p {
    color: #1a4f80 !important;
    font-weight: bold !important;
}

/* Footer style - Glossy grey with mirror effect */
body.theme-web20 footer.site-footer {
    background: linear-gradient(to bottom, #f2f2f2 0%, #e0e0e0 100%) !important;
    border-top: 3px solid #cccccc !important;
    box-shadow: inset 0 1px 0 #ffffff !important;
    padding: 2.5rem 0 !important;
}

body.theme-web20 .site-footer__clients {
    background-color: #f7f9fb !important;
    border-top: 1px solid #e1e9f1 !important;
    border-bottom: 1px solid #e1e9f1 !important;
}

body.theme-web20 .site-footer__clients .client-logo img {
    opacity: 0.7;
    filter: drop-shadow(0 1px 1px #ffffff) !important;
}

body.theme-web20 .site-footer__clients .client-logo img:hover {
    opacity: 1;
}

/* Custom Scrollbar for Web 2.0 (Glossy blue track) */
body.theme-web20::-webkit-scrollbar {
    width: 12px;
}
body.theme-web20::-webkit-scrollbar-track {
    background: #e4eef6;
    border-left: 1px solid #bce0fd;
}
body.theme-web20::-webkit-scrollbar-thumb {
    background: linear-gradient(to right, #4faeff, #006be1);
    border-radius: 6px;
    border: 2px solid #e4eef6;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
}
body.theme-web20::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to right, #6ec0ff, #0084f7);
}


body.theme-web20 .site-header-bg::before {
    opacity: 0.06 !important; /* Adjust as needed */
}

body.theme-web20 .site-header-bg::after {
    opacity: 0.12 !important; /* Adjust as needed */
}

/* Maintain absolute positioning for the hero spin button, styled as less-shiny Web 2.0 orange */
body.theme-web20 .spin-button {
    position: absolute !important;
    background: linear-gradient(to bottom, #ff9e29 0%, #ff8800 100%) !important;
    border: 1px solid #d47000 !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    color: #ffffff !important;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3) !important;
}

/* Remove the aggressive gloss overlay for the spin button */
body.theme-web20 .spin-button::before {
    display: none !important;
}

body.theme-web20 .spin-button:hover:not(:disabled) {
    background: linear-gradient(to bottom, #ffa347 0%, #e65c00 100%) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

body.theme-web20 .spin-button:active:not(:disabled) {
    background: linear-gradient(to bottom, #d47000 0%, #b85c00 100%) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(0) !important;
}

/* Make subtitle 2 orange text brighter for Web 2.0 theme on the blue header background */
body.theme-web20 .hero__title2 {
    color: #ffaa00 !important; /* Brighter, high-contrast orange/gold */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

/* Header tiles on single posts/pages should not have rounded borders and hover effects */
body.theme-web20 .single-post .tile {
    border-radius: 0 !important;
    transform: none !important;
    transition: none !important;
}

body.theme-web20 .single-post .tile:hover {
    transform: none !important;
    border-color: #bce0fd !important;
    box-shadow: 0 8px 20px rgba(0, 70, 150, 0.08) !important;
}

body.theme-web20 .single-post .tile .tile__image,
body.theme-web20 .single-post .tile .tile__image img {
    border-radius: 0 !important;
}