/* css/tablet.css */
/* ========================================
   TABLET STYLES (max-width: 768px) - START
======================================== */
/* ========================================
   HEADER SECTION - TABLET START
======================================== */
.breadcrumbList {display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center;
        align-items: flex-start;
        gap: 2vw;}
.headerContainer {
    padding: 0 1.875rem;
    height: 4.6875rem;
    gap: 1.25rem;
}

.logoName {
    font-size: 1.25rem;
}

.logoSubtitle {
    font-size: 0.6875rem;
}
.candidatePhoto {
width: 65vw;
}
.headerNav {
    position: fixed;
    top: 4.6875rem;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.10);
    transform: translateX(-100%);
    transition: transform 0.35s ease;
    margin: 0;
    max-height: calc(100vh - 4.6875rem);
    overflow-y: auto;
    justify-content: flex-start;
    z-index: 1200;
}

.headerNav.active {
    transform: translateX(0);
}

.navList {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem 0;
}

.navItem {
    width: 100%;
    border-bottom: 0.0625rem solid rgba(15, 23, 42, 0.06);
}

.navItem:last-child {
    border-bottom: none;
}

.navLinkGroup {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.navLink,
.navParentLink {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1.15rem 1.875rem;
    font-size: 1rem;
}

.navParentLink {
    flex: 1 1 auto;
}

.navSubmenuToggle {
    width: 3.5rem;
    height: auto;
    border-left: 0.0625rem solid rgba(15, 23, 42, 0.06);
    justify-content: center;
    align-items: center;
}

.navLink::after,
.navParentLink::after {
    display: none;
}

.navArrow {
    width: 0.5rem;
    height: 0.5rem;
    margin-left: 0;
}

.headerCta {
    display: none;
}

.mobileMenuToggle {
    display: flex;
    position: relative;
    z-index: 1300;
}

.mobileMenuToggle.active .menuBar:nth-child(1) {
    transform:translateY(0.4525rem) rotate(45deg) translateX(-0.1525rem);
}

.mobileMenuToggle.active .menuBar:nth-child(2) {
    opacity: 0;
}

.mobileMenuToggle.active .menuBar:nth-child(3) {
    transform: translateY(-0.5625rem) rotate(-45deg);
}

/* Tablet/mobile submenu */
.subMenu {
    position: static;
    transform: none;
    min-width: 0;
    background: #F8FBFD;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
}

.navItemHasSubmenu.isOpen .subMenu {
    display: contents;
}

.subMenuItem {
    border-top: 0.0625rem solid rgba(15, 23, 42, 0.05);
}

.subMenuItem + .subMenuItem {
    border-top: 0.0625rem solid rgba(15, 23, 42, 0.05);
}

.subMenuLink {
    display: block;
    padding: 0.95rem 3rem;
    font-size: 0.9375rem;
    color: rgba(15, 23, 42, 0.68);
    background: #F8FBFD;
}

.subMenuLink:hover {
    background: #EEF5FB;
    color: #0D2C6C;
}

/* ========================================
   HEADER SECTION - TABLET END
======================================== */

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

.heroSection {
    margin-top: 4.6875rem;
    height: 62vh;
    min-height: 37.5rem;
    max-height: 46.875rem;
}

.heroContainer {
    padding: 0 1.875rem;
}

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

.heroLabel {
    font-size: 0.875rem;
    letter-spacing: 0.05rem;
    margin-bottom: 1rem;
}

.heroTitle {
    letter-spacing: 0.14rem;
}

.heroSubtitle {
    font-size: 1.0625rem;
}

.heroDescription {
    font-size: 0.9375rem;
    line-height: 1.85;
    margin-bottom: 2rem;
}

.heroButtons {
    flex-wrap: wrap;
    gap: 0.85rem;
}

.heroCta {
    min-width: 12.5rem;
    padding: 0.95rem 1.35rem;
}
.heroTitleText{
    max-width:min(28rem, 80vw);
}

.heroTitleIcon{
    height:min(3rem, 6vw);
}
/* ========================================
   HERO SECTION - END
======================================== */
.headerNav {
    position: fixed;
    top: 4.6875rem;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.1);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
    margin: 0;
    max-height: calc(100vh - 4.6875rem);
    overflow-y: auto;
    z-index: 1200;
}

.headerNav.active {
    transform: translateX(0);
}
.mobileMenuToggle {
    display: flex;
}
.mobileMenuToggle {
    position: relative;
    z-index: 1300;
}

.headerNav {
    z-index: 1200;
}
/* ========================================
   MESSAGE SECTION - TABLET (max-width: 768px) - REPLACE THIS BLOCK
======================================== */

.messageSection {
    padding: 6rem 0 5.75rem;
}

.messageContainer {
    padding: 0 1.875rem;
}

.messageTitleWrapper {
    margin-bottom: 3.5rem;
}

.messageTitle {
    font-size: 2.125rem;
}

.messageSubtitle {
    font-size: 1rem;
}

