/* =====================================================================
   Classic Art Films - phone layout (added Nov 2026)
   Loaded only on screens 760px wide or less. Desktop is not affected.
   To switch the phone layout off, delete this file.
   ===================================================================== */

html, body { width: 100%; overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }

/* Whole page: full width instead of the fixed 980px frame */
.im-wrapper, .im-frame { width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box; }
.im-frame { padding: 0 !important; background-size: 100% auto !important; }

/* Header artwork: shrink the whole 980px banner to the screen width (scale set by a small script) */
.im-header { width: 980px !important; zoom: var(--caf-hs, 0.38); margin: 0 !important; }

/* Big, easy-to-tap menu under the banner */
#caf-mobilenav { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 8px; background: #2b2b2b; }
#caf-mobilenav a { color: #fff; text-decoration: none; font: bold 14px/1 Verdana, sans-serif; padding: 9px 11px; border-radius: 4px; background: #444; }
#caf-mobilenav a.caf-shop { background: #7d0101; }
#caf-mobilenav form { width: 100%; display: flex; gap: 6px; margin-top: 4px; }
#caf-mobilenav input[type=text] { flex: 1; font-size: 16px; padding: 8px; border: 0; border-radius: 4px; min-width: 0; }
#caf-mobilenav button { font: bold 14px Verdana, sans-serif; padding: 8px 12px; border: 0; border-radius: 4px; background: #7d0101; color: #fff; }

/* Main column: full width, comfortable reading size */
#im-mainContent, .im-mainContent { float: none !important; width: auto !important; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; box-sizing: border-box; }
#im-mainContent .post, #im-mainContent .entry, #im-mainContent .entry p, #im-mainContent h1, #im-mainContent h2,
.postAuthor, .postmetadata, .postmetadata2, .sources, .previous_next, .navigation { width: auto !important; max-width: 100% !important; box-sizing: border-box; }
#im-mainContent .entry, #im-mainContent .entry p, #im-mainContent .entry li { font-size: 17px !important; line-height: 1.65 !important; }
#im-mainContent h1 { font-size: 24px !important; line-height: 1.25 !important; }
#im-mainContent blockquote { margin: 12px 0 !important; width: auto !important; }
#im-mainContent * { max-width: 100%; }

/* Pictures: fit the screen, no side-by-side squeeze */
#im-mainContent img { max-width: 100% !important; height: auto !important; }
#im-mainContent .alignleft, #im-mainContent .alignright, #im-mainContent img.alignleft, #im-mainContent img.alignright,
#im-mainContent .wp-caption { float: none !important; display: block; margin: 12px auto !important; width: auto !important; }
#im-mainContent iframe, #im-mainContent embed, #im-mainContent object, #im-mainContent video { width: 100% !important; height: auto; aspect-ratio: 16 / 9; }

/* Category / director pages */
#catimagedescriptioncontainer, #catimagecontainer, #catdescriptioncontainer, .archive-header, .drop-shadow { float: none !important; width: auto !important; max-width: 100% !important; margin: 0 auto 10px !important; }
#catimagecontainer img { display: block; margin: 0 auto; }
#catarchiveheading, #catexcerptheading { font-size: 22px !important; }
#im-mainContent .post .entry img.attachment-custom_thumb, #im-mainContent .entry a img.wp-post-image { float: left !important; width: 70px !important; margin: 4px 10px 4px 0 !important; display: inline !important; }

/* Sidebar moves below the article */
.im-sidebar, #primarySidebar, #secondarySidebar { float: none !important; width: auto !important; max-width: 340px; margin: 10px auto 20px !important; padding: 0 12px !important; box-sizing: border-box; }
.line, .im-footer { width: auto !important; margin: 0 12px !important; }
.im-footer { padding: 12px 0 !important; text-align: center; line-height: 1.8; }

/* Top 10 graphic and eBay pieces */
#im-mainContent .entry > div, #im-mainContent .entry > p > img { max-width: 100% !important; }
.caf-ebay-box { float: none !important; width: auto !important; max-width: 280px; margin: 18px auto !important; }
.caf-ebay-img { height: 150px !important; }
.caf-shop-links { float: none !important; display: block; margin-top: 2px; }
.caf-shop-list li { font-size: 15px !important; }

/* Fixes: offsets and the lower widget row */
#im-mainContent, .im-mainContent, .im-sidebar, .line, .im-footer { left: 0 !important; right: auto !important; }
.line, .im-footer { width: auto !important; margin: 0 12px !important; box-sizing: border-box; }
.im-lowerWidgets { width: auto !important; margin: 0 12px !important; float: none !important; }
.lowerWidget, .widgetFrame { float: none !important; width: auto !important; margin: 0 0 12px !important; }

/* Sidebar centered under the article; footer full width */
.im-sidebar, #primarySidebar { max-width: 262px !important; border: 0 !important; background-image: none !important; padding: 0 !important; }
.im-frame, .im-wrapper { background-image: none !important; }
.bottomBarNoLogo, .im-lowerFrame, .im-lowerFooter, .lowerNav, .copyright, .disclaimer { width: auto !important; max-width: 100% !important; float: none !important; left: 0 !important; margin-left: 0 !important; margin-right: 0 !important; text-align: center; box-sizing: border-box; padding-left: 10px; padding-right: 10px; }

.im-frame { background: #fff !important; }
#im-mainContent .entry p.caf-ebay-note, .caf-t10-note { font-size: 12px !important; line-height: 1.4 !important; }
.postmetadata, .sources { font-size: 12px !important; line-height: 1.6; }

/* Home page "My Top Ten" tablet graphic: shrink the whole picture to fit */
#tabletcontainer { width: 631px !important; max-width: none !important; zoom: var(--caf-ts, 0.54); margin: 0 auto !important; }
#tabletcontainer > * { width: 631px !important; max-width: none !important; }

/* A-Z film lists: letter bar wraps and is easy to tap */
.azlinks { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 2px; white-space: normal !important; width: auto !important; }
.azlinks { align-items: center; }
.azlinks .azlink { display: inline-block; min-width: 26px; padding: 6px 2px; font-size: 16px !important; line-height: 1 !important; text-align: center; vertical-align: middle !important; position: static !important; top: auto !important; }
.azlinks .azlink * { font-size: 16px !important; vertical-align: baseline !important; position: static !important; }