/*
Theme Name:   Devotion Pro Child
Description:  Child theme
Template:     devotion-pro
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  devotion-pro-child
*/

/* Write here your own personal stylesheet */

/* 251213: Attempting to make links more visible. Note that making this work
 * required eliminating hard-coded style output in functions.php in the 
 * parent style 
 *
 * Defaults from parent:
a{ color: #2e2d2a; text-decoration:none; -webkit-transition:0.3s; transition:0.3s; }
a:hover{ color: #e8772e; text-decoration:none; }

*/
/* Underlined maroon anchor text */
a{ color: maroon; text-decoration: underline; }
a:hover{ color: maroon; text-decoration: underline; }

/* Alternative considered and rejected: maroon text, no underline
a{ color: maroon; text-decoration: none; }
a:hover{ color: maroon; text-decoration: none; }
*/

/* Disable on the front page image and the menus */
.sitenav a{ text-decoration: none; }
.breadcrumbs a{ text-decoration: none; }
.nivo-caption a{ text-decoration: none; }
.donate-btn a{ text-decoration: none; }

/* 251124: Attempting to nuke the right sidebar. Fails because responsive.css
 * is processed after this. 'important' doesn't help. */
/* #sidebar{ width: 0px !important; } */
/* .site-main { width: 100%; } */

/* Overriding responsive.css -- does not work; responsive.css processed after 
 * this */
@media screen and (min-width:1170px) and (max-width: 1500px){
    #footer-wrapper{ margin-top: 0; }
    .footer-stroke{ display: block; }
}
/* Overriding style.css */
/*
.footer-stroke svg{ display: block; width: calc(100% + 1.3px); position: relative; left: 50%; transform: translateX(-50%); z-index: -1; }
.footer-stroke{ overflow: hidden; position: absolute; left: 0; width: calc(100%); line-height: 0; direction: ltr; transform: rotate(180deg); top: -150px; }
*/

/* Shadow around cards on front page 
 *
 * 251209: and blocks on Discipleship page. Consider renaming this to
 * something more general.
 */
.card-shadow{ -webkit-box-shadow: 0 0 12px 0 rgb(0 0 0 / 7%); box-shadow: 0 0 12px 0 rgb(0 0 0 / 7%); padding: 2px; }
.card-shadow p { 
  padding-left: 8px; 
  padding-right: 8px; 
}


/* For header-style-three. Default was 20% */
.site-title-logo{ flex:0 0 30%; position: relative; }

/* 250411: Attempting to reverse opacities of the three wave elements */
.footer-stroke svg path:nth-of-type(1) {
    opacity: 0.33; 
    fill: #000000;
}
.footer-stroke svg path:nth-of-type(2) {
    opacity: 0.66; 
    fill: #000000;
}
.footer-stroke svg path:nth-of-type(3) {
    opacity: 0.99; 
    fill: #000000;
}
/* This doesn't work, since it is overridden by functions.php output */
/* .footer-stroke svg { fill: #800000; } */

/* Doesn't work reliably. Changing footer background color in settings
 * instead */
/* #footer-wrapper { background-color: rgb(255, 255, 255) !important; } */


/* 251207 -- Trying to make imageboxes the same height */
/* TODO: Move the col-4/etc... stuff out to plugin and give it better names */
/* https://chatgpt.com/c/6935cc97-e230-8330-902d-de9fda162fee */


/* Make each column a flex container so its contents can stretch */
/* PLI 260213 - seeing if this is what breaks boxes on the front page.
 * (It was. Use "stretch-col" class (e.g. [column col="4 stretch-col"])
 * instead to stretch contents vertically where necessary, as in
 * image_card or linked_image_card elements.
.flex-element.row .col-4 {
  display: flex;
}
*/
.stretch-col {
  display: flex;
}

/* Make the link and the inner "card" fill the available height */
.flex-element.row .imagebox-link {
  display: flex;
  flex: 1 1 auto;
}

.flex-element.row .imagebox {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* this makes all .imagebox elements the same height */
}

.flex-element.row .inner-imagebox {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;   /* this makes all .imagebox elements the same height */
}
/* End of imagebox height fix */

/* 260108 - Had added this to old theme to make captions centered on the 
 * MDA page.
 */
figcaption { 
  text-align: center; 
}

/* PLI 260211 - Had to remove this setting in both devotion-pro/functions.php
 * and devotion-pro/style.css in order to override it here.
 */
.inner-imagebox::after {
  background-color: rgb(0,0,0, 0.25); 
}

/* 260109 - experimenting with hiding banner on MDA page. */
body.page-id-266 .innerbanner { display: none; }