/* Responsive layout for tablets and phones (screens only: printing keeps basic.css + print.css unchanged).
   Below 1150px the fixed 1130px layout becomes fluid, the menu folds behind #btn_menu_responsive and the sidebar
   moves under the content. Below 640px the calendars stack in one column. */

#btn_menu_responsive{display:none;}

@media screen and (max-width:1149px){
    html{-webkit-text-size-adjust:100%;}
    body{overflow-x:hidden;}
    img{max-width:100%;height:auto;}
    #cMain, #cSubMain{background:none;}

    /* page frame */
    header .content, footer .content, #cMain .content{width:auto;max-width:100%;padding:12px 12px 0;box-sizing:border-box;}
    #cContent{display:block;width:auto;}
    #cSidebar{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px;width:auto;margin:20px 0 0;float:none;}
    #cSidebar > *{margin-left:0;margin-right:0;flex:1 1 300px;width:auto;min-width:0;max-width:100%;box-sizing:border-box;}
    #cSidebar > #rightSharing{flex-basis:100%;text-align:center;}
    #formBirthday{display:flex;gap:6px;align-items:center;}
    #boxBirthday{padding-right:15px;}
    #formBirthday #b_day, #formBirthday #b_month, #formBirthday #b_year{flex:1 1 0;width:auto;min-width:0;margin:0;box-sizing:border-box;}
    #formBirthday #b_send{flex:0 0 auto;}
    #boxBirthday .info{width:auto;max-width:calc(100% - 90px);}

    /* menu */
    nav{width:auto;height:auto;margin:10px 12px;position:relative;}
    #btn_menu_responsive{display:block;width:100%;height:42px;padding:0 14px;border:0;background:none;color:#fff;font:bold 15px Arial,sans-serif;text-align:left;cursor:pointer;}
    #btn_menu_responsive span{display:inline-block;margin-right:8px;font-size:18px;line-height:1;}
    nav .primary, #submenu{display:none;}
    /* open menu: one column, each submenu directly under its own item (the HTML keeps them in two separate lists) */
    nav.open{display:flex;flex-direction:column;overflow:hidden;}
    nav.open .primary, nav.open #submenu{display:contents;}
    nav #menu a, nav #menu a.active{display:block;width:auto;height:auto;margin:0;padding:13px 14px;text-align:left;border:0;border-top:#003078 solid 1px;border-radius:0;box-sizing:border-box;}
    nav #menu #nav-1{order:1;} nav #secundary-1{order:2;}
    nav #menu #nav-2{order:3;}
    nav #menu #nav-4{order:4;} nav #secundary-4{order:5;}
    nav #menu #nav-3{order:6;} nav #secundary-3{order:7;}
    nav #menu #nav-5{order:8;} nav #secundary-5{order:9;}
    nav #menu #nav-6{order:10;} nav #secundary-6{order:11;}
    nav #menu #nav-7{order:12;} nav #secundary-7{order:13;}
    nav #menu a:not(#nav-2)::after{content:"\25BE";float:right;}
    nav #menu a.sub-open::after{content:"\25B4";}
    nav #submenu div.secundary, nav #submenu .ul_secundary{position:static;width:auto;margin:0;}
    nav #submenu .secundary a, nav #secundary-1.secundary a, #secundary-3 a, #secundary-4 a, #secundary-5 a, #secundary-7 a{width:auto;padding:11px 14px 11px 28px;font-size:14px;display:block;}
    nav .secundary ul{margin:0;padding:0;}
    nav .secundary li{display:block;}

    /* calendars */
    /* previous + next side by side, the title under them */
    #boxCalendar, #boxCalendar.month .calendar{display:flex;flex-wrap:wrap;justify-content:space-between;}
    #boxCalendar > *, #boxCalendar.month .calendar > *{width:100%;}
    #boxCalendar > #cnav_left, #boxCalendar > #cnav_right, #boxCalendar.month .calendar > #cnav_left, #boxCalendar.month .calendar > #cnav_right{width:auto;float:none;order:-2;}
    #boxCalendar > #cnav_center, #boxCalendar.month .calendar > #cnav_center{order:-1;}
    #boxCalendar.month .calendar #cnav_left a, #boxCalendar.month .calendar #cnav_right a{width:auto;}
    #boxCalendar > #cnav_center.cnav{width:100%;}
    #boxCalendar.month .calendar #cnav_center.cnav{width:100%;text-align:center;}
    #boxCalendar.month .calendar{height:auto;}
    #boxConfig h3, #boxCalendar h1, #boxCalendar div.h1{width:auto;max-width:100%;}
    #boxCalendar .data{width:100%;text-align:center;}
    #boxCalendar .calendar{margin:0 6px 12px;text-align:left;vertical-align:top;}
    #boxCalendar.month .calendar{width:100%;margin:0 0 12px;box-sizing:border-box;}
    #resumeCalendar, .moon_txt, #linktoBox textarea{width:auto;max-width:100%;box-sizing:border-box;}
    #resumeCalendar h3{width:auto;}
    /* holiday summary: two equal columns; each row holds an entry of the first and of the second half of the list */
    #resumeCalendar td{display:grid;grid-template-columns:1fr 1fr;}
    #resumeCalendar tr p{display:block;width:auto;min-width:0;padding:10px 8px;box-sizing:border-box;}
    #resumeCalendar p span.dtstart{width:82px;padding:0 6px 0 0;box-sizing:border-box;}
    #detailFestivity table{width:100%;max-width:100%;}
    #currentPhase{float:none;width:auto;margin:0 auto 12px;max-width:280px;}
    #detailFestivity #currentPhaseDetail table{float:none;width:100%;margin-left:0;display:table;}
    #rightSharing{width:auto;}
    #cContent #printables .printable-card{float:none;width:auto;margin:0 0 10px;box-sizing:border-box;overflow:hidden;}
    #cContent .sch-page{width:auto;}
    .sch-lg{white-space:normal;display:inline-block;max-width:100%;}
    .scheduleBox{max-width:100%;box-sizing:border-box;}
    table{max-width:100%;}
}

