/*General Styles*/
body {
    background-color: #FEE4FF;
    animation: page-fade-in 0.25s ease-out;
}

body.is-leaving {
    animation: page-fade-out 0.18s ease-in forwards;
}

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

@keyframes page-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body, body.is-leaving {
        animation: none;
    }
}

    /*Typography*/
h1 {
  font-family: "Itim", cursive;
  font-optical-sizing: auto;
  font-size: 3.8rem; /* Recommended type size for p is 48-60px, or use 3rem */
  font-weight: 400;
  font-style: normal;
  color: #6E3731;
  line-height: .9;
    "wdth" 100;
}

h2 {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.5rem; 
  font-weight: 300;
  font-style: normal;
    "wdth" 100;
}

h3 {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-size: 1.25rem; 
  font-weight: 600;
  font-style: normal;
  color: #6E3731;
    "wdth" 100;
}

p {
  font-family: "Poppins", sans-serif;
  font-optical-sizing: auto;
  font-size: 1rem; /* Recommended type size for p is 16-20px, or use 1rem */
  font-weight: 300;
  font-style: normal;
    "wdth" 100;
}


    /*Header & Navigation Bar*/
header {
    background-color: #FFB5E2;
    min-height: 190px;
    position: relative;  
    text-align: center; 
}

.logo {
    position: absolute;
    top: -12px;     
    left: 0;         
    right: 0;      
    margin: 0 auto;  
    width: 300px;
}

    /*Footer*/
footer {
    min-height: 90px;
    padding: 1rem 0.5rem;
    margin: 0 0 25px 0;
    font-family: "Itim", cursive;
    font-size: 1.5rem;
    color: #6E3731;

    display: flex;
    flex-direction: column;  
    align-items: center;     
}

.footer-line {
    width: 1184px;
    max-width: 100%;
    height: 3px;
    background-color: #FFB5E2;
    margin-bottom: 15px;    
}

.footer-content {
    display: flex;             
    align-items: center;   
    padding-top: 1rem;    
}

.icons {
    display: flex;
    margin-left: 30px;       
}

.icons img {
    margin-left: 15px;
    height: 35px;
}

    /*Main Layout*/
main {
    display: flex;
    flex-direction: row;       
    justify-content: center;   
    align-items: center;       
    width: 90%;
    margin: auto;
    min-height: 600px;         
}

section {
    margin: 1rem;
    padding: .5rem 1rem;
    text-align: center;
    min-height: 200px
}

.buttons {
    display: flex;               
    justify-content: center;     
    margin-top: 20px;           
    gap: 20px;                  
}

.button {
    font-family: "Itim", cursive;
    background-color: #6E3731;    
    color: white;                
    border: none;                 
    border-radius: 12px;       
    padding: 12px 24px;          
    font-size: 1.5rem;     
    width: 150px;   
    transition: all 0.2s ease; 
}

.button:hover {
    transform: scale(1.05);      
}

.button:active {
    transform: scale(0.98);   
}

.content {
    flex: 1;
    text-align: center;
    margin: 0.5rem;
    max-width: 410px;
}

.hero {
    flex: 1;
    text-align: center;
    margin: 0.5rem;       
}

.float {
    animation: float 2.8s ease-in-out infinite;
}


@keyframes float {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}

/* Hidden by default — at full desktop width the natural wrap already
   breaks "A Day in the Life of Sugar" in the right place on its own, at
   1400px+ this was checked directly. Shown below for every narrower,
   stacked tier (tablet + mobile) so it always breaks in the same place
   there instead of leaving it to the browser (which shifts as the type
   size below changes per tier). Placed here, before every media query
   below, so their display:inline overrides reliably win the cascade. */
.title-break {
    display: none;
}


    /*Media Queries - Responsive Design*/
