/* css/mobile.css */
/* ========================================
   MOBILE STYLES (max-width: 480px) - START
======================================== */
/* ========================================
   HEADER SECTION - MOBILE START
======================================== */
.breadcrumbList {display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        gap: 1vw;}
.breadcrumbList li {}
.headerContainer {
    padding: 0 1.25rem;
    height: 4.0625rem;
}
.candidatePhoto {
width: 85vw;
}
.logoName {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: 0.04rem;
}

.logoSubtitle {
    font-size: 0.625rem;
}

.headerNav {
    top: 4.0625rem;
    max-height: calc(100vh - 4.0625rem);
}

.navList {
    padding: 0.9375rem 0;
}

.navLink,
.navParentLink {
    padding: 1.125rem 1.25rem;
    font-size: 0.9375rem;
}

.navSubmenuToggle {
    width: 3.125rem;
}

.subMenuLink {
    padding: 0.9rem 2.25rem;
    font-size: 0.875rem;
}

.mobileMenuToggle {
    width: 1.625rem;
    height: 1.625rem;
    gap: 0.3125rem;
}

.menuBar {
    height: 0.125rem;
}

/* ========================================
   HEADER SECTION - MOBILE END
======================================== */

/* ========================================
   HERO SECTION - START
======================================== */

.heroSection {
    margin-top: 4.0625rem;
    height: 58vh;
    min-height: 31.25rem;
    max-height: 37.5rem;
}

.heroContainer {
    padding: 0 1.25rem;
}

.heroCopy {
    width: min(28rem, 92vw);
}

.heroLabel {
    font-size: 0.75rem;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    margin-bottom: 0.9rem;
}

.heroLabelDot {
    width: 0.52rem;
    height: 0.52rem;
}

.heroTitle {
    font-size: 2.25rem;
    letter-spacing: 0.08rem;
    margin-bottom: 0.55rem;
}

.heroSubtitle {
    font-size: 0.9375rem;
    margin-bottom: 1.05rem;
}

.heroDescription {
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 1.6rem;
}

.heroDescription br {
    display: none;
}

.heroButtons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.heroCta {
    width: 100%;
    min-width: 0;
}
.heroTitleText{
    max-width:min(28rem, 80vw);
}

.heroTitleIcon{
    height:min(3rem, 6vw);
}
/* ========================================
   HERO SECTION - END
======================================== */


/* ========================================
   MESSAGE SECTION - MOBILE (max-width: 480px) - REPLACE THIS BLOCK
======================================== */

.messageSection {
    padding: 4.5rem 0 4.5rem;
    padding-top: 2rem;
}

.messageContainer {
    padding: 0 1.25rem;
    margin: 0;
    padding: 5vw;
}

.messageTitleWrapper {
    margin-bottom: 2.75rem;
}

.messageLabel {
    font-size: 0.75rem;
    letter-spacing: 0.16rem;
}

.messageTitle {
    font-size: 1.75rem;
    margin-bottom: 0.85rem;
}

.messageSubtitle {
    font-size: 0.875rem;
}

.messageGrid {
    gap: 1.75rem;
}

.messageTextInner {
    padding: 1.5rem;
}

.messageHeading {
    font-size: 1.25rem;
    margin-bottom: 1.15rem;
}

.messageParagraph {
    font-size: 0.875rem;
    margin-bottom: 1.05rem;
}

.messageParagraph br {
    display: none;
}

.messageCtaButton {
    width: 100%;
    max-width: 100%;
    padding: 0.95rem 2.5rem;
    font-size: 0.9375rem;
}

/* ========================================
   MESSAGE SECTION - MOBILE - END
======================================== */


/* ========================================
   POLICY SECTION - START (MOBILE)
======================================== */

.policySection {
    padding: 4.25rem 0 4.75rem;
}

.policyContainer {
    padding: 0 6vw;
}

.policyTitleWrapper {
    margin-bottom: 2.75rem;
}

.policyLabel {
    font-size: 0.75rem;
    letter-spacing: 0.12rem;
}

