/* Full-height layout (Oct 2026): the outer layout table already has height:100%, which only
   works when html/body have a height. Short pages now stretch to the window, so the side lines
   reach the bottom and the blue bar + footer sit at the bottom of the window. Long pages are
   unaffected (a table's height is a minimum, so it still grows with the content). */
html, body { height: 100%; }

body
	{
    font-family: arial;
    font-size: 10px;
	}

#header
	{
		margin: 0 0 0 0;
		padding:0px 0px 0px 0px;
        height:60px;
	}

#side-a 
	{
  		width: 500px;
  		height:100%;
  		vertical-align:top;
		padding:5px 5px 5px 5px;
  		min-height:400px;
	}

#side-b
	{
        width: 280px;
  		height:100%;
  		vertical-align:top;
		padding:5px 5px 5px 5px;
		font-size:15px;
		min-height:400px;
	}
#main
	{ 
		width:780px;
		height:100%;

		padding:0px 0px 0px 0px;
		border-bottom:5px solid #336699;
		border-top:5px solid #336699;
	}
#drinktable
    {
    	padding:0px 0px 0px 0px;
		clear: both;
		vertical-align:top;
    }
#dashedbottom
    {
       border-bottom:1px dashed #336699;
    }
#drinkname
    {
       font-size: x-large;
       font-weight: bolder;
       text-decoration: none;
       color: #336699;
       text-align: left;
       vertical-align:top;
    }
a.drinkname
{
       font-size: x-large;
       font-weight: bolder;
       text-decoration: none;
       color: #336699;
       text-align: left;
       vertical-align:top;
}
#drinkotd
    {
       font-size: large;
       font-weight: bolder;
       text-align: center;
       vertical-align:top;
       border-bottom:1px dashed #336699;
    }
#drinkcat
    {
       font-size: small;
       color: #336699;
       text-align: left;
       vertical-align:top;
       border-bottom:1px dashed #336699;
    }
#drinkmidleft
    {
       text-align: left;
       vertical-align:top;
       border-right:1px dashed #336699;
       border-bottom:1px dashed #336699;
    }
#drinkmidright
    {
       text-align: left;
       vertical-align:top;
       border-bottom:1px dashed #336699;
    }
#toplinks
    {
        font-size: 12px;
        text-align: center;
        word-spacing: -.25ex;
        margin-left:auto;
        margin-right:auto;
    }
#footer
	{
		padding:0px 0px 0px 0px;
		height:50px;
		clear: both;
		text-align: center;
	}
#storyaddlink
    {
        text-align: right;
    }
.notice
    {
        font-size: 13px;
        padding: 8px;
        border: 1px dashed #336699;
    }

/* ---- Small screens (phones / portrait tablets), Oct 2026 ----
   Desktop (wider than 820px) is unchanged; everything below only applies to narrow windows. */
.pager-m { display: none; }

