/* responsive overrides shared by every page.
   loaded after each page stylesheet so these rules win at equal specificity.

   the page stylesheets pin layout containers to a fixed 1186px grid with fixed
   heights, so any viewport narrower than that overflows horizontally. the tiers
   below hand that grid back to the browser:
     <= 1193px  containers go fluid and content reflows
     <= 1024px  tablet: the footer stacks
     <=  767px  phones: side-by-side sections stack, type scales down
   1194px is the first width where the desktop grid actually fits (1186px plus
   the 4px header border on each side), so nothing changes at or above it. */

/* the tablet and 1025-1500px blocks in the page stylesheets target `#main_nav ul`,
   which also matches the work submenu nested inside the nav. that selector
   outranks `#work_dropdown_menu`, so the submenu was pinned open at those
   widths. keep it driven by hover/focus at every width instead. */
#main_nav #work_dropdown_menu{
    display: none;
}
#main_nav #work_dropdown:hover #work_dropdown_menu,
#main_nav #work_dropdown:focus-within #work_dropdown_menu{
    display: flex;
}

/* every media query in the page stylesheets pins the <footer> element to a fixed
   height (300px on phones, 220px on tablet and 1025-1500px) that is far shorter than
   the footer content, so the contact form was clipped off the bottom of the document.
   the base stylesheet sets no height on `footer`, only on `#footer`, so releasing it
   unconditionally is a no-op above 1500px. */
footer{
    height: auto;
}