.messageGrid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
}

.messagePhotoCard {
    max-width: 26rem;
    margin: 0 auto;
}

.messageTextCard {
    padding: 0;
}

.messageTextInner {
    padding: 2.25rem;
    max-width: 44rem;
}

.messageCtaButton {
    width: 100%;
    max-width: 26rem;
}

/* ========================================
   MESSAGE SECTION - TABLET - END
======================================== */

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

.policySection {
    padding: 5.75rem 0 6.25rem;
}

.policyContainer {
    padding: 0 30px;
}

.policyTitleWrapper {
    margin-bottom: 3.5rem;
}

.policyLabel {
    font-size: 0.8125rem;
    letter-spacing: 0.16rem;
}

.policyMainTitle {
    font-size: 2.125rem;
}

.policySubtitle {
    font-size: 0.95rem;
}

.policyGrid {
    gap: 2rem;
}

.policyCard,
.policyCard02,
.policyCard03,
.policyCard04 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 0;
}

.policyCard02 .policyImageWrapper,
.policyCard04 .policyImageWrapper {
    order: 0;
}

.policyCard02 .policyContent,
.policyCard04 .policyContent {
    order: 0;
    margin-right: 0;
}

.policyImage {
    width: 100%;
    height: 44vw;
    min-height: 260px;
    max-height: 420px;
}

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

.policyCardTitle {
    font-size: 1.9rem;
    gap: 0.65rem;
}

.policyCardTitle img {
    width: 2.5rem;
}

.policyCardDescription {
    font-size: 0.9rem;
    max-width: none;
}

.policyMoreButton {
    width: fit-content;
}

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

/* ========================================
   REPORT SECTION - START
======================================== */

.reportSection {
    padding: 5rem 0;
}

.reportContainer {
    padding: 0 1.875rem;
}

.reportTitleWrapper {
    margin-bottom: 2.5rem;
}

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

.reportMainTitle {
    font-size: 2.125rem;
    margin-bottom: 1rem;
}

.reportSubtitle {
    font-size: 1rem;
}

