/* A more open layout (round 31): more room around sections, headings, paragraphs, cards and lists,
   on phone and desktop. Loaded after ramadany.css, so the same spacing scale applies sitewide. */

/* The spacing scale, one step roomier everywhere it is used. */
:root{--s3:14px;--s4:20px;--s5:28px;--s6:40px;--s7:60px;--s8:96px}

/* Sections */
.rmd-section{padding-block:clamp(3.75rem,9vw,7rem)}
.rmd-section > .eyebrow,.rmd-sec-head .eyebrow{margin-bottom:.7rem}
.rmd-section > h1.wp-block-heading,.rmd-section > h2.wp-block-heading{margin-top:0;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.rmd-section > h2.wp-block-heading + p,.rmd-section > h1.wp-block-heading + p{margin-top:calc(-1 * clamp(.75rem,2vw,1.5rem));margin-bottom:clamp(1.75rem,4vw,2.5rem);color:var(--ink-2)}
.rmd-sec-head{margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.rmd-sec-head h2{margin:0}

/* Cards and grids */
.rmd-card,.is-style-rmd-card{padding:clamp(1.5rem,3vw,2.1rem);border-radius:var(--r-lg)}
.rmd-tools{gap:clamp(1rem,2.6vw,1.75rem)}
.rmd-tools .rmd-card{display:grid;gap:.75rem;align-content:start}
.rmd-year-strip{gap:var(--s4)}
.rmd-signup{padding:clamp(1.75rem,5vw,3.5rem)}
.wp-block-post-template.is-layout-grid{row-gap:clamp(1.75rem,3.5vw,2.75rem)}

/* Reading: posts and pages */
.wp-block-post-content{line-height:1.75}
.wp-block-post-content > p,.wp-block-post-content > ul,.wp-block-post-content > ol{margin-block:0 1.25em}
.wp-block-post-content > h2{margin-top:clamp(2.75rem,6vw,3.75rem);margin-bottom:.85rem}
.wp-block-post-content > h3{margin-top:clamp(2rem,4vw,2.5rem);margin-bottom:.6rem}
.wp-block-post-content > h2:first-child,.wp-block-post-content > h3:first-child{margin-top:0}
.wp-block-post-content li + li{margin-top:.6rem}
.wp-block-post-content ul,.wp-block-post-content ol{padding-left:1.35em}
.wp-block-post-content > p.lede{margin-bottom:1.75em}
.wp-block-post-content .rmd-legacy h2{margin-top:2.75rem;margin-bottom:.85rem}
.wp-block-post-content .rmd-legacy p{margin-block:0 1.15em}
main.rmd-section > .wp-block-post-title,main.rmd-section > h1{margin-bottom:clamp(1.25rem,3vw,2rem)}
.wp-block-post-featured-image + .wp-block-post-content,.rmd-article .wp-block-post-featured-image{margin-bottom:clamp(1.75rem,4vw,2.5rem)}

/* Gift picks in guides: a list whose items start with an Amazon link reads as a set of cards. */
.wp-block-post-content ul:has(> li > strong:first-child > a[href*="amazon."]){list-style:none;padding:0;display:grid;gap:var(--s4);margin-block:1.25rem 2rem}
.wp-block-post-content ul:has(> li > strong:first-child > a[href*="amazon."]) > li{margin:0;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-md);padding:1.15rem 1.35rem;line-height:1.6;color:var(--ink-2)}
.wp-block-post-content ul:has(> li > strong:first-child > a[href*="amazon."]) > li > strong:first-child{font:400 1.18rem/1.3 var(--display);color:var(--ink)}
.wp-block-post-content ul:has(> li > strong:first-child > a[href*="amazon."]) > li > strong:first-child a{text-decoration:none}
.wp-block-post-content ul:has(> li > strong:first-child > a[href*="amazon."]) > li > strong:first-child a::after{content:" ↗";font:500 .85em var(--body);color:var(--brass-text)}
.wp-block-post-content ul:has(> li > strong:first-child > a[href*="amazon."]) > li > strong:first-child a:hover{text-decoration:underline}
.wp-block-post-content .rmd-tip{background:var(--sand);border-radius:var(--r-md);padding:1.1rem 1.35rem;margin-block:1.5rem 2rem}
.wp-block-post-content .rmd-tip > :last-child{margin-bottom:0}

/* Post cards: blog, home, archives and search */
.wp-block-post-template.is-layout-grid > li{display:flex}
.rmd-post-card{width:100%;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s,border-color .2s}
.rmd-post-card:hover{box-shadow:0 14px 34px rgba(6,48,61,.10);transform:translateY(-2px);border-color:color-mix(in srgb,var(--teal) 28%,var(--rule))}
.rmd-post-card .wp-block-post-featured-image{border-radius:0;margin:0}
.rmd-post-card-body{display:flex;flex-direction:column;gap:.75rem;padding:clamp(1.25rem,2.6vw,1.75rem);flex:1}
.rmd-post-card-body > *{margin:0}
.rmd-post-card .wp-block-post-title{font-size:clamp(1.2rem,2vw,1.38rem);line-height:1.25}
.rmd-post-card .wp-block-post-excerpt__excerpt{margin:0;color:var(--ink-2);line-height:1.65}
.rmd-post-card .wp-block-post-excerpt__more-text{display:none}
.rmd-post-card .wp-block-read-more{margin-top:auto;padding-top:.5rem;align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;color:var(--teal)}
.rmd-post-card .wp-block-read-more::after{content:"→";margin-left:.45em;transition:transform .2s}
.rmd-post-card:hover .wp-block-read-more::after{transform:translateX(3px)}
.rmd-post-card .wp-block-read-more:hover{color:var(--brass-text)}
/* A post without a featured image: a branded picture instead of a gap. */
.rmd-ph{margin:0}
.rmd-ph a{display:block;height:100%}
.rmd-ph-art{position:relative;display:flex;align-items:flex-end;height:100%;padding:1rem 1.25rem;overflow:hidden;background:radial-gradient(120% 90% at 85% 15%,rgba(229,178,93,.22),transparent 55%),var(--night);background-image:radial-gradient(120% 90% at 85% 15%,rgba(229,178,93,.22),transparent 55%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M28 4l7 17 17 7-17 7-7 17-7-17-17-7 17-7z' fill='none' stroke='%23e5b25d' stroke-opacity='.14'/%3E%3C/svg%3E")}
.rmd-ph-moon{position:absolute;right:16%;top:20%;width:22%;aspect-ratio:1;border-radius:50%;box-shadow:-14px 10px 0 0 #e5b25d;transform:rotate(-20deg)}
.rmd-ph-cat{font:500 .75rem/1.2 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#e5b25d}

/* "See all posts" under a list of posts */
.rmd-see-all{margin-top:clamp(2rem,4vw,2.75rem)}
.rmd-see-all a{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:.75rem 1.5rem;border:1.5px solid var(--teal);border-radius:999px;font-weight:600;text-decoration:none;color:var(--teal);transition:background .15s,color .15s}
.rmd-see-all a::after{content:"→"}
.rmd-see-all a:hover{background:var(--teal);color:var(--on-teal)}

/* Footer and lists of links: a little more air */
.rmd-footer .wp-block-navigation__container{gap:.35rem}

/* Room after the featured download box before the next heading or grid (shop, home, landing pages). */
.rmdd-featured + *{margin-top:clamp(3rem,7vw,4.75rem)}
.rmdd-filters{margin-bottom:clamp(1.25rem,3vw,2rem)}

/* ===== Header (round 32) ===== */
/* "Shop" stands out in the main menu: a small filled button in the brand teal. */
.rmd-header-nav .rmd-nav-shop > .wp-block-navigation-item__content{display:inline-flex;align-items:center;gap:.4em;margin-block:.35rem;padding:.5rem 1.05rem!important;border-radius:999px;background:var(--teal);color:var(--on-teal,#fff);font-weight:600;line-height:1;box-shadow:none!important;transition:background .15s,transform .15s}
.rmd-header-nav .rmd-nav-shop > .wp-block-navigation-item__content:hover{background:var(--teal-2,#03384a);color:var(--on-teal,#fff);transform:translateY(-1px)}
.rmd-header-nav .rmd-nav-shop > .wp-block-navigation-item__content:focus-visible{outline:2px solid var(--focus,#044e63);outline-offset:3px}
.rmd-header-nav .rmd-nav-shop.current-menu-item > .wp-block-navigation-item__content{background:var(--teal-2,#03384a);color:var(--on-teal,#fff)}
@media (max-width:860px){
  /* Phone: logo on the left; search, cart and menu together on the right with even spacing. */
  .rmd-head-top > .wp-block-group{column-gap:22px}
  .rmd-head-top > .wp-block-group > .wp-block-search{margin-left:auto}
  /* In the open menu, Shop is a full-width button under the other links. */
  .rmd-header-nav .is-menu-open .rmd-nav-shop{border-bottom:0!important;padding-top:1rem}
  .rmd-header-nav .is-menu-open .rmd-nav-shop > .wp-block-navigation-item__content{justify-content:center;min-height:52px;margin:0;padding:.85rem 1.25rem!important;font:600 1.1rem/1 var(--body);color:var(--on-teal,#fff)}
}

/* A heading after a product grid starts a new section: the same gap as between sections
   (shop, shop categories, gifts, Umrah & Hajj, and any page with a grid of downloads). */
.rmdd-shop + :is(h2,h3,.wp-block-heading),
.rmdd-shop + .rmd-ad-slot + :is(h2,h3,.wp-block-heading),
.rmdd-shop + :is(.wp-block-group,.wp-block-columns):has(> :is(h2,h3):first-child){margin-top:clamp(3.75rem,9vw,6rem)!important}

/* ===== "You are here" and hover in the menus (inc/nav-current.php sets aria-current) ===== */
/* Header, desktop: a bar under the link; hover shows a lighter bar, the current page or section a full one. */
.rmd-header-nav .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content{position:relative;transition:color .15s}
.rmd-header-nav .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:3px;border-radius:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .2s,opacity .2s;opacity:.35}
.rmd-header-nav .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content:hover{color:var(--teal)}
.rmd-header-nav .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content:hover::after{transform:scaleX(1)}
.rmd-header-nav .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content[aria-current]{color:var(--teal)}
.rmd-header-nav .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content[aria-current]::after{transform:scaleX(1);opacity:1}
/* Shop is already a filled button: when you are in the shop it turns deep teal with a ring around it. */
.rmd-header-nav .rmd-nav-shop > .wp-block-navigation-item__content[aria-current]{background:var(--deep,#044e63);color:var(--on-teal,#fff);box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--teal)!important}
.rmd-header-nav .rmd-nav-shop > .wp-block-navigation-item__content[aria-current]:hover{background:var(--teal-2,#0a6a84)}
@media (max-width:860px){
  /* Phone menu: rows; hover tints the row, the current one has a bar on the left and teal text. */
  .rmd-header-nav .is-menu-open .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content::after{display:none}
  .rmd-header-nav .is-menu-open .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content{transition:background .15s,color .15s,padding .15s}
  .rmd-header-nav .is-menu-open .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content:hover{background:color-mix(in srgb,var(--teal) 7%,transparent);color:var(--teal)}
  .rmd-header-nav .is-menu-open .wp-block-navigation-item:not(.rmd-nav-shop) > .wp-block-navigation-item__content[aria-current]{color:var(--teal);box-shadow:inset 4px 0 0 var(--teal)!important;padding-left:1rem!important;background:color-mix(in srgb,var(--teal) 7%,transparent)}
}
/* Footer: hover underlines the link in brass; the current page is brass text, underlined. */
.rmd-footer .wp-block-navigation-item__content{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.3em;text-decoration-thickness:2px;transition:color .15s,text-decoration-color .15s}
.rmd-footer .wp-block-navigation-item__content:hover{color:var(--night-ink);text-decoration-color:var(--brass)}
.rmd-footer .wp-block-navigation-item__content[aria-current]{color:var(--brass);text-decoration-color:currentColor}

/* ===== "Keep reading", "You might also like", "More gift guides": a section of their own =====
   The same gap as between other sections (96px desktop, 60px phone), a line, 32–36px under the line,
   and room under the heading before the cards. Heading, line and cards share one width. */
.rmd-related,
.wp-block-heading:has(+ .rmd-link-cards){margin-top:clamp(3.75rem,9vw,6rem)!important;padding-top:clamp(2rem,4vw,2.25rem);border-top:1px solid var(--rule)}
.rmd-related > .wp-block-heading,
.wp-block-heading:has(+ .rmd-link-cards){margin-bottom:clamp(1.75rem,3vw,2rem)!important}
.rmd-related > .wp-block-heading{margin-top:0!important}
.rmd-related > :is(.wp-block-query,.rmdd-shop,.rmd-ad-slot){margin-top:0!important}
.wp-block-heading:has(+ .rmd-link-cards) + .rmd-link-cards{margin-top:0!important}