.policyMainTitle {
    font-size: 1.75rem;
}

.policySubtitle {
    font-size: 0.875rem;
    line-height: 1.75;
}

.policyGrid {
    gap: 1.5rem;
}

.policyCard,
.policyCard02,
.policyCard03,
.policyCard04 {
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.policyCard02 .policyImageWrapper,
.policyCard04 .policyImageWrapper {
    order: 0;
}
body > section.featureSection.kiyotaSection.featureSectionImageLeft > div > div > article > div > h3 > span > img{
    width: 8vw;
    margin-left: 4vw;
    margin-top: -2vw;
    }
body > section:nth-child(5) > div > div > article > div > h3 > span > img{
    width: 8vw;
    margin-left: 4vw;
    margin-top: -2vw;
    }

    body > section.featureSection.economicSection.featureSectionImageLeft > div > div > article > div > h3 > span > img{
        width: 8vw;
        margin-left: 4vw;
        margin-top: -2vw;
        }
        body > section.childrenSupportSection.snowSolutionsSection > div > div > article > div > h3 > span > img{
            width: 8vw;
            margin-left: 4vw;
            margin-top: -2vw;
        }
.policyCard02 .policyContent,
.policyCard04 .policyContent {
    order: 0;
    margin-right: 0;
}

.policyImageWrapper {
    border-radius: 12px;
    width: 85vw;
}

.policyImage {
    width: 100%;
    height: 52vw;
    min-height: 200px;
    max-height: 280px;
}

.policyContent {
    width: 100%;
    margin-left: 0;
    padding: 1.1rem 0.25rem 0;
}

.policyCardLabel {
    font-size: 0.6875rem;
    letter-spacing: 0.1rem;
    margin-bottom: 0.7rem;
}

.policyCardTitle {
    font-size: 1.4rem;
    line-height: 1.35;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.policyCardTitle img {
    width: 2rem;
}

.policyCardDescription {
    font-size: 0.8125rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.policyMoreButton {
    width: 100%;
    justify-content: center;
}

/* ========================================
   POLICY SECTION - END (MOBILE)
======================================== */

/* ========================================
   REPORT SECTION - START
======================================== */
body > main > section > div > div.reportFilterTabs > button:nth-child(4){
    
margin-top: 5vw;
}
.reportSection {
    padding: 3.75rem 0;
}

.reportContainer {
    padding: 0 1.25rem;
}

.reportTitleWrapper {
    margin-bottom: 2.25rem;
}

.reportLabel {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.reportMainTitle {
    font-size: 1.75rem;
    margin-bottom: 0.875rem;
}

.reportSubtitle {
    font-size: 0.875rem;
}

.reportTabsWrapper {
    gap: 0.625rem;
    margin-bottom: 2.5rem;
}

.reportTabButton {
    padding: 0.5625rem 1.25rem;
    font-size: 0.8125rem;
}

.reportList {
    margin-bottom: 2.5rem;
}

.reportItem {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    padding: 1.25rem 1rem;
}

.reportItem:hover {
    transform: translateX(0);
}

.reportDate {
    font-size: 0.8125rem;
}

.reportCategory {
    padding: 0.25rem 0.625rem;
    font-size: 0.625rem;
    width: fit-content;
}

.reportTitle {
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* ========================================
   REPORT SECTION - END
======================================== */


/* ========================================
   NEWS SECTION - START
======================================== */

.newsSection {
    padding: 3.75rem 0;
}

.newsContainer {
    padding: 0 1.25rem;
}

.newsTitleWrapper {
    margin-bottom: 2.25rem;
}

.newsLabel {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
}

.newsMainTitle {
    font-size: 1.75rem;
    margin-bottom: 0.875rem;
}

.newsSubtitle {
    font-size: 0.875rem;
}

.newsTabsWrapper {
    gap: 0.625rem;
    margin-bottom: 2.5rem;
}

.newsTabButton {
    padding: 0.5625rem 1.25rem;
    font-size: 0.8125rem;
}

/* Single column on mobile */
.newsGrid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.newsImageWrapper {
    height: 12rem;
}

.newsContent {
    padding: 1.25rem;
}

.newsMeta {
    gap: 0.625rem;
    margin-bottom: 0.75rem;
}

.newsDate {
    font-size: 0.8125rem;
}

.newsCategory {
    padding: 0.1875rem 0.5rem;
    font-size: 0.625rem;
}

.newsTitle {
    font-size: 1rem;
    margin-bottom: 0.625rem;
    line-height: 1.5;
}

.newsExcerpt {
    font-size: 0.8125rem;
    line-height: 1.6;
}

/* ========================================
   NEWS SECTION - END
======================================== */
/* ========================================
   CONTACT CTA + FOOTER - MOBILE (max-width: 480px) - START
======================================== */

.contactCtaSection {
    padding: 4rem 0;
}

.contactCtaContainer {
    padding: 0 1.25rem;
}

.contactCtaCard {
    padding: 2.25rem 1.25rem;
    border-radius: 0.95rem;
}

.contactCtaTitle {
    font-size: 1.375rem;
    margin-bottom: 0.65rem;
}

.contactCtaSubtitle {
    font-size: 0.875rem;
    margin-bottom: 1.35rem;
}

.contactCtaButtons {
    width: 100%;
    flex-direction: column;
    gap: 0.75rem;
}

.contactCtaButton {
    width: 100%;
    min-width: 0;
}

.footerContainer {
    padding: 3rem 1.25rem 1.75rem;
}

.footerGrid {
    grid-template-columns: 1fr;
    gap: 2rem;
}

.footerBottom {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
}

/* ========================================
   CONTACT CTA + FOOTER - MOBILE (max-width: 480px) - END
======================================== */



/* ========================================
   POLICY PAGE (MOBILE) - START
======================================== */

.policyPageHero {
    padding: 5rem 0 4.25rem;
}

.policyPageHeroInner {
    padding: 0 1.25rem;
}

.policyPageHeroLabel {
    font-size: 0.75rem;
    letter-spacing: 0.16rem;
    margin-top: 7vw;
}

.policyPageHeroTitle {
    font-size: 2rem;
}

.policyPageHeroSubtitle {
    font-size: 0.875rem;
}

.breadcrumbBar {
    height: 5.25rem;
}

.breadcrumbContainer {
    padding: 0 1.25rem;
}

.kiyotaFutureSection {
    padding: 4.5rem 0 5.25rem;
}

.kiyotaFutureContainer {
    padding: 0 1.25rem;
}

.kiyotaFutureBigTitle {
    font-size: 2.35rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.kiyotaFutureCardInner {
    padding: 1.75rem 1.5rem;
}

.kiyotaFutureCardTitle {
    font-size: 1.35rem;
}

.kiyotaFutureListText {
    font-size: 0.875rem;
}

/* ========================================
   POLICY PAGE (MOBILE) - END
======================================== */
/* ========================================
   CHILDREN & FAMILY SUPPORT - MOBILE (max-width: 480px)
======================================== */

.childrenSupportSection {
    padding: 4.5rem 0 5.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.childrenSupportContainer {
    padding: 0 1.25rem;
    padding: 0;
}

.childrenSupportBigTitle {
    font-size: 2.35rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    margin-left: 0;
    padding: 0 7vw;
    margin-right: 1vw;
}

.childrenSupportCardInner {
    padding: 1.75rem 1.5rem;
}

.childrenSupportCardTitle {
    font-size: 1.35rem;
    display: flex;
}

.childrenSupportListText {
    font-size: 0.875rem;
}

/* ========================================
   CHILDREN & FAMILY SUPPORT - MOBILE - END
======================================== */
/* ========================================
   ECONOMIC GROWTH - CHANGES ONLY (MOBILE)
======================================== */

.economicGrowthBigTitle {
    color: rgba(3, 59, 203, 0.20);
}
/* ========================================
   SNOW SOLUTIONS - CHANGES ONLY (MOBILE)
======================================== */

.snowSolutionsBigTitle {
    color: rgba(255, 166, 41, 0.32);
}
/* ========================================
   FEATURE - MOBILE (max-width: 480px) - START
======================================== */

.featureContainer {
    padding: 0 1.25rem;
    padding-top: 3.75rem;
    padding-bottom: 4.75rem;
    display: flex;
    flex-direction: column;
    margin-right: 0;
    padding: 0 4vw;
    padding-left: 4vw;
}

.featureBigTitle {
    font-size: 2.5rem;
    margin-bottom: 6.25rem;
    margin-left: 0;
    margin-bottom: 8vw;
    margin-top: 11vw;
}

.featureImageWrap {
    border-radius: 1rem;
    margin: 0;
}

.featureCardInner {
    padding: 1.5rem;
}

.featureCardTitle {
    font-size: 1.375rem;
    margin-bottom: 3vw;
}

.featureListText {
    font-size: 0.875rem;
    line-height: 1.85;
}

.featureLayoutImageLeft .featureCard {
    margin-top: -2.25rem;
    margin-bottom: 9vw;
}

/* ========================================
   FEATURE - MOBILE (max-width: 480px) - END
======================================== */
/* ========================================
   ACCESS PAGE - MOBILE
======================================== */

.accessSection {
    padding: 2rem 0 4rem;
}

.accessContainer {
    padding: 0 1.25rem;
}

.accessHeroPhotoWrap {
    border-radius: 1rem;
    margin-bottom: 2rem;
}

.accessHeroPhoto {
    height: 11.5rem;
}

.accessInfoSection {
    margin-bottom: 2rem;
}

.accessInfoTitle {
    font-size: 1.5rem;
    margin-bottom: 0.85rem;
}

.accessInfoRow {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    padding: 1rem 0;
}

.accessInfoRow dt {
    font-size: 0.8125rem;
}

.accessInfoRow dd {
    font-size: 0.875rem;
    line-height: 1.85;
}

.accessMapWrap {
    border-radius: 1rem;
}

.accessMapWrap iframe {
    height: 18rem;
}
/* ========================================
   CONTACT PAGE MAIN - MOBILE
======================================== */

.contactPageMain { padding: 3.75rem 0 5.25rem; }

.contactPageContainer { padding: 0 1.25rem; }

.contactPageLead {
  font-size: 0.875rem;
  margin-bottom: 2.5rem;
}

.formRow {
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.formLabel { padding-top: 0; }

.formTextarea { min-height: 11.5rem; }

.contactSubmitButton {
  width: 100%;
  max-width: 20rem;
}
/* ========================================
   REPORT ARCHIVE SECTION - MOBILE
   reports page only / new parts only
======================================== */

.reportArchiveSection {
    padding: 3.25rem 0 5rem;
}

.reportArchiveContainer {
    padding: 0 1.25rem;
}

.reportFilterTabs {
    justify-content: space-around;
    overflow-x: auto;
    flex-wrap: wrap;
    gap: 0;
    display: flex;
    padding-bottom: 0.25rem;
    margin-bottom: 2.5rem;
    flex-direction: row;
    align-content: space-around;
    align-items: flex-end;
}

.reportFilterTabs::-webkit-scrollbar {
    height: 0;
}

.reportFilterTab {
    flex: 0 0 auto;
    min-width: 6.75rem;
    height: 2.75rem;
    font-size: 0.875rem;
    padding: 0 1rem;
}

.reportArchiveLink {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    align-items: start;
    padding: 1rem 0;
}

.reportArchiveDate {
    font-size: 0.875rem;
}

.reportArchiveTag {
    width: fit-content;
}

.reportArchiveTitle {
    font-size: 0.9375rem;
    line-height: 1.7;
}

.reportPagination {
    gap: 0.35rem;
    flex-wrap: wrap;
}

.reportPaginationButton {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 0.875rem;
}

/* ========================================
   REPORT ARCHIVE SECTION - MOBILE END
======================================== */
/* ========================================
   SINGLE REPORT PAGE - MOBILE
======================================== */

.singleReportPage {
    padding: 1.5rem 0 0;
}

.singleReportContainer {
    padding: 0 1.25rem;
}

.singleReportMeta {
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.singleReportTag {
    font-size: 0.8125rem;
}

.singleReportDate {
    font-size: 0.875rem;
}

.singleReportEyecatch {
    height: 12.5rem;
	object-fit: contain;
}

.singleReportContent {
    font-size: 0.9375rem;
    line-height: 1.85;
}

.singleReportContent p {
    margin-bottom: 1.5rem;
}

.singleReportPdfWrap {
    margin-bottom: 2.5rem;
}

.singleReportPdfImage {
    width: min(18rem, 100%);
}

.singleReportShareArea {
    padding: 1.25rem 0;
    margin-bottom: 1.5rem;
}

.singleReportShareInner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
}

.singleReportShareLabel {
    font-size: 0.9375rem;
}

.singleReportPager {
    padding-bottom: 2.5rem;
    gap: 1rem;
}

.singleReportPagerPrev,
.singleReportPagerNext {
    font-size: 0.9375rem;
}

.singleReportBottomWidgets {
    padding: 2rem 1.25rem 2.5rem;
    gap: 1.5rem;
}

.singleReportWidgetTitle {
    font-size: 1.25rem;
}

.singleReportWidgetList a {
    font-size: 0.9375rem;
    padding: 0.85rem 0;
}
.newsArchiveBreadcrumb {
    padding: 10px 0;
  }

  .newsArchive {
    padding: 34px 0 80px;
  }

  .newsArchive__tabArea {
    margin-bottom: 32px;
  }

  .newsArchive__tabs {
    width: 100%;
  }

  .newsArchive__tab {
    width: 33.3333%;
    min-width: 0;
    height: 44px;
    padding: 0 8px;
    font-size: 13px;
  }

  .newsArchive__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .newsArchiveCard__content {
    padding: 12px 16px 14px;
  }

  .newsArchiveCard__date {
    font-size: 12px;
  }

  .newsArchiveCard__category {
    min-width: 46px;
    height: 20px;
    font-size: 11px;
  }

  .newsArchiveCard__title {
    font-size: 13px;
  }

  .newsArchiveCard__text {
    font-size: 11px;
  }

  .newsArchivePagination {
    margin-top: 36px;
  }
  /* ========================================
   NEWS SINGLE PAGE - MOBILE
======================================== */

.newsSingleContainer{
    padding: 28px 16px;
}

.newsSingleBreadcrumb{
    font-size: 12px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.newsSingleMeta{
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.newsSingleCategory{
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 3px;
}

.newsSingleDate{
    font-size: 12px;
}

.newsSingleHero img{
    border-radius: 8px;
    margin-bottom: 20px;
}

.newsSingleContent{
    font-size: 14px;
    line-height: 1.85;
}

.newsSingleContent p{
    margin-bottom: 16px;
}

.newsSingleHeading{
    font-size: 15px;
    padding: 10px 12px;
    border-radius: 5px;
    margin: 22px 0 16px;
}

.newsSingleImage img{
    border-radius: 8px;
    margin: 20px 0;
}

.newsRelated{
    padding: 40px 0;
    margin-top: 40px;
}

.newsRelatedContainer{
    padding: 0 16px;
}

.newsRelatedTitle{
    font-size: 16px;
    margin-bottom: 20px;
}

.newsRelatedTitle:after{
    margin-top: 8px;
}

.newsRelatedGrid{
    grid-template-columns: 1fr;
    gap: 18px;
}

.newsRelatedCard{
    border-radius: 8px;
}

.newsRelatedImage{
    height: 160px;
}

.newsRelatedContent{
    padding: 14px 12px;
}

.newsRelatedMeta{
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11px;
    margin-bottom: 6px;
}

.newsRelatedCategory{
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 3px;
}

.newsRelatedHeading{
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.newsRelatedExcerpt{
    font-size: 11px;
    line-height: 1.6;
}