/*
Theme Name: Giulia Doyle
Theme URI: https://www.giuliadoyle.com/
Author: Alphabet Creative
Description: Front-end theme for Giulia Doyle's photography blog. Converted from a headless React (CRA) front-end into a standard WordPress theme; visually identical to the previous SPA.
Version: 1.0.0
Requires at least: 6.0
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: giuliadoyle
*/

/* ==========================================================================
   Reset — mirrors the Tailwind preflight the React app relied on so block
   markup from the_content() starts from the same baseline.
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Lato", sans-serif;
    line-height: 1.5;
    color: #000;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}

ul { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: inherit; }

/* ==========================================================================
   Header — .flex.items-center.flex-col.my-10 with logo, nav and socials
   ========================================================================== */
.site-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2.5rem 0; /* my-10 */
}

.site-header__logo { margin-bottom: 2.5rem; } /* mb-10 */

.site-nav { margin-bottom: 0.5rem; } /* mb-2 */

.site-nav a {
    font-weight: 300; /* font-light */
    transition: color 150ms, text-decoration 150ms;
}

.site-nav a:not(:last-child) { margin-right: 1.25rem; } /* mr-5 on all but Blog */

.site-nav a:hover {
    text-decoration: underline;
    color: #737373; /* neutral-500 */
}

.site-nav a.active {
    font-weight: 700; /* bold */
    text-decoration: underline;
}

.site-social {
    display: flex;
    align-items: center;
}

.site-social a:not(:last-child) { margin-right: 1.25rem; } /* mr-5 on Instagram */

.site-social svg {
    width: 24px;
    height: 24px;
    fill: gray;
}

/* ==========================================================================
   Main content wrapper — .mt-5.mx-5.lg:mx-20
   ========================================================================== */
.site-main {
    margin: 1.25rem 1.25rem 0; /* mt-5 mx-5 */
}

@media (min-width: 1024px) {
    .site-main { margin-left: 5rem; margin-right: 5rem; } /* lg:mx-20 */
}

/* ==========================================================================
   Fade-in — the animate-fade-in applied to routed content on mount
   ========================================================================== */
.fade-in { animation: gd-fade-in 200ms linear; }

@keyframes gd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   Page headings — text-2xl.mb-10 ("Published by Giulia Doyle", "Contact")
   ========================================================================== */
.page-heading {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-bottom: 2.5rem; /* mb-10 */
}

/* ==========================================================================
   Entry content — native Gutenberg block output styled to match the React
   block switch statements.
   ========================================================================== */

/* Paragraphs: mb-10 everywhere except About (mb-6). */
.entry-content p { margin-bottom: 2.5rem; }
.entry--about .entry-content p { margin-bottom: 1.5rem; } /* mb-6 */

/* Blue links inside paragraphs (was .about-paragraph, used on every page). */
.entry-content p a { color: #3b82f6; }

/* Lists: mb-10, disc bullets. About indents the items (ml-8). */
.entry-content ul,
.entry-content ol {
    margin-bottom: 2.5rem;
    list-style: disc;
}
.entry--about .entry-content li { margin-left: 2rem; } /* ml-8 */
.entry--about .entry-content li a { color: #3b82f6; }  /* .about-list a */

/* Images / spacers: mb-10. */
.entry-content figure,
.entry-content > img { margin-bottom: 2.5rem; }

/* About images were forced to a fixed width (w-72). */
.entry--about .entry-content img { width: 18rem; }

/* Gallery page content: max-w-screen-2xl. */
.entry--gallery .entry-content { max-width: 1536px; }

/* About page content: max-w-6xl. */
.entry--about .entry-content { max-width: 72rem; }

/* ==========================================================================
   Gallery grid — grid.md:grid-cols-2.lg:grid-cols-4 with mr-8 mb-10 items
   ========================================================================== */
.entry--gallery .wp-block-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 2.5rem;
}

@media (min-width: 768px) {
    .entry--gallery .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .entry--gallery .wp-block-gallery { grid-template-columns: repeat(4, 1fr); }
}

.entry--gallery .wp-block-gallery figure { margin: 0; }

.entry--gallery .wp-block-gallery img {
    margin-right: 2rem;    /* mr-8 */
    margin-bottom: 2.5rem; /* mb-10 */
}

/* ==========================================================================
   Single image view (image.php) — the old /gallery/picture/:id route
   ========================================================================== */
.attachment-view {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 8rem; /* mb-32 */
}

@media (min-width: 1024px) {
    .attachment-view img { width: 1000px; } /* lg:w-[1000px] */
}

.attachment-view .back-link {
    margin-top: 2rem; /* mt-8 */
    width: fit-content;
    transition: color 150ms;
}

.attachment-view .back-link:hover { color: #737373; } /* neutral-500 */