/* === ESTILOS BLOG SEDEE === */

:root {
    --clr-primary-400: hsl(242, 71%, 56%);

    --clr-neutral-100: hsl(0, 0%, 100%); /* White */
    --clr-neutral-200: hsl(220, 7%, 98%); /* Backgrounds */
    --clr-neutral-300: hsl(210, 11%, 96%); /* Backgrounds */
    --clr-neutral-800: hsl(0, 1%, 40%); /* Text body */
    --clr-neutral-900: hsl(232, 19%, 16%); /* Title body */

    --ff-primary: 'Poppins', sans-serif;
    --ff-body: var(--ff-primary);
    --fw-regular: 400;
    --fs-600: 1rem;
    --fs-body: var(--fs-600); /* 16px */
}


/* === RESET === */

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

html,
body {
	height: 100%
}

/* Set core body defaults */
body {
    text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
    line-height: 1.5;
    min-height: 100dvh;
}

/* Set headings and paragraphs witn no spaces */
h1,
h2,
h3,
p {
    padding: unset;
    margin: unset;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

/* Image reset */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
    font-style: italic;
    background-repeat: no-repeat;
    background-size: cover;
    shape-margin: 1rem;
}

/* Fieldset reset */
fieldset {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    }
}

input[type="submit"] {
    border: unset;
    border-color: unset;
    border-radius: unset;
    background: unset;
    color: unset;
    line-height: unset;
    padding: unset;
}


/* === TEXT === */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}


h1, h2, h3 {
    font-weight: 600;
    color: var(--clr-neutral-900);
}

h1 {
    font-size: 3rem;
    line-height: 3.875rem;
}

h2 {
    font-size: 2.25rem;
    line-height: 3.125rem; 
}

h3 {
    font-size: 1.25rem;
    line-height: 1.875rem; 
}

em {
    font-style: italic;
}

/* === GENERAL === */

html {
    scroll-behavior: smooth;
}

body {
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    font-weight: var(--fw-regular);
    color: var(--clr-neutral-800);
}

a:focus {
  outline: none;
}

a:focus-visible {
  outline: 2px solid var(--clr-primary-400);
}

/* HEADER */
.site-header {
    padding-block: 1.5rem;

    .header-content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1.5rem;
        background-color: var(--clr-neutral-100);
        box-shadow: 0px 16px 32px -12px #585C5F1A;
        border-radius: 6px;
    }

    .site-branding {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        width: 100%;
    }

    .logo {
        flex-shrink: 0;

        img {
            width: 96px;
        }
    }

    .hidden {
        display: none !important;
    }

    .headline {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.2rem;
    }

    .text-highlight {
        color: #4640df;
        font-weight: 700;
        white-space: nowrap;
    }

    .header-actions {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .link {
        color: #503f44;
        text-decoration: none;
        font-weight: 500;
    }

    .link:hover {
        color: var(--clr-primary-400);
    }

    #menu-toggle {
        background-color: transparent;
        border: none;
    }

    /* Mobile menu */
    .mobile-menu {
        display: none;
        position: fixed;
        top: 126px;
        left: 36px;
        right: 36px;
        background: white;
        padding: 1rem;
        border-radius: 0.75rem;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        margin-top: 0.5rem;

        ul {
            list-style: none;
        }

        li {
            margin-bottom: 0.75rem;
        }

        li:last-child {
            margin-bottom: 0;
        }

        a {
            text-decoration: none;
            color: #374151;
            font-weight: 500;
            font-size: 1rem;
            transition: color 0.2s;
        }

        a:hover {
            color: #4640df;
        }

        &.show {
            display: block;
        }
    }

    /* Botones y enlaces dentro del menú */
    .mobile-menu {
        a {
            font-weight: 500;
            font-size: 1rem;
            color: #374151;
            background: transparent;
            border: none;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            text-align: left;
            transition: background-color 0.2s ease, color 0.2s ease;
            width: 100%;
            text-decoration: none;
            margin-bottom: 1rem;
            cursor: pointer;

            &:hover {
                background-color: #F3F4F6;
                color: #4640DF;
            }
        }

        svg {
            width: 1.25rem;
            height: 1.25rem;
            flex-shrink: 0;
            color: inherit;
        }
        
    }
}

.main-column {
    --max-width: 1500px;
    --padding: 1rem;
    width: min(var(--max-width), 100% - (var(--padding) * 2)) !important;
    margin-inline: auto;
}

/* BLOG */
.blog,
.single {
    background-color: #f9f9f9;
}

.blog .site-main,
.single .site-main {
    padding-bottom: 4rem;
}