@media screen and (max-width: 820px) {
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { font-size: 16px; line-height: 1.4; }
    img { max-width: 100%; height: auto; }

    /* Fluid layout: outer table + content table fill the screen; the two columns stack. */
    body > table, table#main { width: 100% !important; }
    body > table { table-layout: fixed; }             /* keeps wide rows (nav, long words) from stretching the page */
    #side-a, #side-b { overflow-wrap: anywhere; }
    table#main, table#main > tbody, table#main > tbody > tr { display: block; width: 100%; }
    #side-a, #side-b { display: block; width: auto; min-height: 0; padding: 8px 12px; font-size: 16px; }
    #side-b { border-top: 5px solid #336699; padding-top: 10px; }
    #header a { display: inline-block; }
    #footer { height: auto; }

    /* Navigation: big tap-friendly buttons in swipeable rows instead of tiny | separated links. */
    #toplinks { font-size: 16px; word-spacing: normal; text-align: left; }
    #toplinks br, #toplinks .sep { display: none; }
    #toplinks .nav-title { display: block; font-weight: bold; margin-bottom: 2px; }
    #toplinks .nav-row {
        display: flex; align-items: center; gap: 6px; padding: 4px 0 6px;
        overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
    }
    #toplinks .nav-row .lbl { flex: none; font-weight: bold; min-width: 76px; }
    #toplinks .nav-row a {
        flex: none; display: inline-flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px; padding: 0 10px; box-sizing: border-box;
        border: 1px solid #336699; border-radius: 6px; background: #f3f7fb; color: #336699; text-decoration: none;
    }
    #toplinks .nav-search { display: flex; align-items: center; gap: 6px; margin: 6px 0 10px; }
    #toplinks .nav-search label { font-weight: bold; min-width: 76px; }
    #toplinks .nav-search input[type=text] { flex: 1; min-width: 0; }

    /* Form controls: 16px text (no iOS zoom) and 44px tall. */
    input, select, textarea, button { font-size: 16px; font-family: arial, sans-serif; }
    input[type=text], input[type=search], select, textarea {
        min-height: 44px; padding: 8px; box-sizing: border-box; border: 1px solid #8a9bb0; border-radius: 4px; max-width: 100%;
    }
    input[type=submit], button {
        min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid #336699; border-radius: 4px;
        background: #336699; color: #fff; cursor: pointer;
    }

    /* Drink lists (home, category, letter, search): one card per drink, whole name is the tap target. */
    table.drinklist, table.drinklist > tbody, table.drinklist > tbody > tr, table.drinklist > tbody > tr > td { display: block; width: auto; }
    table.drinklist > tbody > tr { border-bottom: 1px dashed #336699; padding: 4px 0 8px; }
    table.drinklist > tbody > tr > td, table.drinklist td#dashedbottom { border-bottom: none; }
    table.drinklist tr.head { display: none; }
    table.drinklist > tbody > tr > td:first-child a {
        display: flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: bold; color: #336699;
    }
    table.drinklist > tbody > tr > td:nth-child(2) { color: #336699; }

    /* Pager: Prev / page picker / Next. */
    .pager-full { display: none; }
    .pager-m { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; }
    .pager-m form { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; order: 3; width: 100%; }
    .pager-m a, .pager-m .pg-off {
        display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
        border: 1px solid #336699; border-radius: 6px; text-decoration: none; color: #336699; background: #f3f7fb;
    }
    .pager-m .pg-off { opacity: .4; }

    /* Drink pages: stack Ingredients / Directions; nutrition tables shrink to fit. */
    #idtable, #idtable > tbody, #idtable > tbody > tr, #idtable > tbody > tr > td { display: block; width: auto; }
    #drinkmidleft { border-right: none; }
    #drinkcat { font-size: 16px; }
    #idtable td { padding-top: 4px; padding-bottom: 4px; }
    #idtable table { width: 100% !important; max-width: 100%; }
    #idtable table td { width: auto !important; white-space: nowrap; font-size: 15px; padding-right: 6px; }
    a.drinkname { display: inline-block; padding: 6px 0; }
    .notice { font-size: 16px; }

    /* Add a Drink form: labels above full-width fields. */
    table.addform, table.addform > tbody, table.addform > tbody > tr, table.addform > tbody > tr > td {
        display: block; width: auto !important; text-align: left !important;
    }
    table.addform > tbody > tr > td:first-child { padding-bottom: 0; font-weight: bold; }
    table.addform > tbody > tr > td:empty { display: none; }
    table.addform input[type=text], table.addform select, table.addform textarea { width: 100%; }
    table.addform small { font-size: 15px; }

    /* Footer links. */
    .footer td { font-size: 14px; }
    .footer a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: 16px; }
}