/*Mobile styles */
    @media screen and (min-width: 300px) and (max-width: 833px) {
    main {
        background-color: #FEE4FF;
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* box-sizing:border-box so this 100% width includes the base
       .hero{padding:.5rem 1rem} rule's padding instead of adding to it, and
       margin-inline:0 so the base rule's side margin doesn't add further —
       that combination (content-box width:100% + padding + margin) was
       what pushed the page past the viewport and caused horizontal scroll. */
    /* Side padding trimmed slightly (from the base .hero{padding:.5rem 1rem})
       so the image gets a bit more room to render larger at this same
       width:100%. */
    /* Trimmed from the base .hero{margin:0.5rem} so the image sits a
       little closer under the text above it, and side padding trimmed
       further so the image itself renders a bit larger. */
    .hero {
        width: 100%;
        box-sizing: border-box;
        margin-inline: 0;
        margin-top: 0.25rem;
        padding-inline: 0.25rem;
        display: flex;
        justify-content: center;
        text-align: center;
    }
    /* min(400px, 100%) continues the step down from the tablet tier's
       450px cap instead of reverting to unconstrained (this container is
       still wide enough at the top of this range that a plain 100% cap
       wouldn't do anything, which would make the image jump back up right
       at the mobile/tablet boundary), while still shrinking further with
       the container on narrower phones. */
    .hero img {
        max-width: min(400px, 100%);
        height: auto;
    }
    /* Trimmed from the base .content{margin:0.5rem} to match .hero's
       tighter margin-top above, closing the gap from both sides. */
    .content {
        margin-bottom: 0.25rem;
    }
    /* All display titles stay the same size, including "Today's Activity"
       — see .h1--nowrap below for keeping that one on a single line. */
    h1 {
        font-size: 3rem;
    }
    /* "Today's Activity" (pancakes.html, matcha.html) is the same size as
       every other title but shouldn't wrap the way the homepage's longer
       title does. */
    .h1--nowrap {
        white-space: nowrap;
    }
    /* Forces "A Day in the Life of Sugar" to always break in the same
       place on mobile (see the default display:none near the bottom of
       this file). */
    .title-break {
        display: inline;
    }
    h2 {
        font-size: 16px;
    }
    /* Smaller and pulled up closer to the body text above — the hero image
       below (only h3 sits between it and the image on home.html/bedtime.html)
       follows it up too, shortening the overall page. */
    h3 {
        font-size: 14px;
        margin: 4px 0 0;
    }
    footer {
    font-size: 1.2rem;}

    /* Shifted up from the base .buttons{margin-top:20px}. */
    .buttons {
        margin-top: 14px;
    }

    header {
    min-height: 125px;
    position: relative;
    text-align: center;
}

.logo {
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 208px;
}

.button {
    font-size: 1.35rem;
    padding: 10px 20px;
    width: 138px;
}}

/* Bedtime's sleeping pose sits low in its square canvas (lots of blank
   space above the dog), so once stacked it reads as a big gap under the
   text — nudge just this image up (eased back slightly from -15%, per
   feedback). A % margin scales with the image's own rendered size instead
   of a fixed px amount. Row layout (1024px+) isn't affected. */
@media screen and (max-width: 1023px) {
    .hero img[src*="Bedtime.svg"] {
        margin-top: -10%;
    }

    .hero img[src*="Sugar Waving.svg"] {
        margin-top: -4%;
    }
}

/* Tablet (833-1023px, stacked column layout — see the desktop media query
   below, which takes back over at 1024px): previously had no rules of its
   own at all, so it fell through to the full desktop type sizes (3.8rem
   etc.) with zero cap on the hero image's raw 650px width. Image cap and
   the forced title break hold across this whole stacked range. */
@media screen and (min-width: 833px) and (max-width: 1023px) {
    .hero img {
        max-width: 100%;
        height: auto;
    }
    .title-break {
        display: inline;
    }
}

/* Text stays at full desktop size through the upper/wider part of the
   tablet range and only starts stepping down closer to mobile, rather
   than shrinking as soon as it drops below 1024px. The hero image steps
   down here too — otherwise it stays at its raw 650px width (the
   max-width:100% above only caps it against .hero's own width, which
   doesn't shrink past 650px until well down into the mobile range) and
   text ends up visibly shrinking well before the image does. */
@media screen and (min-width: 833px) and (max-width: 899px) {
    h1 {
        font-size: 3.4rem;
    }
    h2 {
        font-size: 1.35rem;
    }
    .hero img {
        max-width: 450px;
    }
}



    /*Tablet styles */
    @media screen and (min-width: 833px) and (max-width: 1439px) {
    main {
        background-color: #FEE4FF;
        width: 90%;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    @media screen and (max-width: 833px) {
        main {
            flex-direction: column; 
            align-items: center;
        }
    }
        
    }
    /*Desktop styles */
    @media screen and (min-width: 1024px) {
    main {
        background-color: #FEE4FF;
        width: 90%;
        margin: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .content{
        margin-right: 1rem;     
        margin-bottom: 0;
        transform: translate(-10px, -15px); 
    }
    .hero{
        padding-right: 1rem;    
        max-width: 500px; 
    }}