@media screen and (max-width:859px){
    /* birthday fact finder: the decorated 809px background becomes a plain panel */
    #bgTools{display:none;}
    #resultToolsFun{height:auto;margin-top:16px;padding:14px;background:#DDEB9C;border-radius:10px;box-sizing:border-box;}
    #resultToolsFunCont{padding:10px 0 0;font-size:16px;}
    #resultToolsFunCont p{padding-left:66px;min-height:34px;}
    #bgBirthday{height:auto;padding-bottom:10px;background-size:100% auto;}
    #bgBirthday p{height:auto;padding-top:23vw;}
    #bgBirthday .txts{width:44px;margin-left:4px;margin-right:6px;}
    #resultToolsFunCont span{color:#1E5C00;font-weight:bold;}


    /* moon month: one card per day */
    #boxCalendar #moonMonth.calendar table, #boxCalendar #moonMonth.calendar tbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));gap:6px;table-layout:auto;}
    #boxCalendar #moonMonth.calendar table{display:block;padding:6px;box-sizing:border-box;}
    #boxCalendar #moonMonth.calendar tr{display:contents;}
    #boxCalendar #moonMonth.calendar th, #boxCalendar #moonMonth.calendar td.tdnum, #boxCalendar #moonMonth.calendar td:not(:has(.detail_moon)){display:none;}
    #boxCalendar #moonMonth.calendar td{display:block;width:auto;height:auto;padding:0;text-align:center;}
    #moonMonth.calendar .detail_moon{width:auto;margin:0;padding:3px 2px;}
    #moonMonth.calendar .img_moon{margin:0 auto;}
    #boxCalendar #moonMonth.calendar{box-sizing:border-box;}

    /* configure box: label left, control right */
    #boxConfig .data{padding:10px;}
    #boxConfig table, #boxConfig tbody{display:block;}
    #boxConfig tr{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;align-items:center;}
    #boxConfig th{padding:0;text-align:left;}
    #boxConfig .cbo{width:100%;box-sizing:border-box;}

    /* print, link and sync buttons fill the row; the empty counters under them go */
    #sharingButtons{display:flex;flex-wrap:wrap;gap:8px;}
    #sharingButtons .btns{flex:1 1 140px;margin:0;text-align:center;box-sizing:border-box;}
    #boxConfig #sharingButtons .btns{margin:0;}
    #counterButtons{display:none;}

    /* schedule templates: full-width boxes, Portrait and Landscape stay two columns */
    .scheduleBox, .scheduleBox.scheduleLeft{display:block;width:100%;margin-left:0;margin-right:0;}
    #scheduleCol a, #scheduleCol h5, .scheduleCol a, .scheduleCol h5, #scheduleCol .aleft, .scheduleCol .aleft{width:50%;box-sizing:border-box;float:left;}
    #scheduleCol, .scheduleCol{overflow:hidden;}

    /* year overview: the months fill the width (two per row, one on phones) */
    #boxCalendar .data{width:100%;display:flex;flex-wrap:wrap;gap:12px;}
    #boxCalendar .data > *{flex:1 1 100%;}
    #boxCalendar .data > .calendar{flex:1 1 300px;width:auto;max-width:none;height:auto;margin:0;}
    #boxCalendar .data > .calendar table{width:100%;}
}

