/*
Theme Name: Oleg Medvedev Portfolio
Theme URI: https://github.com/olegmedv/dlu1-project-1-olegmedv
Author: Oleg Medvedev
Author URI: https://github.com/olegmedv
Description: DGL233 Project 1 - Portfolio block theme featuring modern design, custom color palette, and full site editing capabilities. Includes Contact Form 7 integration and creative 404 page.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
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: oleg-medvedev-portfolio
Tags: portfolio, blog, one-column, custom-colors, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready
*/

/* ==========================================================================
   Hide page title on front page
   ========================================================================== */

.home .entry-title,
.home .wp-block-post-title,
.home h1.wp-block-post-title,
.home header.entry-header,
.page-id-home .entry-title,
body.home main > header:first-child,
body.home .wp-block-group > h1:first-child {
    display: none !important;
}

/* ==========================================================================
   Button Styles
   ========================================================================== */

.wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--wp--preset--color--primary) !important;
    border-color: var(--wp--preset--color--primary) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--base) !important;
}

/* ==========================================================================
   Contact Form 7 Styles
   ========================================================================== */

/* BONUS WORK #3: Advanced Contact Form 7 Styling
 * Two-column responsive layout, custom focus states, and enhanced UX
 * See README.md for full documentation
 */

.wpcf7 {
    max-width: 648px;
    margin: 0 auto;
}

.wpcf7-form {
    background-color: var(--wp--preset--color--base);
    padding: 2rem;
    border-radius: 12px;
}

.wpcf7-form p {
    margin-bottom: 1rem;
}

.wpcf7-form label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--wp--preset--color--contrast);
}

.wpcf7-form-control:not([type="submit"]) {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--wp--preset--color--border);
    border-radius: 6px;
    background-color: var(--wp--preset--color--light);
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    color: var(--wp--preset--color--contrast);
    transition: border-color 0.2s ease;
}

.wpcf7-form-control:not([type="submit"]):focus {
    outline: none;
    border-color: var(--wp--preset--color--accent);
}

.wpcf7-form-control::placeholder {
    color: var(--wp--preset--color--muted);
}

.wpcf7-textarea {
    min-height: 100px;
    resize: vertical;
}

.wpcf7-submit {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--base);
    border: none;
    border-radius: 6px;
    font-family: var(--wp--preset--font-family--inter);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.wpcf7-submit:hover {
    background-color: var(--wp--preset--color--secondary);
}

/* Response messages */
.wpcf7-response-output {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 6px;
}

.wpcf7-mail-sent-ok {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.wpcf7-validation-errors {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

/* Two column layout for name/email */
@media (min-width: 600px) {
    .wpcf7-form .form-row {
        display: flex;
        gap: 1rem;
    }

    .wpcf7-form .form-row > p {
        flex: 1;
    }
}

/* ==========================================================================
   404 Page Styles
   ========================================================================== */

/* BONUS WORK #2: Creative 404 Page with CSS Decorative Elements
 * CSS ::before/::after pseudo-elements, clamp() responsive sizing
 * See README.md for full documentation
 */

/* 404 Main container with decorative background */
body.error404 main.wp-block-group {
    position: relative;
    overflow: hidden;
    min-height: 70vh;
}

/* Large decorative background 404 */
body.error404 main.wp-block-group::before {
    content: "404";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--wp--preset--font-family--inter);
    font-size: clamp(180px, 20vw, 280px);
    font-weight: 900;
    color: var(--wp--preset--color--border);
    opacity: 0.4;
    line-height: 1;
    z-index: 0;
    pointer-events: none;
}

/* Content should be above decorative elements */
body.error404 main.wp-block-group > .wp-block-group {
    position: relative;
    z-index: 1;
}

/* Decorative left bracket */
body.error404 main.wp-block-group::after {
    content: "{";
    position: absolute;
    left: 10%;
    top: 40%;
    font-family: var(--wp--preset--font-family--inter);
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 900;
    color: var(--wp--preset--color--border);
    opacity: 0.5;
    z-index: 0;
    pointer-events: none;
}

/* Responsive adjustments for 404 page */
@media (max-width: 768px) {
    body.error404 main.wp-block-group {
        min-height: 60vh;
    }
}