/*
 Theme Name:   Twenty Twenty-One Clean Child
 Description:  A fresh, clean child theme for Twenty Twenty-One.
 Author:       Amar Vyas, www.amarvyas.in
 Template:     twentytwentyone
 Version:      1.1.0
 Text Domain:  twentytwentyone-clean-child
*/

/* -----------------------------------------------------------------
   Root Variables
   ----------------------------------------------------------------- */
:root {
  --inline-img-border: #4b382a; /* Dark brown */
}

/* -----------------------------------------------------------------
   Inline Images - 2px Border
   ----------------------------------------------------------------- */
.entry-content img,
.wp-block-image img,
.content-area img:not(.cover-image):not(.wp-post-image) {
  border: 2px solid var(--inline-img-border);
  border-radius: 8px;
  box-sizing: border-box;
}

/* -----------------------------------------------------------------
   Featured / Cover Images
   ----------------------------------------------------------------- */
.cover-image,
.featured-image img,
.wp-post-image,
.post-thumbnail img {
  display: block;
  width: 100%;
  object-fit: contain;       /* FIX (j): was "cover" — changed to "contain" to stop auto-cropping */
  object-position: center;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(100, 255, 225, 0.2);
}

/* Unified Featured Image Ratio - applies to all contexts */
.archive .post-thumbnail img,
.blog .post-thumbnail img,
.home .post-thumbnail img,
.search-results .post-thumbnail img,
.single-post .post-thumbnail img,
.single .post-thumbnail img,
.page .post-thumbnail img {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 550px;
  object-fit: contain;       /* FIX (j): prevent cropping on all contexts */
}

/* Desktop sizing control */
@media (min-width: 1200px) {
  .single-post .post-thumbnail img,
  .single .post-thumbnail img,
  .page .post-thumbnail img {
    min-height: 350px;
    max-height: 500px;
  }
}

/* Mobile sizing control */
@media only screen and (max-width: 768px) {
  .single-post .post-thumbnail img,
  .single .post-thumbnail img,
  .page .post-thumbnail img {
    aspect-ratio: 16 / 9;
    min-height: 150px;
  }
}

/* -----------------------------------------------------------------
   FIX (a): Site Title (Header) - Reduce by 15%
   TT1 default is ~3.6rem for .site-title; 3.6 * 0.85 = ~3.06rem
   ----------------------------------------------------------------- */
.site-title,
.site-title a {
  font-size: clamp(1.4rem, 3vw, 3.06rem) !important;
  line-height: 1.15;
}

/* -----------------------------------------------------------------
   FIX (e): Standardize body font across all posts
   Pins everything to TT1's own primary font variable, with a clean
   fallback stack so mixed fonts (e.g. from classic editor pastes)
   are overridden.
   ----------------------------------------------------------------- */
body,
body .entry-content,
body .entry-content p,
body .entry-content li,
body .entry-content blockquote,
body .entry-content td,
body .entry-content th,
body .entry-summary,
body .archive .entry-content,
body .blog .entry-content {
  font-family: var(--global--font-secondary, "Source Serif 4", "Georgia", serif) !important;
  font-size: var(--global--font-size-base, 1.125rem);
}

/* -----------------------------------------------------------------
   FIX (f): Reduce H2 and H3 by 15% respectively
   TT1 defaults: H2 ≈ 2.4rem, H3 ≈ 1.9rem
   After -15%:   H2 ≈ 2.04rem, H3 ≈ 1.62rem
   ----------------------------------------------------------------- */
h2,
.entry-content h2 {
  font-size: clamp(1.4rem, 3vw, 2.04rem) !important;
}

h3,
.entry-content h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.62rem) !important;
}

/* -----------------------------------------------------------------
   Layout Engine: Sticky Footer & Spacing
   ----------------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#page.site {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#content.site-content {
    flex-grow: 1;
    width: 100%;
}

.singular .entry-content {
    margin-bottom: 1.5rem;
}

/* -----------------------------------------------------------------
   FIX (c): Spacing after meta (date/category line) on
   archive pages and single posts
   ----------------------------------------------------------------- */
.av-bottom-meta,
.entry-meta,
.entry-footer .post-meta,
.singular .entry-footer {
  margin-bottom: 2.0rem !important;
  padding-top: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: none;
}

/* -----------------------------------------------------------------
   FIX (d): Font size for meta details (date, category, tags)
   Reduce slightly from the current hardcoded 1.25rem to 1rem
   ----------------------------------------------------------------- */