.reportTabsWrapper {
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.reportTabButton {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

.reportList {
    margin-bottom: 3rem;
}

.reportItem {
    grid-template-columns: 6.5rem 6.5rem 1fr;
    gap: 1rem;
    padding: 1.5rem 1.5rem;
}

.reportDate {
    font-size: 0.875rem;
}

.reportCategory {
    padding: 0.3125rem 0.75rem;
    font-size: 0.6875rem;
}

.reportTitle {
    font-size: 1rem;
}

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


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

.newsSection {
    padding: 5rem 0;
}

.newsContainer {
    padding: 0 1.875rem;
}

.newsTitleWrapper {
    margin-bottom: 2.5rem;
}

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

.newsMainTitle {
    font-size: 2.125rem;
    margin-bottom: 1rem;
}

.newsSubtitle {
    font-size: 1rem;
}

.newsTabsWrapper {
    gap: 0.75rem;
    margin-bottom: 3rem;
}

.newsTabButton {
    padding: 0.625rem 1.5rem;
    font-size: 0.875rem;
}

/* Single column on tablet */
.newsGrid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 3rem;
}

.newsImageWrapper {
    height: 13.75rem;
}

.newsContent {
    padding: 1.5rem;
}

.newsTitle {
    font-size: 1.0625rem;
    margin-bottom: 0.625rem;
}

.newsExcerpt {
    font-size: 0.8125rem;
}

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

.contactCtaSection {
    padding: 4.75rem 0;
}

.contactCtaContainer {
    padding: 0 1.875rem;
}

.contactCtaCard {
    padding: 3rem 2.5rem;
}

.contactCtaTitle {
    font-size: 1.75rem;
}

.contactCtaSubtitle {
    font-size: 0.9375rem;
    max-width: 40rem;
}

.contactCtaButtons {
    flex-wrap: wrap;
    gap: 0.85rem;
}

.contactCtaButton {
    min-width: 14rem;
}

.footerContainer {
    padding: 3.25rem 1.875rem 2rem;
}

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

.footerOffice {
    grid-column: 1 / -1;
}

/* ========================================
   CONTACT CTA + FOOTER - TABLET (max-width: 768px) - END
======================================== */

/* ========================================
   TABLET STYLES - END
======================================== */
/* ========================================
   POLICY PAGE (TABLET) - START
======================================== */

.policyPageHero {
    padding: 5.5rem 0 4.75rem;
    min-height: 18rem;
}

.policyPageHeroInner {
    padding: 0 1.875rem;
}

.policyPageHeroTitle {
    font-size: 2.25rem;
}

.breadcrumbContainer {
    padding: 0 1.875rem;
}

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

.kiyotaFutureContainer {
    padding: 0 1.875rem;
}

.kiyotaFutureBigTitle {
    font-size: 3.75rem;
    margin-bottom: 2rem;
}

.kiyotaFutureLayout {
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.kiyotaFutureImageWrap::before {
    padding-top: 62%;
}

.kiyotaFutureCard {
    margin-top: 0;
    margin-left: 0;
}

.kiyotaFutureCardInner {
    padding: 2.25rem 2.25rem;
}

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

.childrenSupportSection {
    padding: 5.25rem 0 6rem;
}

.childrenSupportContainer {
    padding: 0 1.875rem;
}

.childrenSupportBigTitle {
    font-size: 3.75rem;
    margin-bottom: 2rem;
}

.childrenSupportLayout {
    grid-template-columns: 1fr;
    gap: 0;
    /* display: flex; */
    /* flex-direction: column; */
    /* align-items: center; */
    /* align-content: center; */
    margin-left: 0;
    padding: 0 6vw;
    /* flex-wrap: wrap; */
}

.childrenSupportCard {
    margin-top: 0;
    margin-right: 0;
    order: 2;
    margin-left: 0;
    margin-top: -4vw;
}

.childrenSupportImageWrap {
    order: 1;
}

.childrenSupportCardInner {
    padding: 2.25rem 2.25rem;
}

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

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

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

.featureContainer {
    padding: 0 1.875rem;
    padding-top: 4.5rem;
    padding-bottom: 5.5rem;
}

.featureBigTitle {
    font-size: 3.25rem;
    margin-bottom: 1.75rem;
}

.featureLayout {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    padding-right: 0;
    margin-right: 0;
}

.featureImageWrap {
    width: 100%;
    border-radius: 1.125rem;
}

.featureCard {
    width: 100%;
    border-radius: 1.25rem;
}

.featureCardInner {
    padding: 2rem 2.125rem;
}

/* stack but keep “lower + overlap” feel */
.featureLayoutImageLeft .featureCard {
    margin-top: -2.75rem;
    transform: none;
    justify-self: stretch;
}

/* ========================================
   FEATURE - TABLET (max-width: 768px) - END
======================================== */
/* ========================================
   ACCESS PAGE - TABLET
======================================== */

.accessSection {
    padding: 2.5rem 0 4.75rem;
}

.accessContainer {
    padding: 0 1.875rem;
}

.accessHeroPhotoWrap {
    margin-bottom: 2.25rem;
}

.accessHeroPhoto {
    height: 16.5rem;
}

.accessInfoSection {
    margin-bottom: 2.25rem;
}

.accessInfoTitle {
    font-size: 1.75rem;
}

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

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

.contactPageMain { padding: 4.5rem 0 6rem; }

.contactPageContainer { padding: 0 1.875rem; }

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

.contactSubmitButton { width: 17.5rem; }


/* ========================================
   REPORT ARCHIVE SECTION - TABLET
   reports page only / new parts only
======================================== */

.reportArchiveSection {
    padding: 4rem 0 6rem;
}

.reportArchiveContainer {
    padding: 0 1.875rem;
}

.reportFilterTabs {
    margin-bottom: 3rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.reportFilterTab {
    border-radius: 0.75rem;
}

.reportFilterTab:first-child,
.reportFilterTab:last-child {
    border-radius: 0.75rem;
}

.reportFilterTab + .reportFilterTab {
    margin-left: 0;
}

.reportArchiveList {
    max-width: 100%;
}

.reportArchiveLink {
    grid-template-columns: 5.6rem 6.25rem 1fr;
    gap: 1rem;
}

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

.singleReportPage {
    padding: 2rem 0 0;
}

.singleReportContainer {
    padding: 0 1.875rem;
}

.singleReportArticle {
    max-width: 100%;
}

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

.singleReportPdfWrap {
    margin-bottom: 3rem;
}

.singleReportBottomWidgets {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem 1.875rem 3rem;
}

.singleReportWidgetTitle {
    font-size: 1.375rem;
}
.newsArchive {
    padding: 48px 0 100px;
  }

  .newsArchive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }
  /* ========================================
   NEWS SINGLE PAGE - TABLET
======================================== */

.newsSingleContainer{
    padding: 36px 24px;
}

.newsSingleBreadcrumb{
    font-size: 13px;
    margin-bottom: 24px;
}

.newsSingleMeta{
    gap: 16px;
    margin-bottom: 14px;
}

.newsSingleCategory{
    font-size: 12px;
    padding: 4px 9px;
}

.newsSingleDate{
    font-size: 13px;
}

.newsSingleHero img{
    margin-bottom: 24px;
}

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

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

.newsSingleHeading{
    font-size: 17px;
    padding: 11px 14px;
    margin: 26px 0 18px;
}

.newsSingleImage img{
    margin: 24px 0;
}

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

.newsRelatedContainer{
    padding: 0 24px;
}

.newsRelatedTitle{
    font-size: 17px;
    margin-bottom: 24px;
}

.newsRelatedGrid{
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 20px;
}

.newsRelatedImage{
    height: 140px;
}

.newsRelatedContent{
    padding: 14px;
}

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

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

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

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