/*
 * Cocina y Vino: the look of the WordPress (Oxygen) site. Open Sans text in dark grey, Source Sans Pro bold headings,
 * blue links, white page sections of 1120px with 75px space above and below, a dark footer.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #404040;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: 'Source Sans Pro', sans-serif; font-weight: 700; line-height: 1.15; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

a { color: #0074db; text-decoration: none; }
img, iframe { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.section > .wrap { padding-top: 75px; padding-bottom: 75px; }

/* Header: the site name in very large letters, the menu centred below it. Below 375px "Cocina" is wider than the
   padded column and runs into the side padding (at 320 it sticks out 7px), as on WordPress; it never breaks mid-word. */
.site-header > .wrap { display: flex; flex-direction: column; align-items: center; padding-top: 75px; padding-bottom: 75px; }
.site-title { font-size: 100px; font-weight: 700; color: #404040; }

.main-nav > ul { display: flex; margin: 0; padding: 0; list-style: none; }
.main-nav li { position: relative; display: flex; flex-direction: column; }
.main-nav > ul > li > :is(a, span) {
    display: flex;
    align-items: center;
    padding: 20px;
    color: #0074db;
    border-top: 0 solid transparent;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
}
.main-nav > ul > li:is(:hover, :focus-within) > :is(a, span) { background: #eee; padding-top: 17px; border-top: 3px solid currentColor; }
.main-nav .has-children > :is(a, span)::after {
    content: "";
    width: .35em;
    height: .35em;
    margin-left: .5em;
    border-right: .1em solid;
    border-top: .1em solid;
    transform: rotate(135deg);
}
.main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    background: #eee;
    visibility: hidden;
    opacity: 0;
    transition: visibility .2s, opacity .2s ease-in-out;
}
.main-nav li:is(:hover, :focus-within) > .sub-menu { visibility: visible; opacity: 1; }
.main-nav .sub-menu span { display: block; padding: 20px; color: #0074db; }

/*
 * Narrow screens: a hamburger; open, the top-level items fill the screen (white, centred, the X top right).
 * Items, spacing and colours are WordPress's. Its CSS meant to fill the screen too (fixed, top 0, bottom 0), but
 * Chrome drew it as a white band in the middle, half the title showing above it, the X inside it: not copied.
 */
.mobile-menu { display: none; }
.mobile-menu summary {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 40px;
    height: 32px;
    margin: 14px 0;
    list-style: none;
    cursor: pointer;
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span { position: relative; height: 6px; border-radius: 2px; background: #404040; }
.mobile-menu[open] summary { position: fixed; top: 24px; right: 20px; z-index: 101; margin: 0; transform: rotate(45deg); }
.mobile-menu[open] summary span:nth-child(2) { display: none; }
.mobile-menu[open] summary span:first-child { top: 13px; }
.mobile-menu[open] summary span:last-child { top: -13px; transform: rotate(90deg); }
.mobile-menu nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2em 0;
    overflow: auto;
    background: #fff;
}
.mobile-menu nav :is(a, span) { padding: 20px; color: #0074db; text-align: center; }
body:has(.mobile-menu[open]) { overflow: hidden; }

@media (max-width: 1120px) {
    .main-nav { display: none; }
    .mobile-menu { display: block; }
}

/* Pages and articles: the title, then the text (WordPress separated paragraphs with an empty line). */
.content { overflow-wrap: break-word; }
.content p, .content ul, .content ol { margin: 0 0 1.6em; }
.content > :last-child { margin-bottom: 0; }
/*
 * A column under the text (Contacto): WordPress left two empty lines and 20px padding before it.
 * Its address is one paragraph with the browser's 1em margins, as on WordPress.
 */
.content .column { padding: 45.6px 20px 20px; }
.content .column p { margin: 1em 0; }
.content blockquote { margin: 0 0 1.6em; padding-left: 1em; border-left: 3px solid #eee; }
/*
 * An image alone in its paragraph is centred, like WordPress's "aligncenter". No migrated page has a content image;
 * this is for new ones. (CSS cannot see text: an icon that is the only element in a line of text would be centred too.)
 */
.content p > img:only-child, .content p > a:only-child > img:only-child { display: block; margin: 0 auto; }

.toc { margin: 0 0 1.6em; }
.toc h2 { font-size: 24px; }
.toc ol { margin: .5em 0 0; }
.toc-h3 { margin-left: 1.5em; }

.post-list { margin: 0; padding-left: 1.2em; }
.post-list li + li { margin-top: .5em; }
/* Page links (WordPress's archive template showed none): links in blue, the current page and "…" as plain text. */
.pagination { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6em; }
.pagination :is([aria-current], .dots) { color: #404040; }

/* Videos fill their column at 16:9 (or the ratio a block sets). */
.video { width: 100%; min-height: 0; margin: 0; aspect-ratio: 16 / 9; } /* min-height 0: otherwise the iframe's default 150px height makes a narrow video taller than 16:9 */
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Home: sections of headings, short texts and videos, in columns as on WordPress. */
.home .section > .wrap { display: flex; flex-direction: column; align-items: flex-start; }
/* WordPress centred the heading box, not its text: a heading that wraps (on phones) reads from the left. */
.home h1.center { align-self: center; }
.home .columns { display: flex; flex-wrap: wrap; width: 100%; }
.home .column { display: flex; flex-direction: column; align-items: flex-start; width: var(--width); padding: 20px; }
.home .column.centered { align-items: center; }
.home .texts { display: flex; flex-direction: column; }
.home .texts.row { flex-direction: row; }
.home .texts p { margin: 0; }
.home .texts.spaced p { margin: 1em 0; }
.home .column.centered .texts { align-self: flex-start; }
.home .link { display: inline-block; color: #0074db; }
/* Two smaller videos side by side, as WordPress padded them: 1px right of the first, 20px left of the second. */
.home .videos { display: flex; align-items: center; width: 100%; }
.home .videos .video { width: calc(50% - 1px); margin: 20px 1px 20px 0; }
.home .videos .video + .video { width: calc(50% - 20px); margin: 20px 0 20px 20px; }

/* Footer: dark band with the name, "Sobre nosotros" and the social icons. */
.site-footer { background: #222; color: #fff; }
.footer-columns { display: flex; flex-wrap: wrap; padding-top: 75px; padding-bottom: 75px; }
.footer-columns > div { display: flex; flex-direction: column; justify-content: center; padding: 20px; }
.footer-columns > .footer-about { justify-content: flex-start; }
.footer-columns p { margin: 0; }
.footer-name { width: 25%; font-size: 34px; }
.footer-about { width: 50%; }
.footer-about p:first-child { margin-bottom: 18px; }
.footer-about p:nth-child(2) { margin-bottom: 14px; }
.footer-social { width: 25%; }
.socials { display: flex; flex-wrap: wrap; }
.socials a { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; margin-right: 35px; font-size: 39px; line-height: 1; color: #fff; }
.socials a:last-child { margin-right: 0; } /* or the three icons need 222px and wrap in the 206px column at 992-1080 */
.socials svg { width: .5em; height: .5em; fill: currentColor; }

@media (max-width: 991px) {
    .home .column, .footer-columns > div { width: 100%; }
    .home .videos { flex-wrap: wrap; }
    .home .videos .video { width: calc(100% - 1px); }
    .home .videos .video + .video { width: calc(100% - 20px); }
}