/* ---------- below the desktop grid ---------- */
@media only screen and (max-width: 1193px) {
    html, body{
        overflow-x: hidden;
    }
    /* the page wrapper supplies the side gutter, so containers can go full width */
    #claritycoded_homepage,
    #claritycoded_aboutme,
    #claritycoded_reachout,
    #claritycoded_thedungeon,
    #claritycoded_brisbanelions,
    #claritycoded_elektrikeel{
        box-sizing: border-box;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    /* fixed-width layout containers become fluid */
    #top_header,
    #hero_banner,
    .hero_banner_text,
    .hero_banner_img,
    #services,
    .services_overview,
    .services_cards,
    #featuredwork,
    .featuredwork_cards,
    #about_me,
    .about_me_intro,
    .about_me,
    .about_me h1,
    #casestudy,
    #casestudy_info,
    .casestudy_title,
    #casestudy_snapshot,
    #casestudy_overview,
    .brief,
    .research_foundation,
    #process_heading,
    #process,
    .artefact_1,
    .artefact_2,
    .artefact_3,
    .artefact_1_slides,
    .artefact_2_slides,
    .artefact_3_slides,
    .artefact_3_video,
    #closing,
    .outcome,
    .reflection,
    #footer,
    .footer_info,
    .footer_logo,
    .footer_form,
    #contact_form,
    #footer_links ul,
    .user_details,
    .message,
    #reach_out,
    .reach_out_intro,
    .reach_out_intro_text,
    .how_it_works,
    #steps,
    #reach_out_form,
    .pricing_section,
    .pricing_tier,
    .pricing_tier_content{
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }
    /* fixed heights were sized for the desktop layout, let content set them */
    #hero_banner,
    .hero_banner_text,
    .hero_banner_img,
    #services,
    #featuredwork,
    .about_me_intro,
    .about_me,
    #casestudy_info,
    #casestudy_overview,
    .brief,
    .research_foundation,
    #process_heading,
    .artefact_1,
    .artefact_2,
    .artefact_3,
    .artefact_1_slides,
    .artefact_2_slides,
    .artefact_3_slides,
    #closing,
    .outcome,
    .reflection,
    #footer,
    .footer_info,
    .footer_logo,
    .footer_form,
    #contact_form{
        height: auto;
    }
    /* media scales with its container instead of overflowing it */
    img,
    video{
        max-width: 100%;
    }
    .hero_img,
    .about_me_intro img,
    .footer_logo img{
        width: 100%;
        height: auto;
    }
    /* these three use object-fit:cover at their fixed desktop size (309x209) to show a
       specific crop of each screenshot. plain height:auto drops that crop and shows the
       full uncropped image instead, so pin the aspect-ratio and keep the crop at any width.
       the desktop image (309px) is also narrower than its card (374px) with the card's
       align-items:center doing the centering, which leaves a visible border gutter on
       both sides — width:100% erased that gutter, so keep the same ~83% ratio instead */
    .thedungeon_img,
    .brisbanelions_img,
    .elektrikeel_img{
        width: 83%;
        height: auto;
        aspect-ratio: 309 / 209;
    }
    /* the intro portrait shares a row with its text down to phone widths, so it
       needs a ceiling and the text beside it needs to be allowed to shrink */
    .about_me_intro img{
        max-width: 350px;
        flex-shrink: 0;
    }
    .about_me_intro_text{
        min-width: 0;
    }
    /* header: logo and nav fit the row without the desktop padding */
    #top_header{
        height: auto;
        min-height: 80px;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }
    #logo{
        width: auto;
        padding-left: 0;
    }
    #main_nav{
        width: auto;
        padding-right: 0;
        margin-left: auto;
    }
    #main_nav > ul{
        width: auto;
        gap: 1.25rem;
    }
    /* the page css sizes this in percentages of an auto-width button, which resolves
       to the svg's native 32x32 and reads as too small next to the 44px mobile logo
       set below, so pin it to match that instead */
    #menu-toggle img{
        width: 44px;
        height: 44px;
    }
    /* card rows reflow rather than forcing a 1186px line */
    .services_cards,
    .featuredwork_cards{
        flex-wrap: wrap;
        justify-content: center;
    }
    /* the icon badges overhang 25px above their own card (position:absolute, top:-25px);
       32px is only just wider than that overhang, so once cards wrap onto a second row
       the badge can clip into whatever card sits directly above it. widen the gap so
       there's real clearance beyond the overhang, not just barely more than it.
       (gap shorthand here instead of row-gap/column-gap so there's no ambiguity about
       which one wins against the base css's own `gap: 32px` shorthand)
       this row also carries its own 100px margin-bottom in the base css, on top of
       #services' margin-bottom right below it — the two don't collapse (it's a flex
       child, not a normal block), so they were adding up to ~160px before featured
       work even starts. zero it out and let #services' margin own that gap alone */
    .services_cards{
        gap: 64px 42px;
        margin-bottom: 0;
    }
    #thedungeon,
    #brisbanelions,
    #elektrikeel{
        width: 100%;
        max-width: 374px;
        height: auto;
    }
    /* keep these at their normal-css fixed height rather than auto — width still
       needs to shrink to fit narrow screens, but the height shouldn't change */
    #services_uiux,
    #services_branding,
    #services_webdesign{
        width: 100%;
        max-width: 374px;
    }
    /* these had explicit desktop widths (85px/275px) narrower than the card, leaving
       a right-side gutter; auto width lets the default align-items:stretch fill the
       full card instead, so the text now needs its own right-side inset to match */
    #services_uiux h1,
    #services_branding h1,
    #services_webdesign h1{
        width: auto;
        height: auto;
        margin-right: 30px;
    }
    #services_uiux p,
    #services_branding p,
    #services_webdesign p{
        width: auto;
        height: auto;
        padding-right: 30px;
        box-sizing: border-box;
    }
    /* the desktop logo (411x344) has no ceiling, so it can balloon far past its
       original size once .footer_info stretches wide in the stacked footer layout */
    .footer_logo{
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- tablet and below ---------- */
@media only screen and (max-width: 1024px) {
    #main_nav > ul > li > a{
        font-size: 18px;
    }
    /* "work" is a <span>, not an <a>, so the rule above never matches it and it
       stays at its 25px base size while the other nav links shrink around it */
    #work_dropdown span{
        font-size: 18px;
    }
    /* trim the 60px desktop gutters inside bordered sections */
    .about_me_intro,
    .about_me,
    #casestudy_info,
    .brief,
    .research_foundation,
    .outcome,
    .reflection{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    #process_heading h1,
    .artefact_1 h1,
    .artefact_2 h1,
    .artefact_3 h1,
    .artefact_1 p,
    .artefact_2 p,
    .artefact_3 p{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .about_me_intro{
        gap: 2rem;
    }
    .about_me_intro img{
        max-width: 300px;
    }
    .about_me_intro_text h1,
    .about_me_intro_text p{
        padding-right: 0;
    }
    /* footer becomes a single column of full-width blocks */
    #footer{
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    .footer_form{
        padding: 0;
    }
    #footer_links ul{
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
    }
    /* .reach_out_intro is a row of two ~450-486px blocks (900px+ before gap/padding),
       too wide to sit side by side at tablet widths, so stack it like the footer above */
    .reach_out_intro{
        flex-direction: column;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
    .reach_out_intro_text,
    #reach_out_form{
        width: 100%;
    }
    .pricing_section{
        padding: 2rem 1.5rem;
    }
    /* these stay a fixed 210x66px/25px box all the way down to the phones tier
       otherwise, which reads oversized once their container has already gone fluid */
    .hero_banner_text button,
    #get_started button,
    #thedungeon_casestudy button,
    #brisbanelions_casestudy button,
    #elektrikeel_casestudy button{
        width: auto;
        padding: 0 32px;
        height: 56px;
        font-size: 20px;
    }
    /* almost nothing below has a size step between the desktop grid and the phones
       tier, so full 35-48px desktop headings were landing in an already-narrowed
       fluid container at tablet widths — this fills that gap with an intermediate
       size sitting between the desktop and phones values already set elsewhere */
    .hero_banner_text h1{
        font-size: 38px;
    }
    .hero_banner_text p{
        font-size: 20px;
    }
    .services_headings h1{
        font-size: 38px;
    }
    .services_headings p{
        font-size: 20px;
    }
    .featuredwork_heading h1,
    #services_uiux h1,
    #services_branding h1,
    #services_webdesign h1{
        font-size: 34px;
    }
    #thedungeon h1,
    #brisbanelions h1,
    #elektrikeel h1{
        font-size: 32px;
    }
    .about_me_intro_text h1{
        font-size: 32px;
    }
    .about_me_intro_text p{
        font-size: 19px;
    }
    .about_me h1{
        font-size: 26px;
    }
    .about_me p{
        font-size: 17px;
    }
    .casestudy_title h1{
        font-size: 38px;
    }
    .casestudy_title p{
        font-size: 18px;
    }
    #casestudy_snapshot h1{
        font-size: 28px;
    }
    #casestudy_snapshot p{
        font-size: 18px;
    }
    #process_heading h1,
    .brief h1,
    .research_foundation h1,
    .outcome h1,
    .reflection h1,
    .artefact_1 h1,
    .artefact_2 h1,
    .artefact_3 h1{
        font-size: 28px;
    }
    .brief p,
    .research_foundation p,
    .outcome p,
    .reflection p,
    .artefact_1 p,
    .artefact_2 p,
    .artefact_3 p{
        font-size: 18px;
    }
    #form_heading h1{
        font-size: 22px;
    }
    .reach_out_intro_text h1{
        font-size: 34px;
    }
    .how_it_works h1{
        font-size: 26px;
    }
    .pricing_section > h1{
        font-size: 32px;
    }
    .pricing_tier_content h1{
        font-size: 24px;
    }
}

