@charset "UTF-8";                           /* Declares the character encoding for the stylesheet */

/* GLOBAL BOX-SIZING RESET TO FIX MOBILE OVERFLOW RESIZE ISSUE I'M HAVING */
*, *::before, *::after {               /* Apply to all elements and their pseudo-elements */
  box-sizing: border-box;              /* Use border-box model for predictable sizing */
}

/* FIX FOR LONG UNBROKEN TEXT STRINGS CAUSING OVERFLOW */
p, h1, h2, h3, h4, h5, h6, address, a, button, strong {
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* FIX EDGECASE OF HORIZONTAL SCROLLBAR ON SMALL SCREENS */
html {
    overflow-x: hidden;
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* THIS IS THE PAGE BODY STYLESHEET FOR THE ABOUT.HTML PAGE            */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* This stylesheet only contains styles for everything but the header, navigation, and footer. */
/* Header & Footer styles are managed by the styles.css stylesheet located in the root directory of this project */

/* STYLESHEET BY: Willow Poortenga */
/* NOTE: Comments throughout the stylesheet explain each section and style for clarity and maintainability and some 
were autocompleted from VSCode while writing to help me keep track of "What does what". This stlyesheet took me forever
to make, and I'm going to be applying most of what I'm doing on here to my own personal site - so that's why I went a little bit
overboard with the styling rules. No AI was used in the making of the rules themselves, only in helping make the descriptions of
rules I made and forgot the purpose of, or to help me get a better understanding of what order certain rules should be in / what would
be a better fit for my usecase (most of the time it was a google search with my own research that led to the answer I needed and for
this assignment, the book was heavily used or stackoverflow). Before submitting my final, I will be reaching out to
classmates and the professor for feedback. THIS CSS HAS NOT BEEN VALIDATED YET AS IT IS STILL A WORK IN PROGRESS. ERRORS ARE PRONE TO EXIST */

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* START OF ABOUT_PAGE_BODY.CSS                                               */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* THEME EXTENSIONS (page-body specific variables that complement / borrowed from styles.css palette) */
:root {
    --article-bg: #FCF9F5;                /* Card background color used for article containers */
    --article-border: rgba(0,0,0,0.04);   /* Border color for subtle separation of cards */
    --muted-text: #333;                   /* Default body copy color for readability */
    --image-padding-mobile: 12px;           /* Padding applied around images on mobile */
    --container-max: 1200px;                /* Maximum width for main content container */
    --gutter: 18px;                         /* Horizontal gutter used across layout */
    --page-bg: #FBFAF7;                   /* Page background behind main content (added) */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* RESET / BASE FOR MAIN CONTENT                                        */
/* Main content wrapper: constrained width, centered, and readable     */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
body {
    background: var(--page-bg);             /* Soft page background behind main content (added) */
}

main {
    width: 100%;                            /* Use full available width of the parent */
    max-width: var(--container-max);        /* Constrain to the global container max width */
    margin: 18px auto;                      /* Vertical spacing and horizontal centering */
    padding: 0 var(--gutter);               /* Horizontal inner spacing using the gutter variable */
    color: var(--muted-text);               /* Default text color for main content */
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Cross-platform font stack */
    line-height: 1.6;                       /* Comfortable line height for paragraphs */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ARTICLE CARD - MOBILE FIRST                                         */
/* Card styles for articles inside <main> (mobile-first)               */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main article {
    background: var(--article-bg);          /* Background color for article card */
    border: 1px solid var(--article-border);/* Thin border to separate card from page */
    border-radius: 10px;                    /* Rounded corners for a softer card look */
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);/* Soft drop shadow to lift card off page */
    margin: 14px 0;                         /* Vertical spacing between article cards */
    overflow: hidden;                       /* Clip children to rounded corners */
    padding: 18px;                          /* Inner padding for article content on mobile */
}

/* Article title: mobile-first, centered and prominent */
main article > h2 {
    font-size: 1.35rem;                     /* Mobile title size for prominence */
    margin-bottom: 8px;                     /* Space below the title for rhythm */
    color: #111;                          /* Strong title color for contrast */
    font-weight: 700;                       /* Bold weight to emphasize the title */
    text-align: center;                     /* Center titles on mobile */
    letter-spacing: 0.2px;                  /* Slight letter spacing for polish */
}

/* Section subheading: mobile-first, centered */
main article section > h3 {
    font-size: 1rem;                        /* Subheading size on mobile */
    margin: 6px 0 12px;                     /* Top and bottom spacing for rhythm */
    color: #444;                          /* Muted color for subheadings */
    font-weight: 600;                       /* Slightly bold to create hierarchy */
    text-align: center;                     /* Center subheadings on mobile */
}

/* Section wrapper: stacked on mobile */
main article section {
    display: block;                         /* Stack section content vertically on mobile */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* FIGURE / FIGCAPTION - MOBILE (Default before @media queries are even mentioned) */
/* Semantic media container on mobile stacks image then caption        */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
main article section figure {
    display: block;                         /* Default block flow for figure on mobile */
    margin: 0 0 14px 0;                     /* Space below the figure to separate from following content */
    padding: 0;                             /* Reset any default figure padding */
}

main article section figure img {
    display: block;                         /* Make image a block-level element for predictable layout */
    width: 100%;                            /* Full width of its container on mobile */
    padding-left: var(--image-padding-mobile);  /* Consistent padding around image on mobile */
    padding-right: var(--image-padding-mobile); /* Consistent padding around image on mobile */
    height: auto;                           /* Preserve intrinsic aspect ratio */
    max-height: 360px;                      /* Cap image height on mobile to avoid overly tall images */
    object-fit: cover;                      /* Crop image to fill its box while preserving aspect */
    object-position: center;                /* Center the focal point of the image */
    border-radius: 10px;                    /* Rounded corners to match card aesthetic */
    margin: 0 auto;                         /* Center image horizontally within its container */
    background: #ffffff;                  /* White background behind padded image */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);/* Subtle shadow for image card separation */
}

/* Figcaption on mobile stacks below the image */
main article section figure figcaption {
    margin-top: 12px;                       /* Space between image and caption */
    padding: 0;                             /* Reset figcaption padding for consistent spacing */
}

/* Paragraphs inside figcaption on mobile */
main article section figure figcaption p {
    margin: 10px 0;                         /* Vertical spacing between caption paragraphs */
    color: var(--muted-text);               /* Use muted text color for caption copy */
    font-size: 0.98rem;                     /* Slightly smaller than body for caption readability */
    text-align: justify;                    /* Justify caption text for a clean edge on both sides */
    padding-right: 20px;                    /* Right padding to prevent text from touching edge on all screens */
}

/* Lists inside figcaption on mobile */
main article section figure figcaption ul {
    margin: 8px 0 0 20px;                   /* Top spacing and left indent for list */
    padding: 0;                             /* Reset list padding */
    list-style: disc;                       /* Use disc bullets for unordered lists */
    color: var(--muted-text);               /* Match list text color to body copy */
    padding-right: 20px;                    /* Right padding to prevent text from touching edge on all screens */
}

/* List items inside figcaption on mobile */
main article section figure figcaption ul li {
    margin: 6px 0;                          /* Vertical spacing between list items */
    font-size: 0.98rem;                     /* Match list item font size to caption paragraphs */
}

/* Tagline helper (centered on mobile) */
main article .tagline {
    display: block;                         /* Ensure tagline occupies its own line */
    font-size: 0.92rem;                     /* Slightly smaller helper text */
    color: #666;                          /* Muted color for supporting text */
    margin-bottom: 10px;                    /* Space below tagline */
    text-align: center;                     /* Center tagline on mobile */
}

/* Spacing between consecutive articles */
main article + article {
    margin-top: 20px;                       /* Extra top margin when articles follow one another */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* SINGLE BREAKPOINT — TABLET + DESKTOP (min-width: 640px)             */
/* Tablet and desktop share the same breakpoint; figure becomes a grid */
/* so image is left column and figcaption is the single right column.  */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
@media screen and (min-width: 640px) {
    /* Main container adjustments for larger screens */
    main {
        padding: 0 calc(var(--gutter) + 6px);    /* Slightly increase horizontal padding on larger screens */
    }

    /* Article card adjustments at larger sizes */
    main article {
        padding: 20px;                          /* Increase inner padding for tablet/desktop */
        border-radius: 12px;                    /* Slightly larger corner radius on larger screens */
    }

    /* Use grid on figure for predictable two-column placement.
       The figure is the media container; figcaption is the single text column. */
    main article section figure {
        display: grid;                          /* Switch to grid layout for image + caption columns */
        grid-template-columns: 44% 56%;         /* Allocate left column for image, right for text */
        gap: 20px;                              /* Horizontal gap between image and text columns */
        align-items: start;                     /* Align items to the top of their grid cells */
        grid-auto-rows: minmax(0, auto);        /* Prevent implicit rows from growing beyond content */
        align-content: start;                   /* Pack grid content to the top to avoid extra vertical space */
        margin: 0;                              /* Reset figure margin for grid layout */
        padding: 0;                             /* Reset figure padding for consistent grid sizing */
    }

    /* Image in the left column */
    main article section figure > img {
        grid-column: 1 / 2;                     /* Place image in the left grid column */
        width: 100%;                            /* Full width of its grid cell */
        padding-left: var(--img-pad-desktop);   /* Maintain desktop padding around the image */
        padding-right: var(--img-pad-desktop);  /* Maintain desktop padding around the image */
        height: auto;                           /* Preserve aspect ratio */
        min-width: 240px;                       /* Prevent the image from collapsing too small */
        max-width: 420px;                       /* Cap the image width for visual balance */
        border-radius: 10px;                    /* Keep rounded corners consistent with card */
        background: #ffffff;                  /* White background behind the padded image */
        box-shadow: 0 6px 18px rgba(0,0,0,0.06);/* Slight shadow to lift the image card */
        align-self: start;                      /* Align image to the top of its grid cell */
        margin: 0;                              /* Remove margins that could create gaps */
        max-height: none;                       /* Defensive: allow image to determine its own height */
    }

    /* Figcaption becomes the single right-column grid item and a vertical flex container */
    main article section figure > figcaption {
        grid-column: 2 / 3;                     /* Place figcaption in the right grid column */
        box-sizing: border-box;                 /* Include padding in width calculations */
        min-width: 0;                       /* Prevent figcaption from wrapping under the image */
        margin: 0;                              /* Reset margins to avoid unexpected vertical gaps */
        padding: 0;                             /* Reset padding to control spacing via flex gap */
        display: flex;                          /* Use flex to stack caption content vertically */
        flex-direction: column;                 /* Vertical stacking of caption elements */
        justify-content: flex-start;            /* Keep content anchored to the top */
        gap: 8px;                               /* Small vertical rhythm between caption elements */
        min-height: 0;                          /* Defensive: prevent min-height from creating gaps */
    }

    /* Fine-tune paragraphs inside the figcaption */
    main article section figure > figcaption p {
        margin: 0;                              /* Reset paragraph margins inside the right column */
        text-align: justify;                    /* Justify text for a clean block edge */
    }

    /* Fine-tune lists inside the figcaption */
    main article section figure > figcaption ul {
        margin: 0;                              /* Reset list margin so it sits directly under the paragraph */
        padding-left: 1.25rem;                  /* Controlled left indent for list items */
    }

    /* Remove extra margins from <p> inside list items if present */
    main article section figure > figcaption ul li p {
        margin: 0;                              /* Ensure paragraphs inside list items don't add extra spacing */
    }

    /* Defensive: remove top margins from first child inside figcaption so nothing pushes content down */
    main article section figure > figcaption > *:first-child {
        margin-top: 0 !important;               /* Force no top margin on the first child */
        padding-top: 0 !important;              /* Force no top padding on the first child */
    }

    /* Defensive: remove bottom margins from last child inside figcaption so nothing creates extra space */
    main article section figure > figcaption > *:last-child {
        margin-bottom: 0 !important;            /* Force no bottom margin on the last child */
        padding-bottom: 0 !important;           /* Force no bottom padding on the last child */
    }

    /* Defensive: ensure figcaption wrappers don't have min-height or stray spacing */
    main article section figure > figcaption .text,
    main article section figure > figcaption .content,
    main article section figure > figcaption .meta {
        margin: 0;                              /* Reset margins for common wrapper classes */
        padding: 0;                             /* Reset padding for common wrapper classes */
        min-height: 0;                          /* Ensure wrappers do not impose minimum height */
    }

    /* Slightly larger typography on larger screens */
    main article > h2 { font-size: 1.6rem; }    /* Increase article title size for tablet/desktop */
    main article section > h3 { font-size: 1.1rem; } /* Increase section heading size for larger screens */
    main article section p { font-size: 1rem; } /* Slightly larger paragraph text for readability on larger screens */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ACCESSIBILITY / UTILITIES                                           */
/* Respect user preferences and provide helper utilities               */
/* Found out about these online and adapted for this project.          */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* Decorative images with empty alt attribute remain visible but are block-level */
img[alt=""] {
    display: block;                         /* Ensure decorative images behave as block elements */
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;        /* Disable transitions when user prefers reduced motion */
        animation: none !important;         /* Disable animations when user prefers reduced motion */
    }
}

/* Helper: explicit reverse class to flip image/text order without relying on nth-of-type */
/* Use .reverse on the article to swap image and caption columns in the grid layout */
main article.reverse section figure > img {
    grid-column: 2 / 3;                     /* Place image in the right column for reversed articles */
}

main article.reverse section figure > figcaption {
    grid-column: 1 / 2;                     /* Place text in the left column for reversed articles */
}

/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* END OF ABOUT_PAGE_BODY.CSS                                          */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */
/* ------------------------------------------------------------------- */