.av-bottom-meta,
.entry-meta,
.entry-footer .post-meta,
.tags-links {
  font-size: 1rem !important;
}

/* -----------------------------------------------------------------
   Reduce Whitespace (Meta to Post Navigation)
   ----------------------------------------------------------------- */
.post-navigation {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.site-main,
#main {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* -----------------------------------------------------------------
   FIX (g): Increase font size of previous/next post links by 15%
   Current mobile override was 0.9rem, so desktop is ~1rem.
   1rem * 1.15 = 1.15rem
   ----------------------------------------------------------------- */
.post-navigation .nav-links a,
.post-navigation .nav-links .post-title,
.post-navigation .nav-links .meta-nav,
.post-navigation .nav-previous a,
.post-navigation .nav-next a {
  font-size: 1.35rem !important;
}

/* -----------------------------------------------------------------
   FIX (b): Footer site-info font size - reduce by 20%
   Current mobile override was 0.85rem; desktop has no explicit size
   so inherits body (~1rem). 1rem * 0.80 = 0.8rem
   ----------------------------------------------------------------- */
.site-info,
.site-info .site-name,
.site-info .footer-note,
.site-info .privacy-policy,
.site-info a {
  font-size: 0.75rem !important;
}

/* Consolidated Footer Spacing */
body .site-footer,
#colophon {
    margin-top: 0 !important;
    margin-bottom: 0;
    padding-top: 1.8rem !important;
    padding-bottom: 1.2rem;
}

/* -----------------------------------------------------------------
   Squash the Whitespace Above Footer Widgets
   ----------------------------------------------------------------- */
.site-main {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Strip TT1's massive default widget padding */
.widget-area {
    padding-top: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 1.2rem !important;
}

/* -----------------------------------------------------------------
   Widen the Text Content Column (Desktop)
   ----------------------------------------------------------------- */
:root {
    --responsive--aligndefault-width: 980px;
}

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright),
.entry-header,
.page-header,
.post-navigation,
.archive .post,
.blog .post,
.search .post {
    max-width: var(--responsive--aligndefault-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* -----------------------------------------------------------------
   FIX (i): Single post - reduce space between title and first paragraph
   ----------------------------------------------------------------- */
.singular .entry-header,
.single .entry-header,
.single-post .entry-header {
  margin-bottom: 1rem !important;
  padding-bottom: 0 !important;
}

/* Extra: close the gap between entry-header and entry-content on single */
.singular .entry-content > *:first-child,
.single .entry-content > p:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* -----------------------------------------------------------------
   FIX (h): Category description page - use standard body font
   instead of the heading font TT1 applies to .taxonomy-description
   ----------------------------------------------------------------- */
.taxonomy-description,
.taxonomy-description p {
  font-family: var(--global--font-secondary, "Source Serif 4", "Georgia", serif) !important;
  font-size: var(--global--font-size-base, 1.125rem) !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1.7;
  color: var(--global--color-foreground, inherit);
}

/* -----------------------------------------------------------------
   Mobile Adjustments: Edge Spacing & Font Sizes
   ----------------------------------------------------------------- */
@media only screen and (max-width: 768px) {

    .entry-content > *:not(.alignwide):not(.alignfull),
    .entry-header,
    .page-header,
    .post-navigation,
    .archive .post,
    .av-bottom-meta {
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .entry-content p,
    .entry-content li {
        font-size: 0.97rem;
    }

    /* Keep nav links legible on mobile too (FIX g mobile) */
    .post-navigation .post-title,
    .post-navigation .meta-nav,
    .post-navigation .nav-links a {
        font-size: 1rem !important; /* 0.9 * 1.15 ≈ 1.04, rounded to 1rem */
    }

    /* Keep footer smaller on mobile (FIX b mobile) */
    .site-info {
        font-size: 0.75rem !important;
    }

    .site-main > article {
        margin-bottom: 1.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .site-main > article + article {
        margin-top: 1.5rem !important;
    }

    #scrollTop {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.75rem !important;
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* -----------------------------------------------------------------
   The Final Act: Floating Back to Top Arrow
   ----------------------------------------------------------------- */
#scrollTop {
    position: fixed !important;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: rgba(196, 164, 132, 0.5);
    color: #4b382a !important;
    font-size: 2.5rem !important;
    font-weight: bold;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease-in-out;
}

#scrollTop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTop:hover {
    background-color: rgba(196, 164, 132, 0.9);
    color: #1a1412 !important;
    transform: translateY(-5px);
}