/* ---- Amazon affiliate links (Oct 2026): subtle dotted underline, same text color ---- */
a.aff { color: inherit; text-decoration: underline dotted #336699; text-underline-offset: 2px; }
a.aff:hover, a.aff:focus { color: #336699; text-decoration-style: solid; }
.aff-disclosure { color: #666; }
.gear { font-size: 13px; }
.gear h3 { color: #336699; font-size: 16px; margin: 14px 0 2px; border-bottom: 1px dashed #336699; }
.gear ul { margin: 4px 0 8px; padding-left: 20px; }
.gear li { margin: 3px 0; }
.gear .gear-intro { margin: 4px 0; color: #444; }
.gear a.gear-link { color: #336699; text-decoration: underline; font-weight: bold; }
.aff-note { font-size: 11px; color: #666; border: 1px dashed #336699; padding: 5px 8px; }
@media screen and (max-width: 820px) {
    .gear { font-size: 16px; }
    .gear ul { padding-left: 0; list-style: none; }
    .gear li { margin: 0; padding: 6px 0; border-bottom: 1px dotted #c5d3e2; }
    .gear a.gear-link { display: flex; align-items: center; min-height: 44px; padding: 0; }
    .gear .gear-dash { display: none; }
    .aff-note { font-size: 14px; }
    .aff-disclosure { display: inline-block; padding: 4px 0; }
    a.aff { padding: 14px 0; } /* bigger touch area for in-text links, without changing line spacing */
}

/* ---- Drink pages (Oct 2026): slightly larger recipe text; Ingredients a little bigger,
   Directions / Serve In a little smaller. Main drink = #side-a (id.php); Drink of the Day =
   #side-b (randomdrink.php: last row = Directions + Serve In, row before it = Ingredients).
   To fine-tune, change only the numbers below. Originals: main drink 10px (title 24px,
   category 13px), Drink of the Day 15px, phones 16px. */
@media screen and (min-width: 821px) {
    #side-a #idtable { font-size: 11.5px; }                   /* description etc.  10 -> 11.5px */
    #side-a #idtable #drinkname { font-size: 26.5px; }        /* title             24 -> 26.5px */
    #side-a #idtable #drinkcat { font-size: 14.5px; }         /* category          13 -> 14.5px */
    #side-a #drinkmidleft { font-size: 11.5px; padding: 4px 8px 4px 4px; }  /* ingredients 10 -> 11.5px, pad 1 -> 4/8px */
    #side-a #drinkmidright { font-size: 10px; padding-left: 6px; }                           /* directions/serve stay 10px (smallest readable) */
    #side-b #idtable > tbody > tr:nth-last-child(2) > td { font-size: 17px; padding: 4px 5px 4px 1px; } /* DOTD ingredients 15 -> 17px */
    #side-b #idtable > tbody > tr:last-child > td { font-size: 13.5px; }                                /* DOTD directions/serve 15 -> 13.5px */
    /* Directions / Serve In BOX ~17-20% narrower (font sizes unchanged), Oct 6 2026.
       Main drink: the Ingredients + Directions row is a flex row; Directions is capped at 64% of the
       row (was ~77-80% on most drinks) and Ingredients takes the freed space. */
    #side-a #idtable > tbody > tr:has(> #drinkmidright) { display: flex; gap: 2px; }
    #side-a #drinkmidleft { flex: 1 0.1 auto; }
    #side-a #drinkmidright { flex: 0 1 auto; max-width: 64%; box-sizing: border-box; }
    #side-a #drinkmidright { min-width: 200px; }  /* desktop: directions never narrower than 200px (Oct 6 2026; was collapsing to ~85-110px on short directions) */
    /* Drink of the Day: Directions box 83% of the sidebar width (was 100%). */
    #side-b #idtable > tbody > tr:last-child > td { display: block; width: 83%; box-sizing: border-box; }
}
@media screen and (max-width: 820px) {
    #side-a #drinkmidleft,
    #side-b #idtable > tbody > tr:nth-last-child(2) > td { font-size: 18px; padding: 6px 4px; }  /* ingredients 16 -> 18px, pad 4/1 -> 6/4px */
    #side-a #drinkmidright,
    #side-b #idtable > tbody > tr:last-child > td { font-size: 18px; }                         /* directions/serve 16 -> 18px (matches ingredients, Oct 6 2026; was 14.5px) */
    /* Directions / Serve In box more compact on phones (same width, font size unchanged):
       line spacing 1.4 -> 1.2 and top/bottom padding 4 -> 2px, about 15% shorter. */
    #side-a #drinkmidright,
    #side-b #idtable > tbody > tr:last-child > td { line-height: 1.2; padding-top: 2px; padding-bottom: 2px; }
}