@media screen and (max-width:639px){
    #logo{display:block;}
    #logo a{width:300px;max-width:100%;height:60px;background-size:contain;}
    header .content{padding-top:8px;}
    nav{margin:8px;}
    #cMain .content{padding:8px 8px 0;}

    #boxConfig{padding:12px;}
    #boxConfig h3{background-image:none;font-size:20px;}
    #boxCalendar h1, #boxCalendar div.h1{display:block;font-size:20px;}
    #boxCalendar h1 hr.hr, #boxCalendar div.h1 hr.hr{margin-left:0;}
    #boxCalendar .cnav{width:auto;}


    /* month grid: all days fit, the headers show M T W T F S S */
    #boxCalendar.month .calendar table{width:100%;table-layout:fixed;}
    #boxCalendar.month .calendar th{font-size:0;padding-left:0;padding-right:0;}
    #boxCalendar.month .calendar th::first-letter{font-size:13px;}

    /* holiday lists: each row is a small card */
    table.holiday-list, table.holiday-list tbody, table.holiday-list tr, table.holiday-list td{display:block;width:auto;}
    table.holiday-list tr:first-child{display:none;}
    table.holiday-list tr{padding:9px 10px;border-bottom:#ddd solid 1px;}
    #detailFestivity table.holiday-list td{padding:1px 0;border:0;text-align:left;font-size:14px;}
    #detailFestivity table.holiday-list{border-width:1px 0 0;}
    table.holiday-list td span{display:inline-block;width:auto;margin-right:8px;}

    /* holiday summary: one list; order puts the second half after the first, so the dates stay chronological */
    #resumeCalendar table{display:block;border-top:#c1c1c1 solid 1px;}
    #resumeCalendar tbody{display:flex;flex-direction:column;}
    #resumeCalendar tr, #resumeCalendar td{display:contents;}
    #resumeCalendar tr p, #resumeCalendar tr p:last-child{order:2;border-left:0;border-bottom:#ddd solid 1px;padding:9px 10px;font-size:14px;}
    #resumeCalendar tr p:first-child{order:1;}
    #resumeCalendar p span.dtstart{width:105px;}
    #detailFestivity table.holiday-list td:last-child::before{content:"Days to go: ";}

    /* data tables: tighter cells so all columns fit; anything wider scrolls inside its own box */
    #detailFestivity table:not(.holiday-list){display:block;overflow-x:auto;}
    #detailFestivity table:not(.holiday-list) > tbody{display:table;width:100%;}
    #detailFestivity th, #detailFestivity td{padding:7px 5px;}
    #detailFestivity #currentPhaseDetail table{display:table;}

    /* birthday facts: the icon sprite bleeds into taller rows */
    #resultToolsFunCont p{padding-left:0;background-image:none;min-height:0;}

    /* one month per row */
    #boxCalendar .calendar{display:block;width:100%;height:auto;margin:0 0 12px;}


    /* readable small print */
    #boxCalendar .legend{font-size:12px;line-height:1.8;}
    #boxCalendar .legend span{height:14px;line-height:14px;vertical-align:middle;}

    /* tap targets */
    select, input[type=text]{min-height:34px;box-sizing:border-box;}
    #sharingButtons .btns{height:auto;}
    #rightSharing a{display:block;padding:10px;}
    #printables a{min-height:30px;line-height:30px;}
    code{word-break:break-all;}
    #printables{padding:12px;}
    #cContent #printables .printable-card img{float:none;display:block;margin:0 auto 8px;}
    #cSidebar > *{flex-basis:100%;}
}

@media screen and (max-width:479px){
    #boxConfig #sharingButtons .btns{flex-basis:100%;}
}

@media screen and (max-width:359px){
    #sharingButtons .btns{flex-basis:100%;}
}