@charset "utf-8";
/* ------------------------------------------------------------------
   responsive.css  —  added 2026
   Makes the existing fixed-width layout adapt to phones and tablets.
   Loaded LAST so it overrides the original stylesheets.
   Desktop appearance above 1050px is deliberately left untouched.
   ------------------------------------------------------------------ */

/* ============================ TABLET ============================ */
@media only screen and (max-width: 1050px) {

    /* Never let media overflow its container. Scoped to the
       narrow breakpoints so desktop rendering is untouched. */
    img,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }

    img {
        height: auto;
    }

    .main {
        width: auto !important;
        max-width: 1024px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .top_menu {
        width: auto !important;
    }

    /* Content blocks: drop the fixed pixel widths and the floats. */
    .hadding_main,
    .hadding_main_1,
    .hadding_main_2,
    .hadding_main_3,
    .hadding_main_4,
    .hadding_main_5,
    .hadding_main_6,
    .hadding_main_7,
    .hadding_main_8,
    .hadding_main_9,
    .hadding_main_10,
    .hadding_main_11,
    .hadding_main_12,
    .hadding_main_13,
    .title_text_2,
    .comets2_box,
    .contact_text {
        width: auto !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .comets2_textbox,
    .comets2_textbox p {
        width: auto !important;
        max-width: 100%;
    }

    /* Big sortable comet tables scroll sideways instead of
       forcing the whole page wide. */
    table.tablesorter {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .round_images ul {
        padding-left: 0 !important;
        text-align: center;
    }

    .round_images ul li {
        float: none !important;
        display: inline-block;
        padding: 0 15px 15px;
    }
}

/* ============================ PHONE ============================= */
@media only screen and (max-width: 760px) {

    body {
        font-size: 16px;
        line-height: 22px;
        background-size: auto 420px;
    }

    h1 {
        font-size: 28px;
        line-height: 1.15;
    }

    h2 {
        font-size: 22px;
        line-height: 1.2;
    }

    .main {
        padding-left: 14px;
        padding-right: 14px;
    }

    /* Navigation: wrap onto as many rows as it needs. */
    .navigtion_bar {
        position: static;
    }

    .top_menu ul {
        display: block;
        text-align: center;
    }

    .top_menu ul li {
        float: none !important;
        display: inline-block;
        font-size: 15px;
        padding: 9px 11px 8px;
    }

    /* Side-by-side image/text pairs stack vertically. */
    .images_set,
    .images_set_2,
    .images_set_3,
    .images_set_4,
    .images_set_5,
    .images_set_6,
    .images_set_7,
    .images_set_8,
    .comets2_textbox {
        float: none !important;
        width: auto !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center;
    }

    /* Small book thumbnail in the promo box: centre it above the
       text rather than letting it grow to full width. */
    .comets_imagebg {
        float: none !important;
        width: 120px !important;
        margin: 0 auto 12px !important;
    }

    .comets_imagebg img {
        width: 100%;
        height: auto;
    }

    .comets2_textbox,
    .comets2_textbox p {
        text-align: left;
        font-size: 16px !important;
        line-height: 22px !important;
    }

    .comets2_box {
        padding: 12px !important;
        margin: 20px 0 0 0 !important;
    }

    /* The floating Facebook box crowds the page on a phone. */
    .social_icon {
        float: none !important;
        width: auto !important;
        height: auto !important;
        padding-right: 0 !important;
        text-align: center;
    }

    /* Home page hero */
    .the_book img {
        width: 100% !important;
        max-width: 635px;
    }

    .main_text {
        font-size: 17px !important;
        padding: 0 6px;
    }

    .order_now {
        margin-top: 28px !important;
    }

    .book_img {
        display: block;
        margin: 22px auto 0;
        max-width: 190px;
    }

    /* Keep long comet designations from blowing out the layout. */
    p,
    li,
    td {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Videos keep their aspect ratio. */
    iframe {
        max-width: 100%;
    }
}

/* ========================= SMALL PHONE ========================== */
@media only screen and (max-width: 420px) {

    body {
        font-size: 15px;
    }

    h1 {
        font-size: 24px;
    }

    .top_menu ul li {
        font-size: 14px;
        padding: 8px 8px 7px;
    }

    .main {
        padding-left: 11px;
        padding-right: 11px;
    }
}

/* ================= PAGE-SPECIFIC PHONE LAYOUTS ================== */
/* Requested 2026-09-20. Phone widths only; desktop untouched.      */
@media only screen and (max-width: 760px) {

    /* ---- Home: hide the book cover image under ORDER NOW ---- */
    .page-home .book_img {
        display: none !important;
    }

    /* ---- About the Book: title stays, book image hidden ---- */
    .page-about .r_images {
        display: none !important;
    }

    /* ---- Comets and Meteor Showers ---- */
    /* Each listing row: orange header top-left, its circular image
       directly beneath at the full width of the header column,
       description text in the right-hand column. */
    .main table,
    .main table > tbody {
        display: block;
        width: 100% !important;
    }

    tr:has(> td.link) {
        display: grid;
        grid-template-columns: 42% 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 16px;
        align-items: start;
        margin-bottom: 26px;
    }

    tr:has(> td.link) > td {
        display: block;
        padding: 0;
        width: auto !important;
    }

    /* spacer cells */
    tr:has(> td.link) > td:nth-child(2),
    tr:has(> td.link) > td:nth-child(4) {
        display: none;
    }

    /* orange header */
    tr:has(> td.link) > td.link {
        grid-column: 1;
        grid-row: 1;
    }

    td.link p {
        padding-left: 0;
    }

    /* drop the empty   paragraph under each header */
    td.link p.m-spacer {
        display: none;
    }

    /* circular image, beneath the header, full column width */
    tr:has(> td.link) > td:nth-child(1) {
        grid-column: 1;
        grid-row: 2;
        margin-top: 10px;
    }

    tr:has(> td.link) > td:nth-child(1) img {
        display: block;
        width: 100% !important;
        height: auto !important;
    }

    /* description text */
    tr:has(> td.link) > td:nth-child(5) {
        grid-column: 2;
        grid-row: 1 / span 2;
    }

    .title_text_2 p {
        padding-left: 0;
    }

    /* blank separator rows between listings */
    tr:not(:has(> td.link)) > td[colspan] {
        display: none;
    }

    /* ---- Sitemap ---- */
    /* pull the circular comet image up into the sunset photo */
    .page-sitemap .r_images {
        margin-top: 6px;
    }

    .page-sitemap .r_images img {
        width: 150px;
        height: auto;
    }

    .page-sitemap .r_images + .clear {
        display: none;
    }

    .page-sitemap .sitemap_text {
        margin-top: 26px;
    }
}

/* ---- Home: ORDER NOW popover opens below the button on phones ---- */
@media only screen and (max-width: 760px) {
    /* the original stylesheet nudges the popover 20px left, which would
       knock the top arrow off-centre from the button */
    .popover.bottom {
        margin-left: 0 !important;
        max-width: calc(100vw - 24px);
    }
}

/* ==================================================================
   PAGE HEADINGS  (added 2026-09-22, applies at every screen size)
   Centred, all caps, in the body typeface, a little larger than before,
   with a short accent rule underneath.
   ================================================================== */
.hadding_main,
.hadding_main_1, .hadding_main_2, .hadding_main_3, .hadding_main_4,
.hadding_main_5, .hadding_main_6, .hadding_main_7, .hadding_main_8,
.hadding_main_9, .hadding_main_10, .hadding_main_11, .hadding_main_12,
.hadding_main_13 {
    width: auto !important;
    max-width: 100%;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
    padding-bottom: 6px;
}

.hadding_main h1,
.hadding_main_1 h1, .hadding_main_2 h1, .hadding_main_3 h1, .hadding_main_4 h1,
.hadding_main_5 h1, .hadding_main_6 h1, .hadding_main_7 h1, .hadding_main_8 h1,
.hadding_main_9 h1, .hadding_main_10 h1, .hadding_main_11 h1, .hadding_main_12 h1,
.hadding_main_13 h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.12;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 auto;
    text-shadow: 0 2px 12px rgba(0,0,0,.9), 0 1px 2px rgba(0,0,0,.8);
}

/* the <left> tags the original pages use around some headings */
.hadding_main left, .hadding_main_1 left, .hadding_main_2 left, .hadding_main_3 left,
.hadding_main_4 left, .hadding_main_5 left, .hadding_main_6 left, .hadding_main_7 left,
.hadding_main_8 left, .hadding_main_9 left, .hadding_main_10 left, .hadding_main_11 left,
.hadding_main_12 left, .hadding_main_13 left { display: block; text-align: center; }

/* ============ PHONE: hide the orange book promo box ============== */
/* Requested 2026-09-22. Desktop keeps it.                          */
@media only screen and (max-width: 760px) {

    .comets2_box {
        display: none !important;
    }

    /* the promo box sat under the Facebook box; with both gone the
       page heading should start near the top of the photo */
    .main > .social_icon + .comets2_box + .clear {
        display: none;
    }

    .main > .clear:first-of-type {
        display: none;
    }
}

/* ===== PHONE: drop the empty Facebook box and set the top spacing ===== */
@media only screen and (max-width: 760px) {

    /* the widget no longer renders, but its container still took up
       180px at the top of every page */
    .main > .social_icon {
        display: none !important;
    }

    .hadding_main, .hadding_main_1, .hadding_main_2, .hadding_main_3,
    .hadding_main_4, .hadding_main_5, .hadding_main_6, .hadding_main_7,
    .hadding_main_8, .hadding_main_9, .hadding_main_10, .hadding_main_11,
    .hadding_main_12, .hadding_main_13 {
        margin-top: 30px !important;
    }
}

/* PHONE: the first lines of text sit over the bright part of the photo,
   so give them a soft shadow for legibility. */
@media only screen and (max-width: 760px) {
    .main td.link a,
    .main .title_text_2,
    .main .about_text,
    .main .sitemap_text {
        text-shadow: 0 1px 4px rgba(0,0,0,.9);
    }
}

/* ==================================================================
   CENTRING  (2026-09-22) — headings, the round image near the top of
   a page, and the sub-headings under them. Every screen size.
   ================================================================== */
.main .r_images,
.main .round_images {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

.main .r_images img {
    display: inline-block;
    float: none;
}

/* sub-headings: the bold underlined lines under the page title */
.main h2,
.main h3,
.main h4 {
    text-align: center;
}

.main h2 center,
.main h3 center,
.main h4 center {
    display: block;
    text-align: center;
}

/* ==================================================================
   PHONE AND TABLET: keep every page inside the same margins as the
   rule under the menu. Some pages carry hard-coded pixel widths and
   floats inline (video blocks, caption columns), which pushed the
   page wider than the screen.
   ================================================================== */
@media only screen and (max-width: 1050px) {

    .main div[style*="width"],
    .main table[width],
    .main td[width] {
        width: auto !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* YouTube and other embeds fill the column and keep their shape */
    .main iframe,
    .main object,
    .main embed {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        height: auto;
        aspect-ratio: 16 / 9;
        margin-left: auto;
        margin-right: auto;
    }

    /* nothing may stick out past the page gutters */
    .main {
        overflow-x: hidden;
    }
}