.blog-entries {
    .hero {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5rem;
        background-image: url(../images/blog-alquiler-espacios.webp);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 12px;
        margin-bottom: 1.5rem;

        .content {
            color: var(--clr-neutral-100);
            text-align: center;
            font-weight: 700;

            h1 {
                margin-bottom: 1rem;
                font-size: 3rem;
                line-height: 1.2;
                color: var(--clr-neutral-100);
            }
        }
    }

    .grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 1rem;

        article {
            padding: 0.5rem;
            background-color: var(--clr-neutral-100);
            box-shadow: rgba(33, 35, 48, 0.05) 0rem 0.3125rem 1.25rem;
            border-radius: 18px;
            transition: 0.3s;

            &:hover {
                box-shadow: rgba(70, 64, 223, 0.2) 0rem 0.3125rem 1.25rem;
            }
        }

        article a {
            display: block;
            text-decoration: none;
        }

        article img {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        article p {
            padding-inline: 0.9rem;
            font-size: 0.8rem;
            color: var(--clr-neutral-800);
        }

        article h2 {
            padding-inline: 0.9rem;
            margin-bottom: 1rem;
            font-size: 1.25rem;
            line-height: 1.875rem; 
        }

        article .entry-footer {
            display: none;
        }
    }
}

/* ENTRADA POST */

.single {

    h1 {
        margin-bottom: 2rem;
    }

    h2 {
        margin-bottom: 1.5rem;
    }

    h3 {
        margin-bottom: 1rem;
    }

    h4 {
        margin-bottom: 0.5rem;
    }

    p {
        margin-bottom: 2rem;
    }

    .site-main {
        padding-top: 3rem;
    }

   .site-main img {
        border-radius: 0.3125rem;
    }

    a {
        color: var(--clr-primary-400);
        text-decoration: none;
    }

    .site-main ul, ol {
        padding-inline-start: 40px;
        margin: 0 0 2rem;
    }

    .comments-area {
        margin-top: 5rem;
        padding-top: 5rem;
        border-top: 1px solid silver;
    }

    .post-thumbnail {
        margin-bottom: 3rem;
    }

    .post-wrapper {
        display: grid;
        grid-template-columns: 3fr 1fr;
        gap: 2rem;
    }
}

aside {
    position: sticky;
    top: 2rem;
    align-self: flex-start;

    .sidebar-wrapper {
        padding: 1.5rem;
        border-radius: 12px;
        background-color: var(--clr-neutral-100);
    }

    h2 {
        font-size: 1.25rem;
        line-height: 1.125rem;
    }

    .wp-block-search__inside-wrapper {
        gap: 0.4rem;
    }
}

.wp-element-button,
.btn {
    outline: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    margin: 0;
    padding: 0rem 0.85rem;
    border: 0.0625rem solid var(--clr-primary-400);
    border-radius: 6px;
    transition: 0.2s;
    background-color: var(--clr-primary-400);
    color: var(--clr-neutral-100) !important;
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    text-decoration: none;
}

.wp-element-button:hover,
.btn:hover {
    background-color: rgb(145, 140, 245);
    border-color: rgb(145, 140, 245);
}

.btn-ghost {
    background-color: var(--clr-neutral-100);
    color: var(--clr-primary-400) !important;
}

.btn-ghost:hover {
    color: var(--clr-neutral-100) !important;
}

.btn-group {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* FOOTER */
.site-footer {
    padding-block: 2rem;
    background-color: var(--clr-neutral-100);

    .grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-bottom: 2rem;
    }

    .logo img {
        width: 112px;
        margin-bottom: 1rem;
    }

    ul {
        list-style: none;
    }

    p {
        font-weight: 500;
    }

    .rrss {
        display: flex;
        gap: 1rem;
    }

    h3 {
        margin-bottom: 1.5rem;
        font-size: 18px;
        font-weight: 700;
    }

    a {
        text-decoration: none;
        font-weight: 500;
        color: var(--clr-neutral-900);

        &:hover {
            text-decoration: underline;
        }
    }

    .legal ul {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    address a,
    address p {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .sub {
        width: 80%;
    }
}

.mb-8 {
    margin-bottom: 0.5rem;
}

.mb-16 {
    margin-bottom: 1rem;
}

/* Breakpoint Mobile */

@media (max-width: 575.98px) {

    .hero {
        padding: 1.5rem !important;

        h1 {
            font-size: 2rem !important;
            line-height: 1 !important;
        }
    }

    .post-wrapper {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .site-footer {
        .grid {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 1rem;
        }

        .col {
            padding-bottom: 1rem;
            border-bottom: 1px dashed #cacaca;
        }

        .rrss,
        address a,
        address p {
            justify-content: center;
        }

        .sub {
            width: 100%;
            text-align: center;
        }

        .legal ul {
            flex-direction: column;
        }
    }
}