/* ---------- phones ---------- */
@media only screen and (max-width: 767px) {
    /* the desktop line-height is far too airy at phone widths */
    p{
        line-height: 1.7rem;
    }
    /* side-by-side sections stack */
    /* base css gives this 100px of breathing room below the hero; that had
       collapsed down to 3rem here along with the internal text/image gap */
    #hero_banner{
        flex-direction: column;
        height: auto;
        gap: 2.5rem;
        margin-bottom: 5rem;
    }
    .about_me_intro{
        flex-direction: column;
        gap: 1.5rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .about_me_intro img{
        max-width: 260px;
    }
    .featuredwork_cards{
        flex-direction: column;
        gap: 2.5rem;
    }
    /* this is the gap that's actually visible once cards stack to a single column on
       a phone — the tier-1 row-gap/column-gap fix above only ever applied to the
       side-by-side wrapped layout at tablet widths, not this stacked one, so it never
       touched what's rendering here. the icon badges overhang 25px above their own
       card, so a plain 2.5rem/40px gap left them floating right at the edge of the
       gap instead of looking like clean space above the next card */
    .services_cards{
        flex-direction: column;
        gap: 4rem;
    }
    #casestudy_snapshot{
        flex-direction: column;
        gap: 1.25rem;
    }
    /* tighter gutters and section spacing */
    /* desktop keeps a 100px gap under the header (set on `main`, untouched above
       767px); this was dropping to 40px on phones, closer than intended */
    main{
        margin-top: 4.5rem;
        margin-bottom: 2rem;
    }
    /* #featuredwork is the last section before the footer on this page (base css
       gives it 150px specifically for that reason); both had collapsed to the same
       3rem here, losing that distinction along with most of the pre-footer gap */
    #services{
        margin-bottom: 4rem;
    }
    #featuredwork{
        margin-bottom: 6rem;
    }
    .about_me,
    #casestudy_info,
    .brief,
    .research_foundation,
    .outcome,
    .reflection{
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    /* the featured-work cards space their content out with justify-content:space-around
       against a fixed desktop height. once the tier-1 rule above resets that to
       height:auto there's no leftover space left to distribute, so content jams flush
       against the card edges. add back the breathing room explicitly. (the services
       cards keep their normal-css fixed height, so they don't need this — the margin/
       padding already on their h1 and p is enough on its own) */
    #thedungeon,
    #brisbanelions,
    #elektrikeel{
        padding-top: 24px;
        padding-bottom: 24px;
        box-sizing: border-box;
    }
    #process_heading h1,
    .artefact_1 h1,
    .artefact_2 h1,
    .artefact_3 h1,
    .artefact_1 p,
    .artefact_2 p,
    .artefact_3 p{
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .artefact_1,
    .artefact_2,
    .artefact_3,
    .artefact_1_slides,
    .artefact_2_slides,
    .artefact_3_slides{
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    #closing{
        gap: 2rem;
    }
    /* the page css sizes the logo as a percentage of an auto-height anchor, which
       resolves to the svg's intrinsic size and spills out of the header */
    .logo_img{
        width: 44px;
        height: 44px;
    }
    .footer_logo{
        max-width: 220px;
    }
    /* #menu-toggle comes before #logo in the markup, so margin-left:auto on the
       button (the page css's old approach) drags itself AND the logo after it off
       to the right together. flex `order` moves it after the logo visually without
       touching the dom, then space-between pins logo left / button right independently */
    #top_header{
        justify-content: space-between;
    }
    #menu-toggle{
        order: 1;
    }
    /* headings sized for a narrow column */
    #logo h1{
        font-size: 20px;
    }
    .hero_banner_text h1{
        font-size: 32px;
        padding-bottom: 0;
    }
    .hero_banner_text p{
        font-size: 18px;
    }
    .services_headings h1{
        font-size: 30px;
    }
    .services_headings p{
        font-size: 18px;
    }
    .featuredwork_heading h1{
        font-size: 30px;
    }
    #services_uiux h1,
    #services_branding h1,
    #services_webdesign h1{
        font-size: 30px;
    }
    #thedungeon h1,
    #brisbanelions h1,
    #elektrikeel h1{
        font-size: 28px;
    }
    .about_me_intro_text h1{
        font-size: 26px;
    }
    .about_me_intro_text p{
        font-size: 18px;
    }
    .about_me h1{
        font-size: 22px;
    }
    .about_me p{
        font-size: 16px;
    }
    .casestudy_title h1{
        font-size: 32px;
    }
    #casestudy_snapshot h1{
        font-size: 24px;
    }
    #process_heading h1,
    .brief h1,
    .research_foundation h1,
    .outcome h1,
    .reflection h1,
    .artefact_1 h1,
    .artefact_2 h1,
    .artefact_3 h1{
        font-size: 26px;
    }
    .brief p,
    .research_foundation p,
    .outcome p,
    .reflection p,
    .artefact_1 p,
    .artefact_2 p,
    .artefact_3 p,
    .casestudy_title p,
    #casestudy_snapshot p{
        font-size: 16px;
    }
    /* the tablet and 1025-1500 tiers step up to 18px/20px below, so this needs to
       be smaller than both to stay a consistent shrink-as-viewport-narrows curve
       (it was previously 18px, tied with the wider 1025-1500 tier and actually
       larger than the tablet tier's old 15px) */
    #footer_links ul li a{
        font-size: 16px;
    }
    #form_heading h1{
        font-size: 20px;
    }
    /* reachout page: headings/paragraphs sized for a narrow column */
    .reach_out_intro{
        padding: 1.5rem 1.25rem;
    }
    .reach_out_intro_text h1{
        font-size: 32px;
    }
    .reach_out_intro_text p,
    .step p{
        font-size: 16px;
    }
    .how_it_works h1{
        font-size: 24px;
    }
    .pricing_section{
        padding: 1.5rem 1.25rem;
    }
    .pricing_section > h1{
        font-size: 28px;
    }
    .pricing_section > p{
        font-size: 16px;
    }
    /* icon + content + price no longer fit in a row at phone widths */
    .pricing_tier{
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-top: 2rem;
    }
    .pricing_price{
        align-items: flex-start;
        text-align: left;
    }
    .pricing_tier_content h1{
        font-size: 22px;
    }
    /* full-width tap targets for the buttons. height stays fixed at 66px on all of
       these unless reset here, which leaves an oversized shell once the width (and,
       for #submit_button, the font-size set in the page css) shrinks around it */
    .hero_banner_text button,
    #get_started button,
    #thedungeon_casestudy button,
    #brisbanelions_casestudy button,
    #elektrikeel_casestudy button{
        width: auto;
        padding: 0 28px;
        height: 52px;
        font-size: 18px;
    }
    #submit_button{
        width: auto;
        height: 48px;
        font-size: 15px;
        padding: 0 24px;
    }
}

@media only screen and (max-width: 767px){
    /* the overlay is width:100vw with a 1rem left pad, so content-box sizing made it
       16px wider than the viewport; border-box keeps it flush */
    #mobile_menu{
        box-sizing: border-box;
        max-width: 100%;
    }

    /* the page stylesheets open with *{ background-color: #F9F9F9 }, which paints every
       descendant its own opaque panel-coloured box. reset it so nested elements (the
       #mobile_work_submenu list in particular) don't carry a mismatched background. */
    #mobile_menu *{
        background-color: transparent;
    }
}